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 相关文章推荐
JQuery live函数
Dec 24 Javascript
非常棒的10款jQuery 幻灯片插件
Jun 14 Javascript
JQuery与JS里submit()的区别示例介绍
Feb 17 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
Apr 07 Javascript
BootStrap3学习笔记(一)之网格系统
May 20 Javascript
javascript html5轻松实现拖动功能
Mar 01 Javascript
浅谈关于axios和session的一些事
Jul 13 Javascript
JS实现二维数组横纵列转置的方法
Apr 17 Javascript
webpack的CSS加载器的使用
Sep 11 Javascript
vue.js仿hover效果的实现方法示例
Jan 28 Javascript
这应该是最详细的响应式系统讲解了
Jul 22 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
Nov 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漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
PHP利用header跳转失效的解决方法
2014/10/24 PHP
php实现Mongodb自定义方式生成自增ID的方法
2015/03/23 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
PHP实现验证码校验功能
2017/11/16 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
jQuery修改CSS伪元素属性的方法
2014/07/30 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
2015/08/01 Javascript
javascript基础知识讲解
2017/01/11 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
nodejs读取并去重excel文件
2018/04/22 NodeJs
vue项目实现图片上传功能
2019/12/23 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
Web服务器框架 Tornado简介
2014/07/16 Python
Python遍历目录的4种方法实例介绍
2015/04/13 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
python输入多行字符串的方法总结
2019/07/02 Python
python 基于dlib库的人脸检测的实现
2019/11/08 Python
Python如何省略括号方法详解
2020/03/21 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
matplotlib图例legend语法及设置的方法
2020/07/28 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
存储过程和函数的区别
2013/05/28 面试题
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
2014新课程改革心得体会
2014/03/10 职场文书
幼儿园家长寄语
2014/04/02 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
使用refresh_token实现无感刷新页面
2022/04/26 Javascript