~~~
<!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>
~~~
