jQuery的parent和parents和closest区别
2015-09-20 23:28
513 查看
1、parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合。
2、parents则是取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选。
3、closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上。
可以看出parent取的很明确,就是当前元素的父元素;parents则是当前元素的祖先元素。下面列出例子说明:
<div id='div1'>
<div id='div2'><p></p></div>
<div id='div3' class='a'><p></p></div>
<div id='div4'><p></p></div>
</div>
$('p').parent()取到的是div2,div3,div4
$('p').parent('.a')取到的是div3
$('p').parent().parent()取到的是div1,这点比较奇特;不过Jquery对象本身的特点决定了这是可行的。
$('p').parents()取到的是div1,div2,div3,div4
$('p').parents('.a')取到的是div3
2、parents则是取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选。
3、closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上。
可以看出parent取的很明确,就是当前元素的父元素;parents则是当前元素的祖先元素。下面列出例子说明:
<div id='div1'>
<div id='div2'><p></p></div>
<div id='div3' class='a'><p></p></div>
<div id='div4'><p></p></div>
</div>
$('p').parent()取到的是div2,div3,div4
$('p').parent('.a')取到的是div3
$('p').parent().parent()取到的是div1,这点比较奇特;不过Jquery对象本身的特点决定了这是可行的。
$('p').parents()取到的是div1,div2,div3,div4
$('p').parents('.a')取到的是div3
.closest() | .parents() |
---|---|
从当前元素开始 | 从父元素开始 |
沿 DOM 树向上遍历,直到找到已应用选择器的一个匹配为止。 | 沿 DOM 树向上遍历,直到文档的根元素为止,将每个祖先元素添加到一个临时的集合;如果应用了选择器,则会基于该选择器对这个集合进行筛选。 |
返回包含零个或一个元素的 jQuery 对象 | 返回包含零个、一个或多个元素的 jQuery 对象 |
相关文章推荐
- 如何通过js和jquery获取图片真实的宽度和高度
- jQuery.extend 函数详解
- jQuery源码学习 之 类数组对象结构 ---- day3
- 【jQueryMobile】Helloworld而页面切换
- jquery动态添加以及遍历option并获取特定样式名称的option
- 使用Jquery+EasyUI 进行框架项目开发案例讲解之五 模块(菜单)管理源码分享
- 使用Jquery+EasyUI 进行框架项目开发案例讲解之四 组织机构管理源码分享
- 【笔记】jQuery基础课程(慕课)(上)
- jQeury插件 - 图片剪切器 (jQuery.jCutter)
- 关于 jQuery 中的 $.data() 方法和 jQuery 对象上的data 方法
- jQuery.Deferred(func)总结
- js、jQuery中常用的一些方法
- 解决jquery操作checkbox火狐下第二次无法勾选问题
- JQUERY 购物车
- 基于jQuery Circlr插件实现产品图片360度旋转
- 基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
- jQuery -> 获取各种滤芯(filter)
- Jquery easyui datagrid 删除多行问题
- jquery+正则实现统一的表单验证
- jquery学习笔记(一)—基础语法