jQuery过滤器用法一篇详解

jQuery过滤器用于进一步筛选已选中的元素集合，基于元素的位置、内容、状态或其他条件进行精确定位。过滤器分为基本过滤器、内容过滤器、可见性过滤器、属性过滤器、子元素过滤器和表单过滤器等。本文详细介绍常见过滤器的分类及用法等等。

1. 基本过滤器

基于元素在集合中的位置或索引进行筛选

// 选取第一个和最后一个元素$("li:first").addClass("first");$("li:last").addClass("last");// 选取偶数行和奇数行（索引从0开始）$("tr:even").css("background","#f0f0f0");$("tr:odd").css("background","#ffffff");// 选取指定索引位置的元素（索引从0开始）$("li:eq(2)").text("Third item");// 选取第3个li$("li:gt(2)").hide();// 选取索引大于2的li$("li:lt(2)").show();// 选取索引小于2的li// 选取当前正在执行事件的元素$("button").click(function(){$(this).addClass("active");});

2. 内容过滤器

基于元素的文本内容或子元素进行筛选

// 选取包含指定文本的元素$("div:contains('Hello')").css("color","red");// 选取为空的元素（没有子元素或文本）$("p:empty").remove();// 选取含有子元素或文本的元素$("div:has(p)").addClass("has-child");// 选取文本内容严格等于指定值的元素$("td:contains('Apple'):not(:has(*))").highlight();

3. 可见性过滤器

基于元素的可见性状态进行筛选

// 选取隐藏的元素并显示它们$("div:hidden").show();// 选取可见的元素并隐藏它们$("div:visible").hide();// 结合动画使用$("button").click(function(){$("p:visible").fadeOut();});

4. 属性过滤器

基于元素的属性或属性值进行筛选

// 选取具有指定属性的元素$("input[disabled]").prop("disabled",false);// 属性选择器写法$("input").filter("[disabled]").prop("disabled",false);// 过滤器写法// 选取属性值等于指定值的元素$("a[href='https://jq.com']").addClass("external");// 其他属性操作符：!=、^=、$=、*=$("img[src$='.png']").fadeIn();// 选取src以.png结尾的图片

5. 子元素过滤器

基于元素在父元素中的位置进行筛选

// 选取每个父元素的第一个子元素$("ul > li:first-child").css("font-weight","bold");// 选取每个父元素的最后一个子元素$("ul > li:last-child").css("font-style","italic");// 选取每个父元素的第n个子元素（从1开始）$("ul > li:nth-child(3)").addClass("highlight");// 选取每个父元素的奇数/偶数子元素$("ul > li:nth-child(odd)").css("background","#f0f0f0");// 选取每个父元素中唯一的子元素$("div > p:only-child").text("Only child");

6. 表单过滤器

专门用于筛选表单元素

// 选取所有表单输入元素$(":input").addClass("form-control");// 选取文本框、密码框、单选框、复选框等$(":text").val("Default text");$(":password").attr("placeholder","Password");$(":radio:checked").val();// 获取选中的单选框值$(":checkbox:checked").length;// 统计选中的复选框数量// 选取可用/禁用的元素$(":enabled").prop("disabled",true);$(":disabled").prop("disabled",false);// 选取已选中/未选中的选项$("select option:selected").text();$("input:selected").val();// 针对单选框和复选框

7. 自定义过滤器

使用.filter()方法创建自定义筛选条件

// 筛选出宽度大于200px的元素$("div").filter(function(){return$(this).width()>200;}).addClass("wide");// 结合多个条件筛选$("li").filter(":even, :contains('jq')").highlight();

8. 排除过滤器

使用.not()方法排除不符合条件的元素

// 选取所有li，但排除第一个和最后一个$("li").not(":first, :last").addClass("middle");// 排除具有特定类的元素$("p").not(".ignore").hide();