jQuery遍历(二)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery第六节课</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
// jQuery遍历（用一种相对的关系来查找html元素）
// 向上查找（祖先元素）
// 向下查找（子元素）
// 同级查找（同胞）
$(function(){
// 向上查找（祖先元素）
// parent() 方法返回被选元素的直接父元素
//$('b').parent().css('border','1px solid red')
//parents() 方法返回被选元素的所有祖先元素
//$('b').parents().css('border','1px solid blue')
//parents() 方法会使用可选参数来过滤对祖先元素的搜索
//$('b').parents('div').css('border','1px solid blue')
//向下查找（子元素)
//children() 方法返回被选元素的所有直接子元素
//$('div').children().css('border','1px solid red')
//可过滤
//$('div').children('a').css('border','1px solid red')
//find() 方法返回被选元素的后代元素
//$('div').find('span').css('border','1px solid red')
//同级查找（同胞）
//siblings() 方法返回被选元素的所有同胞元素
//$('a').siblings().css('border','1px solid red')
//可过滤
$('a').siblings('span').css('border','1px solid red')
})
</script>
<style type="text/css">
*{margin:0;padding:0;}
div,p{border:1px solid #ccc;margin:20px auto;text-align: center;}
div{width: 500px;height: 500px;}
p{width:200px;height:200px;line-height: 200px;}
</style>
</head>
<body>
<div>
<a href="">0133技术站!</a><br>
<p>
<b>欢迎来到0133技术站!<span>123</span></b>
</p>
<span>123</span>
</div>
</body>
</html>
