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 创建对象和构造类实现代码
Jul 30 Javascript
复制js对象方法(详解)
Jul 08 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 Javascript
基于jQuery实现文字打印动态效果
Apr 21 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
随机生成10个不重复的0-100的数字(实例讲解)
Aug 16 Javascript
解析vue data不可以使用箭头函数问题
Jul 03 Javascript
create-react-app安装出错问题解决方法
Sep 04 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 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 编写安全的代码时容易犯的错误小结
2010/05/20 PHP
ThinkPHP中使用ajax接收json数据的方法
2014/12/18 PHP
PHP中PDO连接数据库中各种DNS设置方法小结
2016/05/13 PHP
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
JSON 数据格式详解
2017/09/13 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
layui实现左侧菜单点击右侧内容区显示
2019/07/26 Javascript
vue router 传参获取不到的解决方式
2019/11/13 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
python实现数独算法实例
2015/06/09 Python
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
Python 常用模块 re 使用方法详解
2019/06/06 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
Python基于内置函数type创建新类型
2020/10/22 Python
法国最大电子商务平台:Cdiscount
2018/03/13 全球购物
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
美国家庭鞋店:Shoe Sensation
2019/09/27 全球购物
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
银行员工职业规划范文
2014/01/21 职场文书
服装创业计划书范文
2014/02/05 职场文书
关于保护环境的建议书
2014/08/26 职场文书
高中生毕业评语
2014/12/30 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python