Hybrid App开发之jQuery选择器

高斋晓开卷，独共圣人语。这篇文章主要讲述Hybrid App开发之jQuery选择器相关的知识，希望能为你提供帮助。
前言：
前面学习了JQuery的简单使用，今天进一步学习一下JQuery的选择器。
什么是选择器？
JQuery选择器通过标签名、属性名或者内容对DOM元素进行快速准确的选择，而不必担心浏览器的兼容性，通过JQuery选择器对页面元素精确定位，进而方便完成处理元素属性和行为事件。
选择器的优势
与传统的javascript获取页面元素和事务处理相比，JQuery具备以下几个优势：

代码比较简单
完善的检测机制

1、）代码更简单在JQuery库中封装了大量可以通过选择器直接调用的函数，使编程更加简单轻松，使用简单的代码就可以使用相对复杂的功能。
2、）完善的检测机制传统js设置页面元素的事务的时候，先要找到页面上的元素，然后在赋予相应的属性或事件，如果页面元素不存在，则页面会报错。所以要先判断页面元素是否存在。再进行属性或者事件操作。这样会造成代码繁琐。在JQuery定义页面元素的时候，无须考虑页面中是否存在，即使页面中不存在该元素也不会报错，极大的方便了代码的执行效率。
选择器分类
大致分为下面四大类

基本选择器
层次选择器
过滤选择器
表单选择器

【Hybrid App开发之jQuery选择器】过滤选择器又分为以下几个小分类

简单过滤选择器
内容过滤选择器
可见性过滤选择器
属性过滤选择器
子元素过滤选择器
表单对象属性过滤选择器

接下来挨个学习一下。
基础选择器

#id 根据Id匹配一个元素返回的单个元素
.class 根据给定的类名匹配一个元素返回的是元素集合
element 根据元素名匹配一个元素返回的是元素集合
* 匹配所有元素返回的是元素集合
selecttor1,selector2并集，返回两个选择器匹配到的元素返回的是元素集合

写个小例子学习一下

< !DOCTYPE html> < html lang="en"> < head> < meta charset="UTF-8"> < title> Title< /title> < script type="text/javascript" src="http://img.readke.com/220422/1T015B00-0.jpg"> < /script> < style type="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> < script type="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> < div class="firstDiv"> 第一层 < /div> < div id="secondDiv"> 第二层 < /div> < p> 段落 < /p> < /body> < /html>

层次选择器

ancestor descendant 根据祖先匹配所有的后代元素返回的是元素集合
parent> child 根据父元素匹配所有的子元素，直接后代返回的是元素集合
prev+next 匹配下一个兄弟元素相当于next()方法返回的是元素集合
prev~siblings 匹配后面的兄弟元素相当于nextAll()方法，siblings()方法为匹配所有的兄弟元素返回的是元素集合

写个小例子学习一下

< !DOCTYPE html> < html lang="en"> < head> < meta charset="UTF-8"> < title> 层次选择器< /title> < script type="text/javascript" src="http://img.readke.com/220422/1T015B00-0.jpg"> < /script> < style type="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> < script type="text/javascript"> $(function () { //匹配后代元素 $("#topDiv ul").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> < div id="topDiv"> < ul id="menu"> < li> 首页< /li> < li> 商城< /li> < li> 分类< /li> < /ul> < /div> < div> < div class="leftDiv" align="left"> < h4 align="center"> 风云< /h4> < div id="content"> 金鳞岂是池中物，一遇风云便化龙。< br> 九霄龙吟惊天变，风云际会潜水游。< br> < /div> < /div> < div> < img src="https://www.songbingjia.com/images/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匹配所有的标题元素 h1 h2 h3 h4 h5 h6 返回的是元素集合
:animated匹配所有正在执行动画的元素返回的是元素集合

< !DOCTYPE html> < html lang="en"> < head> < meta charset="UTF-8"> < title> 简单选择过滤器< /title> < script type="text/javascript" src="http://img.readke.com/220422/1T015B00-0.jpg"> < /script> < style type="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> < script type="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> < ol id="list"> < li> 第1行< /li> < li id="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匹配含有子元素或者文本的元素

< !DOCTYPE html> < html lang="en"> < head> < meta charset="UTF-8"> < title> 内容过滤选择器< /title> < script type="text/javascript" src="http://img.readke.com/220422/1T015B00-0.jpg"> < /script> < style type="text/css"> li.firstLi { color: saddlebrown; }li.lastLi { color: red; }li.oddLi { color: blueviolet; }li.evenLi { color: goldenrod; }li.fiveLi { color: blueviolet; } < /style> < script type="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> < ol id="list"> < li> 第1行< /li> < li id="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获取所有的可见元素

< !DOCTYPE html> < html lang="en"> < head> < meta charset="UTF-8"> < title> 可见性过滤选择器< /title> < script type="text/javascript" src="http://img.readke.com/220422/1T015B00-0.jpg"> < /script> < style type="text/css"> li.oddLi { color: blueviolet; }li.evenLi { color: goldenrod; }< /style> < script type="text/javascript"> $(function () { //选中符合条件的第一个元素 $("#list > li:hidden").show(); $("#list > li:visible").addClass("firstLi"); }) < /script> < /head> < body> < ol id="list"> < li> 第1行< /li> < li style="display: none"> 第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]匹配属性选择器的交集

< !DOCTYPE html> < html lang="en"> < head> < meta charset="UTF-8"> < title> 属性过滤选择器< /title> < script type="text/javascript" src="http://img.readke.com/220422/1T015B00-0.jpg"> < /script> < style type="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> < script type="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> < ol id="list"> < li> 第1行< /li> < li id="testLi"> 第2行< /li> < li id="testLi1"> 第3行< /li> < li id="testLi2"> 第4行< /li> < li> 第5行< /li> < li> < b> 第6行< /b> < /li> < li> < /li> < li id="testLi3"> 第7行< /li> < li> 第8行< /li> < /ol> < /div> < /body> < /html>

子元素过滤选择器：

:nth-child(eq|even|odd|index)获取所有父元素特定位置的子元素
:first获取所有父元素下的第一个子元素
:last获取所有父元素下最后一个子元素
:only-child获取所有父元素下唯一的一个元素

< !DOCTYPE html> < html lang="en"> < head> < meta charset="UTF-8"> < title> 子元素选择过滤器< /title> < script type="text/javascript" src="http://img.readke.com/220422/1T015B00-0.jpg"> < /script> < style type="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> < script type="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> < ol id="list"> < li> 第1行< /li> < li id="testLi"> 第2行< /li> < li id="testLi1"> 第3行< /li> < li id="testLi2"> 第4行< /li> < li> 第5行< /li> < li> < b> 第6行< /b> < /li> < li> < /li> < li id="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" />
:image获取所有的图像按钮< input type="image" />
:reset 获取所有的重置按钮< input type="reset" />
:button获取所有的按钮< input type="button">
:file获取所有的文件上传框< input type="file" />

< !DOCTYPE html> < html lang="en"> < head> < meta charset="UTF-8"> < title> 表单选择器< /title> < script type="text/javascript" src="http://img.readke.com/220422/1T015B00-0.jpg"> < /script> < style type="text/css"> .textColor { color: blue; } < /style> < script type="text/javascript"> $(function () { $("#form1 :text").addClass("textColor"); $("#form1 :radio").addClass("textColor"); $("#ageSelect").addClass("textColor"); }); < /script> < /head> < body> < div> < h4> 表单选择器< /h4> < form id="form1"> 姓名： < input type="text" name="name"> < br> 户口：< input type="radio" name="home" value="https://www.songbingjia.com/android/town" checked> 城镇 < input type="radio" name="home" valuehttps://www.songbingjia.com/android/=="country"> 农村< br> 年龄： < select name="age" id="ageSelect"> < option value="https://www.songbingjia.com/android/lt18"> 18岁以下 < option value="https://www.songbingjia.com/android/bt18and25"> 18-35岁 < option value="https://www.songbingjia.com/android/bt36and65"> 36-65岁 < option value="https://www.songbingjia.com/android/gt65"> 65岁以上 < /select> < br> < /form> < /div> < /body> < /html>

总结：
学习总结了JQuery的选择器使用。