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的数据类型、字面量、变量介绍
May 23 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
Mar 12 Javascript
5种处理js跨域问题方法汇总
Dec 04 Javascript
Jquery动态添加输入框的方法
May 29 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
Aug 21 Javascript
jquery中键盘事件小结
Feb 24 Javascript
js+html5实现canvas绘制网页时钟的方法
May 21 Javascript
Vue.js 单页面多路由区域操作的实例详解
Jul 17 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 Javascript
JS实现移动端在线签协议功能
Aug 22 Javascript
jQuery实现带进度条的轮播图
Sep 13 jQuery
浅谈Vue static 静态资源路径 和 style问题
Nov 07 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中基本符号及使用方法
2010/03/23 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
JS实现的点击按钮图片上下滚动效果示例
2019/01/28 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
2019/09/25 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
Python使用SQLite和Excel操作进行数据分析
2018/01/20 Python
python3实现基于用户的协同过滤
2018/05/31 Python
python操作cfg配置文件方式
2019/12/22 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
通过实例简单了解python yield使用方法
2020/08/06 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
英国最大的滑板品牌选择:Route One
2019/09/22 全球购物
String、StringBuffer、StringBuilder有区别
2015/09/18 面试题
护理人员的自我评价分享
2014/03/15 职场文书
分层教学实施方案
2014/03/19 职场文书
中学生家长评语大全
2014/04/16 职场文书
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
大三学年自我鉴定范文(3篇)
2014/09/28 职场文书
公司股东出资证明书
2014/11/01 职场文书
入党现实表现材料
2014/12/23 职场文书
体育活动总结
2015/02/04 职场文书
网吧员工管理制度
2015/08/05 职场文书
2019年英语版感谢信(8篇)
2019/09/29 职场文书
sql时间段切分实现每隔x分钟出一份高速门架车流量
2022/02/28 SQL Server