jQuery 最核心的组成部分就是选择器引擎。
jQuery 选择器实现了 CSS1~CSS3 的大部分规则之外,还实现了一些自定义的选择器,用于各种特殊状态的选择。而且不必担心浏览器的兼容性，写法更加简洁。
优点：相对于直接使用 JavaScript 获取页面元素和处理业务逻辑相比，使用jQuery 选择器来进行操作代码更简单且拥有完善的代码检测机制。
jQuery 选择器根据获取页面中元素的不同，可以划分为四大类 :基本选择器、层级选择器、筛选选择器、表单选择器。
1. 基本选择器
| 选择器 |
功能 |
参考示例 |
| ID选择器 |
根据给定的ID匹配一个元素 |
$(“#divID”) |
| 类选择器 |
根据给定的类名匹配所有的元素 |
$(“.box”) |
| 标签选择器 |
根据给定的元素名匹配所有的元素 |
$(“div”) |
| 通配符选择器 |
匹配所有的元素 |
$(“div”) |
| 并集选择器 |
将每个选择器匹配到的元素合并在一起后返回 |
$(“div”) |
2. 层级选择器
| 选择器 |
语法 |
功能 |
参考示例 |
| 后代选择器 |
parent child |
根据祖先元素匹配所有的后代元素 |
$(“div p”) |
| 直接后代选择器 |
parent > child |
根据父元素匹配所有的子元素 |
$(“div > .box”) |
| 下一个相邻兄弟 |
prev + next |
匹配所有紧接在prev元素后的相邻元素 |
$(“#demoID + div”) |
| 后面所有兄弟 |
prev ~ siblings |
匹配 prev 元素之后的所有兄弟元素 |
$(“#demoID ~ div”) |
注意：后代选择器获取的是所有的后代标签（层次关系是祖先与后代），而直接后代仅仅获取指定标签的子节点满足条件的标签（层次关系为父子关系）。
next() == 下一个相邻兄弟 || nextAll() == 后面所有兄弟
| 父子选择器相关方法 |
功能 |
| parent() |
获取当前标签的父节点 |
| parents() |
获取当前标签的祖先节点 |
| parentsUntil() |
获取当前标签的祖先节点直到… |
| children() |
获取当前标签的子节点 |
| siblings() |
获取当前标签的兄弟节点 |
3. 筛选选择器
3.1 基本筛选选择器
| 选择器 |
功能 |
| last() 或 : last |
获取最后一个元素 |
| first() 或 : first |
获取第一个元素 |
| :eq(index) |
获取指定索引值的元素 |
| :gt(index) |
获取大于给定索引值的元素 |
| :lt(index) |
获取小于给定索引值的元素 |
| :not(selector) |
获取除给定选择器外的所有元素 |
| :header |
获取所有标题类型的元素，如h1 h2 |
| :animated |
获取正在执行动画效果的元素 |
| :even |
获取所有索引值为偶数的元素，索引号从0开始 |
| :odd |
获取所有索引值为奇数的元素，索引号从0开始 |
3.2 内容筛选选择器
| 选择器 |
功能 |
| :contains(text) |
获取包含给定文本的元素 |
| :parent |
获取含有子元素或者文本的元素 |
| :empty |
获取所有不包含子元素或文本的空元素 |
| :has(selector) |
获取含有选择器所匹配的元素 |
3.3 属性筛选选择器
| 选择器 |
功能 |
| [属性名] |
获取包含给定属性的元素 |
| [属性名='value'] |
获取包含给定属性且等于指定值的元素 |
| [属性名！='value'] |
获取包含给定属性且不等于指定值的元素 |
| [属性名^='value'] |
获取包含给定属性且以指定字符开头的元素 |
| [属性名$='value'] |
获取包含给定属性且以指定字符结尾的元素 |
| [属性名*='value'] |
获取包含给定属性且包含指定字符的元素 |
| [属性名1][属性名2] |
获取满足多个条件的复合属性的元素 |
根据元素的某个属性获取元素，在使用的时候我们可以匹配单个属性也可以进行多个属性的匹配。
$("a[href$='com']").css("background","green");
$("a[href^='www'][title='demo']").css("background","green");
3.4 子元素筛选选择器
| 选择器 |
功能 |
| :first-child |
获取每个父元素下的第一个子元素 |
| :last-child |
获取每个父元素下的最后一个子元素 |
| :only-child |
获取每个父元素下的仅有一个子元素 |
| :nth-child(eq-index) |
获取每个父元素下特定位置的元素索引从1开始 |
3.5 可见性筛选选择器
| 选择器 |
功能 |
| :visible |
获取所有的可见元素 |
| :hidden |
获取所有不可见元素,或者type为hidden的元素 |
根据元素是否可见的特征获取元素，分为可见和不可见两种。
3.6 表单对象属性筛选选择器
| 选择器 |
功能 |
| :enabled |
获取表单中所有属性为可用的元素 |
| :disabled |
获取表单中所有属性为不可用的元素 |
| :checked |
获取表单中所有被选中的元素 |
| :selected |
获取表单中所有被选中option的元素 |
通过表单中某对象的属性特征获取该类元素，主要有enabled、disabled、checked（选中）elected等属性。
4. 表单选择器
| 选择器 |
功能 |
| :file |
获取所有文件域 |
| :image |
获取所有的图像域 |
| :text |
获取所有的单行文本框 |
| :reset |
获取所有重置按钮 |
| :radio |
获取所有单选框按钮 |
| :button |
获取所有按钮 |
| :submit |
获取所有提交按钮 |
| :checkbox |
获取所有的复选框 |
| :password |
获取所有的密码框 |
| :input |
获取所有的input、textarea、select标签 |
image.png
