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 相关文章推荐
javascript实现仿银行密码输入框效果的代码
Dec 13 Javascript
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
Dec 02 Javascript
基于jquery的滚动新闻列表
Jun 19 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
May 28 Javascript
js不完美解决click和dblclick事件冲突问题
Jul 16 Javascript
JavaScript中对象property的读取和写入方法介绍
Dec 30 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
Oct 30 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
微信小程序实现tab和swiper切换结合效果
Jul 17 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
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
PHP4引用文件语句的对比
2006/10/09 PHP
php 代码优化的42条建议 推荐
2009/09/25 PHP
php5.5中类级别的常量使用介绍
2013/10/02 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
通过隐藏option实现select的联动效果
2009/11/10 Javascript
js控制frameSet示例
2013/09/10 Javascript
JQuery弹出层示例可自定义
2014/05/19 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
2017/03/10 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
angular共享依赖的解决方案分享
2020/10/15 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python牛刀小试密码爆破
2011/02/03 Python
完美解决python遍历删除字典里值为空的元素报错问题
2016/09/11 Python
Python实现将通信达.day文件读取为DataFrame
2018/12/22 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
python 解压、复制、删除 文件的实例代码
2020/02/26 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
校庆活动方案
2014/03/31 职场文书
2015年会计个人工作总结
2015/04/02 职场文书
超级实用的公文标题大全!
2019/07/19 职场文书