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 相关文章推荐
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
Apr 23 Javascript
HTTP 304错误的详细讲解
Nov 13 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
jQuery语法小结(超实用)
Dec 31 Javascript
详解js中的apply与call的用法
Jul 30 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 Javascript
JavaScript基础之流程控制语句的用法
Aug 31 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 Javascript
nuxt.js 缓存实践
Jun 25 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
Mar 21 Javascript
微信小程序常见页面跳转操作简单示例
May 01 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实现过滤字符串中的中文和数字实例
2015/07/29 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
js常见表单应用技巧
2008/01/09 Javascript
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
js倒计时简单实现代码
2016/08/11 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
javascript 作用于作用域链的详解
2017/09/27 Javascript
使用JS模拟锚点跳转的实例
2018/02/01 Javascript
Node.js成为Web应用开发最佳选择的原因
2018/02/05 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
浅谈vue3中effect与computed的亲密关系
2019/10/10 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
python模块之re正则表达式详解
2017/02/03 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
python随机生成大小写字母数字混合密码(仅20行代码)
2020/02/01 Python
python神经网络编程实现手写数字识别
2020/05/27 Python
建筑公司员工自我鉴定
2014/04/08 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
关爱残疾人标语
2014/06/25 职场文书
学用政策心得体会
2014/09/10 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
关于运动会广播稿200字
2014/10/08 职场文书
党的群众路线教育实践活动查摆剖析材料
2014/10/10 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
2015纪念九一八事变84周年演讲稿
2015/03/19 职场文书
公司捐书倡议书
2015/04/27 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书
python使用pygame创建精灵Sprite
2021/04/06 Python
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
Nginx的gzip相关介绍
2022/05/11 Servers