jquery之find,filter,has对比
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对比的更多相关文章
- Jquery中的filter()详细说明和transition的用法
filter() 方法将匹配元素集合缩减为匹配指定选择器的元素. 详细说明 如果给定表示 DOM 元素集合的 jQuery 对象,.filter() 方法会用匹配元素的子集构造一个新的 jQuery ...
- javascript的window.onload()方法和jQuery的$(document).ready()的对比
jQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 windo ...
- jquery find()和filter()的区别
在写js查找当前标签下某一子元素的子元素集合时,用到了此方法 $(".flyout-trigger").mouseover(function(){ var maxnum=$(thi ...
- jQuery ID与Class性能对比之一
最近一直在做网站的优化方面的工作,在实际优化的过程中逐渐发现yahoo的34条只能作为一个大的方向,除此之外还有很多地方值得前端工程师关注的.结合最近的优化体会及实地测试,现发出来一部分供大家批评指正 ...
- 主流Jquery弹出框优缺点对比
一:BoxXy 缺点:动态加载隐藏的内容层时,是复制操作,而不是引用原内容层,这样会出现两个一样的内容层,影响id,class的jquery操作 二:artdialog
- js数组遍历some,foreach,map,filter,every对比
1. [...].some(ck)函数 ---- 某个一个为true,则为true 对数组中每个元素执行一次ck函数,知道某个元素返回true,则直接返回true.如果都返回f ...
- jquery之过滤filter,not
<body> <h1>欢迎来到我的主页</h1> <p>我是唐老鸭</p> <p class="intro"> ...
- [jquery-ajax] jquery ajax 三种情况对比
<button class="btn1">async:false</button> <button class="btn2"> ...
- jQuery、Angluar、Avalon对比
最近在慕课网看一些关于avalon的视频,记录下一些笔记及代码实例以便日后自己复习可以用到,另外也可以给不想花时间看视频的小伙伴提供一丝丝帮助 这里主要是做一个简单的todolist 分别用三种不同的 ...
随机推荐
- 神州数码静态路由及直连网段引入到RIP协议配置（路由重定向）
实验要求:掌握静态路由及直连网段引入协议当中的配置 拓扑如下 R1 enable 进入特权模式 config 进入全局模式 hostname R1 修改名称 interface g0/6 进入端口 i ...
- 【草稿】实验室新手HandBook
PS:本文旨在给初入CV领域实验室的新手一个可供参考的学习列表,使得能够快速熟悉常用且必要的工具.
- Python全栈之路----函数----匿名函数
用lambda声明匿名函数,对lambda定义名字,才能被调用.下面的calc和func功能一致. def calc(x,y): return x*y func = lambda x,y: x*y # ...
- Python全栈之路----常用模块----time模块
time 模块的方法 time.time():返回当前时间的时间戳. >>> import time >>> time.time() #从1974年到现在过去了多少 ...
- CDI的分析
CDI是一组服务,它们一起使用,使开发人员可以轻松地在Web应用程序中使用企业bean和JavaServer Faces技术.CDI设计用于有状态对象,还有许多更广泛的用途,允许开发人员以松散耦合但类 ...
- list实现大整数加法
#include<iostream> #include<list> #include<string> using namespace std; list<in ...
- Google - Reconstruct To Chain
/* 4. 给你一串input,比如: A -> B B -> C X -> Y Z -> X . . . 然后让你设计一个data structure来存这些关系,最后读完了 ...
- ARTIFICIAL INTELLIGENCE FOR GAMES (Ian Millington / John Funge 著)
相关网站:http://www.ai4g.com PART I AI AND GAMESCHAPTER1 INTRODUCTIONCHAPTER2 GAME AIPART II TECHNIQUESC ...
- 算法图解 (Aditya Bhargava 著)
第1章 算法简介第2章 选择排序第3章 递归第4章 快速排序第5章 散列表第6章 广度优先搜索第7章 狄克斯特拉算法第8章 贪婪算法第9章 动态规划第10章 K最近邻算法第11章 接下来如何做 第1章 ...
- OpenResty 最佳实践 lua与nginx的结合 --引用自https://moonbingbing.gitbooks.io/openresty-best-practices/content/
系统的说明了lua在nginx上的开发 请大家到源址查看 OpenResty最佳实践