~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
/*
####prev() next()
####prevAll() nextAll()
####siblings() 兄弟节点
*/
$(function () {
// $('span').prev().css('background','red');
// $('span').next().css('background','yellow');
// $('span').prevAll().css('background','blue');
// $('span').nextAll().css('background','pink');
$('p').siblings('h2').css('background','red');
$('span').next('h1').css('background', 'red');
$('span').next('h2').css('background', 'red'); //两个span的下一个都没有h2的，所以就没有
})
</script>
</head>
<body>
<div>div</div>
<span>span</span>
<p>p</p>
<span>span</span>
<h1>h1</h1>
<h2>h2</h2>
<h2>h2</h2>
<h3>h3</h3>
<em>em</em>
</body>
</html>
~~~
***
### 模拟点击出现菜单
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul { display: none; }
.box { display: block; }
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
$(function () {
$('input[type=button]').click(function () {
$(this).next().toggleClass('box');
})
})
</script>
</head>
<body>
<input type="button" value="点击">
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
</body>
</html>
~~~
***
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
/*
####parent() ★★★
####parents() ★
####closest() ★★★★★
closest()：找指定的一个最近的祖先元素（包括自身）（该函数必须加参数）；它只能选择到一个唯一的元素
• 精准的查找能力，实战开发之王
• 找的是最近的唯一一个元素
• 例子：点击查找指定节点
*/
$(function(){
$('#div2').closest('.box').css('border','1px solid red');
//只加在了div1上
//如果给div2添加上class为box，那么上面的语句找到的就是div2了
})
</script>
</head>
<body>
<div id="div1" class="box">
aaa
<div id="div2" class="box">bbb</div>
</div>
</body>
</html>
~~~
***
### 点击查找指定节点
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
$(function(){
$('span').click(function(){
$(this).closest('li').css('border','1px solid red');
})
})
</script>
</head>
<body>
<ul>
<li><div>aaa <span>span</span><div></li>
<li><div>aaa <span>span</span><div></li>
<li><div>aaa <span>span</span><div></li>
<li><div>aaa <span>span</span><div></li>
</ul>
</body>
</html>
~~~
