jQuery 选择具有特殊属性的元素

2019-04-29 19:38:21 阅读：162 来源： 互联网

标签：jQuery function color 元素 filter background 属性

如今有这样一种需求,须要选出全部有背景图片的元素.
这个问题有点棘手.我们无法使用选择表达式来完毕这个问题了.
使用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,function,color,元素,filter,background,属性
来源： https://www.cnblogs.com/ldxsuanfa/p/10792402.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

jQuery 选择具有特殊属性的元素