<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>14.2jQuery遍历后代元素方法</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//1.children():返回被选元素的直接子元素
//注意:子元素可以是不同类型的元素
$('#btn1').click(function(){
$('#div1').children().css('border','solid 2px red');
// children(表达式)：返回符合表达式规则的直接子元素
$('#div1').children('p').css('background-color','#FF6');
$('#div1').children('div').css('background-color','#FCF');
});
//2.find(参数):返回被选元素的后代元素，一路向下直到最后一个后代
$('#btn2').click(function(){
//$('#div1').find('p').css('border','solid 2px blue');
//怎样查找某个元素的所有后代
$('#div1').find('*').css('border','solid 2px green');
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="children()"><br>
<input type="button" id="btn2" value="find()"><br>
<div id="div1">
<h3>div1的子元素h3</h3>
<p>div1的子元素p1</p>
<p>div1的子元素p2</p>
<div id="div2">
div1的子元素div2
<p>div2的子元素p3，<span>div1的后代元素</span></p>
<p>div2的子元素p4，<span>div1的后代元素</span></p>
</div>
</div>
</body>
</html>
效果图
