jQuery的选择器
<html lang="en"><head> ???<meta charset="UTF-8"> ???<title></title></head><body> ???<div></div> ???<div id="box"></div> ???<div class="box"></div> ???<div class="box"></div> ???<div></div> ???<script type="text/javascript" src="js/jquery-3.2.1.js"></script> ???<script type="text/javascript"> ???????//入口函数 ???????$(function(){ ???????????//三种方式获取jquery对象 ???????????var jqBox1 = $("#box"); ??????????????????var jqBox2 = $(".box"); ???????????var jqBox3 = $(‘div‘); ???????????//操作标签选择器 ???????????jqBox3.css(‘width‘, ‘100‘); ???????????jqBox3.css(‘height‘, 30); ???????????jqBox3.css(‘background-color‘, ‘red‘); ???????????jqBox3.css(‘margin-top‘, 10); ???????????//操作类选择器(隐式迭代，不用一个一个设置) ???????????????????jqBox2.css("background", "pink"); ???????????????????jqBox2.text(‘hello‘) ???????????????????//操作id选择器 ???????????????????jqBox1.css("background", "yellow"); ??????????????????????????}) ???</script> ???</body></html>
层级选择器
<html><head lang="en"> ???<meta charset="UTF-8"> ???<title></title> ???<style> ???li{ ???list-style: none; ???} ???</style> ??<script type="text/javascript" src="js/jquery-3.2.1.js" ></script> ???<script> ???????$(function () { ???????????//获取ul中的li设置为粉色 ???????????//后代：儿孙重孙曾孙玄孙.... ???????????var jqLi = $("ul li"); ???????????jqLi.css("margin",5); ???????????jqLi.css("background", "pink"); ???????????//子代：亲儿子 ???????????var jqOtherLi = $("ul>li"); ???????????jqOtherLi.css("background", "red"); ???????}); ???</script></head><body><ul> ???<li>111</li> ???<li>222</li> ???<li>333</li> ???<ol> ???????<li>aaa</li> ???????<li>bbb</li> ???????<li>ccc</li> ???</ol></ul></body></html>
基本过滤选择器
<html> ???<head> ???????<meta charset="UTF-8"> ???????<title>基本过滤选择器</title> ???</head> ???<body> ???????<ul> ???????????<li>哈哈哈哈，基本过滤选择器</li> ???????????<li>嘿嘿嘿</li> ???????????<li>天王盖地虎</li> ???????????<li>小鸡炖蘑菇</li> ???????????????????</ul> ???</body> ???<script src="js/jquery-3.2.1.js"></script> ???<script type="text/javascript"> ???????????????$(function(){ ???????????//获取第一个 :first ,获取最后一个 :last ???????????????????????//奇数 ???????????$(‘li:odd‘).css(‘color‘,‘red‘); ???????????//偶数 ???????????$(‘li:even‘).css(‘color‘,‘green‘); ???????????????????????//选中索引值为1的元素 * ???????????$(‘li:eq(1)‘).css(‘font-size‘,‘20px‘); ???????????????????????//大于索引值1 ???????????$(‘li:gt(1)‘).css(‘font-size‘,‘30px‘); ???????????????????????//小于索引值1 ???????????$(‘li:lt(1)‘).css(‘font-size‘,‘12px‘); ?????????????????????????$("li:first").css(‘background‘,‘red‘); //第一个 ???????????$("li:last").css(‘background‘,‘green‘); //最后一个 ???????????????????}) ???</script></html>
属性选择器
<html> ???<head> ???????<meta charset="UTF-8"> ???????<title>基本过滤选择器</title> ???</head> ???<div id="box"> ???????????<h2 class="title">属性元素器</h2> ???????????<!--<p class="p1">我是一个段落</p>--> ???????????<ul> ???????????????<li id="li1">分手应该体面</li> ???????????????<li class="what" id="li2">分手应该体面</li> ???????????????<li class="what">分手应该体面</li> ???????????????<li class="heihei">分手应该体面</li> ???????????</ul> ???????????<form action="" method="post"> ???????????????<input name="username" type=‘text‘ value="1" checked="checked" /> ???????????????<input name="username1111" type=‘text‘ value="1" /> ???????????????<input name="username2222" type=‘text‘ value="1" /> ???????????????<input name="username3333" type=‘text‘ value="1" /> ???????????????<button class="btn-default">按钮1</button> ???????????????<button class="btn-info">按钮1</button> ???????????????<button class="btn-success">按钮1</button> ???????????????<button class="btn-danger">按钮1</button> ???????????</form> ???????</div> ???<script src="js/jquery-3.2.1.js"></script> ???<script type="text/javascript"> ?????????????????????????$(function(){ ???????????//标签名[属性名] 查找所有含有id属性的该标签名的元素 ???????????$(‘li[id]‘).css(‘color‘,‘red‘); ???????????????????????//匹配给定的属性是what值得元素 ???????????$(‘li[class=what]‘).css(‘font-size‘,‘30px‘); ???????????//[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素 ???????????$(‘li[class!=what]‘).css(‘font-size‘,‘50px‘); ???????????????????????//匹配给定的属性是以某些值开始的元素 ???????????$(‘input[name^=username]‘).css(‘background‘,‘gray‘); ???????????//匹配给定的属性是以某些值结尾的元素 ???????????$(‘input[name$=333]‘).css(‘background‘,‘greenyellow‘); ???????????????????????//匹配给定的属性是以包含某些值的元素 ???????????$(‘button[class*=btn]:eq(1)‘).css(‘background‘,‘red‘) ???????????????????????????}) ???</script>
筛选选择器
<html><head><meta charset="UTF-8"><title>基本过滤选择器</title></head><body><div id="box"><p class="p1"><span>我是第一个span标签</span><span>我是第二个span标签</span><span>我是第三个span标签</span></p><button>按钮</button></div><ul><li class="list">2</li><li>3</li><li>4</li><li>5</li></ul></body><script src="js/jquery-3.2.1.js"></script><script type="text/javascript">$(function() {//获取第n个元素 数值从0开始$(‘span‘).eq(1).css(‘color‘, ‘#FF0000‘);//获取第一个元素 :first :last ???点语法 ?：get方法 和set方法$(‘span‘).last().css(‘color‘, ‘greenyellow‘);$(‘span‘).first().css(‘color‘, ‘greenyellow‘);//查找span标签的父元素（亲的）$(‘span‘).parent(‘.p1‘).css({"width": ‘200px‘,‘height‘: ‘200px‘,"background": ‘red‘});//选择所有的兄弟元素（不包括自己）$(‘.list‘).siblings(‘li‘).css(‘color‘, ‘red‘);//查找所有的后代元素$(‘div‘).find(‘button‘).css(‘background‘, ‘yellow‘);//不写参数代表获取所有子元素。$(‘ul‘).children().css("background", "green");$(‘ul‘).children("li").css("margin-top", 10);})</script></html>
jQuery的属性操作
上方代码中，关键的地方在于，用了stop函数，再执行动画前，先停掉之前的动画。
jquery的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作
html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()
对html属性操作
attr()
设置属性值或者 返回被选元素的属性值
//获取值：attr()设置一个属性值的时候 只是获取值var id = $(‘div‘).attr(‘id‘)console.log(id)var cla = $(‘div‘).attr(‘class‘)console.log(cla)//设置值//1.设置一个值 设置div的class为box$(‘div‘).attr(‘class‘,‘box‘)//2.设置多个值，参数为对象，键值对存储$(‘div‘).attr({name:‘hahaha‘,class:‘happy‘})
removeAttr()
移除属性
//删除单个属性$(‘#box‘).removeAttr(‘name‘);$(‘#box‘).removeAttr(‘class‘);//删除多个属性$(‘#box‘).removeAttr(‘name class‘);
prop()
prop() 方法设置或返回被选元素的属性和值。
当该方法用于返回属性值时，则返回第一个匹配元素的值。
当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。
语法：
返回属性的值：
?
?$(selector).prop(property)
设置属性和值：
?
?$(selector).prop(property,value)
设置多个属性和值：
?$(selector).prop({property:value, property:value,...})关于attr()和prop()的区别
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title></title></head><body> ???男<input type="radio" id=‘test‘ name="sex" ?checked/> ???女<input type="radio" id=‘test2‘ name="sex" /> ???<button>提交</button> ???<script type="text/javascript" src="jquery-3.3.1.js"></script> ???<script type="text/javascript"> ???????$(function(){ ???????????//获取第一个input ???????????var el = $(‘input‘).first(); ???????????//undefined ?因为attr是获取的这个对象属性节点的值，很显然此时没有这个属性节点，自然输出undefined ???????????console.log(el.attr(‘style‘)); ???????????// 输出CSSStyleDeclaration对象，对于一个DOM对象，是具有原生的style对象属性的，所以输出了style对象 ???????????console.log(el.prop(‘style‘)); ???????????console.log(document.getElementById(‘test‘).style); ???????????$(‘button‘).click(function(){ ???????????????alert(el.prop("checked") ? "男":"女"); ???????????}) ???????????????????}) ???</script> ???</body></html>
什么时候使用attr()，什么时候使用prop()？
1.是有true,false两个属性使用prop();
2.其他则使用attr();
对标签class的操作
addClass（添加多个类名）
为每个匹配的元素添加指定的类名。
?
?$(‘div‘).addClass("box");//追加一个类名到原有的类名
还可以为匹配的元素添加多个类名
?
?$(‘div‘).addClass("box box2");//追加多个类名
removeClass
从所有匹配的元素中删除全部或者指定的类。
移除指定的类（一个或多个）
?
?$(‘div‘).removeClass(‘box‘)；
移除全部的类
?
?$(‘div‘).removeClass();
可以通过添加删除类名，来实现元素的显示隐藏
代码如下：
var tag ?= false; ???$(‘span‘).click(function(){ ???????if(tag){ ???????????$(‘span‘).removeClass(‘active‘) ???????????tag=false; ???????}else{ ???????????$(‘span‘).addClass(‘active‘) ???????????tag=true; ???????} ???})
案例：
代码如下：
<html lang="en"><head> ???<meta charset="UTF-8"> ???<title></title> ???<style type="text/css"> ???????.active{ ???????????color: red; ???????} ???</style></head><body> ????<ul> ????????<li class="item">张三</li> ????????<li class="item">李四</li> ????????<li class="item">王五</li> ????</ul> ????<script type="text/javascript" src="jquery-3.3.1.js"></script> ????<script type="text/javascript"> ????????$(function(){ ????????????$(‘ul li‘).click(function(){ ????????????????// this指的是当前点击的DOM对象 ,使用$(this)转化jquery对象 ????????????????$(this).addClass(‘active‘).siblings(‘li‘).removeClass(‘active‘); ????????????}) ????????}) ????</script> ???</body></html>
toggleClass
如果存在（不存在）就删除（添加）一个类。
语法：toggleClass(‘box‘)
$(‘span‘).click(function(){ ???//动态的切换class类名为active ???$(this).toggleClass(‘active‘)})
对值的操作
html()
获取值：
语法;
html() 是获取选中标签元素中所有的内容
$(‘#box‘).html();
设置值：设置该元素的所有内容 会替换掉 标签中原来的内容
$(‘#box‘).html(‘<a href="https://www.baidu.com">百度一下</a>‘);
text()
获取值：
text() 获取匹配元素包含的文本内容
语法：
$(‘#box‘).text();设置值：设置该所有的文本内容$(‘#box‘).text(‘<a href="https://www.baidu.com">百度一下</a>‘);注意：值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中
val()
获取值：
val()用于表单控件中获取值，比如input textarea select等等
设置值：
$(‘input‘).val(‘设置了表单控件中的值‘)；
获取input value
<html lang="en"><head> ???<meta charset="UTF-8"> ???<title></title></head><body> ???<form> ???????男 ???????<input type="radio" name="sex" checked=""> 女 ???????<input type="radio" name="sex"> ???????<select> ???????????<option >张三</option> ???????????<option text=‘test‘>李四</option> ???????????<option>王五</option> ???????</select> ???</form> ???<script type="text/javascript" src="js/jquery-3.2.1.js"></script> ???<script type="text/javascript"> ????$(function() { ???// $(‘input[type=radio]‘).get(1).checked = true;//设置value=2的项目为当前选中项 $("input[type=radio]").eq(1).attr("checked",true); ???????$(‘input[type=radio]‘).change(function(event) { ???????????/* Act on the event */ ???????????// console.log($(this).select()); ???????????console.log($(this).select().prop(‘checked‘)); ???????????var item = $("input[type=radio]:checked").val(); ???????????console.log(item); ???????????// 获取select被选中项的文本 ???????????var item2 = $("select option[selected]").text(); ???????????console.log(item2); ???????}); ???????$(‘select‘).change(function() { ??????????console.log($(this).val()); ???????????//1.获取选中项的值 ???????????console.log($(‘select‘)); ???????????// 2.获取选中项的文本 ???????????console.log($("select option:selected").text()); ???????????// 或者 ???????????console.log($("select").find("option:selected").text()); ???????????// 3.获取选中项的索引 ???????????console.log($("select").get(0).selectedIndex); ???????}); ?????????// 设置值： 两种方式设置值 ?????????$("select option").get(1).selected = true; ?????????$("select").get(0).selectedIndex = 2; ???}); ???</script></body></html>
对DOM文档的操作
一.插入操作
知识点1：父子之间
1.在元素内部添加，从后面放
父元素.append(子元素)子元素.appendTo(父元素)
2.在元素内部添加，从前面放入父元素.prepend(子元素)；子元素.prependTo(父元素)；
DEMO
<body> ???<div class="box1">box1</div> ???<div class="box"> ???????????</div> ???<ul> ???????<li>YY</li> ???</ul> ???<script type="text/javascript" src="js/jquery-3.2.1.js"></script> ???<script type="text/javascript"> ???????????????$(function(){ ???????????var oP = document.createElement(‘p‘); ???????????oP.innerText = ‘女朋友‘; ???????????oP.id = ‘tt‘ ???????????// 1.父子之间 父.append(子) ?子.appendTo(父) ???????????????????????// 子元素 ： 可以是 一个string ?、jsDOM对象 、jquery对象 ???????????$(‘.box‘).append(‘alex‘);//可以插入普通的文本 ???????????$(‘.box‘).append(‘<h2>yy</h2>‘);//可以插入标签+文本 ???????????$(‘.box‘).append(oP); //插入一个jsDom对象 ???????????$(‘.box‘).append($(‘.box1‘)); //如果插入的是一个jquery对象 相当于是一个移动操作 ???????????$(‘<p>xx</p>‘).appendTo(‘.box‘).click(function(event) { ???????????????$(this).css({ ???????????????????width:100, ???????????????????height:100, ???????????????????backgroundColor:‘red‘ ???????????????}).text(‘zz‘); ???????????});; ???????????// prepend() ??prependTo() ???????????//1. prepend() 插入 子级的第一个元素 ???????????$(‘ul‘).prepend(‘<li>WW</li>‘); ???????????$(‘<li>XX</li>‘).prependTo(‘ul‘).click(function() { ???????????????alert(this.innerText); ???????????}); ???????????// jquery有链式编程 简化我们的代码 ???????}); ???</script> ???</body>知识点2：兄弟之间
兄弟元素.after(要插入的兄弟元素)；要插入的兄弟元素.inserAfter(兄弟元素)；兄弟元素.before(要插入的兄弟元素)；要插入的兄弟元素.inserBefore(兄弟元素)；
demo
<body> ???<ul> ???????<li class="item">alex</li> ???</ul> ???<script type="text/javascript" src="js/jquery-3.2.1.js"></script> ????<script type="text/javascript"> ???$(function() { ???????// es6的模板字符串 ??tab键 上面那个符号 ?反引号 ``,使用${变量名} 插入变量 ???????var title = "百度"; ???????$(‘.item‘).after(`<li> ???????????<a href="#">${title}</a> ???????</li>`); ???$(‘<li>wusir</li>‘).insertAfter(‘.item‘); ???// before ???var title1 = "小米"; ????$(‘.item‘).before(`<li> ???????????<a href="#">${title1}</a> ???????</li>`); ????$(‘<li>XX</li>‘).insertBefore(‘.item‘); ???}); ???</script></body>二、替换操作
$(selector).replaceWith(content);//将所有匹配的元素替换成指定的string、js对象、jquery对象。//将所有的h5标题替换为a标签$(‘h5‘).replaceWith(‘<a href="#">hello world</a>‘);//将所有h5标题标签替换成id为app的dom元素$(‘h5‘).replaceWith($(‘#app‘));$(‘<p>哈哈哈</p>‘).replaceAll(‘h2‘);解释：替换所有。将所有的h2标签替换成p标签。
三、删除操作
$(selector).remove(); 解释：删除节点后，事件也会删除（简言之，删除了整个标签）$(‘ul‘).remove();$(selector).detach(); 解释：删除节点后，事件会保留 var $btn = $(‘button‘).detach() //此时按钮能追加到ul中 $(‘ul‘).append($btn)
demo
<body> ???<div class="box"> ???????<p style="font-size: 20px;font-weight: 600;">alex</p> ???</div> ???<button>删除</button> ???<script type="text/javascript" src="jquery-3.3.1.js"></script> ???<script type="text/javascript"> ???$(function() { ???????$(‘button‘).click(function() { ?????????????alert(1); ???????????// remove() 删除节点后 事件也会删除 ?删除了整个标签 ???????????// console.log($(this).remove()); ???????????// var jqBtn = $(this).remove(); ???????????// $(‘.box‘).prepend(jqBtn); ???????????// detach() 删除节点后 事件会保留 ???????????// var jqBtn = $(this).detach(); ???????????// $(‘.box‘).prepend(jqBtn); ???????????$(‘.box‘).empty(); ???????}) ???}); ???</script></body>
jquery选择器和属性
原文地址：https://www.cnblogs.com/xiao-apple36/p/10117419.html