时间：2015/8/31 访问：4258
jQuery选择器主要分为四类：
1、基本选择器
2、层次选择器
3、过滤选择器
4、表单选择器
| 选 择 器 | 描 述 | 返 回 | 示 例 |
| #id | 根据给定的id匹配一个元素 | 单个元素 | #test选取 id 为 test 的元素 |
| .class | 根据给定的类名匹配元素 | 集合元素 | .test选取所有 class 为 test 的元素 |
| element | 根据给定的元素名匹配元素 | 集合元素 | p选取所有的 <p> 元素 |
| * | 匹配所有元素 | 集合元素 | *选取所有的元素 |
| selector1,selector2, ...,selectorN | 将每一个选择器匹配到的元 素合并后一起返回 | 集合元素 | div,span,p.myClass选取所有<div>， <span>和拥有class为 myClass 的<p> 标签的一组元素 |
| 选 择 器 | 描 述 | 返 回 | 示 例 |
| ancestor descendant | 选取ancestor元素里所有 descendant(后代)元素 | 集合元素 | div span选取 <div>里的所 有的<span>元素 |
| parent>child | 选取parent元素下的child(子)元素 | 集合元素 | div>span选取 <div>元素下 元素名是<span>的子元素 |
| prev+next | 选取紧接在prev元素后的next元素 | 集合元素 | .one+div选取class为one的 下一个 <div> 兄弟元素 |
| prev~siblings | 选取prev元素之后的所有siblings元素 | 集合元素 | #two~div选取id为two的元素 后面所有 <div> 兄弟元素 |
过滤选择器主要是通过特定的过滤规则来筛选出所需要的DOM元素，过滤规则与CSS中的伪类选择器语法相同。
按照不同的过滤规则，过滤选择器可以分为以下几种：
1、基本过滤选择器
2、内容过滤选择器
3、可见性过滤选择器
4、属性过滤选择器
5、子元素过滤选择器
6、表单对象属性过滤选择器
下面就对这几种过滤选择器分别加以介绍。
基本过滤选择器是过滤选择器中用的最多的一种，它的过滤规则主要体现在元素的位置(索引)上及一些特定的元素。
基本过滤选择器规则：
基本过滤选择器
| 选 择 器 | 描 述 | 返 回 | 示 例 |
| :first | 选取第1个元素 | 单个元素 | div:first选取所有 <div>元素 中第一个<div>元素 |
| :last | 选取最后1个元素 | 单个元素 | div:last选取所有 <div>元素 中最后一个<div>元素 |
| :not(selector) | 去除所有与给定选择器 匹配的元素 | 集合元素 | input:not(.myClass)选取class不是 myClass的<input>元素 |
| :even | 选取索引(从0开始)是偶数 的所有元素 | 集合元素 | input:even选取索引是偶数的 <input>元素 |
| :odd | 选取索引(从0开始)是奇数 的所有元素 | 集合元素 | input:odd选取索引是奇数的 <input>元素 |
| :eq(index) | 选取索引(从0开始)等于 index的元素 | 单个元素 | input:eq(1)选取索引等于1的 <input>元素 |
| :gt(index) | 选取索引(从0开始)大于 index的元素 | 集合元素 | input:gt(1)选取索引大于1的 <input>元素 |
| :lt(index) | 选取索引(从0开始)小于 index的元素 | 集合元素 | input:lt(1)选取索引小于1的 <input>元素 |
| :header | 选取所有的标题元素，即 <h1>到<h6> | 集合元素 | :header选取页面中所有的标题元素 |
| :animated | 选取当前正在执行动画的 所有元素 | 集合元素 | div:animated选取当前正在执行动画 的<div>元素 |
内容过滤选择器的过滤规则主要体现在它所含的子元素或文本内容上。
内容过滤选择器规则：
内容过滤选择器
| 选 择 器 | 描 述 | 返 回 | 示 例 |
| :contains(text) | 选取含有文本内容为 text 的元素 | 集合元素 | div:contains('test')选取含有文本内容 为 test 的<div>元素 |
| :empty | 选取不包含子元素或文本的空元素 | 集合元素 | div:empty选取不包含子元素或文本 的空<div>元素 |
| :has(selector) | 选取含有给定选择器 匹配的元素的元素 | 集合元素 | div:has(.myClass)选取含有class为 myClass的元素的<div>元素 |
| :parent | 选取含有子元素或文本的元素 | 集合元素 | div:parent选取含有子元素或文本的 <div>元素 |
可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。
可见性过滤选择器规则：
可见性过滤选择器
| 选 择 器 | 描 述 | 返 回 | 示 例 |
| :hidden | 选取所有不可见的元素 | 集合元素 | div:hidden选取所有不可见的<div>元素 |
| :visible | 选取所有不可见的元素 | 集合元素 | div:visible选取所有可见的<div>元素 |
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。
属性过滤选择器规则：
属性过滤选择器
| 选 择 器 | 描 述 | 返 回 | 示 例 |
| [attribute] | 选取拥有此属性的元素 | 集合元素 | div[id]选取拥有属性id的元素 |
| [attribute=value] | 选取属性的值为value的元素 | 集合元素 | div[title=test]选取属性 title 为 test 的<div>元素 |
| [attribute!=value] | 选取属性的值不等于value的元素 | 集合元素 | div[title!=test]选取属性 title 不 等于 test 的<div>元素 |
| [attribute^=value] | 选取属性的值以value开始的元素 | 集合元素 | div[title^=test]选取属性 title 以 test 开始的<div>元素 |
| [attribute$=value] | 选取属性的值以value结束的元素 | 集合元素 | div[title$=test]选取属性 title 以 test 结束的<div>元素 |
| [attribute*=value] | 选取属性的值含有value的元素 | 集合元素 | div[title*=test]选取属性 title 含 有 test 的<div>元素 |
| [selector1][selector2] ...[selectorN] | 选取匹配以上所有属性 选择器的元素 | 集合元素 | div[id][title*=test]选取拥有属性id， 且属性 title 含有 test 的<div>元素 |
子元素过滤选择器的过滤规则是通过元素的父子关系来获取相应的元素。
子元素过滤选择器规则：
子元素过滤选择器
| 选 择 器 | 描 述 | 返 回 | 示 例 |
:nth-child(index/ even/odd/equation) | 选取每个父元素下的第index(索引值为奇数/ 索引值为偶数/索引值等于某个表达式)个子元 素，index从1开始 | 集合元素 | div:nth-child(1)选取每个<div>中第一个子元素 |
| :first-child | 选取每个父元素下的第1个子元素 | 集合元素 | div :first-child选取每个<div>下第一个子元素 |
| :last-child | 选取每个父元素下的最后1个子元素 | 集合元素 | div :last-child选取每个<div>下最后一个子元素 |
| :only-child | 选取只有唯一子元素的元素的子元素 | 集合元素 | div :only-child选择只有一个子元素的<div>元素 |
这里值得一提的是:nth-child()，这个选择器的详细功能如下：
1、nth-child(even) 能选取每个父元素下的索引值是偶数的元素
2、nth-child(odd) 能选取每个父元素下的索引值是奇数的元素
3、nth-child(2) 能选取每个父元素下的索引值等于2的元素
4、nth-child(3n) 能选取每个父元素下的索引值等于3的倍数的元素，n从0开始
5、nth-child(3n+1) 能选取每个父元素下的索引值等于 (3n+1) 的的元素，n从0开始
此选择器主要是对所选择的表单元素进行过滤。
表单对象属性过滤选择器规则：
表单对象属性过滤选择器
| 选 择 器 | 描 述 | 返 回 | 示 例 |
| :enabled | 选取所有可用元素 | 集合元素 | body:enabled选取页面内所有可用元素 |
| :disabled | 选取所有不可用元素 | 集合元素 | body:disabled选取页面内所有不可用元素 |
| :checked | 选取所有被选中的元素(单选框、复选框) | 集合元素 | input:checked选取所有被选中的<input>元素 |
| :selected | 选取所有被选中的选项元素(下拉列表) | 集合元素 | select:selected选取所有被选中的选项元素 |
顾名思义，表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的。
表单选择器规则：
表单选择器
| 选 择 器 | 描 述 | 返 回 | 示 例 |
| :input | 选取所有的<input>、<textarea>、 <select>和<button>元素 | 集合元素 | :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选取所有的不可见元素 |