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 {

	width:500px;

	height:250px;

	border:4px solid aquamarine;

}

#div2 {

	width:400px;

	height:150px;

	margin-left:10px ;

	margin-top: 10px;

	border:4px solid blue;

}

p {

	margin-left:10px ;

	margin-top: 10px;

	width: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

巴特西

jQuery遍历之向下遍历

最新文章

热门文章