在介绍jQuery选择器之前，先简单介绍一下CSS选择器--->
一、CSS选择器
常见的CSS选择器有以下几种：
选择器 | 语法 | 描述 | 示例 |
标签选择器 | E{CSS规则} | 以文档元素为选择符 | td{font-size:10px;} a{tetx-decoration:none;} |
ID选择器 | #ID{CSS规则} | 以文档元素的唯一标示ID为选择符 | #node{corlor:red;} |
类选择器 | .className{CSS规则} | 以文档元素的class作为选择符 | div.node{background-color:yellow;} |
群组选择器 | E1,E2,E3{CSS规则} | 以多个文档元素作为选择符 | p,div,a,span{font-size:10px;} |
后代选择器 | E F{CSS规则} | 以元素E的任意后代元素F作为选择器 | div input{font:10px black;} |
通配选择器 | *{CSS规则} | 以文档所有元素作为选择器 | *{font-size:10px;} |
二、jQuery选择器
jQuery选择器完全继承CSS选择器，可以快速找到DOM元素并添加对应的行为。
jQuery共有基本选择器、层次选择器、过滤选择器和表单选择器。下面对这几类选择器一一介绍
1、基本选择器
基本选择器
选择器 | 描述 | 返回 | 示例 |
element | 根据给定的元素名称匹配元素 | 集合元素 | $("p")选取所有的p元素 |
#id | 根据给定的id匹配指定的元素 | 一个元素 | $("#nodeName")选取id为nodeName的元素 |
#className | 根据给定的class名称匹配元素 | 集合元素 | $("div.span")选择class为span的所有div |
* | 匹配所有的元素 | 集合元素 | $("*")选择所有的元素 |
selecter1,selecter,...,selecterN | 将每一个选择器匹配的元素合并后返回 | 集合元素 | $("div,span,p.info")选择所有的div\span和class为info的p元素 |
2、层次选择器
层次选择器
选择器 | 描述 | 返回 | 示例 |
$("ancestor descendant") | 选择ancestor里的所有descendant(后代)元素 | 集合元素 | $("div span")选取div里的所有span元素 |
$("parent > child") | 选择parent的child(子)元素 PS:$("ancestor descendant")是选择后代（包括孙辈元素） $("parent > child")只选择子元素 | 集合元素 | $("div > span")选择div元素下名为span的子元素 |
$("pre + next') | 选择紧接在pre元素后的下一个同辈元素 | 集合元素 | $(".one + div")选择class为one后面的第一个div同辈元素 |
$("pre ~ siblings") | 选择pre元素后面的所有同辈元素 | 集合元素 | $("#two ~ div")选择id为two后面的所有div同辈元素 |
jQuery中的方法可以代替上面的某些选择器：
- next()方法等价于$("pre + next")。所以$(".one + div")就等价于$(".one").next();
- nextAll()方法等价于$("pre ~ siblings")。所以$("#two ~ div")就等价于$("#two").nextAll();
- siblings()方法是获取当前元素的所有同辈元素，不分前后；
3、过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS的伪类选择器语法相同，即选择器都是以一个冒号（:）开头，按照不同的过滤规则，过滤选择器可以分为：
基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤、表单对象属性过滤
基本过滤选择器
选择器 | 描述 | 返回 | 示例 |
:first | 选择第一个元素 | 单个元素 | $("div:first")选择所有div中的第一个元素 |
:last | 选择最后一个元素 | 单个元素 | $("div:last")选择所有div中的最后一个元素 |
:not(selector) | 去所有与给定选择器匹配的元素 | 集合元素 | $("div:not('.div1')")选择class不是div1所有div元素 |
:even | 选择索引值为偶数的元素 | 集合元素 | $("tr:even")选择索引值为偶数的tr元素 |
:odd | 选择索引值为奇数的元素 | 集合元素 | $("tr:odd")选择索引值为奇数的tr元素 |
:eq(index) | 选择索引值等于index的元素 | 单个元素 | $("input:eq(2)")选择索引值为2的元素，即第三个input元素（索引从0开始） |
:gt(index) | 选择索引值大于index的元素 | 集合元素 | $("inputgt(2)")选择索引值大于2的元素，即第三个input后面的元素（索引从0开始） |
:lt(index) | 选择索引值小于index的元素 | 集合元素 | $("input:lt(2)")选择索引值小于2的元素，即第三个input前面的元素（索引从0开始） |
:header | 选择所有的标题元素，例如h1，h2等 | 集合元素 | $("header")选择网页中所有的标题元素h1到h6 |
:animated | 选择当前正在执行动画的元素 | 集合元素 | $("div:animated")选择正在执行动画的div元素 |
:focus | 选择所有获取焦点的元素 | 集合元素 | $(":focus")选择网页中所有获取焦点的元素 |
内容过滤选择器：它的过滤规则主要体现在它所包含的子元素或文本内容上。
内容过滤选择器
选择器 | 描述 | 返回 | 示例 |
:contains(text) | 选择文本内容包含text的元素 | 集合元素 | $("div:contains('学生')")选择文本内容包含“学生”的所有div元素 |
:empty | 选择不包含子元素或内容为空的元素 | 集合元素 | $("div:empty")选择不包含子元素或者内容为空的div元素 |
:has(selector) | 选择包含匹配选择器元素的元素 | 集合元素 | $("div:has(p)")选择包含p元素的div元素 |
:parent | 选择含有子元素或者文本的元素 | 集合元素 | $("div:parent")选择含有子元素或者文本内容不为空的div元素 |
可见性过滤选择器根据元素的可见和不可见性来选择元素。
可见性过滤选择器
选择器 | 描述 | 返回 | 示例 |
:hidden | 选择所有的隐藏元素 | 集合元素 | $(":hidden")选择页面所有的隐藏元素 PS:隐藏元素包括样式属性display为none，visibility为hidden及隐藏的表单域 |
:visible | 选择所有的可见元素 | 集合元素 | $("div:visible")选择所有可见的div元素 |
属性过滤选择器是根据元素属性选择相应的元素
属性过滤选择器
过滤器 | 描述 | 返回 | 示例 |
[attribute] | 选择包含该属性的元素 | 集合元素 | $("div[id]")选择含有id属性的div元素 |
[attribute=value] | 选择属性值等于value的元素 | 集合元素 | $("div[id='div1']")选择id属性值等于div1的div元素 |
[attribute!=value] | 选择属性值不等于value的元素 | 集合元素 | $("div[id!='div1']选择id属性值不等于div1的div元素 |
[attribute^=value] | 选择属性值以value开头的元素 | 集合元素 | $("div[id^='div1']选择id属性值以div1开头的div元素 |
[attribute$=value] | 选择属性值以value结尾的元素 | 集合元素 | $("div[id$='div1']选择id属性值以duv1结尾的div元素
|
[attribute*=value] | 选择属性值包含value的元素 | 集合元素 | $("div[id*='div1']选择id属性值包含div1的div元素 |
[attribute|=value] | 选择属性值为value或以value为前缀（该字符串后面跟一个连字符’-‘）的元素 | 集合元素 | $("div[id|='div1']选择id属性值为div1或者以div1为前缀的div元素 |
[attribute~=value] | 选择属性用空格分隔的值中包含一个给定值的元素 | 集合元素 | $("div[id~='div1']选择id属性用空格分隔的值中等于div1的div元素 |
[attribute1][attribute2][attribute3] | 用属性选择器合并成一个复合属性选择器，满足多个条件，没选择依一次，缩小一次选择 | 集合元素 | $("div[id][title='hello'])选择含有id属性并且title的属性值为hello的div元素 |
子元素过滤选择器是针所有父元素进行过滤，而不只是某一个指定的父元素
子元素过滤选择器
选择器 | 描述 | 返回 | 示例 |
:nth-child(index/even/odd/equation) | 选择每个父元素下第index的子元素或者奇偶于元素（index从1开始） | 集合元素 | :eq(index)只匹配一个元素，而:nth-child(index)将匹配每一个父元素中索引值为index的子元素，且前者的索引从0开始，后者索引从1开始。 |
:first-child | 选择每个父元素的第一个子元素 | 集合元素 | :first只返回单个元素，而:first-child将返回每一个父元素中的第一个元素 $("ul li:last-child")选择每个ul中的第一个元素 |
:last-child | 选择每一个父元素的最后一个子元素 | 集合元素 | :last只返回打个元素，而:last-child将返回每一个父元素中的最后一个元素 $("ul li:first-child")选择每个ul中的最后一个元素 |
:only-child | 如果某个元素是它父元素中的唯一子元素，那么它将被匹配，否则不会被匹配 | 集合元素 | $("ul li:only-child")获取的是ul中的唯一子元素li |
表单元素属性过滤器，主要是对所选择的的表单元素进行过滤。
表单对象属性过滤器
选择器 | 描述 | 返回 | 示例 |
:enabled | 选择所有可用的表单元素 | 集合元素 | $("#form1 :enabled")选择id=form1的表单内所有可用元素 |
:disabled | 选择所有不可用的表单元素 | 集合元素 | $("#form1 :disabled")选择id=form1的表单内所有不可用元素 |
:checked | 选择所有被选中的元素（包括单选框、复选框） | 集合元素 | $("#input:checked")选择所有被选中的input元素 |
:selected | 选择所有被选中的选项元素（下拉列表） | 集合元素 | $("select option:selected")选择i所有被选中的选项元素 |
至此，所有的过滤选择器就介绍完了，下面介绍最后一种选择器-----表单选择器
3、表单选择器
利用表单选择器可以方便地获取到某个或某种类型的元素
表单选择器
选择器 | 描述 | 返回 | 示例 |
:input | 选择所有的input、textarea、button、select元素 | 集合元素 | $(":input")选择所有的input、textarea、select、button元素 |
:text | 选择所有的单行文本框 | 集合元素 | $(":text")选择所有的单行文本框 |
:password | 选择所有的密码框 | 集合元素 | $(":password")选择所有的密码框 |
:radio | 选择所有的单选框 | 集合元素 | $(":radio")选择所有的单选框 |
:checkbox | 选择所有的复选框 | 集合元素 | $(":checkbox")选择所有的复选框 |
:submit | 选择所有的提交按钮 | 集合元素 | $(":submit")选择所有的提交按钮 |
:image | 选择所有的图片按钮 | 集合元素 | $(":image")选择所有的图片按钮 |
:reset | 选择所有的重置按钮 | 集合元素 | $(":reset")选择所有的重置按钮 |
:button | 选择所有的按钮 | 集合元素 | $(":button")选择所有的按钮 |
:file | 选择所有的上传域 | 集合元素 | $(":file")选择搜有的上传域 |
:hidden | 选择所有的隐藏域 | 集合元素 | $(":hidden")选择所有的隐藏域（这个已经在之前的不可见性过滤器中讲到过） |
以上就是jQuery中所有的选择器及使用方法，这么多的选择器，要想每一个都能理解，关键还在实践。
