jquery过滤器

jQuery 过滤器概述

jQuery 过滤器用于从匹配的元素集合中筛选出特定子集，常用于 DOM 操作、事件处理或数据筛选。过滤器可以通过选择器、方法或自定义函数实现精准定位。

基本选择器过滤器

1. :eq(index)
   选取匹配集合中指定索引的元素（从 0 开始）。

   $("li:eq(2)").css("color", "red"); // 选中第三个 li 元素

2. :first 和 :last
   分别选取集合的第一个或最后一个元素。

   $("div:first").hide(); // 隐藏第一个 div

3. :even 和 :odd
   基于索引的奇偶筛选（even 从 0 开始计为偶数）。

   $("tr:odd").addClass("striped"); // 为奇数行添加样式

4. :not(selector)
   排除匹配指定选择器的元素。

   $("input:not(:checked)").prop("disabled", true); // 禁用未选中的输入框

内容与属性过滤器

1. :contains(text)
   选取包含指定文本的元素（区分大小写）。

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

2. :has(selector)
   选取至少包含一个匹配子元素的元素。

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

3. [attribute] 和 [attribute=value]
   通过属性筛选元素。

   $("a[target='_blank']").addClass("external");

表单过滤器

1. :input
   匹配所有表单控件（input、select、textarea、button）。

   $(":input").addClass("form-control");

2. :checked 和 :selected
   分别匹配被选中的复选框/单选框或下拉选项。

   $("input:checked").val(); // 获取选中项的值

3. :disabled 和 :enabled
   筛选禁用或启用的表单元素。

   $("input:enabled").css("background", "white");

自定义过滤器方法

1. .filter(selector)
   通过选择器或函数进一步筛选集合。

   $("div").filter(".active").hide(); // 隐藏带 .active 类的 div

2. .not(selector)
   排除集合中匹配的元素。

   $("li").not(".exclude").fadeOut();

3. .has(selector)
   保留包含特定子元素的父元素。

   $("ul").has("li.active").css("color", "green");

链式过滤示例

结合多个过滤器实现复杂筛选：

$("tr")
  .filter(":even")
  .not(":has(td:empty)")
  .addClass("valid-row");

通过灵活组合过滤器，可以高效操作 DOM 或处理动态数据。