find()方法找的是符合条件的后代,返回的是子元素。
$('div').find('.intro').css('color','red'); //寻找div后代类为intro的元素
filter()过滤DOM元素包装集,是指操作当前元素集,删除不匹配的元素,得到一个新的集合
$('div').filter('.intro').css('background','pink'); //过滤出所有类为intro的div
find()是对后代操作,改变的是后代。
filter()是对自身集合元素操作。
测试:
1 <body> 2 <h1>欢迎来到我的主页</h1> 3 <div>我是唐老鸭</div> 4 <div> 5 <p class="intro">我住在duckburg</p> 6 </div> 7 <div class="intro"> 8 <p>我爱duck</p> 9 </div> 10 <div>我最好的朋友是monkey</div> 11 </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()方法中,参数只做为条件,符合条件的,它的前元素加入新的结果集,而不是后代加入新的结果集。