jQuery遍历之向下遍历

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jquery</title>
		<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
		//<script type="text/javascript" src="js/try.js" ></script>
		<link rel="stylesheet" href="css/style.css" />
		
	</head>
	<body>
		<div id="div1">div1
			<div id="div2">div2
				<p>
					<a href="#">Hello</a>
				</p>
			</div>
		</div>
	</body>
</html>

　　css

#div1 {
	500px;
	height:250px;
	border:4px solid aquamarine;
	
}
#div2 {
	400px;
	height:150px;
	margin-left:10px ;
	margin-top: 10px;
	border:4px solid blue;
	
}
p {
	margin-left:10px ;
	margin-top: 10px;
	150px;
	height:80px;
	border:4px solid seagreen;
}

　　效果：

向下遍历后：

添加js

1.使用

children()方法

$(document).ready(function(){
   $("#div1").children().css({border:"4px solid  black"})
  
  
 });

效果：

2.使用find方法

$(document).ready(function(){
   $("#div1").find("#div2").css({border:"4px solid  black"})
  
  
 });

　　效果：

children() 方法和find()方法的区别

$(document).ready(function(){
   $("#div1").find("p").css({border:"4px solid  black"})
  
  
 });

$(document).ready(function(){
   $("#div1").children("p").css({border:"4px solid  black"})
  
  
 });

　　效果：

children方法获得的仅仅是元素一下级的子元素，即：immediate children。
find方法获得所有下级元素，即：descendants of these elements in the DOM tree
children方法的参数selector 是可选的（optionally），用来过滤子元素，但find方法的参数selector方法是必选的。

2017-09-21 20:37:02