原文：Small Fire · JQuery 选择器 · 前端 子专栏 · Small Fire 技术笔记
jQuery 选择器
jQuery 中的选择器完全继承了 CSS 的风格。jQuery 的行为规则都必须在获取到元素后才能生效。
CSS 选择器找到元素后是添加样式，jQuery 选择器找到元素后是添加行为。
基本选择器
基本选择器是 jQuery 中最常用的选择器，也是比较简单的选择器：
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| #id | 根据 id 匹配元素 | 单个元素 | $("#test”) |
| .class | 根据类名匹配元素 | 集合元素 | $(".test”) |
| element | 根据元素名匹配元素 | 集合元素 | $(“p”) |
| * | 匹配所有元素 | 集合元素 | $("*") |
| sel1,sel2,…,seln | 组选择器 | 集合元素 | $(".test,p,#id”) |
层次选择器
可以通过 DOM 元素之间的层次关系来获取特定元素：后代元素、子元素、相邻元素和兄弟元素等。
| 选择器 | 描述 | 返回值 |
|---|---|---|
| $(“ancestor descendant”) | 选取祖先元素里的所有后代元素 | 集合元素 |
| $(“parent > child”) | 选取父元素下匹配的所有子元素 | 集合元素 |
| $(“prev + next”) | 选取 prev 元素后的下一个兄弟元素 | 集合元素 |
| $(“prev~siblings”) | 选取 prev 元素后的所有 siblings 元素 | 集合元素 |
next() 方法：替代 $(“prev + next”) 选择器：
- $(".test + div”); <===> $(".test”).next(“div”);
nextAll() 方法：替代 $(“prev~siblings”) 选择器：
- $("#prev~div”); <===> $("#prev”).nextAll(“div”);
siblings() 方法与 $(“prev~siblings”) 选择器比较：
- $(“prev~div”) 选择器只能选择 #prev 元素后面的兄弟 div 元素
- siblings() 方法与位置无关，查找所有兄弟元素（不包括自己）
属性选择器
属性选择器的规则是通过元素的属性来获取相应的元素。返回值为集合元素。
| 选择器 | 描述 | 示例 |
|---|---|---|
| [attribute] | 选取拥有此属性的元素 | $(“div[id]") |
| [attribute='value’] | 选取属性值为 value 的元素 | $(“div[title='test’]") |
| [attribute!='value’] | 选取属性值不等于 value 的元素 | $(“div[title!='test’]") |
| [attribute^='value’] | 选取属性值以 value 开头的元素 | $(“div[title^='test’]") |
| [attribute$='value’] | 选取属性值以 value 结尾的元素 | $(“div[title$='test’]") |
| [attribute*='value’] | 选取属性值包含 value 值的元素 | $(“div[title*='test’]") |
| [selector1] [selector2] [selectorN] | 使用属性选择器合并成一个符合选择器 | $("div[id][title*='test']") |
过滤选择器
过滤选择器主要通过特定的过滤规则来筛选出所需的 DOM 元素，过滤规则和 CSS 中的伪类选择器语法相同都以冒号(:)开头。按照不同过滤规则分为：基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。
基本过滤选择器
| 选择器 | 描述 | 返回值 | 示例 |
|---|---|---|---|
| :first | 匹配找到的第一个元素 | 单个元素 | $(“ul li:first”) / $(“ul li”).first() |
| :last | 匹配找到的最后一个元素 | 单个元素 | $(“ul li:last”) / $(“ul li”).last() |
| :not(selector) | 去除所有与给定选择器匹配的元素 | 集合元素 | $(“ul li:not(.myClass)") |
| :even | 匹配所有索引值(0开始)为偶数的元素 | 集合元素 | $(“ul li:even”) |
| :odd | 匹配所有索引值(0开始)为奇数的元素 | 集合元素 | $(“ul li:odd”) |
| :eq(index) | 匹配一个给定索引值(0开始)的元素 | 单个元素 | $(“ul li:eq(2)") |
| :gt(index) | 匹配所有大于给定索引值(0开始)的元素 | 集合元素 | $(“ul li:gt(3)") |
| :lt(index) | 匹配所有小于给定索引值(0开始)的元素 | 集合元素 | $(“ul li:lt(5)") |
| :header | 匹配所有标题元素 | 集合元素 | $(":header”) |
| :animated | 匹配所有正在执行动画的元素 | 集合元素 | $(“div:animated”) |
内容过滤选择器
过滤规则主要体现在它所包含的子元素或则文本内容上。
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :contains(text) | 选取含有文本内容为 “text” 的元素 | 集合元素 | $(“div:contains(‘me’)") |
| :empty | 选取不包含子元素或则文本的空元素 | 集合元素 | $(“div:empty”) |
| :has(selector) | 选取含有选择器所匹配的元素的元素 | 集合元素 | $(“div:has(p)") |
| :parent | 选取含有子元素或则文本的元素 | 集合元素 | $(“div:parent”) |
可见性过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :hidden | 选取所有不可见的元素 | 集合元素 | $(":hidden”) |
| :visible | 选取所有可见的元素 | 集合元素 | $(“div:visible”) |
子元素过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :nth-child(index/even/odd) | 选取每个父元素下的第 index(1 开始)个子元素 | 集合元素 | $(“ul li:nth-child(4)") |
| :first-child | 选取每个父元素的第一个子元素 | 集合元素 | $(“ul li:first-child”) |
| :last-child | 选取每个父元素的最后一个子元素 | 集合元素 | $(“ul li:last-child”) |
| :only-child | 匹配父元素中唯一的子元素 | 集合元素 | $(“ul li:only-child”) |
表单选择器
利用表单选择器，可以很方便的获取到表单中的某个或某类型的元素。
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :input | 选区所有的input,textarea,select,button元素 | 集合元素 | $(":input”) |
| :text | 选区所有的单行文本框 | 集合元素 | $(":text”) |
| :password | 选区所有的密码框 | 集合元素 | $(":password”) |
| :radio | 选区所有的单选框 | 集合元素 | $(":radio”) |
| :checkbox | 选区所有的多选框 | 集合元素 | $(":checkbox”) |
| :submit | 选区所有的提交按钮 | 集合元素 | $(":submit”) |
| :image | 选区所有的图像按钮 | 集合元素 | $(":image”) |
| :reset | 选区所有的重置按钮 | 集合元素 | $(":reset”) |
| :button | 选区所有的按钮 | 集合元素 | $(":button”) |
| :file | 选区所有的上传域 | 集合元素 | $(":file”) |
| :hidden | 选区所有的不可见元素 | 集合元素 | $(":hidden”) |
表单对象属性过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :enabled | 选取所有可用元素 | 集合元素 | $("#form1 :enabled”) |
| :disabled | 选取所有不可用元素 | 集合元素 | $("#form2 :disabled”) |
| :checked | 选取所有被选中的元素(单选框，复选框) | 集合元素 | $(“input:checked”) |
| :selected | 选取所有被选中的选项元素(下拉列表) | 集合元素 | $("#select > option:selected”) |