jQuery过滤器详解：从基础到高级

"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()`等，可以构建出强大的前端应用。