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. elasticsearch 拼音检索能力研究

    gitchennan/elasticsearch-analysis-lc-pinyin 配置参数少,功能满足需求. 对应版本 elasticsearch2.3.2 对应 elasticsearch-a ...

  2. 温度转换-java

    java 温度转换 题目内容: 写一个将华氏温度转换成摄氏温度的程序,转换的公式是: °F = (9/5)*°C + 32 其中C表示摄氏温度,F表示华氏温度. 程序的输入是一个整数,表示华氏温度.输 ...

  3. highcharts 获取不到隐藏容器大小

    1.固定图表大小 2.图表容器div的resize(绑定一个始终显示的,可以影响所有图表的) 影响容器大小改变的: 窗口大小改变 侧边栏切换 滚动条切换

  4. 百度前端代码规范：HTML

    HTML 1.代码风格 1.1缩进与换行 [强制] 使用 4 个空格做为一个缩进层级,不允许使用 2 个空格 或 tab 字符. <style> ul { padding:; } < ...

  5. 初学vue----动画过渡transition简单部分

    使用动画效果要用transition包裹,transition(<trsnsition name="xx"><div></div></tr ...

  6. Js强制转换

    Js强制转换 ParseInt(a,b):整型 只能放字符串,b为基数.声明前面的数是几进制.因为只能放字符串,所以无论放什么都转换为字符串: 如果String以0x开头则为16进制的整数: ‘036 ...

  7. terminal、Shell、tty和console

    最早的电脑有带很多开关和指示灯的面板——console(概念来自管风琴),一台电脑通常一个Console,化为主机一部分,和CPU共享机柜. 一台大型主机往往支持多用户,每个用户使用的终端——term ...

  8. ubuntu 16.04 安装 网易云

    现在网易云官网上下载对应版本 文件名:netease-cloud-music_1.0.0-2_amd64_ubuntu16.04.deb 进入下载目录: 正常安装会出现错误 解决的办法是换源 换源教程 ...

  9. PTA——组合数

    PTA 7-48 求组合数 #include<stdio.h> double fact(int n); int main() { int m,n; int c; scanf("% ...

  10. Elasticsearch5.5.1学习笔记

    在linux下增加ik分词 一.下载分词器安装包 wget https://github.com/medcl/elasticsearch-analysis-ik/releases/download/v ...