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. iOS动画学习

    学习一下动画,感谢以下大神的文章:    UIView:基础动画.关键帧动画.转场动画 Core Animation :基础动画,关键帧动画,动画组,转场动画,逐帧动画 CALayer :CALaye ...

  2. JS的小判断

    // 0 if(undefined) { console.log('1'); } else { console.log('0'); } // 0 if(null) { console.log('1') ...

  3. 在Power BI报表和仪表板中显示刷新日期\时间

    有人最近问我:“如何在报告和仪表板中显示最后刷新数据的日期和时间?”这里有两个简单的技巧在这分享下,也许可以帮助到你. 显示上次刷新日期\时间 要想显示刷新的日期和时间,我们需要在模型本身中存储时间刷 ...

  4. easyui datagrid去掉全选按钮

    第一步: F12查看元素,选中全选按钮,把全选按钮的class里边加上display:none属性.找到对应的class,即.datagrid-header-check. 第二步: 在加载 表格的时候 ...

  5. 将struct转为map

    package main import ( "fmt" "reflect" "time" ) type User struct { Id i ...

  6. 简析Colorspace

    最近Colorspace成为了一个很高频的问题,很多Compositor为这个概念感到纠结,其实这是很正常的,因为Colorspace发展了很多年,也有很多种标准,最后还要落地到合成软件中,中间自然就 ...

  7. onOptionsItemSelected、onMenuItemSelected、onContextItemSelected 区别

         1.在点击选项菜单(OptionsMenu:点击menu弹出的菜单)的菜单项时即调用了onMenuItemSelected 也调用了onOptionsItemSelected ,于是疑惑他们 ...

  8. IDEA—— 找不到或无法加载主类Main

    最近使用idea,编写了一个项目,发现老是找不到main,网上找了一大圈的解决方案,都不行.灵机一动升级了jdk就可以了,之前用的是1.7的,换成了1.8的就好了.

  9. RE validator

    package com.office.utility;   import java.util.regex.Pattern;   /**  * 校验器:利用正则表达式校验邮箱.手机号等  *  * @a ...

  10. 导出Excel(Ext 前台部分)

    开发思路: - 序列化当前GridPanel 数据, 表头结构(用于对应关系), 通过控制器Aspose写到Excel中, 然后返回临时文件地址, 弹出窗口下载. function btnExport ...