如今有这样一种需求,须要选出全部有背景图片的元素.
这个问题有点棘手.我们无法使用选择表达式来完毕这个问题了.
使用jQuery的DOM过滤方法filter(),能够依据函数中表达的不论什么条件选择元素.

jQuery中的过滤器方法同意传递一个字符串(也就是选择器表达式)作为參数.
或者传递的是一个函数.它的返回值将定义某个元素是否被选中.
传递的函数将对当前选择集中的每一个元素执行.
当函数返回假时,相应的函数就从选择集中被删除掉.每当返回值为真的时候,相应的元素
不受影响.
jQuery('*').filter(function(){
return !!jQuery(this).css('background');
});

上述代码选择全部具有背景图片的元素.
初始集合是全部元素(*).然后以一个函数为參数调用filter().
这个函数在每一个集合上进行是否有属性background属性的推断,
假设有,则保留.否则,则在结果集中删除这个元素.

你所示!! 是javascript中间不论什么undefined ,空类型,当然还有false.
假设函数调用返回的是这些值,那么函数返回false,从而在集合中删除
没有background属性的元素.
实际上,!!并非必要的.由于jQuery将把这些返回值转化为Boolean类型.可是保留仍然是一个好的主意.
这样不论什么人看到你的代码的时候,都能绝对肯定你的意图.(这有助于代码的可读性).

在传递个filter()的函数中,能够通过thiskeyword引用当前元素.
将它包括在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>

Best Wishes.

jQuery 选择具有特殊属性的元素的更多相关文章

  1. jquery选择器之获取父级元素、同级元素、子元素

    一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 二.获取同级元素: 1.next([expr]): 获取指定元素的下一个同级元素 2.nextAll([expr]) ...

  2. JQUERY选择和操作DOM元素（利用正则表达式的方法匹配字符串中的一部分）

    JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分) 1.匹配属性的开头 $("[attributeName^='value']"); 2.匹配属性的结尾 ...

  3. JQUERY 选择

    jQuery 选择器 jQuery 采用 CSS 一个选择选择 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") 选取 ...

  4. jQuery选择元素的方法大全

    jQuery选择器其实是一个有些地方比较费解的,如果没有经过多次实验的话,很难得出它的每个操作符到底是干什么的,很容易出错,经过 我的多次测试,终于对一些比较难理解或容易出错的选择操作进行总结,既方便 ...

  5. jQuery——选择元素

    ###理解DOM jQuery最强大的特性之一就是能够简化在DOM中选择元素的任务.**DOM(文档对象模型)**充当了JavaScript与网页之间的接口,它以对象网络而非纯文本的形式来表现HTML ...

  6. jquery属性选择器（匹配具有指定属性的元素）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jQuery 查找带有某一属性的元素

    $('*[name="username"]') 要在前面加个*表示所有的DOM,如果只是查找带有name属性的DOM的话则是这样的   $('*[name]')//其实, $('[ ...

  8. jQuery选择：子代元素与后代元素的区别

    (1)后代元素:html代码如下,那么在jquery选择时,$(".test img"),中间为空格,则是选取后代元素,img对于ul来说是孙子辈元素,中间隔了li元素,所以后代元 ...

  9. jquery选择器之属性过滤选择器

    <style type="text/css"> /*高亮显示*/ .highlight{ background-color: gray } </style> ...

随机推荐

  1. ESP8266代码中的存储标记

    const uint8 MyArr[1024] ICACHE_RODATA_ATTR = {0}; void MyFun() ICACHE_FLASH_ATTR { } 这种 ICACHE 开头的宏作 ...

  2. liunx 修改ssh 端口22

    vim  /etc/ssh/sshd_config 找到Port  22  添加 Port 5002 重启sshd /bin/systemctl restart sshd.service 防火墙释放5 ...

  3. C语言学习及应用笔记之四：C语言volatile关键字及其使用

    在C语言中,还有一个并不经常使用但却非常有用的关键字volatile.那么使用volatile关键字究竟能干什么呢?接下来我将就此问题进行讨论. 一个使用volatile关键字定义变量,其实就是告诉编 ...

  4. PHP之static静态变量详解

    在看别人项目过程中,看到函数里面很多static修饰的变量,关于static修饰的变量,作用域,用法越看越困惑,所以查了下资料. static用法如下: 1.static 放在函数内部修饰变量 2.s ...

  5. C++\CLI语法 在项目中的使用

    通常情况下,对一个标准的com组件进行集成,网上普遍使用的方式有: 1.#import *.dll 或 #import *.ocx的方式,VS编译器重新编译后,就会自动生成组件对应的*.tlh文件,该 ...

  6. git本地项目上传至码云gitee

    如果你的本机是安装成功第一次使用,先配置一下一些基本的信息 $ git config--global user.name "Your Name" $ git config --gl ...

  7. angular 2+ 变化检测系列三(Zone.js在Angular中的应用)

    在系列一中,我们提到Zone.js,Zones是一种执行上下文,它允许我们设置钩子函数在我们的异步任务的开始位置和结束位置,Angular正是利用了这一特性从而实现了变更检测. Zones.js非常适 ...

  8. Redis高可用技术解决方案总结

    一.常见使用方式 Redis的几种常见使用方式包括: Redis单副本: Redis多副本(主从): Redis Sentinel(哨兵): Redis Cluster: Redis自研. 二.各种使 ...

  9. 【Android】setXfermode属性

    1.下面的Xfermode子类可以改变这种行为: AvoidXfermode  指定了一个颜色和容差,强制Paint避免在它上面绘图(或者只在它上面绘图). PixelXorXfermode  当覆盖 ...

  10. JSONP ---------跨域

    什么是跨域 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦.这里把涉及到跨域的一些问题简单地整理一下: 首 ...