"jQuery过滤器的学习资料，包括基本过滤器、内容过滤器、可见性过滤器、子元素过滤器和其他方法。由李炎恢主讲，可在指定网站查阅更多内容。"
在jQuery中，过滤器是一种强大的工具，用于从DOM（文档对象模型）中筛选出特定的元素集合，以便进行进一步的操作。这些过滤器使得开发者能够更加精确地定位和操作页面上的元素，即使在不支持CSS3选择器的老版浏览器中也可以实现类似功能。
### 1. 基本过滤器
基本过滤器提供了一种简单的方法来选取集合中的特定元素。例如：
- `:first`：选取集合中的第一个元素。
- `:last`：选取集合中的最后一个元素。
- `:not(selector)`：选取不符合指定选择器的元素。
- `:even`：选取索引值为偶数（从0开始）的元素。
- `:odd`：选取索引值为奇数（从0开始）的元素。
- `:eq(index)`：选取索引值等于给定索引的元素。
- `:gt(index)`：选取索引值大于给定索引的元素。
- `:lt(index)`：选取索引值小于给定索引的元素。
- `:header`：选取所有的标题元素（h1到h6）。
- `:animated`：选取正在执行动画的元素。
- `:focus`：选取当前具有焦点的元素。
示例代码展示了如何使用这些基本过滤器来改变匹配元素的背景色：
```javascript
$('li:first').css('background', '#ccc'); // 第一个元素
$('li:last').css('background', '#ccc'); // 最后一个元素
$('li:not(.red)').css('background', '#ccc'); // 非class为red的元素
$('li:even').css('background', '#ccc'); // 索引为偶数的元素
```
### 2. 内容过滤器
内容过滤器则根据元素内部的内容进行筛选：
- `:contains(text)`：选取包含指定文本的元素。
- `:empty`：选取没有子元素（包括文本节点）的元素。
- `:has(selector)`：选取包含指定后代元素的元素。
### 3. 可见性过滤器
可见性过滤器用于基于元素的可见状态进行筛选：
- `:hidden`：选取所有隐藏的元素。
- `:visible`：选取所有可见的元素。
### 4. 子元素过滤器
子元素过滤器允许你基于元素的子元素关系进行筛选：
- `:first-child`：选取其父元素的第一个子元素。
- `:last-child`：选取其父元素的最后一个子元素。
- `:nth-child(index/even/odd)`：选取其父元素的指定索引位置的子元素或偶数/奇数索引的子元素。
- `:only-child`：选取其父元素中唯一的孩子元素。
### 5. 其他方法
jQuery还提供了其他方法作为过滤器的补充，如`.filter()`和`.not()`，它们可以接受一个选择器、函数或者元素数组来进一步筛选元素集。
`.filter(selector)`：在当前元素集中选取符合指定选择器的元素。
`.not(selector)`：从当前元素集中移除符合指定选择器的元素。
通过这些过滤器，开发者可以轻松地对页面上的元素进行精确控制，实现丰富的交互效果和动态更新。结合jQuery的其他方法，如`.addClass()`, `.remove()`, `.show()`, `.hide()`等，可以构建出强大的前端应用。
我的内容管理
展开
