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 相关文章推荐
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
jquery文字上下滚动的实现方法
Mar 22 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
Jul 22 Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
Mar 24 Javascript
利用npm 安装删除模块的方法
May 15 Javascript
Node.js使用supervisor进行开发中调试的方法
Mar 26 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
Aug 07 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 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 Undefined index的问题
2009/06/01 PHP
php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
2020/04/05 PHP
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
js简单实现竖向tab选项卡的方法
2015/05/04 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
基于javascript实现彩票随机数生成(升级版)
2020/04/17 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
fullPage.js和CSS3实现全屏滚动效果
2017/05/05 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
2017/05/20 Javascript
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
JS实现图片转换成base64的各种应用场景实例分析
2018/06/22 Javascript
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
[07:59]2014DOTA2叨叨刀塔 林熊猫称被邀请赛现场盛况震撼
2014/07/21 DOTA
Python贪吃蛇游戏编写代码
2020/10/26 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
2012/12/10 HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
软件生产职位结构化面试主要考察要素及面试题库
2015/06/12 面试题
新学期开学演讲稿
2014/05/24 职场文书
小学生常见病防治方案
2014/06/06 职场文书
实习生工作证明范本
2014/09/14 职场文书
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
大学生考试作弊检讨书1000字
2014/10/14 职场文书
班主任高考寄语
2015/02/26 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
会计求职信怎么写
2015/03/20 职场文书
美丽心灵观后感
2015/06/01 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python