jquery 过滤器

jQuery 过滤器概述

jQuery 过滤器用于从匹配的元素集合中筛选出特定子集，通常结合选择器或遍历方法使用。主要包括基本过滤器、内容过滤器、可见性过滤器等类型。

基本过滤器

通过位置或索引筛选元素：

• :first：选取第一个匹配的元素。

  $("div:first").css("color", "red"); // 选中第一个 div

• :last：选取最后一个匹配的元素。
• :even 和 :odd：选取偶数或奇数索引的元素（索引从 0 开始）。
• :eq(n)：选取索引为 n 的元素。

  $("li:eq(2)").hide(); // 隐藏第三个 li

• :gt(n) 和 :lt(n)：选取索引大于或小于 n 的元素。

内容过滤器

根据元素内容或子元素筛选：

• :contains(text)：选取包含指定文本的元素。

  $("p:contains('Hello')").addClass("highlight");

• :has(selector)：选取包含特定子元素的元素。

  $("div:has(p)").css("border", "1px solid blue");

• :empty：选取没有子元素或文本的空元素。
• :parent：选取至少有一个子元素或文本的非空元素。

可见性过滤器

根据元素显示状态筛选：

• :visible：选取当前可见的元素（非 display:none 或隐藏的表单元素）。

  $("div:visible").fadeOut();

• :hidden：选取隐藏的元素（包括 display:none 或 type="hidden" 的表单元素）。

属性过滤器

通过属性值筛选元素：

• [attribute]：选取带有指定属性的元素。

  $("input[disabled]").val("Disabled Field");

• [attribute=value]：选取属性值等于 value 的元素。
• [attribute!=value]：选取属性值不等于 value 的元素。

表单过滤器

针对表单元素的专用过滤器：

• :input：选取所有 input、textarea、select 和 button 元素。
• :checked：选取被选中的复选框或单选按钮。

  $("input:checked").closest("form").submit();

• :selected：选取下拉列表中选中的 option 元素。

组合使用示例

过滤器可与其他 jQuery 方法链式调用：

// 选中所有包含 "error" 类的可见 div，并隐藏它们
$("div.error:visible").hide();

// 选中表格中偶数行且包含 "active" 类的行
$("tr:even.has(.active)").css("background", "yellow");

通过灵活组合过滤器，可以高效地操作 DOM 元素。