什么是选择器？

JQuery选择器通过标签名、属性名或者内容对DOM元素进行快速准确的选择，而不必担心浏览器的兼容性，通过JQuery选择器对页面元素精确定位，进而方便完成处理元素属性和行为事件。

选择器的优势

与传统的JavaScript获取页面元素和事务处理相比，JQuery具备以下几个优势：

代码比较简单

完善的检测机制

1、）代码更简单

在JQuery库中封装了大量可以通过选择器直接调用的函数，使编程更加简单轻松，使用简单的代码就可以使用相对复杂的功能。

2、）完善的检测机制

传统js设置页面元素的事务的时候，先要找到页面上的元素，然后在赋予相应的属性或事件，如果页面元素不存在，则页面会报错。所以要先判断页面元素是否存在。再进行属性或者事件操作。这样会造成代码繁琐。在JQuery定义页面元素的时候，无须考虑页面中是否存在，即使页面中不存在该元素也不会报错，极大的方便了代码的执行效率。

选择器分类

大致分为下面四大类

基本选择器

层次选择器

过滤选择器

表单选择器

过滤选择器又分为以下几个小分类

简单过滤选择器

内容过滤选择器

可见性过滤选择器

属性过滤选择器

子元素过滤选择器

表单对象属性过滤选择器

接下来挨个学习一下。

基础选择器

#id　 根据Id匹配一个元素 返回的单个元素

.class　 根据给定的类名匹配一个元素 返回的是元素集合

element 根据元素名匹配一个元素 返回的是元素集合

*　 匹配所有元素 返回的是元素集合

selecttor1,selector2并集，返回两个选择器匹配到的元素返回的是元素集合

写个小例子学习一下

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scripttype="text/javascript"src="https://code.jquery.com/jquery-3.2.1.min.js"></script><styletype="text/css">.firstDiv{color:greenyellow;font-size:1em;background-color:aliceblue;}#secondDiv{color:blueviolet;font-size:1.5em;}p{color:green;font-size:1em;}</style><scripttype="text/javascript">$(function(){//ID匹配元素$("#secondDiv").css("display","block");//匹配类元素$(".firstDiv").css("display","none");//元素名匹配元素$("div,p").css("display","block");//合并匹配元素$("#secondDiv,p").css("display","none");//匹配所有元素$("body*").css("display","block");});</script></head><body><divclass="firstDiv">第一层</div><divid="secondDiv">第二层</div><p>段落</p></body></html>

层次选择器

ancestor descendant 根据祖先匹配所有的后代元素返回的是元素集合

parent>child 根据父元素匹配所有的子元素，直接后代返回的是元素集合

prev+next　 匹配下一个兄弟元素 相当于next()方法返回的是元素集合

prev~siblings　 匹配后面的兄弟元素 相当于nextAll()方法，siblings()方法为匹配所有的兄弟元素返回的是元素集合

写个小例子学习一下

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>层次选择器</title><scripttype="text/javascript"src="https://code.jquery.com/jquery-3.2.1.min.js"></script><styletype="text/css">#topDiv{color:black;background-color:aliceblue;height:45px;display:flex;display:-webkit-flex;align-items:center;}div.leftDiv{float:left;overflow-x:auto;}ul#menu{vertical-align:middle;}li{color:black;float:left;overflow-x:auto;margin-left:2em;margin-right:2em;vertical-align:middle;}div#content{font-size:1rem;text-align:center;text-shadow:khaki;}</style><scripttype="text/javascript">$(function(){//匹配后代元素$("#topDivul").css("display","none");//匹配子元素$("#topDiv>ul").css("display","block");//匹配后面的元素$("#topDiv+div").css("display","none");$("#topDiv").next().css("display","none");//匹配后面的所有相邻元素$("#topDiv~div").css("display","block");$("#topDiv").nextAll().css("display","none");});</script></head><body><divid="topDiv"><ulid="menu"><li>首页</li><li>商城</li><li>分类</li></ul></div><div><divclass="leftDiv"align="left"><h5align="center">风云</h5><divid="content">×××，一遇风云便化龙。<br>九霄龙吟惊天变，风云际会潜水游。<br></div></div><div><imgsrc="../p_w_picpaths/bg_post_activity_4.png"></div></div><div><p>我要成仙</p></div></body></html>

简单过滤选择器

:first或first()　　　匹配第一个元素 返回的单个元素

:last或last()　　　 匹配最后一个元素返回的单个元素

:not(selector)　　 匹配非selector能匹配到的元素返回的是元素集合

:even　　　　　　 匹配索引值为偶数的元素，索引号从0开始返回的是元素集合

:odd　　　　　　　匹配索引值为奇数的元素，索引号从0开始返回的是元素集合

:eq(index)　　　　匹配指定索引号的元素，索引号从0开始返回的单个元素

:gt(index)　　　　匹配索引号大于给定索引值的元素，索引号从0开始返回的是元素集合

:lt(index)　　　　 匹配索引号小于给定索引值的元素，索引号从0开始返回的是元素集合

:header　　　　　匹配所有的标题元素 h2 h3 h4 h5 h6 h7返回的是元素集合

:animated　　　　匹配所有正在执行动画的元素返回的是元素集合

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>简单选择过滤器</title><scripttype="text/javascript"src="https://code.jquery.com/jquery-3.2.1.min.js"></script><styletype="text/css">li.firstLi{color:saddlebrown;}li.lastLi{color:red;}li.oddLi{color:blueviolet;font-size:1em;}li.evenLi{color:goldenrod;font-size:1em;}li.fiveLi{color:blueviolet;font-size:2em;}</style><scripttype="text/javascript">$(function(){//选中符合条件的第一个元素$("#list>li:first").addClass("firstLi");//选中符合条件的最后一个元素$("#list>li:last").addClass("lastLi");//符合条件但不能被selector选中的元素$("#list>li:not('.secondLi')").addClass("lastLi");//获取指定索引值为奇数的元素(1、3、5、7、9......)，注意索引号是从1开始的$("#list>li:odd").addClass("oddLi");//获取指定索引值为偶数的元素(0、2、4、6、8……)，注意索引号是从0开始的$("#list>li:even").addClass("evenLi");//选取指定索引值的元素，索引值从0开始$("#list>li:eq(4)").addClass("fiveLi");//获取所有索引值大于index的元素，索引号从0开始$("#list>li:gt(4)").addClass("fiveLi");//获取所有索引值小于index的元素，索引号从0开始$("#list>li:lt(4)").addClass("evenLi");})</script></head><body><olid="list"><li>第1行</li><liid="secondLi">第2行</li><li>第3行</li><li>第4行</li><li>第5行</li><li>第6行</li><li>第7行</li><li>第8行</li></ol></body></html>

内容过滤选择器：

:contains(text)　　匹配包含给定文本的元素

:empty　　　　　　匹配所有不包含子元素或者文本的空元素

:has(selector)　　 匹配后代中含有selector能匹配上元素的元素

:parent　　　　　　匹配含有子元素或者文本的元素

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>内容过滤选择器</title><scripttype="text/javascript"src="https://code.jquery.com/jquery-3.2.1.min.js"></script><styletype="text/css">li.firstLi{color:saddlebrown;}li.lastLi{color:red;}li.oddLi{color:blueviolet;}li.evenLi{color:goldenrod;}li.fiveLi{color:blueviolet;}</style><scripttype="text/javascript">$(function(){//选中符合条件的第一个元素$("#list>li:contains('第4行')").addClass("firstLi");$("#list>li:empty").css("display","none");$("#list>li:has('b')").addClass("firstLi");$("div:parent").css("display","none");})</script></head><body><div><olid="list"><li>第1行</li><liid="secondLi">第2行</li><li>第3行</li><li>第4行</li><li>第5行</li><li><b>第6行</b></li><li></li><li>第7行</li><li>第8行</li></ol></div><div></div></body></html>

可见性过滤选择器：

:hidden　　　　　　匹配不可见元素，或者type="hidden"的元素　含有css样式:display:"none";的元素，无论CSS是内联，导入，链接式

:visible　　　　　　 获取所有的可见元素

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>可见性过滤选择器</title><scripttype="text/javascript"src="https://code.jquery.com/jquery-3.2.1.min.js"></script><styletype="text/css">li.oddLi{color:blueviolet;}li.evenLi{color:goldenrod;}</style><scripttype="text/javascript">$(function(){//选中符合条件的第一个元素$("#list>li:hidden").show();$("#list>li:visible").addClass("firstLi");})</script></head><body><olid="list"><li>第1行</li><li>第2行</li><li>第3行</li><li>第4行</li><li>第5行</li></ol></body></html>

属性过滤选择器：

[attribute]　　　　　　　　 匹配含有给定属性的元素

[attribute=value]　　　　 匹配含有属性=value的元素

[attribute!=value]　　　　 匹配含有属性但!=value的元素

[attribute^=value]　　　　 匹配属性值是以value开始的元素

[attribute$=value]　　　　 匹配属性值是以value结束的元素

[attribute*=value]　　　　 匹配属性值包含某些值的元素，部分前后，中间有也算

[selector][selector]　　　　 匹配属性选择器的交集

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>属性过滤选择器</title><scripttype="text/javascript"src="https://code.jquery.com/jquery-3.2.1.min.js"></script><styletype="text/css">li.firstLi{color:saddlebrown;}li.lastLi{color:red;}li.oddLi{color:blueviolet;font-size:1em;}li.evenLi{color:goldenrod;font-size:1em;}</style><scripttype="text/javascript">$(function(){//匹配所有含有id的元素$("#list>li[id]").addClass("firstLi");//选中id等于testLi的元素$("#list>li[id='testLi']").addClass("lastLi");//选中id不等于testLi的元素$("#list>li[id!='testLi']").addClass("lastLi");//选中id属性以test开头的元素$("#list>li[id^='test']").addClass("oddLi");//选中id属性以Li2结尾的元素$("#list>li[id$='Li2']").addClass("evenLi");//选中id属性包含Li的元素$("#list>li:lt(4)[id*='Li']").addClass("oddLi");})</script></head><body><div><olid="list"><li>第1行</li><liid="testLi">第2行</li><liid="testLi1">第3行</li><liid="testLi2">第4行</li><li>第5行</li><li><b>第6行</b></li><li></li><liid="testLi3">第7行</li><li>第8行</li></ol></div></body></html>

子元素过滤选择器：

:nth-child(eq|even|odd|index)　　获取所有父元素特定位置的子元素

:first　　　　　　　　　　　 获取所有父元素下的第一个子元素

:last　　　　　　　　　　　 获取所有父元素下最后一个子元素

:only-child　　　　　　　　 获取所有父元素下唯一的一个元素

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>子元素选择过滤器</title><scripttype="text/javascript"src="https://code.jquery.com/jquery-3.2.1.min.js"></script><styletype="text/css">li.firstLi{color:saddlebrown;}li.lastLi{color:red;}li.oddLi{color:blueviolet;font-size:1em;}li.evenLi{color:goldenrod;font-size:1em;}</style><scripttype="text/javascript">$(function(){//选中li父元素第三个元素$("li:nth-child(3)").addClass("lastLi");//选中li父元素第一个元素$("li:first-child").addClass("lastLi");//选中li父元素最后一个元素$("li:last-child").addClass("lastLi");//选中li父元素只有一个元素的元素$("li:only-child").addClass("lastLi");})</script></head><body><div><olid="list"><li>第1行</li><liid="testLi">第2行</li><liid="testLi1">第3行</li><liid="testLi2">第4行</li><li>第5行</li><li><b>第6行</b></li><li></li><liid="testLi3">第7行</li><li>第8行</li></ol></div></body></html>

表单对象属性过滤选择器：

:enabled　　　获取表单中所有可用的元素

:disabled　　　获取表单中所有不可用的元素

:checked　　　获取表单张所有被选中的元素

:selected　　　获取表单中所有被选中的option的元素

表单选择器：

:input　　　　　获取所有的表单元素<input开头的，还有textarea select

:text　　　　　 获取所有的单行文本框　　<input type="text" />

:password　　 获取所有的密码框元素 <input type="password" />

:radio　　　　 获取所有的单选按钮　　　<input type="radio" />

:checkbox　　 获取所有的复选框　　　　<input type="checkbox">

:submit　　　 获取所有的提交按钮　　　<input type="submit" />

:p_w_picpath　　　　获取所有的图像按钮　　 <input type="p_w_picpath" />

:reset　　　　 获取所有的重置按钮　　　 <input type="reset" />

:button　　　　获取所有的按钮　　　　　<input type="button">

:file　　　　　　获取所有的文件上传框　　<input type="file" />

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>表单选择器</title><scripttype="text/javascript"src="https://code.jquery.com/jquery-3.2.1.min.js"></script><styletype="text/css">.textColor{color:blue;}</style><scripttype="text/javascript">$(function(){$("#form1:text").addClass("textColor");$("#form1:radio").addClass("textColor");$("#ageSelect").addClass("textColor");});</script></head><body><div><h5>表单选择器</h5><formid="form1">姓名：<inputtype="text"name="name"><br>户口：<inputtype="radio"name="home"value="town"checked>城镇<inputtype="radio"name="home"value=="country">农村<br>年龄：<selectname="age"id="ageSelect"><optionvalue="lt18">18岁以下<optionvalue="bt18and25">18-35岁<optionvalue="bt36and65">36-65岁<optionvalue="gt65">65岁以上</select><br></form></div></body></html>