jquery过滤器

jQuery 过滤器

jQuery 过滤器用于从一组匹配的元素中筛选出符合条件的子集。常见的过滤器包括基本选择器、内容过滤器、可见性过滤器、属性过滤器等。

基本选择器

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

  $("div:first").css("color", "red");

• :last：选择最后一个匹配的元素。

  $("div:last").css("color", "blue");

• :even：选择索引为偶数的元素（从 0 开始）。

  $("tr:even").css("background-color", "#f2f2f2");

• :odd：选择索引为奇数的元素（从 1 开始）。

  $("tr:odd").css("background-color", "#ddd");

内容过滤器

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

  $("p:contains('Hello')").css("font-weight", "bold");

• :empty：选择没有子元素或文本的元素。

  $("div:empty").text("This div was empty");

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

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

可见性过滤器

• :visible：选择可见的元素。

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

• :hidden：选择隐藏的元素。

  $("div:hidden").show();

属性过滤器

• [attribute]：选择具有指定属性的元素。

  $("a[href]").css("color", "green");

• [attribute=value]：选择属性值等于指定值的元素。

  $("input[type='text']").val("Default");

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

  $("input[type!='text']").css("border", "2px solid red");

表单过滤器

• :input：选择所有表单元素（input、select、textarea、button）。

  $(":input").css("background-color", "yellow");

• :checked：选择被选中的复选框或单选按钮。

  $("input:checked").parent().css("color", "green");

• :selected：选择被选中的下拉选项。

  $("option:selected").css("font-weight", "bold");

子元素过滤器

• :nth-child(n)：选择父元素下的第 n 个子元素。

  $("ul li:nth-child(2)").css("color", "red");

• :first-child：选择父元素下的第一个子元素。

  $("ul li:first-child").css("font-weight", "bold");

• :last-child：选择父元素下的最后一个子元素。

  $("ul li:last-child").css("font-style", "italic");

自定义过滤器

• :not(selector)：选择不匹配指定选择器的元素。

  $("div:not(.special)").css("opacity", "0.5");

• :eq(index)：选择指定索引位置的元素（从 0 开始）。

  $("tr:eq(1)").css("background-color", "lightgray");

• :gt(index)：选择索引大于指定值的元素。

  $("tr:gt(2)").hide();

• :lt(index)：选择索引小于指定值的元素。

  $("tr:lt(2)").css("font-weight", "bold");

通过合理使用这些过滤器，可以高效地操作 DOM 元素，实现复杂的交互效果。