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('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>

赞 (0)

相关推荐

  • 用jQuery.ajaxSetup实现对请求和响应数据的过滤

    用jQuery.ajaxSetup实现对请求和响应数据的过滤

    不知道同学们在做项目的过程中有没有相同的经历呢?在使用 ajax 的时候,需要对请求参数和响应数据进行过滤处理,比如你们觉得就让请求参数和响应信息就这么赤裸裸的在互联网里来回的穿梭,比如这样: 要知道,在浩瀚的互联网中,所有的信息都是不安全的,万一有人偷窥我们怎么办?!万一被别人看见了我们的美体,偷窥到了我们的私处,然后以此威胁我们,岂不是太难堪了不是?这时,你或许会想给请求数据和响应数据加密,就相当于给我们的数据穿上了一层衣服.于是我们这样: 是不是美美哒,对,穿上一层漂漂亮亮的衣服,就不怕别

  • jquery通过select列表选择框对表格数据进行过滤示例

    jquery通过select列表选择框对表格数据进行过滤 表格数据 复制代码 代码如下: <table id="example">    <thead>        <tr>            <th>Name</th>            <th>Surname</th>        </tr>    </thead>    <tbody>       

  • jQuery可见性过滤器：hidden和：visibility用法实例

    本文实例讲述了jQuery可见性过滤器:hidden和:visibility用法.分享给大家供大家参考.具体分析如下: :hidden 匹配所有不可见元素,如果使用css的visibility属性让元素不显示但是占位,则不属于hidden了 查找display:none的tr元素,$("tr:hidden") :visible 匹配所有可见元素 查找所有display不为none的元素,$("tr:visible") 例子: <tr id="one&

  • 简单讲解jQuery中的子元素过滤选择器

    简单讲解jQuery中的子元素过滤选择器

    子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素. $('li:first-child').css('background', '#ccc'); //每个父元素第一个li 元素 $('li:last-child').css('background', '#ccc'); //每个父元素最后一个li 元素 $('li:only-child').css('background', '#ccc'); //每个父元素只有一个li 元素 $('li:nth-child(odd)').css(

  • jquery选择器之层级过滤选择器详解

    jquery选择器之层级过滤选择器详解

    复制代码 代码如下: $("ancestor descendant"):选取parent元素后所有的child元素$("parent > child"):选取parent元素后所有的直属child元素,何谓"直属",也就是第一级的意思了$("prev + next"):prev和next是两个同级别的元素. 选中在prev元素后面的next元素$("prev ~ siblings"):选择prev后面

  • jQuery过滤HTML标签并高亮显示关键字的方法

    jQuery过滤HTML标签并高亮显示关键字的方法

    本文实例讲述了jQuery过滤HTML标签并高亮显示关键字的方法.分享给大家供大家参考.具体如下: jQuery实现网页关键字过滤效果,将需要过滤的文字定义在JavaScript中,可定义多个,不过要修改JS代码为数组,这样可过滤出多个不同的关键字,本例只是为你演示一个基本的功能,更多过滤功能请自己挖掘吧. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:

  • jQuery使用contains过滤器实现精确匹配方法详解

    本文实例讲述了jQuery使用contains过滤器实现精确匹配的方法.分享给大家供大家参考,具体如下: :contains 选择器选取包含指定字符串的元素. 该字符串可以是直接包含在元素中的文本,或者被包含于子元素中. 经常与其他元素/选择器一起使用,来选择指定的组中包含指定文本的元素,如: $("p:contains(is)") 表示选择所有包含 "is" 的 <p> 元素. 再如: $("p:contains(张三)") 或 $

  • 举例讲解jQuery中可见性过滤选择器的使用

    举例讲解jQuery中可见性过滤选择器的使用

    可见性过滤器 可见性过滤器根据元素的可见性和不可见性来选择相应的元素. 过滤器名 jQuery 语法 说明 返回 :hidden  $(':hidden')  选取所有不可见元素 集合元素 :visible  $(':visible')  选取所有可见元素 集合元素 $('p:hidden).size(); //元素p 隐藏的元素 $('p:visible').size(); //元素p 显示的元素 注意::hidden 过滤器一般是包含的内容为:CSS 样式为display:none.inpu

  • jQuery过滤选择器:not()方法使用介绍

    jQuery(':not(selector)') 在jQuery的早期版本中,:not()筛选器只支持简单的选择器,说明我们传入到:not这个filter中的selector可以任意复杂,比如:not(div a) and :not(div,a) 复制代码 代码如下: <p >"a">sdfsdfs</p> <p >"b">sdfsdfs</p> <p >"c">sdf

  • jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)

    jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)

    Selectator是一款实现多选和搜索过滤功能的jQuery下拉列表框插件.它支持搜索,并且能直接影响原始的选择框,而原始的选择框是用作数据容器.通过该下拉列表框插件可以多选项进行分组,设置选项的图标,对选项进行搜索过滤,以及进行多选选择. 效果展示       源码下载 使用方法 使用该下拉类别框插件需要在页面中引入fm.selectator.jquery.css.jQuery和fm.selectator.jquery.js文件. <link rel="stylesheet"

随机推荐