1、has()方法
语法:.has(selector)
参数 | 描述 |
selector | 字符串值,包含匹配元素的选择器表达式。 |
has()函数用于筛选出包含特定后代的元素(特定后代是指该元素至少有一个后代元素匹配指定的表达式),函数的返回值为jQuery类型,返回一个新的jQuery对象,该对象封装了当前jQuery对象的匹配元素中符合筛选条件的元素。如果没有满足条件的元素,则返回空的jQuery对象。
has()函数实际上是根据后代元素来筛选元素,如果当前jQuery对象匹配的每个元素的后代元素中至少有一个元素符合指定的表达式,则该元素符合筛选条件。has()函数不是获取后代元素,而是当前jQuery对象中的元素,只是它们的后代元素中至少要有一个元素符合指定的表达式,然后返回包含所有满足条件的元素的jQuery对象。
has()函数与:has()选择器具有如下等效代码:
// 这里的是selector、selector1均表示任意的选择器
$("selector").has("selector1");
// 等价于
$("selector:has(selector1)");
Eg:
<ul>
<li class='a'>list item 1</li>
<li>list item 2
<ul>
<li><div><span>a</span></div>list item2-a</li>
<li>list item 2-b</li>
<li>list item 2-c</li>
</ul>
</li>
<li class='a'>list item 3</li>
<li>list item 4</li>
</ul>
$('li').has('span').css('background-color','red');
或者$("li").has(document.getElementsByTagName("span")).css("background-color","green");
结果为:
(从代码上面开始往下面走,找到含有span标签的li标签,list item 1这第一个li标签内部找不到span;list item 2这第二个li标签的后代li标签里有span,所以应该把背景色换为红色;list item 3和list item 4这后面两个标签后代都没有span标签,所以也不会有背景色)
$('li li').has('span').css('background-color','red');
结果为:
(注意这里$()里是两个li,那么代码从上面往下面走,两个li即应该定位到第五行代码,这个子li标签里确实含有span标签,所以list item 2下面的第一个li的背景色变为红色)
这个例子可以看出:在匹配li时,要检查该li的后代元素中是否包含了span,如果包含,则该元素包含在结果中。如果不包含,那么就排除。
注意:has只起判断作用。以has参数中的选择器或DOM元素做为条件,检测原结果集中的元素是否符合。去掉不符合的元素,将符合的元素构成一个新结果集。
2、filter()方法
语法:.filter(selector)
参数 | 描述 |
selector | 字符串值,包含供匹配当前元素集合的选择器表达式。 |
如果给定表示 DOM 元素集合的 jQuery 对象,.filter() 方法会用匹配元素的子集构造一个新的 jQuery 对象。所使用的选择器会测试每个元素;所有匹配该选择器的元素都会包含在结果中。
filter()方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。(而not()方法返回不匹配标准的所有元素,与 filter()相反。)
补充:CSS3有filter(滤镜) 属性,filter 属性定义了元素的可视效果(例如:模糊与饱和度)
Eg:以上HTML代码不变,
$('li').filter('.a').css('background-color', 'red'); 结果为:
(代码从上面往下开始找,过滤出含有a这个类的li标签,所以就找到了list item 1和list item 3,将这两个背景色变为红色)
3、find()方法
语法:.find(selector)
参数 | 描述 |
selector | 字符串值,包含供匹配当前元素集合的选择器表达式。 |
find()方法获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选。find()方法返回被选元素的后代元素,后代是子、孙、曾孙,依此类推。
如果给定一个表示 DOM 元素集合的 jQuery 对象,.find() 方法允许我们在 DOM 树中搜索这些元素的后代,并用匹配元素来构造一个新的 jQuery 对象。.find() 与 .children() 方法类似,不同的是后者仅沿着 DOM 树向下遍历单一层级。
find()函数其实还可以用选择器表示,例如var $selector = $("div .aa");其实就等同于var $selector = $("div").find(".aa");
Eg:以上HTML代码不变,
$('li').find('span').css('background-color','red');
结果为:
(代码从上面往下开始找,先找li标签,再找span标签,list item 1这个li里没有span,继续向下走,list item 2中向下走在子li中找到了span,于是将这个span背景色改为红色)
Eg:
<divclass="css">
<pclass="rain">测试1</p>
</div>
<divclass="rain">
<p>测试2</p>
</div>
如果我们使用find()方法:
var $find = $("div").find(".rain");
alert( $find.html() ) ;
如果使用filter()方法:
var $filter = $("div").filter(".rain");
alert( $filter.html() );
find()会在div元素内寻找 class为rain 的元素,而filter()则是筛选div的class为rain的元素。一个是对它的子集操作,一个是对自身集合元素筛选。
4、总结:
- filter()方法与has()方法中的参数,都是过滤条件。不同的是filter()方法条件作用于自身;has()方法条件是作用于它的后代元素中。
- filter()是对选中的元素集合操作,得到这些元素中符合条件的元素。而find()是得到选中元素中符合条件的后代子元素。
- find()方法是获得在当前结果集中每个元素的后代,参数(选择器、jquery集合或DOM元素)做为过滤条件,满足过滤条件的则保留,保留的是后代。而has()方法中,参数只做为条件,符合条件的,它的前元素加入新的结果集,而不是后代加入新的结果集。