Jquery中的has、find、filter方法区别
find方法
find返回的是匹配结果集，作用于后代$(‘li’).find(‘.a’).css(‘background-color’, ‘red’);在li下面查找元素是否有class=a的元素，返回class=a的元素的集合。比如如下例子：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>
<script>
$("p").find("span").css('color','red');
</script>
</body>
</html>Hello, how are you?
Me? I’m good.
find方法返回的结果集是后面的结果集。即结果集。
has方法
has返回的是赛选结果集，作用于后代 has判断是否有，如果有则选中
$(‘li’).has(‘span’).css(‘background-color’, ‘red’);在li下面查找元素是否有has下面的元素，如果有，则返回赛选的集合。即返回所有满足条件的li(li下面有span的li)，例子：
<!DOCTYPE html>
<html>
<head>
<style>
.full { border: 1px solid red; }
</style>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<ul><li>Does the UL contain an LI?</li></ul>
<script>
$("ul").append("<li>" + ($("ul").has("li").length ? "Yes" : "No") + "</li>");
$("ul").has("li").addClass("full");
</script>
</body>
</html>
上面的效果就是查找ul下面是否有li，如果li则在赛选的ul中append一个li
标签。
filter方法
$('li'). filter('.a').css('background-color' , 'red');
不同的是filter()方法，条件作用于自身；has()方法条件是作用于它的后代元素中。
has和filter的作用范围不同而已，$("li").has(".topLine"), $("li").filter(".topLine");相同的是has返回的是后代满足class=topLine的自身li对象，filter则返回的是自身li 为class=topLine的元素。- 1
- 2
- 3
filter对自身的过滤。相当于$(‘li.a’)
find()会在div元素内 寻找 class为classname的元素。
filter()则是筛选div的class为classname的元素。
基本是find子元素找，filter是平级找
·find 函数是在当前对象集合的子元素中进行查询;
·filter 函数是对当前对象集合进行过滤, 利用过滤条件缩小范围;
·find 函数的参数是 jQuery 选择器表达式;
·filter 的参数也是选择器表达式, 但可以有多个条件, 用逗号分隔(逻辑或关系);
·filter 的参数也可以是个函数, 调用函数时会自动传入 index 参数, 函数需返回 true或false 以选中或排除元素.
Jquery中的has、find、filter方法区别的更多相关文章
- jQuery中bind方法和live方法区别解析
Javascript中的事件有它的独特性,有默认的执行事件,例如冒泡就是其中的一个.在很多比较复杂的应用程序中,停止事件的冒泡或捕获在程序开发当中是十分有用的,而在IE中有它的独特方式来阻止事件的冒泡 ...
- jQuery中的bind() live() delegate()之间区别分析
jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click', ...
- jquery中prop()方法和attr()方法
接着上一篇笔记的疑惑,找了下prop()方法和attr()方法的区别. 原来query1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. ...
- jquery中的this与$(this)的区别总结（this：html元素）（$(this)：JQuery对象）
jquery中的this与$(this)的区别总结(this:html元素)($(this):JQuery对象) 一.总结 1.this所指的是html 元素,有html的属性,可用 this.属性 ...
- js进阶 10-3 jquery中为什么用document.ready方法
js进阶 10-3 jquery中为什么用document.ready方法 一.总结 一句话总结: 1.document.ready和window.onload的区别:用哪个好? document. ...
- jquery中this与$(this)的用法区别
jquery中this与$(this)的用法区别.先看以下代码: $("#textbox").hover( function() { this.title = "Test ...
- 前端开发入门到进阶附录一【JQuery中parent()，parents()，parentsUntil()区别和使用技巧】
JQuery中parent(),parents(),parentsUntil()区别和使用技巧:https://blog.csdn.net/china1223/article/details/5193 ...
- JQuery中操作Css样式的方法
JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...
- 浅析jQuery中常用的元素查找方法总结
本篇文章是对jQuery中常用的元素查找方法进行了详细的总结和介绍,需要的朋友参考下 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文 ...
- 【转发】JQuery中操作Css样式的方法
JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...
随机推荐
- 【MDCC 2015】开源选型之Android三大图片缓存原理、特性对比
摘要:这是快的打车移动端架构师.Android 开源项目源码解析codeKK发起人 吴更新(@Trinea)在MDCC上分享的内容,从总体设计和原理上对几个图片缓存进行对比,没用到它们的朋友也可以了解 ...
- 探索C++虚函数在g++中的实现
本文是我在追查一个诡异core问题的过程中收获的一点心得,把公司项目相关的背景和特定条件去掉后,仅取其中通用的C++虚函数实现部分知识记录于此. 在开始之前,原谅我先借用一张图黑一下C++: “无敌” ...
- bzoj1609 / P2896 [USACO08FEB]一起吃饭Eating Together（最长不降子序列）
P2896 [USACO08FEB]一起吃饭Eating Together 显然的最长不升/降子序列,求出最长值,则答案为$n-$最长值(改掉剩下的). 复杂度$O(nlogn)$ (然鹅有神仙写了$ ...
- 一个PE文件的逆向分析
一个PE文件的逆向分析 idf-ctf上有个题,是PE文件的逆向,反正对我来说做出来就是有意思的题,做不出来就没劲.言归正传,下面看一下吧 大家想玩可以去这个地方去拿题http://pan.baidu ...
- zabbix负载均衡群集高可用架构
由于服务器资源限制,将MySQL服务放在zabbix服务器上,生产环境应尽量分开
- Flask 4 拓展
NOTE 1.Flask被设计为可拓展模式,所以没有提供如数据库和用户认证等重要的功能,允许开发者按需开发. 2.使用Flask-Script支持命令行选项: 安装flask-script: pip ...
- zeptojs库解读1之整体框架
首先看的是整体框架, // zepto骨骼,这个函数的作用使得Zepto(slector, context)使用很多$.fn里面的方法 var Zepto = (function(){ // zept ...
- PostgreSql 其它客户端连接
在 PATH_TO_YOUR_PostGreSQL/data/pg_hba.conf 加上红色那行,重启postgre的service就能让其它人连你的数据库了. host all all 127.0 ...
- rspec-rails中的一些匹配器只有在特定的类型才能使用。
请求测试 ) expect(response).not_to have_http_status(:created) Model Specs描述模型的行为,一般基于数据库. Request Spec 主 ...
- windows下的IO模型之选择（select）模型
1.选择(select)模型:选择模型:通过一个fd_set集合管理套接字,在满足套接字需求后,通知套接字.让套接字进行工作. 选择模型的核心是FD_SET集合和select函数.通过该函数,我们可以 ...