今天說的是層次選擇器，那層次選擇器有哪幾個？
$("ancestor descendant")：選取parent元素后所有的child元素
$("parent > child")：選取parent元素后所有的直屬child元素，何謂“直屬”，也就是第一級的意思了
$("prev + next")：prev和next是兩個同級別的元素. 選中在prev元素后面的next元素
$("prev ~ siblings"):選擇prev后面的根據siblings過濾的元素。注:siblings是過濾器
這里要說下，由於最后2個用的比較少，一般會用其他選擇器替代，請看下面：
$("prev + next")等價於next()
$("prev ~ siblings")等價於nextAll()
具體用法會在后面說到。
===========================================================================
下面我們來仔細說說這4個層次選擇器
【1】$("ancestor descendant")：選取parent元素后所有的child元素
ancestor的中文意思是“祖先”，descendant的中文意思是“后代”，就像css定義層級元素方式一樣,只需要不同的元素之間有空格表示，前者父級，后者子級，以此類推，同時我們把它寫成這樣的形式，$("Element1 Element2 Element3 Element...")。
下面是實例：
| $("body div") | 選取body元素下所有的div元素。 |
| $("ul li") | 選取ul元素下所有的li元素。 |
| $("#test div") | 選取id為“test”的元素所包含的所有的div子元素 |
| $("div#test div") | 選取id為“test”的div所包含的所有的div子元素 |
| $(".test div") | 選取class為“test”的元素所包含的所有的div子元素 |
| $("div.test span") | 選取class為“test”的div所包含的所有的span子元素 |
| $("span.test .demo") | 選取class為“test”的span所包含的所有的class為demo的元素 |
| $(".test .demo") | 選取class為“test”的元素所包含的所有的class為demo的元素 |
【2】$("parent > child")：選取parent元素后所有的直屬child元素，何謂“直屬”，也就是第一級的意思了
| $("body > div") | 選取body元素下所有的第一級div元素。 |
| $("ul > li") | 選取ul元素下所有的第一級li元素。 |
| $("#test > div") | 選取id為“test”的元素所包含的所有的第一級div子元素 |
| $("div#test > div") | 選取id為“test”的div所包含的所有的第一級div子元素 |
| $(".test > div") | 選取class為“test”的元素所包含的所有的第一級div子元素 |
| $("div.test > span") | 選取class為“test”的div所包含的所有的第一級span子元素 |
| $("span.test > .demo") | 選取class為“test”的span所包含的所有的第一級class為demo的元素 |
| $(".test > .demo") | 選取class為“test”的元素所包含的所有的第一級class為demo的元素 |
【3】$("prev + next")：prev和next是兩個同級別的元素. 選中在prev元素后面的next元素.
（1）$("div + p")表示選擇緊跟在 div 元素后的 p 一個元素
（2）$("#demo+img")選擇id為demo元素后面的img對象.如果id為demo元素后面沒有同級的img對象，那么這個$("#demo+img").length=0
【4】$("prev ~ siblings"):選擇prev后面的根據siblings過濾的元素。注:siblings是過濾器。
（1）$("div ~ p")表示匹配跟在 div 元素后的所有 p 元素
（2）$("#demo~[title]")選擇id為demo的元素后面所有帶有title屬性的元素，同樣如果id為demo的元素后面沒有一個帶有title屬性的元素，那么$("#demo~[title]").length = 0
===========================================================================
這里說的是最后2個選擇器的等價關系
$(".one + div")等價於$(".one").next("div")
$("#prev ~ div")等價於$(".prev").nextAll("div")
===========================================================================
這里是實例，參考w3cfuns網站的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>實例</title>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#bt1").click(function(){
$("div > p").text("我們都是div中的兒子，我們的名字叫做p還記得教程中的$(\"父親 > 兒子 > ...\")這種關系嗎？就是以這種方式選擇的我$(\"div > p\")");
})
$("#bt2").click(function(){
$("div + p").text("我是緊跟着div的p既然緊跟着，當然就得使用“+”緊密的連在一起嘛。以這種方式選擇的我$(\"div + p\")");
})
$("#bt3").click(function(){
$("div ~ p").text("我們是div的跟隨者，我們的名字叫做p要以這種方式選擇的我$(\"div ~ p\")");
})
})
</script>
</head>
<body>
<input id="bt1" type="button" value="獲取div下所有的p標簽"/>
<input id="bt2" type="button" value="匹配緊跟在 div 元素后的 p 一個元素"/>
<input id="bt3" type="button" value="匹配跟在 div 元素后的所有 p 元素"/>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
</body>
</html>
========================================================================
ps.全文參考夢三秋和w3cfuns網站