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 调试器简介
Feb 21 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
Feb 11 Javascript
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
Sep 04 Javascript
Jquery 点击按钮显示和隐藏层的代码
Jul 25 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
Feb 27 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
Angular实现预加载延迟模块的示例
Oct 12 Javascript
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
适合后台管理系统开发的12个前端框架(小结)
Jun 29 Javascript
javascript的var与let,const之间的区别详解
Feb 18 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
MySQL数据库转移,access,sql server 转 MySQL 的图文教程
2007/09/02 PHP
一家之言的经验之谈php+mysql扎实个人基本功
2008/03/27 PHP
基于Zend的Config机制的应用分析
2013/05/02 PHP
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
firefox事件处理之自动查找event的函数(用于onclick=foo())
2010/08/05 Javascript
javascript 内存回收机制理解
2011/01/17 Javascript
JS将光标聚焦在文本最后的实现代码
2014/03/28 Javascript
推荐4个原生javascript常用的函数
2015/01/12 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
初识Node.js
2015/03/20 Javascript
jQuery插件制作之参数用法实例分析
2015/06/01 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
Boostrap模态窗口的学习小结
2016/03/28 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
layer ui 导入文件之前传入数据的实例
2019/09/23 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
纯js+css实现在线时钟
2020/08/18 Javascript
Python中使用动态变量名的方法
2014/05/06 Python
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
python中reduce()函数的使用方法示例
2017/09/29 Python
python Pexpect 实现输密码 scp 拷贝的方法
2019/01/03 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
基于Python实现全自动下载抖音视频
2020/11/06 Python
市政施工员自我鉴定
2014/01/15 职场文书
优秀员工表扬信
2014/01/17 职场文书
红旗方阵解说词
2014/02/12 职场文书
教师三严三实心得体会
2014/10/11 职场文书