jquery遍历中过滤方法

jQuery 是一种流行的 JavaScript 库，它通过提供易于使用的 API，简化了 HTML 文档遍历、操作、事件处理等操作，在 jQuery 中，有许多方法可以用于遍历和过滤 DOM 元素，本文将详细介绍 jQuery 中的几种过滤方法。

1、:visible 和 :hidden 选择器

这是最基本的过滤方法。:visible 选择器用于选择当前在页面上可见的元素，而 :hidden 选择器用于选择当前在页面上不可见的元素。

// 选择所有可见的 p 元素
$('p:visible');
// 选择所有不可见的 p 元素
$('p:hidden');

2、:even 和 :odd 选择器

这两个选择器用于根据元素在其父元素中的索引位置（从 0 开始计数）来过滤元素。:even 选择器用于选择索引为偶数的元素，而 :odd 选择器用于选择索引为奇数的元素。

// 选择所有偶数索引的 li 元素
$('li:even');
// 选择所有奇数索引的 li 元素
$('li:odd');

3、:first 和 :last 选择器

这两个选择器用于选择父元素中的第一个或最后一个元素。

// 选择每个 ol 元素中的第一个 li 元素
$('ol li:first');
// 选择每个 ol 元素中的最后一个 li 元素
$('ol li:last');

4、:not() 方法

:not() 方法用于从一组元素中排除与指定选择器匹配的元素。

// 选择所有没有 'active' 类的 a 元素
$('a:not(.active)');

5、:has() 方法

:has() 方法用于选择包含指定元素的父元素。

// 选择所有包含 '.active' 子元素的 li 元素
$('li:has(.active)');

6、:contains() 方法

:contains() 方法用于选择包含指定文本的元素。

// 选择所有包含文本 'Hello' 的 p 元素
$('p:contains("Hello")');

7、:parent 和 :empty 选择器

:parent 选择器用于选择包含子元素的元素，而 :empty 选择器用于选择不包含子元素（包括文本节点）的元素。

// 选择所有包含子元素的 p 元素
$('p:parent');
// 选择所有不包含子元素的 p 元素
$('p:empty');

8、:gt() 和 :lt() 方法

这两个方法分别用于选择一个集合中大于或小于指定索引的元素。

// 选择每个 ul 元素中索引大于 2 的所有 li 元素
$('ul li:gt(2)');
// 选择每个 ul 元素中索引小于 2 的所有 li 元素
$('ul li:lt(2)');

9、:header 和 :input 选择器

:header 选择器用于选择所有标题元素（h1, h2, h3, h4, h5, h6），而 :input 选择器用于选择所有表单输入元素。

// 选择所有标题元素
$(':header');
// 选择所有表单输入元素
$(':input');

10、组合选择器

可以组合使用多个选择器和方法来创建更复杂的过滤条件。

// 选择每个 ol 元素中索引为奇数且包含 'active' 类的 li 元素
$('ol li:odd:not(.active)');

通过以上介绍的 jQuery 过滤方法，你可以更方便地对 DOM 元素进行筛选和操作，这些方法在处理复杂的网页结构和实现动态交互时非常有用。