基于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实例教程(19) 使用HoTMetal(6)
Dec 23 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
javascript中的循环语句for语句深入理解
Apr 04 Javascript
JavaScript实现数字数组按照倒序排列的方法
Apr 06 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
JS图片放大效果简单实现代码
Sep 08 Javascript
基于JS实现的随机数字抽签实例
Dec 08 Javascript
vue监听对象及对象属性问题
Aug 20 Javascript
Vue表单控件绑定图文详解
Feb 11 Javascript
validform表单验证的实现方法
Mar 08 Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 Javascript
浅谈react路由传参的几种方式
Mar 23 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 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
jQuery Ajax页面局部加载方法汇总
2016/06/02 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
python网络爬虫学习笔记(1)
2018/04/09 Python
Pycharm代码无法复制,无法选中删除,无法编辑的解决方法
2018/10/22 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
python爬虫scrapy框架的梨视频案例解析
2021/02/20 Python
matplotlib bar()实现百分比堆积柱状图
2021/02/24 Python
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
美国睫毛、眉毛精华液领导品牌:RevitaLash Cosmetics
2018/03/26 全球购物
全球性的女装店:storets
2019/06/12 全球购物
酒店管理毕业生自荐信
2013/10/24 职场文书
超市国庆节促销方案
2014/02/20 职场文书
优秀经理获奖感言
2014/03/04 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
大学迎新生标语
2014/10/06 职场文书
学生评语集锦
2015/01/04 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技