实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style style="text/css">
*{
margin: 0;
padding: 0;
}
.box,ul,li{
border:1px solid #ccc;
margin: 0 auto;
margin-top: 20px;
text-align: center;
}
.box{
width: 500px;
height: 500px;
}
.box ul{
width: 450px;
height: 450px;
}
.box ul li{
width: 400px;
height: 400px;
list-style: none;
line-height: 400px;
}
</style>
<script type="text/javascript">
// 1、jQuery向上遍历(子元素)
// parent()方法返回被选元素的直接父元素
// $(function(){
// $('a').parent().css('border','1px solid red');
// })
// parents() 方法返回被选元素的所有祖先元素
// $(function(){
// $('a').parents('ul').css('border','1px solid red');
// })
// parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素
// $(function(){
// $('a').parentsUntil('.box').css('border','1px solid red');
// })
// 2、jQuery向下遍历（子元素）
// children()方法返回被选元素的所有直接子元素
// $(function() {
// $('.box').children().css('border', '1px solid red');
// $('p').children('.cl').css('color', 'red');
// })
// find()方法返回被选元素的后代元素
// $(function() {
// $('p').children('span.cl').css('color', 'red');
// })
$(function() {
// $('p').find('a').css('color', 'red');
// $('p').children('a').css('color', 'red');//p标签下面查找不到a标签
$('span').siblings().css('color', 'red');
$('span').siblings('.cl').css('color', 'blue');
})
// siblings()方法返回被选元素的所有同胞元素
</script>
<title>jQuery遍历方法</title>
</head>
<body>
<div class="box">
<ul>
<li><span>欢迎来到<a href="">php中文网</a></span>!</li>
</ul>
</div>
<p>
<span>hello php</span>
<span class="cl">hello<a href="#">php</a></span>
<b>我是灭绝</b>
</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
