jQuery 过滤方法filter()选择具有特殊属性的元素
更新时间：2014年06月15日 09:57:51 投稿：whsnow
需要选出所有有背景图片的元素，使用jQuery的DOM过滤方法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('div').filter(function(){
var width = jQuery(this).width;
return width >100 && widht < 200;
});
//返回子元素有10个或者20个的元素.
jQuery('*').filter(function(){
var children = jQuery(this).childern().length;
return children ===10 || children ===20;
});
下面是一个代码例子：判断有背景颜色的元素，并将它们的背景颜色全部改为黑色。
<html>
<head>
<title></title>
<style type="text/css">
.c1{
background-color: yellow;
}
.c2{
background-color: green;
}
p{
background-color: pink;
}
h3{
background-color: gray;
}
</style>
</head>
<body>
<div class="c1">Bye Bye Beautiful</div>
<div class="c2">Nothing but the girl</div>
<p>The Lazy song</p>
<h2>If I die young</h2>
<h3>New soul</h3>
<script type="text/javascript" src="jquery.2.0.3.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
var ret = $('*').filter(function(index) {
return !$(this).css('background-color');
});
$.each(ret, function(index, val) {
$(val).css('background-color','black');
});
});
</script>
</body>
</html>
这个问题有点棘手.我们无法使用选择表达式来完成这个问题了.
使用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('div').filter(function(){
var width = jQuery(this).width;
return width >100 && widht < 200;
});
//返回子元素有10个或者20个的元素.
jQuery('*').filter(function(){
var children = jQuery(this).childern().length;
return children ===10 || children ===20;
});
下面是一个代码例子：判断有背景颜色的元素，并将它们的背景颜色全部改为黑色。
复制代码 代码如下:
<html>
<head>
<title></title>
<style type="text/css">
.c1{
background-color: yellow;
}
.c2{
background-color: green;
}
p{
background-color: pink;
}
h3{
background-color: gray;
}
</style>
</head>
<body>
<div class="c1">Bye Bye Beautiful</div>
<div class="c2">Nothing but the girl</div>
<p>The Lazy song</p>
<h2>If I die young</h2>
<h3>New soul</h3>
<script type="text/javascript" src="jquery.2.0.3.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
var ret = $('*').filter(function(index) {
return !$(this).css('background-color');
});
$.each(ret, function(index, val) {
$(val).css('background-color','black');
});
});
</script>
</body>
</html>
相关文章
这篇文章主要介绍了jquery对table中各种数据的增加、保存、删除操作,需要的朋友可以参考下2014-05-05
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
DOM事件标准定义了两种事件流，这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响。这两种事件流分别是捕获和冒泡。和许多Web技术一样，在它们成为标准之前，Netscape和微软各自不同地实现了它们，下面介绍DOM事件阶段以及事件捕获与事件冒泡先后执行顺序2015-08-08
jQuery选择器使得获得页面元素变得更加容易、更加灵活，从而大大减轻了开发人员的压力。如同盖楼一样，没有砖瓦，就盖不起楼房。得不到元素谈何其他各种操作呢？可见,jQuery选择器的重要性。当然想一下子掌握所有选择器也是很困难的，这个得靠实践和积累2014-03-03
droppable和draggable有类似的地方,不过区别点在于前者着重于将元素放进某个容器中,而后者则着重于可拖拽(虽然可能一些效果两者都可以实现)。而且通过查看easyloader源码可知道，droppable并不依赖于draggable。2015-08-08
这篇文章主要介绍了BootStrap下jQuery自动完成的样式调整的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-05-05
这篇文章主要为大家详细介绍了jquery实现定时自动轮播特效，讲解内容很详细，条理清晰，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-12-12
昨天看到一个园友的blog中有个页面下滚后出现用于"回到页面顶部"按钮的效果, 感觉挺不错的, 所以自己也写了一个, 用jQuery写是再简单不过了. 下面就直接给出代码了2011-06-06
当点击提交信息的时候，会把用户在注册甜的信息收集并以div弹出的方式提示个用户预览以确定信息的准确性，感兴趣的朋友可以参考下，希望对你有所帮助2013-04-04
JQUERY 浏览器判断实现函数，如果只是为了判断浏览器不建议用，如果你已经用了jquery才用啊，要不没必要因为这个小功能，加个那么大的类库吧。2009-08-08
网页跳转到指定位置，实现的方法有很多，本文采用最为简单的一种，喜欢朋友可以学习下2013-09-09
最新评论