jQuery的过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS中的伪类选择器语法相同,即选择器都以一个冒号(:)开头。按照不同的过滤规则,过滤选择器可以分为:基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤。
1. 基本过滤选择器
| 选择器 | 描述 | 返回 |
| :first | 选取第1个元素 | 单个元素 |
| :last | 选取最后一个元素 | 单个元素 |
| :not(selector) | 去除所有与给定选择器匹配的元素 | 集合元素 |
| :even | 选取索引是偶数的所有元素,索引从0开始 | 集合元素 |
| |
选取索引是奇数的所有元素,索引从0开始 | 集合元素 |
| :eq(index) | 选取索引等于index的元素(index从0开始) | 单个元素 |
| :gt(index) | 选取索引大于index的元素(index从0开始) | 集合元素 |
| :lt(index) | 选取索引小于index的元素(index从1开始) | 集合元素 |
| :header | 选取所有的标题元素,例如h1,h2,h3等等 | 集合元素 |
| :animated | 选取当前正在执行动画的所有元素 | 集合元素 |
2. 内容过滤选择器
内容过滤选择器的过滤规则主要体现在它多包涵的资源换上或文本内容上。
| 选择器 | 描述 | 返回 |
| :contains(text) | 选取含有文本内容为“text”的元素 | 集合元素 |
| :empty | 选取不包含子元素或者文本的空元素 | 集合元素 |
| :has(selector) | 选取含有选择器所匹配的元素的元素 | 集合元素 |
| :parent | 选取含有子元素或者文本的元素 | 集合元素 |
3. 可见性过滤选择器
可见性过滤选择器是更具元素的可见和不可见状态来选择相应的元素。
| 选择器 | 描述 | 返回 |
| :hidden | 选取所有不可见的元素 | 集合元素 |
| :visible | 选取所有可见的元素 | 集合元素 |
4. 属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。
| 选择器 | 描述 | 返回 |
| [attribute] | 选取拥有此属性的元素 | 集合元素 |
| [attribute=value] | 选取属性的值为value的元素 | 集合元素 |
| [attribute!=value] | 选取属性的值不等于value的元素 | 集合元素 |
| [attribute^=value] | 选取属性的值以value开始的元素 | 集合元素 |
| [attribute$=value] | 选取属性的值以value结束的元素 | 集合元素 |
| [attribute*=value] | 选取属性的值含有value的元素 | 集合元素 |
| [selector1][selector2][selectorN] | 用属性选择器合并成一个复合属性选择器,满足多个条件。每选择一次,缩小一次范围 | 集合元素 |
5. 子元素过滤选择器
子元素过滤选择器的过滤规则相对于其他的选择器稍微有些复杂,不过没有关系,只要将元素的父元素和子元素区分清楚,那么使用起来也非常简单。
| 选择器 | 描述 | 返回 |
| :nth-child(index/even/odd/equation) | 选取每个父元素下的第index个子元素或者奇偶元素。(index从1算起) | 集合元素 |
| :first-child | 选取每个父元素的第1个子元素 | 集合元素 |
| :last-child | 选取每个父元素的最后一个子元素 | 集合元素 |
| |
如果某个元素是它父元素中惟一的子元素,那么将会被匹配。如果父元素中含有其他元素,则不会被匹配 | 集合元素 |
6. 表单对象属性过滤选择器
表单对象属性过滤选择器主要是对所选择的表单对象进行过滤。
| 选择器 | 描述 | 返回 |
| :enabled | 选取所有可用元素 | 集合元素 |
| :disabled | 选取所有不可用元素 | 集合元素 |
| :checked | 选取所有被选中的元素(单选框,复选框) | 集合元素 |
| :selected | 选取所有被选中的选项元素(下拉列表) | 集合元素 |
过滤选择器的种类众多,而且使用的规则也有一些小差别,大家可以多多尝试来记住其特性。