jQuery中closest和parents的区别分析


Posted in Javascript onMay 07, 2015

jQuery中closest和parents从表现上来看都是说查找上线元素的一些内容了,但如果说仔细可能各位不懂,下面我们一起来看看closest和parents区别。

1.父级

parent()——唯一父级元素,可能是0个或1个元素。

2.祖先

parents(selected)——所有selected祖先(不包含根元素),可能是0个、1个或多个元素。
closest(selected)——唯一selected祖先,可能是0个或1个元素。
closest和parents的主要区别是:

前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找;

前者逐级向上查找,直到发现匹配的元素后就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤;

前者返回0或1个元素,后者可能包含0个,1个,或者多个元素。

closest对于处理事件委托非常有用。

总结

1、closest查找开始于自身,parents开始于元素父级
2、closest向上查找,知道找到一个匹配就停止查找,parents一直查找到根元素,并将匹配的元素加入集合
3、closest返回的是包含零个或一个元素的jquery对象,parents返回的是包含零个或一个或多个元素的jquery对象

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
js 手机号码合法性验证代码集合
Sep 29 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
JavaScript中子对象访问父对象的方式详解
Sep 01 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
Sep 20 Javascript
JavaScript正则获取地址栏中参数的方法
Mar 02 Javascript
vue左右侧联动滚动的实现代码
Jun 06 Javascript
JavaScript函数定义方法实例详解
Mar 05 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
Apr 19 Javascript
简单学习5种处理Vue.js异常的方法
Jun 17 Javascript
node.js中module模块的功能理解与用法实例分析
Feb 14 Javascript
JS的时间格式化和时间戳转换函数示例详解
Jul 27 Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
May 07 #Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 #Javascript
JavaScript更改字符串的大小写
May 07 #Javascript
JQUERY简单按钮轮换选中效果实现方法
May 07 #Javascript
JS基于面向对象实现的放烟花效果
May 07 #Javascript
jquery中trigger()无法触发hover事件的解决方法
May 07 #Javascript
javascript实现的图片切割多块效果实例
May 07 #Javascript
You might like
全文搜索和替换
2006/10/09 PHP
php Static关键字实用方法
2010/06/04 PHP
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
一个PHP针对数字的加密解密类
2014/03/20 PHP
PHP遍历目录并返回统计目录大小
2014/06/09 PHP
PHP图形计数器程序显示网站用户浏览量
2016/07/20 PHP
PHP实现微信商户支付企业付款到零钱功能
2018/09/30 PHP
php workerman定时任务的实现代码
2018/12/23 PHP
PHP SESSION机制的理解与实例
2019/03/22 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
PHP手机号码及邮箱正则表达式实例解析
2020/07/11 PHP
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
Uploadify上传文件方法
2016/03/16 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
DOM 事件的深入浅出(一)
2016/12/05 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
原生js实现简单的链式操作
2017/07/04 Javascript
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
Python一行代码实现快速排序的方法
2019/04/30 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
python如何实现数据的线性拟合
2019/07/19 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
Python错误的处理方法
2020/06/23 Python
电厂职工自我鉴定
2014/02/20 职场文书
三方协议书范本
2014/04/22 职场文书
2015年员工工作表现评语
2015/03/25 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
建房合同协议书
2016/03/21 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery
golang 实现两个结构体复制字段
2021/04/28 Golang
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技