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 相关文章推荐
基于jquery ajax 用户无刷新登录方法详解
Apr 28 Javascript
jquery ajax 如何向jsp提交表单数据
Aug 23 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
Oct 25 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 Javascript
jQuery中库的引用方法
Jan 06 jQuery
详解vue 数据传递的方法
Apr 19 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
Oct 11 Javascript
Node.js实现批量下载图片简单操作示例
Jan 18 Javascript
vue-路由精讲 二级路由和三级路由的作用
Aug 06 Javascript
token 机制和实现方式
Dec 15 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通用防注入程序 推荐
2011/02/26 PHP
php除数取整示例
2014/04/24 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
解javascript 混淆加密收藏
2009/01/16 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
2015/08/28 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
JavaScript中0和""比较引发的问题
2016/05/26 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
React中的refs的使用教程
2018/02/13 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
ES6如何用一句代码实现函数的柯里化
2020/01/18 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
深入理解python中的浅拷贝和深拷贝
2016/05/30 Python
详解Python中类的定义与使用
2017/04/11 Python
python自动裁剪图像代码分享
2017/11/25 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例
2020/02/28 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
美国主要的特色咖啡和茶公司:Peet’s Coffee
2020/02/14 全球购物
最新英语专业学生求职信范文
2013/09/21 职场文书
应届生程序员求职信
2013/11/05 职场文书
物业工作计划书
2014/01/10 职场文书
2014年行政执法工作总结
2014/12/11 职场文书
应急管理工作总结2015
2015/05/04 职场文书
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL
Python数据结构之队列详解
2022/03/21 Python
星际争霸 Light vs Action 一场把教主看到鬼畜的比赛
2022/04/01 星际争霸
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL