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 相关文章推荐
js操作滚动条事件实例
Jan 29 Javascript
jQuery判断元素上是否绑定了指定事件的方法
Mar 17 Javascript
jQuery插件制作的实例教程
May 16 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
AngularJS实现自定义指令及指令配置项的方法
Nov 20 Javascript
vue实现自定义日期组件功能的实例代码
Nov 06 Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
Aug 20 Javascript
javaScript把其它类型转换为Number类型
Oct 13 Javascript
js 解析 JSON 数据简单示例
Apr 21 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
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
PHP引用的调用方法分析
2016/04/25 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
php array_keys 返回数组的键名
2016/10/25 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
自写简单JS判断是否已经弹出页面
2010/10/20 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
2016/06/12 Javascript
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
浅谈Vue render函数在ElementUi中的应用
2018/09/06 Javascript
jquery向后台提交数组的代码分析
2020/02/20 jQuery
Vue实现附件上传功能
2020/05/28 Javascript
Python使用CMD模块更优雅的运行脚本
2015/05/11 Python
python统计文本文件内单词数量的方法
2015/05/30 Python
Numpy掩码式数组详解
2018/04/17 Python
python 以16进制打印输出的方法
2018/07/09 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
使用Scrapy爬取动态数据
2018/10/21 Python
python将数组n等分的实例
2019/12/02 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
耐克中国官方商城:Nike中国
2018/10/18 全球购物
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
C#面试常见问题
2013/02/25 面试题
国贸专业自荐信范文
2014/03/02 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
借款民事起诉状范文
2015/05/19 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
MySQL自定义函数及触发器
2022/08/05 MySQL
css弧边选项卡的项目实践
2023/05/07 HTML / CSS