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 相关文章推荐
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
读jQuery之十 事件模块概述
Jun 27 Javascript
JS实现可改变列宽的table实例
Jul 02 Javascript
分享一则JavaScript滚动条插件源码
Mar 03 Javascript
js实现简单计算器
Nov 22 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
Aug 22 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
js 实现ajax发送步骤过程详解
Jul 25 Javascript
vue商城中商品“筛选器”功能的实现代码
Jul 01 Javascript
实例讲解React 组件生命周期
Jul 08 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 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 和 MySQL 基础教程(三)
2006/10/09 PHP
php顺序查找和二分查找示例
2014/03/27 PHP
php实现SAE上使用storage上传与下载文件的方法
2015/06/29 PHP
thinkPHP5框架自定义验证器实现方法分析
2018/06/11 PHP
禁止你的左键复制实用技巧
2013/01/04 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
2014/01/25 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
Python中用于计算对数的log()方法
2015/05/15 Python
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
实践Vim配置python开发环境
2018/07/02 Python
Python os.rename() 重命名目录和文件的示例
2018/10/25 Python
python中强大的format函数实例详解
2018/12/05 Python
python os.path.isfile()因参数问题判断错误的解决
2019/11/29 Python
python实现连连看游戏
2020/02/14 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
大学生实习证明范本
2014/01/15 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
中秋节感想
2015/08/10 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
Redis持久化与主从复制的实践
2021/04/27 Redis
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python
V Rising 服务器搭建图文教程
2022/06/16 Servers