parent()、parents()的用法区别

2012-03-23 11:03 15476 次阅读分类: JS+jQuery 已关闭评论

免打扰阅读

parent():所有匹配元素的父元素的组合

parents()：所有匹配元素的祖先元素(包括父元素)的组合

关键代码如下：

<div>第1层DIV
	<div>第2层DIV
		<div>第3层DIV
			<b>bbb</b>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(function(){ 
		$("input[type='button']").click(function(){
			$("div >b").parent("div").css({//将parent改成parents即可查看到区别
				border:"1px red solid"
				})
		}).click();
	})
</script>

点击运行，查看运行效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试页</title> <style type="text/css"> * { margin:0; padding:0; } body { font:12px/20px Tahoma, Geneva, sans-serif; padding:100px 200px; } ul li { list-style:none; } img { border:0 none; } input[type='button'] { width:100px; height:38px; display:block; position:fixed; right:20%; top:50px; font-size:13px; } h1 { height:35px; padding-bottom:10px; } div{padding:5px} </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("input[type='button']").click(function(){ $("div >b").parent("div").css({//将parent改成parents即可查看到区别 border:"1px red solid" }) }).click(); }) </script> </head> <body style="height:600px"> <input type="button" value="点击测试"/> <h1 style="color:blue;">parent()、parents()的用法区别</h1> <p>parent():所有匹配元素的父元素的组合</p> <p>parents()：所有匹配元素的祖先元素(包括父元素)的组合</p> <p><b>效果如下：将所有匹配元素的的父元素或祖先元素加上1px的border</b></p> <div>第1层DIV <div>第2层DIV <div>第3层DIV <b>bbb</b> </div> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。