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 分别用三种不同的 ...
随机推荐
- 2--Postman脚本介绍
Postman是访问各种API的客户端.它的强大之处在于其允许在对某一个request访问的之前和之后分别运行自定义的一段Javascript脚本,可以将数条request连结成一个流程完成一体化测试 ...
- How to create your iOS team provisioning profile ?
From Apple Developer: https://developer.apple.com/library/content/documentation/IDEs/Conceptual/AppS ...
- jQuery-2.DOM---节点插入
DOM内部插入append()与appendTo() 动态创建的元素是不够的,它只是临时存放在内存中,最终我们需要放到页面文档并呈现出来.那么问题来了,怎么放到文档上? 这里就涉及到一个位置关系,常见 ...
- 用CSS3制作尖角标签按钮样式
如图的效果.标签有背景色,且左侧有一个三角形,三角形中间有个白色的圆圈. 你一定在想这个效果是背景图切出来的吧——答案是没有用到任何图片 那你会不会在想这个效果的html结构很复杂呢——答案是最简单的 ...
- MySQL 5.7以上 root用户默认密码问题【转】
https://www.yanning.wang/archives/379.html 废话少说一句话系列: CentOS系统用yum安装MySQL的朋友,请使用 grep "temporar ...
- python 多协程异步IO爬取网页加速3倍。
from urllib import request import gevent,time from gevent import monkey#该模块让当前程序所有io操作单独标记,进行异步操作. m ...
- #考研笔记#计算机之PPT问题
PPT1． 幻灯片母版.版式.模板之间的联系与区别?见下 12 2． 占位符的意义用于幻灯片上,就表现为一个虚框,虚框内部往往有“单击此处添加标题”之类的提示语,一旦鼠标点击之后,提示语会自动消失.当 ...
- vim粘贴缩进问题
vim不支持直接从其他应用复制内容粘贴过来,而是模拟用户键盘输入来实现的,一般设置vim在换行时自动以上一行的的缩进为初始位置,这样就会导致复制过来的内容出现缩进错乱. set paste 解决粘贴乱 ...
- ASP.NET资源大全-知识分享 【转载】
API 框架 NancyFx:轻量.用于构建 HTTP 基础服务的非正式(low-ceremony)框架,基于.Net 及 Mono 平台.官网 ASP.NET WebAPI:快捷创建 HTTP 服务 ...
- vs2010安装的一些问题
VS安装出现的问题一般如果出现了 基本就不会安装成功.问题出现的原因有:w7系统的版本,有些可能会安装失败,其次就是你卸载的时候不要把相应 的库及.net的库卸载 后面再安装就容易出错.这个是安装 ...