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()方法中，参数只做为条件，符合条件的，它的前元素加入新的结果集，而不是后代加入新的结果集。

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

jquery之find,filter,has对比的更多相关文章

  1. Jquery中的filter()详细说明和transition的用法

    filter() 方法将匹配元素集合缩减为匹配指定选择器的元素. 详细说明 如果给定表示 DOM 元素集合的 jQuery 对象,.filter() 方法会用匹配元素的子集构造一个新的 jQuery ...

  2. javascript的window.onload()方法和jQuery的$(document).ready()的对比

    jQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 windo ...

  3. jquery find()和filter()的区别

    在写js查找当前标签下某一子元素的子元素集合时,用到了此方法 $(".flyout-trigger").mouseover(function(){ var maxnum=$(thi ...

  4. jQuery ID与Class性能对比之一

    最近一直在做网站的优化方面的工作,在实际优化的过程中逐渐发现yahoo的34条只能作为一个大的方向,除此之外还有很多地方值得前端工程师关注的.结合最近的优化体会及实地测试,现发出来一部分供大家批评指正 ...

  5. 主流Jquery弹出框优缺点对比

    一:BoxXy 缺点:动态加载隐藏的内容层时,是复制操作,而不是引用原内容层,这样会出现两个一样的内容层,影响id,class的jquery操作 二:artdialog

  6. js数组遍历some,foreach,map,filter,every对比

    1.  [...].some(ck)函数       ----      某个一个为true,则为true 对数组中每个元素执行一次ck函数,知道某个元素返回true,则直接返回true.如果都返回f ...

  7. jquery之过滤filter,not

    <body> <h1>欢迎来到我的主页</h1> <p>我是唐老鸭</p> <p class="intro"> ...

  8. [jquery-ajax] jquery ajax 三种情况对比

    <button class="btn1">async:false</button> <button class="btn2"> ...

  9. jQuery、Angluar、Avalon对比

    最近在慕课网看一些关于avalon的视频,记录下一些笔记及代码实例以便日后自己复习可以用到,另外也可以给不想花时间看视频的小伙伴提供一丝丝帮助 这里主要是做一个简单的todolist 分别用三种不同的 ...

随机推荐

  1. element ui表格相同内容自动合并

    一开始觉得合并单元格很困难,什么鬼,后来仔细查看api,发现是可以实现的,特此记录下,直接看代码, 项目需求是第一列和第二列还有第16列需要相同内容进行合并,所以判断条件是不同的: 实现后效果如下: ...

  2. vue 安卓5.1 ios9 兼容性 白屏问题

    // 针对安卓4.4/ios的兼容 import 'babel-polyfill' import Es6Promise from 'es6-promise' require('es6-promise' ...

  3. SQL注入之Sqli-labs系列第三十三关（基于宽字符逃逸注入）

    开始挑战第三十三关(Bypass addslashes) 0x1查看源码 本关和第三十二关其实是一样的,只是这里用到了addslashes()函数 function check_addslashes( ...

  4. CentOS6.5上安装MySQL

    1.查看操作系统的相关信息 2.查看系统上所有MySQL的rpm包并删除 [root@master ~]# rpm -qa | grep -i mysql [root@masterc ~]# yum ...

  5. .net4.0调用非托管DLL的异常捕获

    转发: 由于有些非托管的DLL内部异常未有效处理,当托管程序调用到这样的DLL时,就引起托管程序意外退出. 托管程序使用通常的捕获try……catch块不起作用.原因是.NET 4.0里新的异常处理机 ...

  6. oracle 简单crud

    -- 商品表 -- CREATE TABLE "SCOTT"."GOODS" ( "id" NUMBER NOT NULL, "n ...

  7. SELinux初探

  8. java中URL和File的相互转化

    首先,想比较一下这两者的不同.URL用于网络,所以带有明显的protocol,而且对于中文及符号支持的很不好.File就是我们平常系统中的文件路径了,对于中文及符号都支持,但是已经没有protocol ...

  9. jmeter 关联

    (1)正则表达式提取器 注:正则表达式部分配置说明 案例: 动态值:name=userSession value=119828.306682868zVzDzzipfcfDzQicpAVVVf> ...

  10. PostgreSQL获取所有表名、字段名、字段类型、注释

    转载自:http://blog.csdn.net/cicon/article/details/51577655 获取表名及注释: select relname as tabname,cast(obj_ ...