操作jQuery集合搜索父元素
搜索父元素
1.1parents()方法
parents()方法用于获取u当前匹配元素集合中的每个元素的祖先元素，根据需要还可以使用一个选择器进行筛选parents([selector])
其中selector参数是可选的，表示用来筛选的表达式，即查找祖先元素可以满足的筛选条件。如未提供该参数，则返回每个匹配元素所有的祖先元素，如以下HTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('p').parents().css("border","1px solid #F00");
});
</script>
</head>
<body>
<div style="width:300px;height:150px;">
<div style="width:200px;height:100px;margin-top:10px;margin-left:30px;">
<p>给祖先元素添加边框样式</p>
</div>
</div>
</body>
</html>
p的祖先元素为俩个div和body元素
1.2closest()方法
closest()方法是jQuery1.3版本中新增的，该方法从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素，语法格式closest(selector,[context])
其中参数selector是一个包含选择器表达式的字符串或字符串数组，用于指定元素的匹配条件，参数context是可选的，指定一个DOM元素，可以在其中找到匹配元素
该方法首先检查当前元素是否匹配，如果匹配则直接返回元素本身，如果不匹配则向上查找父元素一层一层往上，知道找到匹配选择器的元素，如果什么也没找到则返回一个空的jQuery对象。
例如HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('a').closest("div").css("border","2px solid #F00");
/*执行该代码以后，将改变id为firstdiv的div元素的边框样式，因为它是向上遍历DOM树遇到的
第一个匹配元素
*/
});
</script>
</head>
<body>
<div id="maindiv">
<div id="firstdiv">
<a>CLOSEST()方法</a>
</div>
</div>
</body>
</html>
1.3parent()方法
parent()方法用于获取当前匹配元素集合中每个元素的父元素，根据需要还可以使用一个选择器进行筛选，语法格式：parent([selector])
其中参数selector是可选的表示用来筛选的表达式
parent()与parents方法累世，只不过前者只遍历了DOM树的一个层级，而后者可遍历DOM树的多个层级，如下ＨＴＭＬ代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("p").parent().css("border","1px solid blue");
//执行代码将改变id=divtop的div边框样式
});
</script>
</head>
<body>
<div style="widht:300px;height:150px;" id="div_main">
<div id="div_top" style="width:200px;height:100px;margin-top:10px;margin-left:30px;">
<p>给父元素添加边框样式</p>
</div>
</div>
</body>
</html>
1.4parentsUntil()方法
parentsUntil()方法用于获取当前匹配元素集合中每个元素的祖先元素，直到给定选择器匹配的元素，语法格式：parentsUntil([selector])
其中，参数selector是可选的，其值是一个包含选择器的表达式字符串，用来匹配元素的祖先，HTML代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#sonullisecond").parentsUntil("secondli").css("background","red");
//找到#sonullisecond到祖先元素secondli之间的元素，并为这些元素添加背景
});
</script>
</head>
<body>
<ul id="ul_first">
<li id="firstli">firstli</li>
<li id="secondli">
<ul id="sonul">
<li id="sonullifirst">sonullifirst</li>
<li id="sonullisecond">sonullisecond</li>
</ul>
</li>
<li id="thirdli">thirdli</li>
</ul>
</body>
</html>
1.5offsetParent()方法
offsetParent()方法用于搜索第一个匹配元素的已定位的父元素，仅对可见元素有效，语法格式：offsetParent()
该方法查找第一个匹配元素的已定位元素，并返回由该元素包装成的jQuery对象。
下面举例说明如何在文档中获取指定元素的祖先元素和父元素
操作jQuery集合搜索父元素的更多相关文章
- JQuery中查找父元素，子元素,追加元素，插入元素和删除元素 及其他常用方法
Jquery之所以强大,和其在获取对象时使用与css选择器兼容的语法有很大关系.而且它还兼容了CSS3的选择器,而且多出了不少. 所以jQuery的选择器也就变得很多很强大.就最基本的有以下四个: $ ...
- 3.操作jQuery集合《jquery实战》
3.1 创建HTML元素 使用 jquery 创建动态元素是相当容易的.可以通过 $() 函数包含一个 HTML 标签的字符串来创建. $('<div>Hello</div>' ...
- jQuery 实战读书笔记之第三章：操作 jQuery 集合
创建新 HTML 元素 $('<div>Hello</div>'); /* 创建等价的空 div 元素 */ $('<div>'); $('<div /> ...
- jquery的相对父元素和相对文档定位示例代码
在开发jquery时候经常需要用到定位,有相对父元素定位和相对文档定位,本文为此总结下,有需要的朋友可以参考下 在开发jquery时候经常需要用到定位,这里概括两种定位: 1.相对父元素定位: $(& ...
- jquery 获取所有父元素
最终结果: 代码: <!DOCTYPE html> <html> <head> <style> b, span, p, html body { padd ...
- jquery查找父元素、子元素(个人经验总结)
使用js或者jquery查找父元素.子元素经常遇到.可是用起来总容易混淆,这里统一总结了一下,以后用起来相信会方便好多 这里jquery向上查找父元素 用到的方法:closest() parents( ...
- jQuery 对页面元素的搜索包括父元素、同辈元素、子元素的搜索
1.父元素搜索 (1)parents([selector]) 方法 $("p").parents().css("border","1px solid ...
- jQuery学习笔记---兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
- jQuery中兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
随机推荐
- T4模板合并js
使用T4模板合并js文件 不知道该怎么表达,或许直接贴图贴代码更好 前因:在第一个使用angularjs的项目中我将所有的controller写到一个文件里面,深知维护起来那滋味,所以再次使用angu ...
- linux内核数据包转发流程（三）网卡帧接收分析
[版权声明:转载请保留出处:blog.csdn.net/gentleliu.邮箱:shallnew*163.com] 每一个cpu都有队列来处理接收到的帧,都有其数据结构来处理入口和出口流量,因此,不 ...
- jQuery 有条件排序
尊重劳动成果,转载请注明出处(http://blog.csdn.net/sllailcp/article/details/41011173)... 点击button,表格里就会依照分数的高低.将学生信 ...
- Connect2015 简要整理
2015 简要整理 去年 Connect(); 2014 Visual Studio Contact(); 直播笔记 对于我个人来说,今年 Connect(); 的三个重要发布: ASP.NET 5 ...
- B/S VS C/S
从软件project的学习到如今的机房合作,我们一直在学习C/S,进入牛腩才正式进入了对B/S的了解,确切点牛腩则是对此的一个过渡,起到了承上启下的作用!看牛腩,事实上最大的感受就是他不止要设计到页面 ...
- Unity该插件NGUI得知（9）—— Tween并转换成世界坐标系的大小NGUI尺寸
在游戏中,还有一种比较常见的动画,这是进球后产生,分数将被显示在游戏,而快速移动,使其失去位置加入.就打算使用NGUI的Tween来制作这样的分数动画效果. 依据 Unity插件之NGUI学习(2), ...
- 提升Mac os x 10.10+xcode6.1之后，Cocoapods发生故障的解决方案
提升Mac OS X 10.10+Xcode 6.1之后.Cocoapods图书馆管理也依赖于相应升级.现在最新的Release版本号是 0.34.在之前的版本号.当数据库更新和管理,你会遇到一个错误 ...
- 为了圣像画系统V1.0Beta版（javascript）-GIS520社区
地图标绘系统V1.0測试版 (界面比較难看,之后再统一美化!) 演示地址:http://www.gis520.com/gis/plotdemo/index.html 查看可在菜单Map--> ...
- c#委托实例化和调用语句
系统訪问数据或调用方法有两种操作方式:一种是通过名称訪问或调用,还有一种是通过所在的内存地址来訪问调用.为了系统的安全与稳定,NET Framework的CLR库不同意程序通过指针来直接操作内存中数据 ...
- android sdk linux 文本 64 位置
android sdk linux 64 之前获得模.现在补上一,然后,小伙伴们下载 版权声明:本文博主原创文章,博客,未经同意不得转载.