jquery之find,filter,has对比

时间:2023-03-09 07:59:14
jquery之find,filter,has对比

find()方法找的是符合条件的后代,返回的是子元素。

$('div').find('.intro').css('color','red');   //寻找div后代类为intro的元素

filter()过滤DOM元素包装集,是指操作当前元素集,删除不匹配的元素,得到一个新的集合

$('div').filter('.intro').css('background','pink');   //过滤出所有类为intro的div

find()是对后代操作,改变的是后代。

filter()是对自身集合元素操作。

测试:

 <body>
<h1>欢迎来到我的主页</h1>
<div>我是唐老鸭</div>
<div>
<p class="intro">我住在duckburg</p>
</div>
<div class="intro">
<p>我爱duck</p>
</div>
<div>我最好的朋友是monkey</div>
</body>

用find:

$('div').find('.intro').css('color','red');

结果

jquery之find,filter,has对比

由此可见,只有第二个div里边有一个后代为intro的元素,所以find是寻找后代的。

用filter:

$('div').filter('.intro').css('background','pink');

结果:

jquery之find,filter,has对比

filter()方法是指操作当前元素集合,过滤出所有类为intro的div元素。

用选择器测试每个元素本身(不是后代),符合选择器的元素包含在集合中,不符合的去掉(选择器就是起过滤作用),形成一个新的结果集。

用has():

$('div').has('.intro').css('color','blue');

结果:

jquery之find,filter,has对比

has()方法中,参数只做为条件,符合条件的,它的前元素加入新的结果集,而不是后代加入新的结果集。

结论:

-find()方法是获得在当前结果集中每个元素的后代。参数(选择器、jquery集合或DOM元素)做为过滤条件,满足过滤条件的则保留,保留的是后代。而has()方法中,参数只做为条件,符合条件的,它的前元素加入新的结果集,而不是后代加入新的结果集。

由上面可以看出,filter()是对选中的元素集合操作,得到这些元素中符合条件的元素,而find()是得到选中元素 ,作用于后代,has()则是作为判断,作用于自身。