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. 温度转换-python

    #接收一段字符串 TempStr = input("请输入带有符号的温度值:") #如果 TS 最后一位是大写或是小写 f if TempStr[-1] in ['F','f']: ...

  2. Python全栈之路----类型转换

    显式转换 int(x [,base]) ⇒ 将x转换为一个十进制的整数 long(x [,base]) ⇒ 将x转换为一个十进制的长整数 float(x) ⇒ 将x转换为一个浮点数 str(objec ...

  3. CCF-权限查询-201612-3

    这道题,开始只有10分.....原因是将false 写成了 flase 我要吐血而亡....关键是还debug了半天,以为是逻辑错了 不过亮点是代码很简洁,网上140+的代码看着真复杂 核心: 做题之 ...

  4. Go语言判断if else语句

    基本格式: if 条件语句{ 执行语句 }else{ 执行语句 } package main import "fmt" func main(){ fmt.Println(Add(- ...

  5. 位运算 - 最短Hamilton路径

    给定一张 n 个点的带权无向图,点从 0~n-1 标号,求起点 0 到终点 n-1 的最短Hamilton路径. Hamilton路径的定义是从 0 到 n-1 不重不漏地经过每个点恰好一次. 输入格 ...

  6. 学习笔记TF042:TF.Learn、分布式Estimator、深度学习Estimator

    TF.Learn,TensorFlow重要模块,各种类型深度学习及流行机器学习算法.TensorFlow官方Scikit Flow项目迁移,谷歌员工Illia Polosukhin.唐源发起.Scik ...

  7. 深入学习Motan系列（四）—— 客户端

    困惑的袋鼠,对框架的把握有些茫然,但是仍然一步步向前,行动总比一直迷茫停止不前要好,您说呢,各位客官? 这篇开始客户端的分析.有些地方的代码,就不每段都标出了,中间有跳跃的地方,请自己对照代码来看.鄙 ...

  8. zombodb 几个方便的_cat api

    zombodb 暴露所有es _cat/ api 为视图,我们可以通过视图方便的查询es 的信息,默认在zdb的schema 中 包含的视图 几个方便的view 查看索引统计信息zdb.index_s ...

  9. 项目期复习：JS操作符，弹窗与调试，凝视，数据类型转换

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/huangyibin628/article/details/26364901 1.JS操作符 ① 除法 ...

  10. c++11模拟boost元占位符placeholder

    准备实现meta programming的fold函数,发现自己缺少占位符实现,这样传入fold的transform op类(元函数)都不得不另外写个外覆类,其实我觉得没啥不好,简单直接,说实话干扰什 ...