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 相关文章推荐
特殊字符、常规符号及其代码对照表
Jun 26 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
Jan 27 Javascript
jquery DIV撑大让滚动条滚到最底部代码
Jun 06 Javascript
jQuery提交多个表单的小例子
Jun 30 Javascript
关于JavaScript的变量的数据类型的判断方法
Aug 14 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 Javascript
vue通过video.js解决m3u8视频播放格式的方法
Jul 30 Javascript
layer.js open 隐藏滚动条的例子
Sep 05 Javascript
QML实现圆环颜色选择器
Sep 25 Javascript
关于JS模块化的知识点分享
Oct 16 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 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
星际中一些鲜为人知的详细资料
2020/03/04 星际争霸
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
JS location几个方法小姐
2008/07/09 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
jquery实现瀑布流效果分享
2014/03/26 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
python去除所有html标签的方法
2015/05/05 Python
Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程
2018/01/04 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
Python 确定多项式拟合/回归的阶数实例
2018/12/29 Python
Python理解递归的方法总结
2019/01/28 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
Python Socket TCP双端聊天功能实现过程详解
2020/06/15 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
wedgwood加拿大官网:1759年成立的英国国宝级陶瓷餐具品牌
2018/07/17 全球购物
甜美蛋糕店创业计划书
2014/01/30 职场文书
食品安全承诺书
2014/05/22 职场文书
我的中国梦演讲稿400字
2014/08/19 职场文书
国家助学金感谢信
2015/01/21 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
晚会主持人开场白台词
2015/05/28 职场文书
Ajax常用封装库——Axios的使用
2021/05/08 Javascript