jQuery选择器是继承了CSS和Xpath的部分语法，总体分为四种：基本选择器、层次选择器、过滤选择器和表单选择器。
基本选择器
jQuery最常用的选择器，可以通过id、class、标签名来查找相应DOM元素，通过群组选择器可以获取多个选择器的匹配结果。
基本选择器 | 功能描述 | 简单示例 |
ID选择器 | 根据指定 id 匹配一个元素 | $("#abc") 获取id为abc的元素 |
.class 类选择器 | 根据指定类名匹配元素 | $(".abc") 获取类名为abc的元素 |
元素选择器 | 根据指定元素名匹配元素，即标签。 | $("div") 获取所有的<div>元素 |
selector1,s2,s3.群组选择器 | 将匹配到的所有元素合并到返回的jQuery对象 | $("div, p, h1, .abc ") 获取所有的<div>、<p>、<h1>元素及类名为abc的元素 |
* 通配选择器 | 匹配所有元素 | $("*") 获取所有元素 |
<div>
div标签
</div>
<p>p标签</p>
<h1>H1标签</h1>
<h2>H2标签</h2>
<div id="d2">
<span>span1</span>
<span>span2</span>
<p>p2</p>
</div>
<!-- 简单演示群组选择器、通配选择器 -->
<script>
//选取所有div p ul h1元素，设置字体为红色
$("div, p, ul, h1").css("color", "red");
//选取id为d2元素中所有元素，设置字体为蓝色
$("#d2 *").css("color", "blue");
</script>
层次选择器
根据DOM元素之间的层次关系来获取特定元素，例如要获取后代元素、子元素、相邻元素和同辈元素等，采用层次选择器非常方便。
层次选择器 | 功能描述 | 简单示例 |
$("E F") 后代选择器 | 匹配祖先元素 E 中所有的后代元素 F | $("div .test") 选取div元素中，类名为test的所有元素 |
$("E > F") 子选择器 | 匹配父元素 E 中所有的子元素 F | $("#test > div") 匹配所有div元素，父元素是id为test元素 |
匹配紧接着 E 元素后的相邻元素 F | 省略，看实例。 | |
$("E ~ F") 通用兄弟选择器 | 匹配 E 元素之后的所有 F 元素 | 省略，看实例。 |
<div id="outer">
<div id="inter_1">
<h1>inter_1的h1</h1>
<p>inter_1的p</p>
</div>
<div id="inter_2">
<h1>inter_2的h1</h1>
<p>inter_2的p</p>
</div>
<h1>outer的h1</h1>
<p>outer的p</p>
</div>
<script>
//选取id为outer元素中所有的 h1 和 p 元素
$("#outer h1,p").each(function(){
console.log( $(this).text() ); //控制台查看获取的文本值
});
//选取所有 h1 和 p 元素，它们父元素是id为outer的元素
$("#outer > h1,p").css("color", "red");
//选取id为inter_1的元素中所有紧接着 h1 元素的p元素
$("#inter_1 h1+p").css("color", "green");
$("#inter_1 > h1+p") //如果匹配h1+p的父元素非#inter_1 ，就不能匹配。
//匹配h1之后所有的p元素，祖先元素是id为inter_2的元素
$("#inter_2 h1 ~ p")
//匹配h1之后所有的p元素，父元素是id为inter_2的元素
$("#inter_2 > h1 ~ p")
</script>层次选择器和基本选择器常常结合起来使用，使用时要注意区分后代选择器和子选择器的层次关系：一个是祖先关系，一个是父系。
关于相邻兄弟选择器和通用兄弟选择器，jQuery有两个方法和它们是等价的，next() 和 nextAll()。
next()返回下一个元素，nextAll()返回后续全部元素。注意这是无参时，因为jQuery有些方法都有个特点，就是担当get和set的功能，就像text()或者html()，无参就返回相应结果，传参就设置相关值。这两个也一样，实例如下：
//在id为inter_2的祖先元素中匹配h1元素之后的p元素。相当于nextAll("p")[0]
$("#inter_2 h1 + p") == $("#inter_2 h1").next("p")
//在id为inter_2的祖先元素中匹配h1元素之后的所有p元素
$("#inter_2 h1 ~ p") == $("#inter_2 h1").nextAll("p")过滤选择器
通过特定的过滤规则来筛选DOM元素，过滤规则同css中的伪类选择器语法差不多，以一个冒号作为开头。
基本过滤选择器 | 功能描述 | 简单实例 |
:first first() | 获取第一个元素 | $("p:first") 选取第一个 <p> 元素。 |
:last last() | 获取最后一个元素 | $("p:last") 最后一个 <p> 元素 |
获取所有索引值为偶数的元素,索引从0开始 | $("tr:even") 所有偶数 <tr> 元素 | |
获取所有索引值为奇数的元素,索引从0开始 | $("tr:odd") 所有奇数 <tr> 元素 | |
获取所有等于指定索引值的元素，索引从0 | $("ul li:eq(3)") 列表中的第四个元素（索引从 0 开始） | |
获取所有大于指定索引值的元素，索引从0 | $("ul li:gt(3)") 列出 index 大于 3 的元素 | |
获取所有小于指定索引值的元素，索引从0 | $("ul li:lt(3)") 列出 index 小于 3 的元素 | |
获取所有标题元素<h1>-<h6> | $("#test :header") 匹配id为test元素中的所有标题元素 | |
selector) | 获取除指定选择器之外的所有元素。取反！ | $("input:not(:empty)") 所有不为空的 input 元素 |
获取正在执行动画效果的元素 | | |
内容过滤选择器 | -------------------------------------------- | -------------------------------------------------------- |
获取所有包含指定文本的元素 | $(":contains('文本字符')") 包含 “文本字符” 字符串的所有元素 | |
获取所有不包含子元素或者文本的空元素 | $("p:empty") 获取不包含子元素或者文本的p元素 | |
:has(selector) | 获取包含指定选择器所匹配元素的所有元素 | $("div:has('p')") 获取所有div元素，过滤出只包含p元素的div元素 |
:parent | 获取包含子元素或者文本的元素 | $("#d :parent") 获取id为d 元素中包含子元素或者文本的元素 |
可见性过滤选择器 | -------------------------------------------- | -------------------------------------------------------- |
:hidden | 获取所有不可见元素或type=hidden的表单元素 | $("p:hidden") 所有隐藏的 <p> 元素 |
获取所有可见的元素 | $("table:visible") 所有可见的表格 |
属性过滤选择器 | 功能描述 | 简单实例 |
获取包含指定属性的元素 | 所有具有id 属性的元素 | |
获取指定的属性等于该属性值的元素 | 所有 href 属性的值等于 "#" 的元素 | |
获取指定的属性不等于该属性值的元素 | 所有 href 属性的值不等于 "#" 的元素 | |
[attr ^= value] | 获取指定的属性是以value作为开始的元素 | $("[class^=abc]")所有class属性以abc作为前缀的元素 |
获取指定的属性是以value作为结尾的元素 | 所有 href 属性的值包含以 ".jpg" 结尾的元素 | |
[attr ~= value] | 获取指定的属性用空格分隔的值中包含一个给定值的元素 | |
[attr |= value] | 获取指定的属性等于value或以value作为前缀的元素 | $("[class |= t]") 选取class属性等于t 或以 t作为前缀的元素 |
[attr *= value] | 获取指定的属性是以包含了value值的元素 | $("[class *= t]") 选取class属性中包含了t值的元素 |
[attr1] [attr2] [attrN] | 获取包含了多个指定属性的元素 | $("[class *= t][ab][xyz]") 选取class属性中包含t值 ，具有ab属性和xyz属性的元素 |
除此之外，还有一个专门针对子元素的过滤选择器，语法如下：
:nth-child(index/even/odd/equation) 选取每个父元素下第index个子元素(父元素中的子元素都有个索引号，表明顺序)或者奇偶元素，index是从1开始。
:first-child 选取每个父元素的第一个子元素。
:last-child 选取每个父元素的最后一个子元素。
:only-child 选取只有一个子元素的父元素。
使用注意： 使用过滤选择器时一定要注意空格问题，例如：
console.log( $(".abc :first") ); //选取class=abc的所有元素，匹配后代元素中第一个元素
console.log( $(".abc").first() );//选取class=abc的所有元素，匹配第一个class=abc的元素根据层次关系的改变，过滤规则所对应的元素也不相同，所以要非常注意。
表单选择器
在前端开发中，通过表单来提交和传递数据非常频繁，所以jQuery为了更加方便、高效地获取表单元素，专门提供一个表单选择器。语法和过滤选择器差不多，以冒号开头，但后续名称都是表单类型名和表单属性，非常容易记忆。 可以简单理解成：以表单相关内容作为过滤规则的过滤选择器。
事件名 | 触发该事件 |
:input | 获取所有 <input> <select> <textarea> 元素。 |
:text | 获取所有 type=text 的 <input> 元素。文本框 |
:password | 获取所有 type=password 的 <input> 元素。加密文本框。 |
:radio | 获取所有 type=radio 的 <input> 元素。单选框 |
:checkbox | 获取所有 type=checkbox 的 <input> 元素。复选框 |
:submit | 获取所有 type=submit 的 <input> 元素。提交表单按钮 |
:reset | 获取所有 type=reset 的 <input> 元素。重置表单内容按钮 |
:file | 获取所有 type=file 的 <input> 元素。 文件上传 |
:button | 获取所有 type=button 的 <input> 元素。按钮框，已被<button>代替。 |
:image | 获取所有 type=image 的 <input> 元素。 图像提交按钮。 |
:hidden | 获取所有 type=hidden 的 <input> 元素。即不可见 |
:checked | 获取表单中所有被选中的元素。 |
:selected | 获取表单中所有被选中的<option>元素。 |
:enabled | 获取表单中所有属性为可用的元素。 |
:disabled | 获取表单中所有属性为不可用的元素。 |
使用注意：:input会获取表单中的<input> <select> <textarea> <button>元素，如果要单独查找某元素，建议使用标签名。而要查找<input>的具体类型元素时，使用上面的 :text、:password、:submit等非常方便，等同于$("input[type='value']")选择器。
下面给上运用:checked 实现全选、全不选和反选复选框。
<body>
<!-- 包含全选/全不选 -->
<button id="all_select">全选</button>
<button id="inverse_select">反选</button>
<div id="sel_div">
<input type="checkbox" value="">语文
<input type="checkbox" value="">数学
<input type="checkbox" value="">英语
</div>
<script>
//全选全不选按钮 添加单击事件
$("#all_select").on("click", function(){
if( $(this).text() == "全选" ){
//遍历筛选出的所有 type=checkbox的input元素
$( "#sel_div :checkbox" ).each(function(i, domEle) {
//input元素的checked属性为未选中，即!false
if(!domEle.checked)
domEle.checked = true;
});
$(this).text("全不选");
}else{
$("#sel_div :checkbox").each(function(){
//选中的改成不选中
if(this.checked)
this.checked = false;
});
$(this).text("全选");
}
});
//反选
$("#inverse_select").on("click", function(){
//获取所有复选框
$("#sel_div :checkbox").each(function(){
//选中的就改成不选中，不选中的改成选中
if(this.checked)
this.checked = false;
else
this.checked = true;
});
});
</script>
至于其他表单选择器就不一一举例了。如果要实验它们的作用，可以单独写一个包含所有表单元素的注册页面，然后一一测验这些选择器。
