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 & DHTML 实例编程(教程)DOM基础和基本API
Jun 02 Javascript
JS简单操作select和dropdownlist实例
Nov 26 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
Feb 26 Javascript
JavaScript 函数模式详解及示例
Sep 07 Javascript
Js实现中国公民身份证号码有效性验证实例代码
May 03 Javascript
angular select 默认值设置方法
Jun 23 Javascript
详解webpack babel的配置
Jan 09 Javascript
Vue项目使用CDN优化首屏加载问题
Apr 01 Javascript
JSON字符串操作移除空串更改key/value的介绍
Jan 05 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 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的一个登录的类 [推荐]
2007/03/16 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
java解析json方法总结
2019/05/16 PHP
PHP如何将图片文件上传到另外一台服务器上
2019/08/26 PHP
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
jQuery 遍历函数详解
2015/07/05 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
js实现多张图片延迟加载效果
2017/07/17 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
详解React项目中碰到的IE问题
2019/03/14 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
Element Backtop回到顶部的具体使用
2020/07/27 Javascript
python pandas 组内排序、单组排序、标号的实例
2018/04/12 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
英国领先的亚洲旅游专家:Wendy Wu Tours
2018/01/21 全球购物
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
大学生简历中个人的自我评价
2013/10/06 职场文书
成绩单家长评语大全
2014/04/16 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
邀请函怎么写
2015/01/30 职场文书
2015学生会文艺部工作总结
2015/04/03 职场文书
家庭暴力离婚起诉书
2015/05/18 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书
思想品德课教学反思
2016/02/24 职场文书
JS前端宏任务微任务及Event Loop使用详解
2022/07/23 Javascript