Jquery学习笔记：利用parent和parents方法获取父节点
通过选择器一般只能获取指定标识的节点，或者获取子节点。
有些场景下，往往需要根据当前节点找到满足条件的父节点。这个可以通过相应的方法来实现。
1、parent方法
该方法可以获取元素的直接父节点。
我们还是通过例子来说明
<div>
<p id="pid"></p>
<span class="cspan"></span>
<div>
<a id="aid"></a>
<span>test</span>
</div>
</div>
js代码如下
var obj = $("#aid").parent(); //获取到的是aid元素的直接父节点div元素
alert(obj.html());
可以指定parent方法的参数，如 $("#aid").parent("div") 来检查父节点是否满足特定的条件。
2、parents方法
该方法可以获取元素所有上层节点（直到根节点）的集合。如：
<html>
<body>
<div class="mydiv">
<p id="pid"></p>
<span class="cspan"></span>
<div>
<a id="aid"></a>
<span>test</span>
</div>
</div>
</body>
</html>
js代码
var obj = $("#aid").parents(); //一共获得4个父节点，div>div>body>html
obj.each(function(index,data){
alert($(data).prop("tagName"));
});
可以通过给parents方法加参数来有条件的选择父节点。
如 $("#aid").parents("div") 只返回节点标签为DIV的 上层节点集合。
如 $("#aid").parents(".mydiv") 只返回节点包含样式mydiv 的 上层节点集合。
3、小结
通过上面两个方法，加上各种条件设置，可以获取到各种条件的上层节点。
Jquery学习笔记：利用parent和parents方法获取父节点的更多相关文章
- jQuery学习笔记---兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
- jQuery通过parent()和parents()方法访问父级元素
<div class="inputGroup"> <p>2.您的最高学历是?</p> <label><input type=& ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- jQuery学习笔记之插件开发（4）
jQuery学习笔记之插件开发(4) github源码地址 插件:了让原有功能的增强. 1.插件的种类(3种):局部.全局.选择器插件 1.1封装对象方法的插件 这种类型的插件是把一些常用或者重复使用 ...
- jQuery学习笔记之概念（1）
jQuery学习笔记之概念(1) ----------------------学习目录-------------------- 1.概念 2.特点 3.选择器 4.DOM操作 5.事件 6.jQuer ...
- 初步学习jquery学习笔记（五）
jquery学习笔记五 jquery遍历 什么是遍历? 从某个标签开始,按照某种规则移动,直到找到目标标签为止 标签树 <div> <ul> <li> <sp ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记之Ajax用法详解
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...
随机推荐
- 在mysql中创建存储过程出现1307错误，解决方法
需要删除mysql数据库下proc表 在重新创建 CREATE TABLE `proc` ( `db` char(64) character set utf8 collate utf8_bin NOT ...
- floyed算法
Floyed算法(实际是动态规划问题) 问题:权值矩阵matrix[i][j]表示i到j的距离,如果没有路径则为无穷 求出权值矩阵中任意两点间的最短距离 分析:对于每一对定点u,v看是否存在一个点w使 ...
- NotePad++ 配置C/C++编译环境
如果只是测试小程序可以用这种方法 比较方便,如果对于大程序建议使用专业的IDE. 经常需要写一些小程序来运行,又不想运行Visual Studio.Eclipse这样的环境,而Notepad++是一个 ...
- Python之美[从菜鸟到高手]--urlparse源码分析
urlparse是用来解析url格式的,url格式如下:protocol :// hostname[:port] / path / [;parameters][?query]#fragment,其中; ...
- GDB调试精粹及使用实例
一:列文件清单 1． List (gdb) list line1,line2 二:执行程序 要想运行准备调试的程序,可使用run命令,在它后面可以跟随发给该程序的任何参数,包括标准输入和标准输出说明符 ...
- fedora audacious 不能播放音乐
采用命令sudo dnf search audacious 可以看到 audacious-plugins-freeworld-mp3.x86_64 : MP3 playback plugin for ...
- BZOJ 1617: [Usaco2008 Mar]River Crossing渡河问题
题目 1617: [Usaco2008 Mar]River Crossing渡河问题 Time Limit: 5 Sec Memory Limit: 64 MB Description Farmer ...
- android在ubuntu中编译为.apk资料
android在ubuntu中编译为.apk文件 今天我在ubuntu环境之下将android程序编译为.apk文件,特将其过程写下来: 1. 在windows环境下使用MyEclipse编辑好and ...
- 基于CAShapeLayer和贝塞尔曲线的圆形进度条动画【装载】
初次接触CAShapeLayer和贝塞尔曲线,看了下极客学院的视频.对初学者来说感觉还不错.今天来说一个通过CAShapeLayer和贝塞尔曲线搭配的方法,创建的简单的圆形进度条的教程先简单的介绍下C ...
- CentOS6.5 下在Nginx中添加SSL证书以支持HTTPS协议访问
参考文献: 1. NginxV1.8.0安装与配置 2. CentOS下在Nginx中添加SSL证书以支持HTTPS协议访问 3. nginx配置ssl证书的方法 4.nginx强制使用https访问 ...