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. SpringBoot的学习【1.初学之HelloWorld】

    1.创建Maven项目. 2.引入pom依赖 在springboot官网中找到简单的依赖模板 <parent> <groupId>org.springframework.boo ...

  2. Address localhost:1099 is already in use

    在 ItelliJ idea中创建了Servlet,启动tomcat时系统报错: Error running Tomcat 7.0.47: Address localhost:1099 is alre ...

  3. 统计php-fpm内存占用

    查看php-fpm的内存占用 1.查看php-fpm的进程个数 ps -ef |grep "php-fpm"|grep "pool"|wc -l 2.查看每个p ...

  4. Eclipse 护眼背景色设置

    链接地址:http://blog.chinaunix.net/uid-27183448-id-3509010.html 背景颜色推荐:色调:85,饱和度:123,亮度:205  文档都不再是刺眼的白底 ...

  5. 查询正在运行的请求及其后台对应SQL

    SELECT a.event , s.actual_start_date , a.sid, a.serial#, sa.sql_fulltext , sa.sql_text , v.user_conc ...

  6. SSM框架的配置

    主要是这三个配置文件 web.xml(用来加载和初始化下面的配置文件) applicationcontet.xml(就是Spring的配置文件,一般包括声明式失误等等AOP) Sprimgmvc,xm ...

  7. (翻译).NET应用架构

    .NET应用架构 Kalyan Bandarupalli著,hystar翻译 这个系列文章将帮助.NET开发人员与架构师使用最新的.NET技术设计高效的.NET应用.关于应用架构这方面虽然已有很多文章 ...

  8. zabbix安装、部署、lnmp（一）

    最近入手zabbix,准备好好的研究,好好的弄.   环境准备: mysql:5.6.29 PHP:5.6.12 Nginx:1.8.0 zabbix:3.2.6 操作系统:Centos6 用户:普通 ...

  9. 1.4 安装Linux系统

    按F2进入BIOS,设置通过[CD/ROM]启动,如果是真实计算机,安装完后还需要重新设置为[硬盘启动] 设置分区如下图所示:

  10. python 常用的模块

    面试的过程中经常被问到使用过那些python模块,然后我大脑就出现了一片空白各种模块一顿说,其实一点顺序也没有然后给面试官造成的印象就是自己是否真实的用到这些模块,所以总结下自己实际工作中常用的模块: ...