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应用之jQuery链用法实例
Jan 19 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 Javascript
node.js+express制作网页计算器
Jan 17 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
Nov 06 Javascript
JS调用打印机功能简单示例
Nov 28 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 Javascript
微信小程序实现手指拖动选项排序
Apr 22 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
Jul 31 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的String类代码
2010/04/20 PHP
php连接oracle数据库的方法(测试成功)
2016/05/26 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
js arguments.callee的应用代码
2009/05/07 Javascript
jQuery 前的按键判断代码
2010/03/19 Javascript
js模拟类继承小例子
2010/07/17 Javascript
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
2014/06/12 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
javascript如何创建对象
2016/08/29 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
通过函数作用域和块级作用域看javascript的作用域链
2018/08/05 Javascript
Vue之mixin全局的用法详解
2018/08/22 Javascript
微信小程序图表插件wx-charts用法实例详解
2019/05/20 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
Python实现破解猜数游戏算法示例
2017/09/25 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
python matplotlib 画dataframe的时间序列图实例
2019/11/20 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
python 基于opencv 实现一个鼠标绘图小程序
2020/12/11 Python
Flask处理Web表单的实现方法
2021/01/31 Python
Java如何调用外部Exe程序
2015/07/04 面试题
四下基层实施方案
2014/03/28 职场文书
小学生家长寄语
2014/04/02 职场文书
2014党员学习习主席讲话思想汇报
2014/09/15 职场文书
2015年挂职干部工作总结
2015/05/14 职场文书
高二语文教学反思
2016/02/16 职场文书
初中体育课教学反思
2016/02/16 职场文书