操作jQuery集合搜索父元素
2014-12-23 10:08
295 查看
搜索父元素
1.1parents()方法
parents()方法用于获取u当前匹配元素集合中的每个元素的祖先元素,根据需要还可以使用一个选择器进行筛选parents([selector])
其中selector参数是可选的,表示用来筛选的表达式,即查找祖先元素可以满足的筛选条件。如未提供该参数,则返回每个匹配元素所有的祖先元素,如以下HTML代码:
p的祖先元素为俩个div和body元素
1.2closest()方法
closest()方法是jQuery1.3版本中新增的,该方法从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素,语法格式closest(selector,[context])
其中参数selector是一个包含选择器表达式的字符串或字符串数组,用于指定元素的匹配条件,参数context是可选的,指定一个DOM元素,可以在其中找到匹配元素
该方法首先检查当前元素是否匹配,如果匹配则直接返回元素本身,如果不匹配则向上查找父元素一层一层往上,知道找到匹配选择器的元素,如果什么也没找到则返回一个空的jQuery对象。
例如HTML代码
1.3parent()方法
parent()方法用于获取当前匹配元素集合中每个元素的父元素,根据需要还可以使用一个选择器进行筛选,语法格式:parent([selector])
其中参数selector是可选的表示用来筛选的表达式
parent()与parents方法累世,只不过前者只遍历了DOM树的一个层级,而后者可遍历DOM树的多个层级,如下HTML代码
1.4parentsUntil()方法
parentsUntil()方法用于获取当前匹配元素集合中每个元素的祖先元素,直到给定选择器匹配的元素,语法格式:parentsUntil([selector])
其中,参数selector是可选的,其值是一个包含选择器的表达式字符串,用来匹配元素的祖先,HTML代码如下:
1.5offsetParent()方法
offsetParent()方法用于搜索第一个匹配元素的已定位的父元素,仅对可见元素有效,语法格式:offsetParent()
该方法查找第一个匹配元素的已定位元素,并返回由该元素包装成的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树的多个层级,如下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").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 集合 搜索操作(父辈元素搜索、同辈元素搜索、子元素搜索)
- Jquery之搜索父元素操作
- 操作jQuery集合——搜索操作
- JQuery基础之(五)使用JQuery操作元素的属性和样式
- JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
- jQuery学习整理 (3) 使用jQuery操作元素的属性与样式
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式【转】
- jquery操作select用法集合
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
- jQuery-对Radio/CheckBox的操作集合
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
- jQuery 第二课:操作包装集元素
- jQuery学习3:操作元素属性和特性
- jQuery学习7 操作JavaScript对象和集合的函数
- JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
- jQuery框架学习第四天:使用jQuery操作元素的属性与样式
- JQuery之五:操作元素内容
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式