博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
has(),find()以及filter()方法的区别
阅读量:5746 次
发布时间:2019-06-18

本文共 1039 字,大约阅读时间需要 3 分钟。

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');

得到的结果如下:

这个例子可以看出:在匹配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>

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

结果为:

转载地址:http://sjazx.baihongyu.com/

你可能感兴趣的文章
Android 开发应该掌握的 Proguard 技巧
查看>>
是时候放弃 Spark Streaming, 转向 Structured Streaming 了 ...
查看>>
企业级 Spring Boot 教程 (十七)上传文件
查看>>
sqli-labs 下载、安装
查看>>
RouteReuseStrategy angular路由复用策略详解,深度刨析路由复用策略
查看>>
Kubernetes API 分析 ( Kube-apiserver )
查看>>
4-学会刷Wi-Fi模块固件(刷AT指令固件)
查看>>
ASP.NET Core 2 学习笔记(五)静态文件
查看>>
Button 使用Command 按钮置灰未更新
查看>>
PostgreSQL控制台以竖行显示
查看>>
Java SSM 客户管理 商户 管理系统 库存管理 销售报表 项目源码
查看>>
排序优化——如何实现一个通用的、高性能的排序函数
查看>>
js中bind、call、apply函数的用法
查看>>
OC高效率52之多用GCD,少用performSelector系列方法
查看>>
sqoop导入关系型数据库-解密Sqoop
查看>>
语音分享应用ios源码项目
查看>>
性能测试结果分析
查看>>
Linux-dns基础知识和BIND的简单配置-1
查看>>
kafka Corrupt index found
查看>>
PoE
查看>>