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 分别用三种不同的 ...
随机推荐
- componentWillMount和componentDidMount的区别
1.componentWillMount 将要装载,在render之前调用: componentDidMount,(装载完成),在render之后调用 2.componentWillMount 每 ...
- $inject
function breadcrumb($parse, store) { } // 为了压缩 breadcrumb.$inject = ['$parse', 'breadcrumbStore']
- jwt 接口加密
什么是JWT Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC 7519).该token被设计为紧凑且安全的,特别适用于分布式站点 ...
- linux自启动tomcat
第一种方式 1.修改脚本文件rc.local:vim /etc/rc.d/rc.local 这个脚本是使用者自定的开机启动程序,可以在里面添加想在系统启动之后执行的脚本或者脚本执行命令 2.添加如下内 ...
- CNN+BLSTM+CTC的验证码识别从训练到部署
项目地址:https://github.com/kerlomz/captcha_trainer 1. 前言 本项目适用于Python3.6,GPU>=NVIDIA GTX1050Ti,原mast ...
- mysql查询中AND与OR注意事项
在查询的where条件中,and要优于or 如果要改变优先级, 需要在最小逻辑判断的条件外加括号(),例如: select * from `table_name` where (`type` = 1 ...
- 1.2.3 Excel中姓名处理，将名加密星号
在对应的单元格中我们输入公式: =IF(LEN(A22)>2,REPLACE(A22,2,LEN(A22)-1,"**"),REPLACE(A22,2,LEN(A22)-1, ...
- LOJ 3059 「HNOI2019」序列——贪心与前后缀的思路+线段树上二分
题目:https://loj.ac/problem/3059 一段 A 选一个 B 的话, B 是这段 A 的平均值.因为 \( \sum (A_i-B)^2 = \sum A_i^2 - 2*B \ ...
- Guava 1:概览
一.引言 都说java是开源的,但是除了JDK外,能坚持更新且被广泛认可的开源jar包实在是不可多得.其中最显眼的自然是guava了,背靠google自然底气十足,今天就来解开guava的面纱,初探一 ...
- golang垃圾回收和SetFinalizer
golang自带内存回收机制--GC.GC通过独立的进程执行,它会搜索不再使用的变量,并释放.需要注意的是,进行GC会占用机器资源. GC是自动进行的.如果要手动进行GC,可以调用runtime.GC ...