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 相关文章推荐
Grid得到选择行数据的方法总结
Jan 17 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
js弹出div并显示遮罩层
Feb 12 Javascript
浅谈JavaScript的事件
Feb 27 Javascript
jquery预加载图片的方法
May 27 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
Angular 输入框实现自定义验证功能
Feb 19 Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 Javascript
微信小程序中使用echarts的实现方法
Apr 24 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 Javascript
jquery实现上传图片功能
Jun 29 jQuery
解决vue-photo-preview 异步图片放大失效的问题
Jul 29 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
php函数的常用方法及注意之处小结
2011/07/10 PHP
深入理解用mysql_fetch_row()以数组的形式返回查询结果
2013/06/05 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
PHP中预定义的6种接口介绍
2015/05/12 PHP
PHP实现递归复制整个文件夹的类实例
2015/08/03 PHP
PHP7多线程搭建教程
2017/04/21 PHP
Yii2 队列 shmilyzxt/yii2-queue 简单概述
2017/08/02 PHP
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
2015/12/13 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
2016/05/05 Javascript
浅析Ajax语法
2016/12/05 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
浅谈 vue 中的 watcher
2017/12/04 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
浅谈vue项目打包优化策略
2018/09/29 Javascript
利用jqgrid实现上移下移单元格功能
2018/11/07 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
python使用PyFetion来发送短信的例子
2014/04/22 Python
python将字符串转换成数组的方法
2015/04/29 Python
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
Python unittest框架操作实例解析
2020/04/13 Python
澳大利亚鞋仓库:Shoe Warehouse
2019/07/25 全球购物
Currentbody法国:健康与美容高科技产品
2020/08/16 全球购物
警察群众路线整改措施
2014/09/26 职场文书
2014年秘书工作总结
2014/11/25 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
仙境之桥观后感
2015/06/16 职场文书
世界上超棒的8种逻辑思维
2019/08/06 职场文书
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python
html5调用摄像头实例代码
2021/06/28 HTML / CSS
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis