知识点5:JQuery-遍历==>后代Children(),find()
1、Children();在具体的div下面的子节点children加样式。
代码如下:
<!DOCTYPE html>
<html>
<head>
<style>
.descendants *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("div").children("p.cd").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<div class="descendants" style="width:500px;">div (当前元素)
<p class="cd">p (子)
<span>span (孙)</span>
</p>
<p class="2">p (子)
<span>span (孙)</span>
</p>
</div>
</body>
</html>
2、jQuery find() 方法:通过find()方法去找具体标签
代码如下:
<!DOCTYPE html>
<html>
<head>
<style>
.descendants *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("div").find("span.bb").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<div class="descendants" style="width:500px;">div (current element)
<p>p (子)
<span class="aa">span (孙)</span>
</p>
<p>p (child)
<span class="bb">span (孙)</span>
</p>
</div>
</body>
</html>
jQuery遍历-同胞 将在下一节讲到,请看下一节