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 相关文章推荐
利用javascript的面向对象的特性实现限制试用期
Aug 04 Javascript
jquery 删除字符串最后一个字符的方法解析
Feb 11 Javascript
js中settimeout方法加参数
Feb 28 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 Javascript
利用CSS3在Angular中实现动画
Jan 15 Javascript
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
详解vue-cli项目中怎么使用mock数据
May 29 Javascript
获取layer.open弹出层的返回值方法
Aug 20 Javascript
Vue递归实现树形菜单方法实例
Nov 06 Javascript
微信小程序实现录音时的麦克风动画效果实例
May 18 Javascript
微信小程序实现左侧滑动导航栏
Apr 08 Javascript
vant picker+popup 自定义三级联动案例
Nov 04 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版QQ互联OAuth示例代码分享
2015/07/05 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
Centos 6.5系统下编译安装PHP 7.0.13的方法
2016/12/19 PHP
PHP实现的简单组词算法示例
2018/04/10 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
jquery中one()方法的用法实例
2015/01/16 Javascript
javascript实现设置、获取和删除Cookie的方法
2015/06/01 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
js实现简单的验证码
2015/12/25 Javascript
JavaScript中的编码和解码函数
2017/02/15 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
代码详解javascript模块加载器
2018/03/04 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
js实现倒计时器自定义时间和暂停
2019/02/25 Javascript
js实现查询商品案例
2020/07/22 Javascript
Python使用pylab库实现绘制直方图功能示例
2018/06/01 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
Django 实现xadmin后台菜单改为中文
2019/11/15 Python
Python集成开发工具Pycharm的安装和使用详解
2020/03/18 Python
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
个人简历的自荐信
2013/10/23 职场文书
师范大学应届生求职信
2013/11/21 职场文书
餐厅总经理岗位职责
2013/12/31 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
毕业生自荐信格式
2014/03/07 职场文书
航海技术专业毕业生求职信
2014/04/06 职场文书
与美同行演讲稿
2014/09/13 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
民主生活会汇报材料
2014/12/15 职场文书
出国留学英文自荐信
2015/03/25 职场文书
创业计划书之服装
2019/10/07 职场文书