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 相关文章推荐
ajaxControlToolkit AutoCompleteExtender的用法
Oct 30 Javascript
[原创]js获取数组任意个不重复的随机数组元素
Mar 15 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
基于elementUI使用v-model实现经纬度输入的vue组件
May 12 Javascript
微信小程序实现电子签名功能
Jul 29 Javascript
Vue实现移动端拖拽交换位置
Jul 29 Javascript
vue a标签点击实现赋值方式
Sep 07 Javascript
给原生html中添加水印遮罩层的实现示例
Apr 02 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
PHP 调试工具Debug Tools
2011/04/30 PHP
javascript中的array数组使用技巧
2010/01/31 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
ie支持function.bind()方法实现代码
2012/12/27 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
深入理解JQuery keyUp和keyDown的区别
2013/12/12 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
python模块之re正则表达式详解
2017/02/03 Python
Python3简单实例计算同花的概率代码
2017/12/06 Python
python解析html提取数据,并生成word文档实例解析
2018/01/22 Python
python素数筛选法浅析
2018/03/19 Python
点球小游戏python脚本
2018/05/22 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
python实现简单的购物程序代码实例
2020/03/03 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
数据管理员的自我评价分享
2013/11/15 职场文书
销售心得体会
2014/01/02 职场文书
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
根叔历年演讲稿
2014/05/20 职场文书
乡镇党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
工资收入证明
2014/10/07 职场文书
诚信教育主题班会
2015/08/13 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript