十四、过滤函数-筛选对象集合

系统 1632 0

页面上经常会创建DOM元素、删除DOM元素。因为jQuery对象是以集合的形式存在的,所以还要执行将DOM对象添加到jQuery对象集合、从jQuery对象集合中删除等操作。jQuery官网将管理jQuery对象集合的函数放在了"Traversing"分类中。Traversing分类下主要包括三个子类:Filtering,Finding,Chaining分别是过滤,查找,链式操作。

 

过滤函数的作用是:在已经选定的集合中,将匹配过滤函数的元素保留,将不符合的去除。列表如下:

 

名称

说明

举例

eq(index)

返回集合中指定索引 index 的元素,从 0 开始计算

$(“p”).eq(1)

获取匹配的第二个元素

filter(expr)

筛选出与指定表达式匹配的元素集合

$(“p”).filter(“.selected”)

保留带有 selected 类的元素

filter(fn)

筛选出与指定函数返回值匹配的元素集合,这个函数内部将对每个对象计算一次(正如 ’$.each’ )。如果调用的函数返回 false 则这个元素被删除,否则就会被保留

$(“div”).filter(function(index){return $(“ol”,this).size()=0;});

保留子元素中不含有 ol 的元素

is(expr)

注意:这个函数返回的不是 jQuery 包装集而是 Boolean

用一个表达式检查当前选择的元素集合,如果 其中至少有一个元素符合这个给定的表达式就返回 true 。如果没有元素符合,或者表达式无效,则返回 false filter 内部实际也是在调用这个函数,所以, filter() 函数原有的规则在这里也适用。

$(“input[type=’checkbox’]”).parent().is(“form”)

由于 input 元素的父元素是一个表单元素,所以返回 true

map(callback)

将一组元素转换成其他数组(不论是否是数组元素)可以用这个函数建立一个列表,不论是值、属性还是 css 样式,或者其他特别形式,都可以用 ”$.map()” 来方便的建立

$(“p”).append($(“input”).map(function(){

return $(this).val();

}).get().join(“,”));

form 中的每个 input 元素的值简历一个列表

not(expr)

删除与指定表达式匹配的元素

$(“p”).not($(“#selected”)[0])

P 元素中删除带有 select ID 元素

slice()

选取一个匹配的子集

$(“p”).slice(0,1);

选择第一个 P 元素

 

过滤函数要点

1.eq()函数

如果index超出了集合则返回一个空集合,而不会返回null。

2.filter()函数与find()函数

filter()函数支持选择器表达式和fn()函数两种类型的参数,是最常使用的过滤函数。但是初学者常常分不清filter()函数和后面即将讲到的find()函数。jQuery后台选择器时已经在内部使用过find()函数:

jQuery("div .className");等同于jQuery("div").find(".className");

使用filter()和find()都要首先使用选择器获得一个jQuery对象集合。

filter()函数是作用在集合的每一个对象上,即在"jQuery("div")"选取的集合上过滤,将匹配表达式或者函数的对象保留。

find()函数是在每一个对象内部查找匹配表达式的子元素,即作用在"jQuery("div")"集合的每个子元素上。

3.is()函数

返回的是true或者false。只要jQuery对象集合中有一个元素满足表达式的条件就返回true。比如:$("div").is(".testClass");只要有一个div应用了testClass的样式就返回true。

4.map()函数

map()函数会改变jQuery对象集合,比如:

$("div").map(function(){return this.innerHtml;})

5.slice()函数

slice()函数的行为与javascript数组的slice()函数相同。即参数start表示其元素的索引,从0开始。end参数不传入则表示选取从start以后所有的元素。

十四、过滤函数-筛选对象集合


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论