<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li class="begin">111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li id="end">555</li>
<li>666</li>
</ul>
<div class="outer">父母层级outer
<p>儿女层级wangyue</p>
<div class="inner">inner
<p>孙子层级inner p</p>
</div>
</div>
<p>777777</p>
<input type="text">
<input type="checkbox">
<input type="submit">
<script src="/static/jquery.min.js"></script>
<script>
//$('li').eq(2).css('color','red')
//查找筛选器非常重要
// $('.outer').children('p').css('color','red')//找儿女层级
// $('.outer').find('p').css('color','red')//找父母层级下面所有的,包括子女和孙子所有的
//$('li').eq(2).next().css('color','red')//下面一个
// $('li').eq(2).nextAll().css('color','red')//下面所有的
// $('li').eq(2).nextUntil('#end').css('color','red')//区间找
//$('li').eq(2).prev().css('color','red')//上一个
// $('li').eq(2).prevAll().css('color','red')//上面所有的
// $('li').eq(2).prevUntil('.begin').css('color','red')//区间找
//console.log($('.outer .inner p').parent().html)
// $('.outer .inner p').parents().css('color','red')
//$('.outer .inner p').parentsUntil('body').css('color','red')
$('.outer').siblings().css('color','red') //上下兄弟都变红
</script>
</body>
</html>
