jQuery 过滤方法filter()选择具有特殊属性的元素


Posted in Javascript onJune 15, 2014

现在有这样一种需求,需要选出所有有背景图片的元素.
这个问题有点棘手.我们无法使用选择表达式来完成这个问题了.
使用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>
Javascript 相关文章推荐
JAVASCRIPT对象及属性
Feb 13 Javascript
jquery tools 系列 scrollable(2)
Sep 06 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
Aug 05 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
详解javascript函数的参数
Nov 10 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
使用vue构建一个上传图片表单
Jul 04 Javascript
vue-cli扩展多模块打包的示例代码
Apr 09 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
Mar 08 Javascript
js实现复制粘贴的两种方法
Dec 04 Javascript
Javascript实现简单二级下拉菜单实例
Jun 15 #Javascript
jQuery $.extend()用法总结
Jun 15 #Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 #Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 #Javascript
jQuery Migrate 1.1.0 Released 注意事项
Jun 14 #Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
Jun 14 #Javascript
Ext修改GridPanel数据和字体颜色、css属性等
Jun 13 #Javascript
You might like
对盗链说再见...
2006/10/09 PHP
function.inc.php超越php
2006/12/09 PHP
php数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
php strnatcmp()函数的用法总结
2013/11/27 PHP
PHP中empty,isset,is_null用法和区别
2017/02/19 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
js获取图片长和宽度的代码
2009/11/24 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
JavaScript实现生成GUID(全局统一标识符)
2014/09/05 Javascript
JS和JQ的event对象区别分析
2014/11/24 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
IE8兼容Jquery.validate.js的问题
2016/12/01 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
在js文件中引入(调用)另一个js文件的三种方法
2020/09/11 Javascript
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
Python实现二维数组输出为图片
2018/04/03 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
详解小白之KMP算法及python实现
2019/04/04 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
python SVD压缩图像的实现代码
2019/11/05 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
python与js主要区别点总结
2020/09/13 Python
英国绿色商店:Natural Collection
2019/05/03 全球购物
给物业的表扬信
2014/01/21 职场文书
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
关于青春的演讲稿三分钟
2014/08/22 职场文书
mysql中between的边界,范围说明
2021/06/08 MySQL
Java实现房屋出租系统详解
2021/10/05 Java/Android