jquery parent和parents的区别分析


Posted in Javascript onOctober 02, 2013

可以看出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
parent(exp)用法:取得一个包含着所有匹配元素的唯一父元素的元素集合。
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(document).ready(function() {
$("#btn1").click(function(){
alert($(this).parent().next().html());
});
});
</script> 
</head> 
<body> 
<table>
<tr>
      <td><input id="btn1"  class="btn" type="button"  value="test" /></td>
      <td>some text</td>
</tr>
</table>

其中:
this.parent()是input前面的td
this.parent().parent()获取的是tr
this.parent().parent().parent()获取的是table
this.parent().next()获取的是td相临的td
例子中:
<div><p>Hello</p><p>Hello</p></div>
$("p").parent() 得到的是:<div><p>Hello</p><p>Hello</p></div>对象,因为p标签的父标签是div
Javascript 相关文章推荐
JQuery 学习笔记 选择器之六
Jul 23 Javascript
js setattribute批量设置css样式
Nov 26 Javascript
jquery根据name属性查找的小例子
Nov 21 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
jQuery前端框架easyui使用Dialog时bug处理
Dec 05 Javascript
js禁止页面刷新与后退的方法
Jun 08 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
Oct 30 Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
Dec 30 Javascript
jQuery实现日历效果
Sep 11 jQuery
vue 自定义组件添加原生事件
Apr 21 Vue.js
jQuery插件 selectToSelect使用方法
Oct 02 #Javascript
jquery定时滑出可最小化的底部提示层特效代码
Oct 02 #Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 #Javascript
基于JQuery的列表拖动排序实现代码
Oct 01 #Javascript
Javascript 颜色渐变效果的实现代码
Oct 01 #Javascript
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 #Javascript
javascript不可用的问题探究
Oct 01 #Javascript
You might like
PHP中数组的分组排序实例
2014/06/01 PHP
php判断一个数组是否为有序的方法
2015/03/27 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
JavaScript实现的in_array函数
2014/08/27 Javascript
详解javascript中原始数据类型Null和Undefined
2015/12/17 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
Bootstrap组合上、下拉框简单实现代码
2017/03/06 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
2017/03/10 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
2019/07/04 jQuery
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
python执行子进程实现进程间通信的方法
2015/06/02 Python
Python微信库:itchat的用法详解
2017/08/14 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
Redbubble法国:由独立艺术家设计的独特产品
2019/01/08 全球购物
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
历史教育专业个人求职信
2013/12/13 职场文书
初中生操行评语大全
2014/04/24 职场文书
环境日宣传活动总结
2014/07/09 职场文书
读群众路线的心得体会
2014/09/03 职场文书
创新社会管理心得体会
2014/09/12 职场文书
2014年技术部工作总结
2014/12/12 职场文书
公司借款担保书
2015/09/22 职场文书
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript