<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
// next() 同级的下一个元素，nextAll同级的下面所有的元素
// prev() 同级的上一个元素，prevAll同级的上面所有的元素
$('#div1').nextAll('p').css({color:'red'});
//选择上一级的父元素
$('#span01').parent().css({width:'100px',height:'100px',background:'gold'});
//选择离最近的元素，元素可以是父级，可以是子集
$('#span02').closest('div').css({width:'200px',height:'200px',background:'pink'});
// $('.list li')：不能回到父级
// $('.list').children()：可以通过end() 回到父级
$('.list').children().css({background:'gold',height:'30px',marginBottom:'10px'}).end().css({background:'green'});
$('.list2 li:eq(2)').css({background:'gold'}).siblings().css({background:'green'});
$('#div2').find('.link1').css({color:'red'});
})
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
<div>这是第二个div元素</div>
<p>这是一个p元素</p>
<div>
<a href="#">百度网</a>
<span id="span01">span元素</span>
</div>
<div id="div2">
<p>
<a href="#" class="link1">腾讯网</a>
<span id="span02">span元素</span>
</p>
</div>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<ul class="list2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
相关文章：