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 相关文章推荐
asp.net 30分钟掌握无刷新 Repeater
Sep 16 Javascript
jquery改变tr背景色的示例代码
Dec 28 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 Javascript
最丑的时钟效果!js canvas时钟制作方法
Aug 15 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
Sep 20 Javascript
Vue组件通信的四种方式汇总
Feb 08 Javascript
vue地区选择组件教程详解
May 04 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
[原创]微信小程序获取网络类型的方法示例
Mar 01 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 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
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
PHP STRING 陷阱原理说明
2010/07/24 PHP
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
一个图片地址分解程序(用于PHP小偷程序)
2014/08/23 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
jQuery实用基础超详细介绍
2013/04/11 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
javascript中的throttle和debounce浅析
2014/06/06 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
详解JavaScript数组和字符串中去除重复值的方法
2016/03/07 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
JavaScript中关于class的调用方法
2017/11/28 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
微信小程序模板template简单用法示例
2018/12/04 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
用python实现的去除win下文本文件头部BOM的代码
2013/02/10 Python
python 利用toapi库自动生成api
2020/10/19 Python
matplotlib bar()实现百分比堆积柱状图
2021/02/24 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
暑假实习求职信范文
2013/09/22 职场文书
货代行业个人求职简历的自我评价
2013/10/22 职场文书
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
大学生表扬信范文
2014/01/09 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
法律进学校实施方案
2014/03/15 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
青年联谊会致辞
2015/07/31 职场文书
2016七一建党节慰问信
2015/11/30 职场文书
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle