基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2023-09-27 14:24:31 时间
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>
jquery代码:
$('li').has('span').css('background-color', 'red');
效果:
这个例子可以看出:在匹配li时,要检查该li的后代元素中是否包含了span,如果包含,则该元素包含在结果中。如果不包含,那么就排除。
注意:has只起判断作用。以has参数中的选择器或DOM元素做为条件,检测原结果集中的元素是否符合。去掉不符合的元素,将符合的元素构成一个新结果集。
这与find()方法不同,find()方法是获得在当前结果集中每个元素的后代。参数(选择器、jquery集合或DOM元素)做为过滤条件,满足过滤条件的则保留,保留的是后代。而has()方法中,参数只做为条件,符合条件的,它的前元素加入新的结果集,而不是后代加入新的结果集。
$('li').find('span').css('background-color', 'red');
结果为:
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>
jQuery代码:
$('li').filter('.a').css('background-color', 'red');
结果为:
相关文章
- jquery.ui.widget.js
- Jquery 选择器 详解 js 判断字符串是否包含另外一个字符串
- VSCode调试Html中的脚本 vscode前端常用插件推荐,搭建JQuery、Vue等开发环境 vsCode 添加浏览器调试和js调试的方法总结 VS Code - Debugger for Chrome调试js
- jQuery on() 方法问题
- 使用jQuery的 load() 方法加载html公共模块
- 【深入浅出jQuery】源码浅析--整体架构
- 每日一学—jQuery css()方法
- JQuery 方法回调$callback
- 【推荐】10个既绚又实用的JQuery特效教程
- jQuery技术内幕:深入解析jQuery架构设计与实现原理1
- jQuery技术内幕:深入解析jQuery架构设计与实现原理. 2.8 静态属性和方法
- jquery遍历的json有两层list时的解决方法
- jquery创始人
- 总结ASP.NET MVC视图页使用jQuery传递异步数据的几种方式
- 使用jQuery异步传递Model到控制器方法,并异步返回错误信息
- Jquery 组 表单验证
- Jquery hover方法使用及 mouseenter与mouseleave和 mouseover与mouseout的区别
- JQuery的show方法执行调用以后,会秒退,并且返回上一个状态
- jquery 保留两个小数的方法
- JQuery this和$(this)的区别及获取$(this)子元素对象的方法
- jQuery的学习与实战,控制浏览器缩放
- jquery mobile 方法收集.
- jquery选择器玩得不6啊,只能慢慢写判断了,唉..........................
- 【web前端(四十六)】javascript_jquery详述
- 程序员们必备的10款免费jquery插件
- jquery 动态添加,降低input表单的方法
- jquery判断滚动条是否到底部
- jQuery HTML-设置