jQuery过滤方法filter()使用详解

这次给大家带来jQuery过滤方法filter()使用详解,jQuery过滤方法filter()使用的注意事项有哪些,下面就是实战案例,一起来看一下。

现在有这样一种需求,需要选出所有有背景图片的元素. 

这个问题有点棘手.我们无法使用选择表达式来完成这个问题了.
使用jQuery的DOM过滤方法filter(),可以根据函数中表达的任何条件选择元素.
jQuery中的过滤器方法允许传递一个字符串(也就是选择器表达式)作为参数.
或者传递的是一个函数.它的返回值将定义某个元素是否被选中.
传递的函数将对当前选择集中的每个元素运行.
当函数返回假时,对应的函数就从选择集中被删除掉.每当返回值为真的时候,对应的元素
不受影响.

jQuery('*').filter(function(){ return !!jQuery(this).css('background'); });

登录后复制

上述代码选择所有具有背景图片的元素.
初始集合是所有元素(*).然后以一个函数为参数调用filter().
这个函数在每个集合上进行是否有属性background属性的判断,
如果有,则保留.否则,则在结果集中删除这个元素.
你所看到的!! 是javascript中间任何undefined ,空类型,当然还有false.
如果函数调用返回的是这些值,那么函数返回false,从而在集合中删除
没有background属性的元素.
实际上,!!并不是必要的.因为jQuery将把这些返回值转化为Boolean类型.但是保留仍然是一个好的主意.
这样任何人看到你的代码的时候,都能绝对肯定你的意图.(这有助于代码的可读性).
在传递个filter()的函数中,可以通过this关键字引用当前元素.
将它包含在jQuery函数中就变成了一个jQuery对象了.
this //常规的元素对象.
jQuery(this) //jQuery对象.
下面是激发你想象力的一些例子.

jQuery('p').filter(function(){ var width = jQuery(this).width; return width >100 && widht 
    .c1{ background-color: yellow; } .c2{ background-color: green; } p{ background-color: pink; } h3{ background-color: gray; }    

Bye Bye Beautiful

 

Nothing but the girl

 

the lazy song

 

If I die young

 

New soul

   jQuery(document).ready(function($) { var ret = $('*').filter(function(index) { return !$(this).css('background-color'); }); $.each(ret, function(index, val) { $(val).css('background-color','black'); }); });   

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

jQuery操作表格的插件datatables如何应用

js/jquery解析json方法详解

以上就是jQuery过滤方法filter()使用详解的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2768682.html

(0)
上一篇 2025年3月8日 12:07:50
下一篇 2025年3月6日 19:55:21

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论