1 前言
都说不会前端的测试不是一个好的后端开发。最近维护一个老的项目，其中的前端代码使用到了JQuery，由于自己以前对前端的了解并不是很多，没有系统的学习，都是遇到了问题才学习一下， 所以这次对Jquery进行了一次学习。
jQuery 是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，能够大大提高开发效率。js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里即可。而使用jQuery较多的就是进行DOM操作，其中就涉及到了选择器的使用。
所以这篇文章就整理一下，JQuery中关于选择器的使用。
2 什么是jQuery选择器
jQuery选择器的使用使得获得页面元素变得更加容易、更加灵活，从而大大减轻了开发人员的压力，提高开发效率，而不需要像使用原生的js一样使用 document 对象的 getElementById()，getElementsByName() 和 getElementsByTagName() 方法访问 Document中的某个标签。
首先来一个原生的js写法和Jquery的写法，体现其不一样的地方。
原生Js代码：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { height: 100px; background-color: yellow; margin: 10px; display: none; } </style> <script> //原生js window.onload = function () { var btn = document.getElementsByTagName("button")[0]; var divArr = document.getElementsByTagName("div"); btn.onclick = function () { for (var i = 0; i < divArr.length; i++) { divArr[i].style.display = "block"; divArr[i].innerHTML = "1024笔记"; } } } </script> </head> <body> <button>这是一个按钮</button> <div></div> </body> </html> 复制代码
如果用 jQuery 来写，保持其他的代码不变，
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { height: 100px; background-color: yellow; margin: 10px; display: none; } </style> //需要先引入jquery <script src="jquery-1.11.1.js"></script> <script> $(document).ready(function () { //获取元素 //根据标签名获取按钮元素 var jQbtn = $("button"); //根据标签名获取div元素 var jQdiv = $("div"); //绑定事件 //事件是通过方法绑定的。 jQbtn.click(function () { //显示div内容 jQdiv.show(1000); //设置内容 jQdiv.html("1024笔记"); }); }); </script> </head> <body> <button>这是一个按钮</button> <div></div> </body> </html> 复制代码
上面的("button")和("button")和("button")和("div")就是通过element选择器来获取标签元素。
JQuery的选择器基本可以分为以下九种：
- 基本选择器
- 层次选择器
- 基本过滤选择器
- 内容过滤选择器
- 可见性过滤选择器
- 属性过滤选择器
- 子元素过滤选择器
- 表单对象属性过滤选择器
- 表单选择器
接下来对这九种选择器一一进行说明。
3 选择器详解
一、基本选择器
1、ID选择器
栗子：获取所有id为demo1的元素
$('#demo1') 复制代码
2、Element选择器
栗子：获取所有button的元素
$("button") 复制代码
3、Class选择器
栗子：获取所有class为demo2的元素
$(".demo2") 复制代码
注：Class和ID的区别在于id使用的符号是"#"，而class使用的是"."。
4、*选择器
*表示遍历所有的元素，一般适用于结合上下文的搜索匹配，栗子：遍历获取demo3元素下所有元素：
$("demo3 *") 复制代码
5、并列选择器
并列选择器又叫多选择器。栗子：获取所有的input元素、或id="demo4"的元素、或class="demo5"元素
$("input, #demo4, .demo5") 复制代码
二、层次选择器
1、Parent>Child
直系子元素，匹配parent下第一层的子元素。栗子：id为list元素（父元素）里的第一代div元素（子元素）：
$("#list > div") 复制代码
2、Prev + next
当前元素的下一兄弟元素。栗子：class="item"元素的下一个div兄弟元素：
$(".item + div") 复制代码
等同于next（）方法，也可以写成：
$(".item").next("div") 复制代码
3、Prev ~ Sibling
当前元素后面的所有的兄弟元素。栗子：class="item"元素之后的所有div兄弟元素：
$(".item ~ div") 复制代码
等同于nextAll（）方法，也可以写成：
$(".item").nextAll("div") 复制代码
4、ancestor descendant
当前元素的所有的子元素，。栗子：id为list元素里所有的div元素：
$("#list div") 复制代码
三、基本过滤选择器
1、:first 和 :last
获取第一个或最后一个元素。栗子：获取第一个button元素
$("button:first") 复制代码
栗子：获取最后一个input元素：
$("input:last") 复制代码
2、:not
获取非元素。栗子：获取class不为demo的div元素
$("div:not(.demo)") 复制代码
3、eq(x)
获取指定索引的元素。栗子：获取tr标签的第3行：
$("tr:eq(2)") 复制代码
4、:even 和:odd
获取偶数或者奇数索引元素（下标从0开始），even为偶数；odd为奇数。栗子：获取tr标签下所有的偶数或奇数行
$("tr:even") $("tr:odd") 复制代码
5、:gt(x) 和 :lt(x)
获取大于x索引或者小于x索引的元素。栗子：获取tr标签下第三行之前或第三行之后的元素：
$("tr:gt(2)")//第三行之前所有行 $("tr:lt(2)")//第三行之后所有行 复制代码
6、:header
获取所有标题元素元素（h1-h6标题）。栗子：
$(":header") 复制代码
四、表单选择器
1、:input
获取input元素。栗子：获取所有的input元素
$(":input") 复制代码
2、:text
获取text单行文本框元素。栗子：获取所有的text单行文本输入框元素
$(":text") 复制代码
如果使用input，可以写成：
$("input[type=text]") 复制代码
3、:password
获取密码框元素。栗子：获取所有的密码输入框元素
$(":password") 复制代码
如果使用input，可以写成：
$("input[type=password]") 复制代码
4、:radio
获取单选框元素。栗子：获取所有的单选框元素
$(":radio") 复制代码
如果使用input，可以写成：
$("input[type=radio]") 复制代码
5、:checkbox
获取所有的复选框元素。栗子：获取所有的复选框框元素
$(":checkbox") 复制代码
如果使用input，可以写成：
$("input[type=checkbox]") 复制代码
6、:image
获取图像按钮元素。栗子：获取所有的图像按钮元素
$(":image") 复制代码
如果使用input，可以写成：
$("input[type=image]") 复制代码
7、:submit
获取所有的提交按钮元素。栗子：获取所有的提交按钮元素
$(":submit") 复制代码
如果使用input，可以写成：
$("input[type=submit]") 复制代码
8、:reset
获取所有的重置按钮元素。栗子：
$(":reset") 复制代码
如果使用input，可以写成：
$("input[type=reset]") 复制代码
9、:button
获取所有的按钮元素。栗子：
$(":button") 复制代码
如果使用input，可以写成：
$("input[type=button]") 复制代码
10、:file
获取所有的上传控件元素。栗子：
$(":file") 复制代码
如果使用input，可以写成：
$("input[type=file]") 复制代码
五、表单对象属性过滤选择器
1、:enable
获取所有激活的 input 元素。栗子：
$(":enabled") 复制代码
2、:disabled
获取所有禁用的 input 元素。栗子：
$(":disabled") 复制代码
3、:selected
获取所有被选取的 input 元素。:selected 选择器选取被选择的 元素。栗子：
$(":selected") 复制代码
4、:checked
获取所有被选中的 input 元素，:checked选择器选取所有选中的复选框或单选按钮。栗子：
$(":checked") 复制代码
六、可见性过滤选择器
1、:hidden
:hidden选择器选取每个当前是隐藏的元素。栗子：
$(":hidden") 复制代码
注：以下几种情况的元素是隐藏元素：
- 设置为 display:none
- 带有 type="hidden" 的表单元素
- 隐藏的父元素（这也会隐藏子元素）
该选择器对 visibility:hidden 和 opacity: 0 的元素不起作用。
2、:visible
:visible 选择器选取每个当前是可见的元素。栗子：
$(":visible ") 复制代码
注：除以下几种情况之外的元素即是可见元素：
- 设置为 display:none
- type="hidden" 的表单元素
- Width 和 height 设置为 0
- 隐藏的父元素（同时隐藏所有子元素）
七、内容过滤选择器
1、:contains(text)
获取包含指定字符串的所有元素。栗子：
$(":contains('1024笔记')") 复制代码
2、:empty
获取不包含子元素或文本为空的元素。栗子：获取所有没有子元素，或者内容文本为空的div元素。
$('div:empty') 复制代码
3、:parent
选取包含子元素或文本的元素，与:empty相反。栗子：选取所有带有子元素或包含文本的 元素：
$("td:parent") 复制代码
4、:has
选取指定子元素的元素。栗子：选取所有包含有 元素在其内的
元素：
$("p:has(span)") 复制代码
八、属性过滤选择器
1、[attribute]
获取拥有attribute属性的所有元素。栗子：获取所有拥有title属性的a标签
$("a[title]") 复制代码
2、[attribute=value]和[attribute！=value]
获取attribute属性等于或不等于value的所有元素。栗子：获取所有拥有title属性的值等于/不等于1024笔记的a标签
$("a[title="1024笔记"]") $("a[title!="1024笔记"]") 复制代码
3、[attribute^=value]，[attribute$=value]和[attribute*=value]
获取attribute属性以value开始或以value结束或包含value的所有元素。栗子：
$('a[title^="1024笔记"]') $('a[title$="1024笔记"]') $('a[title*="1024笔记"]') 复制代码
4、[selector1][selector2]
复合型属性过滤器，获取同时满足多个条件的元素。栗子：获取所有title以1024笔记开头，且class="demo"的a标签
$('a[title^="1024笔记"][class="demo"]') 复制代码
九、子元素过滤选择器
1、:first-child 和 :last-child
获取第一个或最后一个子元素合并后的元素集合。栗子：
$('div:first-child') $('div:last-child') 复制代码
注： :fisrst 和 :last 返回的都是单个元素，而 :first-child 和 :last-child 返回的都是集合元素。比如 div:first 返回的是整个 DOM 文档中第一个 div 元素，而 div:first-child 是返回所有每个 div 元素下的第一个元素合并后的集合。
2、:only-child
获取当某个元素有且仅有一个子元素。栗子：
$('div:only-child') 复制代码
3、:nth-child(x)
获取第N个子元素。栗子：
$('div:nth-child(1)') 复制代码
**注：**除了 :nth-child(x)，还有 :nth-child(even) 和 :nth-child(odd)。
$('tr:nth-child(even)') $('tr:nth-child(odd)') 复制代码
4 结尾
以上就是就是Jquery关于选择器的使用。个人对前端知识掌握有限，如有错误和问题，欢迎交流讨论。
