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');
结果:
由此可见,只有第二个div里边有一个后代为intro的元素,所以find是寻找后代的。
用filter:
$('div').filter('.intro').css('background','pink');
结果:
filter()方法是指操作当前元素集合,过滤出所有类为intro的div元素。
用选择器测试每个元素本身(不是后代),符合选择器的元素包含在集合中,不符合的去掉(选择器就是起过滤作用),形成一个新的结果集。
用has():
$('div').has('.intro').css('color','blue');
结果:
has()方法中,参数只做为条件,符合条件的,它的前元素加入新的结果集,而不是后代加入新的结果集。
结论:
-find()方法是获得在当前结果集中每个元素的后代。参数(选择器、jquery集合或DOM元素)做为过滤条件,满足过滤条件的则保留,保留的是后代。而has()方法中,参数只做为条件,符合条件的,它的前元素加入新的结果集,而不是后代加入新的结果集。