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方法
js
$(document).ready(function(){
$("#div1").find("#div2").css({border:"4px solid black"})
});
效果：
children() 方法和find()方法的区别
1.
$(document).ready(function(){
$("#div1").find("p").css({border:"4px solid black"})
});
2.
$(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