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 相关文章推荐
用正则表达式 动态创建/增加css style script 兼容IE firefox
Mar 10 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
Aug 01 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
Dec 30 Javascript
JS Replace 全部替换字符的用法小结
Dec 24 Javascript
8个实用的jQuery技巧
Mar 04 Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 Javascript
Node中使用ES6语法的基础教程
Jan 05 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
Mar 01 Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
Mar 28 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
Jul 02 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 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
php分页函数
2006/07/08 PHP
php实现session自定义会话处理器的方法
2015/01/27 PHP
PHP之预定义接口详解
2015/07/29 PHP
PHP实现上传多文件示例代码
2017/02/20 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
jquery tools之tabs 选项卡/页签
2009/07/25 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
Jquery easyUI 更新行示例
2014/03/06 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
Vue.js实现文章评论和回复评论功能
2020/05/30 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
Python open()文件处理使用介绍
2014/11/30 Python
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
python面试题小结附答案实例代码
2019/04/11 Python
BCBG官网:BCBGMAXAZRIA
2017/12/29 全球购物
泰国国际航空公司官网:Thai Airways International
2019/12/04 全球购物
写自荐信要注意什么
2013/12/26 职场文书
2015幼儿园新学期寄语
2015/02/27 职场文书
试用期自我评价范文
2015/03/10 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
导游词之无锡梅园
2019/11/28 职场文书
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技
HTTP中的Content-type详解
2022/01/18 HTML / CSS