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将SQL搜索出来的内容导出为TXT的代码
Jul 27 Javascript
prototype Element学习笔记(篇一)
Oct 26 Javascript
Js判断CSS文件加载完毕的具体实现
Jan 17 Javascript
使用window.prompt()实现弹出用户输入的对话框
Apr 13 Javascript
分享两段简单的JS代码防止SQL注入
Apr 12 Javascript
jQuery对象与DOM对象转换方法详解
May 10 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
jQuery实现可移动选项的左右下拉列表示例
Dec 26 Javascript
node.js实现的装饰者模式示例
Sep 06 Javascript
小程序实现搜索框功能
Mar 26 Javascript
layui监听select变化,以及设置radio选中的方法
Sep 24 Javascript
el-table-column 内容不自动换行的解决方法
Aug 14 Vue.js
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 Hex RGB颜色值互换的使用
2013/05/10 PHP
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
php向js函数传参的几种方法
2014/08/10 PHP
thinkPHP使用pclzip打包备份mysql数据库的方法
2016/04/30 PHP
JS 无法通过W3C验证的处理方法
2010/03/09 Javascript
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
JS批量修改PS中图层名称的方法
2014/01/26 Javascript
在JavaScript中重写jQuery对象的方法实例教程
2014/08/25 Javascript
js打造数组转json函数
2015/01/14 Javascript
bootstrap flask登录页面编写实例
2016/11/01 Javascript
详解vue父子模版嵌套案例
2017/03/04 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
原生JS生成指定位数的验证码
2020/10/28 Javascript
[46:43]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第三局
2016/02/28 DOTA
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
python的Template使用指南
2014/09/11 Python
python列表操作实例
2015/01/14 Python
matplotlib subplots 设置总图的标题方法
2018/05/25 Python
OpenCV+python手势识别框架和实例讲解
2018/08/03 Python
python特性语法之遍历、公共方法、引用
2018/08/08 Python
利用Python实现微信找房机器人实例教程
2019/03/10 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
单位人事专员介绍信
2014/01/11 职场文书
死亡证明书样本说明
2014/10/18 职场文书
技术负责人岗位职责
2015/02/10 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
一条慢SQL语句引发的改造之路
2022/03/16 MySQL
解决 redis 无法远程连接
2022/05/15 Redis
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers