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 相关文章推荐
syntaxhighlighter 使用方法
Jul 02 Javascript
jquery遍历input取得input的name
Apr 27 Javascript
JS 数字转换研究总结
Dec 26 Javascript
AngularJs Managing Service Dependencies详解
Sep 02 Javascript
webpack常用配置项配置文件介绍
Nov 07 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
深入浅出理解JavaScript高级定时器原理与用法
Aug 02 Javascript
Vue中android4.4不兼容问题的解决方法
Sep 04 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
Apr 29 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 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下一个非常全面获取图象信息的函数
2008/11/20 PHP
PHP防止图片盗用(盗链)的方法小结
2016/11/11 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
ThinkPHP防止重复提交表单的方法实例分析
2018/05/10 PHP
PHP实现简单的计算器
2020/08/28 PHP
javascript中length属性的探索
2011/07/31 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
在vue里面设置全局变量或数据的方法
2018/03/09 Javascript
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
微信小程序自定义导航栏实例代码
2019/04/05 Javascript
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
layui关闭层级、简单监听的实例
2019/09/06 Javascript
node后端服务保活的实现
2019/11/10 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
python脚本实现分析dns日志并对受访域名排行
2014/09/18 Python
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
解决jupyter notebook import error但是命令提示符import正常的问题
2020/04/15 Python
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
英国最大的海报商店:GB Posters
2018/03/20 全球购物
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
车间操作工岗位职责
2013/12/19 职场文书
《春天来了》教学反思
2014/04/07 职场文书
统计工作个人总结
2015/03/03 职场文书
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang
Mysql文件存储图文详解
2021/06/01 MySQL
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL