jQuery过滤器用于进一步筛选已选中的元素集合基于元素的位置、内容、状态或其他条件进行精确定位。过滤器分为基本过滤器、内容过滤器、可见性过滤器、属性过滤器、子元素过滤器和表单过滤器等。本文详细介绍常见过滤器的分类及用法等等。本文目录1. 基本过滤器2. 内容过滤器3. 可见性过滤器4. 属性过滤器5. 子元素过滤器6. 表单过滤器7. 自定义过滤器8. 排除过滤器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[hrefhttps://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();← 上一篇 AngularJS知识快速入门上记得点赞、关注、收藏哦下一篇 Ajax——在OA系统提升性能的局部刷新 →
