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优化技巧(文件瘦身篇)
Jan 28 Javascript
读JavaScript DOM编程艺术笔记
Nov 15 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
Nov 18 Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 Javascript
详解Vue的ref特性的使用
Jan 24 Javascript
JavaScript高级程序设计之基本引用类型
Nov 17 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图片上传代码
2013/11/04 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
div模拟选择框示例代码
2013/11/03 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
js 性能优化之快速响应的用户界面
2017/02/15 Javascript
浅析bootstrap原理及优缺点
2017/03/19 Javascript
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
Python使用Paramiko模块编写脚本进行远程服务器操作
2016/05/05 Python
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
如何将python中的List转化成dictionary
2016/08/15 Python
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
python生成器推导式用法简单示例
2019/10/08 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
python+openCV对视频进行截取的实现
2020/11/27 Python
AE美国鹰美国官方网站:American Eagle Outfitters
2016/08/22 全球购物
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
竟聘演讲稿范文
2013/12/31 职场文书
社区党员公开承诺书
2014/08/30 职场文书
暑期社会实践心得体会
2014/09/02 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
2014年教育培训工作总结
2014/12/08 职场文书