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 相关文章推荐
重写document.write实现无阻塞加载js广告(补充)
Dec 12 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
Jul 01 Javascript
javascript遇到html5的一些表单属性
Jul 05 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
Aug 26 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 Javascript
Vue.js 插件开发详解
Mar 29 Javascript
JavaScript的数据类型转换原则(干货)
Mar 15 Javascript
详解小程序缓存插件(mrc)
Aug 17 Javascript
详解关于element el-button使用$attrs的一个注意要点
Nov 09 Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 Javascript
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
ASP知识讲座四
2006/10/09 PHP
PHP面向对象分析设计的61条军规小结
2010/07/17 PHP
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
PHP发送短信代码分享
2015/08/11 PHP
浅谈JavaScript中面向对象技术的模拟
2006/09/25 Javascript
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
vue遍历生成的输入框 绑定及修改值示例
2019/10/30 Javascript
vue 解除鼠标的监听事件的方法
2019/11/13 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
[03:12]完美世界DOTA2联赛PWL DAY7集锦
2020/11/06 DOTA
python抓取网页图片示例(python爬虫)
2014/04/27 Python
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
python中字符串前面加r的作用
2015/06/04 Python
python3中str(字符串)的使用教程
2017/03/23 Python
Python反射用法实例简析
2017/12/22 Python
python多进程读图提取特征存npy
2019/05/21 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
python re的findall和finditer的区别详解
2020/11/15 Python
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
2019/12/17 HTML / CSS
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
大学新生军训感言
2014/02/25 职场文书
百日安全活动总结
2014/05/04 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
幼儿园个人总结
2015/02/28 职场文书
2015年社区教育工作总结
2015/05/13 职场文书
小学生读书笔记范文
2015/06/30 职场文书
关于Numpy之repeat、tile的用法总结
2021/06/02 Python
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA