一、基本选择器
基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标签名来查找 DOM 元素(在网页中 id 只能使用一次, class 允许重复使用).
| 选择器 | 描述 | 返回 |
| #id | 根据给定的id匹配一个元素 | 单个元素组成的集合 |
| .class | 根据给定的类名匹配元素 | 集合元素 |
| element | 根据给定的元素名匹配元素 | 集合元素 |
| * | 匹配所有元素 | 集合元素 |
| selector1,selector2, selector3.... | 将每一个选择器匹配到的元素 合并后一起返回 | 集合元素 |
示例代码如下：
1 2 3 4 5Untitled Document 6 29 30 31 32 57 58 59 60 61 62 63 64 65 66 6768 id 为 one,class 为 one 的div6971class为mini7072 id为two,class为one,title为test的div7376class为mini,title为other74class为mini,title为test757782class为mini78class为mini79class为mini80 818388 89class为mini84class为mini85class为mini86class为mini,title为tesst87class为"hide"的div9091 包含input的type为"hidden"的div 9293 ^^span元素^^94 95
二、层次选择器
如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器.
| 选择器 | 描述 | 返回 |
| $("ancestor descendant") | 选取ancestor的所有的descendant（后代）元素 | 集合元素 |
| $("parent > child") | 选取parent元素下的child（子）元素，与 $("ancestor descendant")有区别， $("ancestor descendant")选择的是后代元素 | 集合元素 |
| $("prev + next") | 选取紧接在prev后面的下一个next元素 | 集合元素 |
| $("prev ~ siblings") | 选取prev元素后面的所有siblings元素 | 集合元素 |
注意: (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取
示例代码如下：
1 2 3 4 5Untitled Document 6 29 30 63 64 65 66 67 68 69 70 71 72 73 7475 id 为 one,class 为 one 的div 7678class为mini7779 id为two,class为one,title为test的div 8083class为mini,title为other81class为mini,title为test828489class为mini85class为mini86class为mini87 889095 96class为mini91class为mini92class为mini93class为mini,title为tesst94class为"hide"的div9798 包含input的type为"hidden"的div 99100 ^^span元素^^101 --span元素--102 103
过滤选择器：过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头；按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器.
三、基本过滤选择器
| 选择器 | 描述 | 返回 |
| :first | 选取第一个元素 | 单个元素的集合 |
| :last | 选取最后一个元素 | 集合元素 |
| :not(selector) | 去除所有与给定选择器匹配的元素 | 集合元素 |
| :even | 选取索引是偶数的所有元素，索引从0开始 | 集合元素 |
| :odd | 选取索引是奇数的所有元素，索引从0开始 | 集合元素 |
| :eq(index) | 选取索引等于index的元素，索引从0开始 | 集合元素 |
| :gt(index) | 选取索引大于index的元素，索引从0开始 | 集合元素 |
| :lt(index) | 选取索引小于index的元素，索引从0开始 | 集合元素 |
| :header | 选取所有的标签元素，如h1，h2等 | 集合元素 |
| :animated | 选取当前正在执行动画的所有元素 | 集合元素 |
示例代码如下：
1 2 3 4 5Untitled Document 6 29 30 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96基本选择器.
97 9899 id 为 one,class 为 one 的div100102class为mini101103 id为two,class为one,title为test的div104107class为mini,title为other105class为mini,title为test106108113class为mini109class为mini110class为mini111 112114119 120class为mini115class为mini116class为mini117class为mini,title为tesst118class为"hide"的div121122 包含input的type为"hidden"的div 123124 ^^span元素 111^^125 ^^span元素 222^^126正在执行动画的div元素.127 128
四、内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上
| 选择器 | 描述 | 返回 |
| :contains(text) | 选取含有文本内容text的元素 | 集合元素 |
| :empty | 选取不包含子元素或者文本的空元素 | 集合元素 |
| :has(selector) | 选取含有选择器所匹配的元素的元素 | 集合元素 |
| :parent | 选取含有子元素或则文本的元素 | 集合元素 |
示例代码如下：
1 2 3 4 5Untitled Document 6 7 30 31 53 54 55 56 57 58 59 60 6162 id 为 one,class 为 one 的div6365class为mini6466 id为two,class为one,title为test的div6770class为mini,title为other68class为mini,title为test697176class为mini72class为mini73class为mini74 757782 83class为mini78class为mini79class为mini80class为mini,title为tesst81class为"hide"的div8485 包含input的type为"hidden"的div 8687正在执行动画的div元素.88 89
五、可见性过滤选择器
可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素
| 选择器 | 描述 | 返回 |
| :hidden | 选取所有不可见的元素 | 集合元素 |
| :visible | 选取所有可见的元素 | 集合元素 |
可见选择器 :hidden 不仅包含样式属性 display 为 none 的元素, 也包含文本隐藏域 (<input type=“hidden”>)和 visible:hidden 之类的元素
示例代码如下：
1 2 3 4 5Untitled Document 6 7 30 31 56 57 58 59 60 61 62 6364 id 为 one,class 为 one 的div6567class为mini6668 id为two,class为one,title为test的div6972class为mini,title为other70class为mini,title为test717378class为mini74class为mini75class为mini76 777984 85class为mini80class为mini81class为mini82class为mini,title为tesst83class为"hide"的div8687 包含input的type为"hidden"的div88 8990正在执行动画的div元素.91 92
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素
| 选择器 | 描述 | 返回 |
| [attribute] | 选取拥有此属性的元素 | 集合元素 |
| [attribute=value] | 选取指定属性的值为value的元素 | 集合元素 |
| [attribute!=value] | 选取指定属性的值不等于value的元素 | 集合元素 |
| [attribute^=value] | 选取指定属性的值以value开始的元素 | 集合元素 |
| [attribute$=value] | 选取指定属性的值以value结束的元素 | 集合元素 |
| [attribute*=value] | 选取指定元素的值含有value的元素 | 集合元素 |
| [selector1][selector2] ......[selecotrN] | 用属性选择器合并成一个复合属性选择器， 满足多个条件，每选择一次，缩小一次范围 | 集合元素 |
示例代码如下：
1 2 3 4 5Untitled Document 6 7 30 31 66 67 68 69 70 71 72 73 74 75 76 77 78 7980 id 为 one,class 为 one 的div 8183class为mini8284 id为two,class为one,title为test的div 8588class为mini,title为other86class为mini,title为test878994class为mini90class为mini91class为mini92 9395100 101class为mini96class为mini97class为mini98class为mini,title为tesst99class为"hide"的div102103 包含input的type为"hidden"的div 104105正在执行动画的div元素.106 107
| 选择器 | 描述 | 返回 |
| :nth-child(index/even/odd/equation) | 选取每个父元素下的第index个子元素或者 奇偶元素（index从1开始） | 集合元素 |
| :first-child | 选取每个父元素的第一个子元素 | 集合元素 |
| :last-child | 选取每个父元素的最后一个子元素 | 集合元素 |
| :only-child | 如果某个元素是它父元素中唯一的子元素， 那么将被匹配 | 集合元素 |
nth-child() 选择器详解如下：
(1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素 (2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素 (3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素 (4):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素示例代码如下：
1 2 3 4 5Untitled Document 6 7 30 31 52 53 54 55 56 57 58 59 6061 id 为 one,class 为 one 的div6264class为mini6365 id为two,class为one,title为test的div6669class为mini,title为other67class为mini,title为test687075class为mini71class为mini72class为mini73 747681 82class为mini77class为mini78class为mini79class为mini,title为tesst80class为"hide"的div8384 包含input的type为"hidden"的div 8586正在执行动画的div元素.87 88
此选择器主要对所选择的表单元素进行过滤
| 选择器 | 描述 | 返回 |
| :enable | 选取所有可用元素 | 集合元素 |
| :disable | 选取所有不可以元素 | 集合元素 |
| :checked | 选取所有被选中的元素（单选框，复选框） | 集合元素 |
| :selected | 选取所有被选中选项元素（下拉列表） | 集合元素 |
示例代码如下：
1 2 3 4 596 97Untitled Document 6 7 48 49 50 51表单对象属性过滤选择器
52 53 54 55 56 57 58