基于jquery的has()方法以及与find()方法以及filter()方法的区别详解


Posted in Javascript onApril 26, 2013

has(selector选择器或DOM元素)   将匹配元素集合根据选择器或DOM元素为条件,检索该条件在每个元素的后代中是否存在,将符合条件的的元素构成新的结果集。

下面举一个例子:

<ul>
  <li>list item 1</li>
  <li>list item 2
    <ul>
      <li><div><span>a</span></div>list item 2-a</li>
      <li>list item 2-b</li>
    </ul>
  </li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>

$('li').has('span').css('background-color', 'red');

得到的结果如下:

基于jquery的has()方法以及与find()方法以及filter()方法的区别详解

这个例子可以看出:在匹配li时,要检查该li的后代元素中是否包含了span,如果包含,则该元素包含在结果中。如果不包含,那么就排除。

注意:has只起判断作用。以has参数中的选择器或DOM元素做为条件,检测原结果集中的元素是否符合。去掉不符合的元素,将符合的元素构成一个新结果集。

这与find()方法不同,find()方法是获得在当前结果集中每个元素的后代。参数(选择器、jquery集合或DOM元素)做为过滤条件,满足过滤条件的则保留,保留的是后代。而has()方法中,参数只做为条件,符合条件的,它的前元素加入新的结果集,而不是后代加入新的结果集。

$('li').find('span').css('background-color', 'red');

结果为:

基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
filter()方法与has()方法中的参数,都是过滤条件。不同的是filter()方法,条件作用于自身;has()方法条件是作用于它的后代元素中。

以下面的例子为例:filter()方法中,条件作用于自身li,has()方法条件是作用于li的后代元素

<ul>
  <li class="a">list item 1</li>
  <li>list item 2
    <ul>
      <li><div><span>a</span></div>list item 2-a</li>
      <li>list item 2-b</li>
    </ul>
  </li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>

$('li').filter('.a').css('background-color', 'red');

结果为:

基于jquery的has()方法以及与find()方法以及filter()方法的区别详解

Javascript 相关文章推荐
JavaScript中判断函数是new还是()调用的区别说明
Apr 07 Javascript
JS操作数据库的实例代码
Oct 17 Javascript
js中直接声明一个对象的方法
Aug 10 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
基于JS2Image实现圣诞树代码
Dec 24 Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 Javascript
微信小程序 地图定位简单实例
Oct 14 Javascript
jquery checkbox的相关操作总结
Oct 17 Javascript
bootstrap中模态框、模态框的属性实例详解
Feb 17 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
Aug 30 Javascript
three.js欧拉角和四元数的使用方法
Jul 26 Javascript
javascript canvas封装动态时钟
Sep 30 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
Apr 26 #Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
Apr 26 #Javascript
关于jquery.validate1.9.0前台验证的使用介绍
Apr 26 #Javascript
jQuery.Validate验证库的使用介绍
Apr 26 #Javascript
基于jQuery.Validate验证库知识点的详解
Apr 26 #Javascript
关于jQuery新的事件绑定机制on()的使用技巧
Apr 26 #Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 #Javascript
You might like
让PHP以ROOT权限执行系统命令的方法
2011/02/10 PHP
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
php常用文件操作函数汇总
2014/11/22 PHP
记Laravel调用Gin接口调用formData上传文件的实现方法
2019/12/12 PHP
Js 获取当前日期时间及其它操作实现代码
2021/03/04 Javascript
jquery提示 &quot;object expected&quot;的解决方法
2009/12/13 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
2016/01/27 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
JavaScript如何实现跨域请求
2016/08/05 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
ionic2 tabs使用 Modal底部tab弹出框
2016/12/30 Javascript
详谈jQuery.load()和Jsp的include的区别
2017/04/12 jQuery
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
package.json文件配置详解
2017/06/15 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
2017/11/03 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
Python语言编写电脑时间自动同步小工具
2013/03/08 Python
python如何重载模块实例解析
2018/01/25 Python
python如何将图片转换为字符图片
2020/08/19 Python
Python生成任意范围任意精度的随机数方法
2018/04/09 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
对django2.0 关联表的必填on_delete参数的含义解析
2019/08/09 Python
python取均匀不重复的随机数方式
2019/11/27 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例
2020/02/28 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
贝佳斯官方网站:Borghese
2020/05/08 全球购物
装配车间主任岗位职责
2015/04/08 职场文书
2015年化验员工作总结
2015/04/10 职场文书
单位介绍信格式范文
2015/05/04 职场文书