在DOM元素之間的層次關(guān)系主要包含元素的后代元素、子元素、相鄰元素和兄弟元素等，那么我們?cè)谕ㄟ^(guò)選擇DOM元素之間的層次關(guān)系來(lái)獲取我們想要選擇的元素時(shí)，這種層次選擇器對(duì)我們選擇元素來(lái)說(shuō)是一種特棒的選擇方法。為了更好的學(xué)習(xí)，我們?cè)谶@里統(tǒng)一個(gè)HTML結(jié)構(gòu)：

<form class="form" action="#" method="post">
    <div class="form-item">
      <label for="name">Name:</label>
      <input name="name" type="text" class="form-text" id="name" />
  </div>
  <div class="form-item">
      <label for="lastname">LastName:</label>
        <input name="lastname" type="text" class="form-text" id="lastname" />
    </div>
    <div class="form-item">
      <label for="password">Password:</label>
        <input name="password" type="text" class="form-text" id="password" />
    </div>
  <fieldset>
      <div class="form-item">
      <label>Newsletter:</label>
      <input name="newsletter" type="text" class="text-form" id="newsletter"/>
    </div>  
 </fieldset>
 <div class="form-item">
     <input type="submit" value="submit" class="form-submit" id="submit" />
     <input type="reset" value="reset" calss="form-submit" id="reset" />
 </div>
</form>

根據(jù)上面的HTML結(jié)構(gòu)，我們先來(lái)看看其在BODY中的DOM樹(shù)形結(jié)構(gòu)圖：

從上面結(jié)構(gòu)圖中我們可以明顯知道各個(gè)元素之間的層次關(guān)系，下面我們主要通過(guò)實(shí)例來(lái)介紹這幾種層次選擇器的使用方法和相關(guān)功能。：

一、層次選擇器——后代元素（ancestor? descendant）：

選擇器：

$("ancestor  descendant") //其中ancestor是指任何有效的元素，descendant是ancestor的后代元素

描述：

選擇ancestor元素里的所有后代元素descendant。

返回值：

集合元素

我們來(lái)看下面一個(gè)實(shí)例：

<script type="text/javascript">   $(document).ready(function(){
       $('form input ').css('border','1px solid red');
   });</script>

功能：

改變form表單內(nèi)所有input元素的邊框?qū)傩?/p>

實(shí)例效果：

二、層次選擇器——子元素選擇器（parent > child）：

選擇器：

$("parent > child")  //parent是指任何有效的元素，child是parent元素的子元素

描述：

選擇parent元素下的子元素child，其跟后代選擇器$("ancestor descendant")是有區(qū)別的，前者只能選擇到子元素，而后者能選擇到所有后代元素，比如說(shuō)子元素還有孫子輩的元素等 。

返回值：

集合元素

實(shí)例：

<script type="text/javascript">    $(document).ready(function(){
       $('form > div ').css('border','1px solid red');
    });</script>

功能：

選擇form表單的子元素div的邊框?qū)傩?/p>

實(shí)例效果：

結(jié)合我們的DOM樹(shù)形結(jié)構(gòu)我們可以明顯的看出form 底下有四個(gè)div，其中fieldset下有一個(gè)div，也就是說(shuō)fieldset下的div不是form的子元素，只不過(guò)是其后代元素而以，因此就出現(xiàn)我們效果圖中藍(lán)色部分，div的邊框?qū)傩圆黄鹱饔?，為了更詳?xì)的看出，我們可以看看Firefox firebug下的HTML變化：

綠色部分的div是form的子元素，所以加上了border:1px solid red的CSS樣式，而蘭色背景那個(gè)div是其后代元素，所以沒(méi)有被加上CSS的border樣式屬性。

三、層次選擇器——相鄰元素選擇器（prev + next）：

選擇器：

$("prev  +  next")  //其中prev是任何有效果選擇器，而next是prev元素相鄰的下一個(gè)元素（也就是緊接著pre的元素）

描述：

選擇緊接在prev元素后的next元素

返回值：

集合元素

實(shí)例：

<script type="text/javascript">   $(document).ready(function(){
      $('fieldset + div ').css('border','1px solid red');
   });</script>

功能：

改變fieldset表單域的下一個(gè)div兄弟元素的邊框?qū)傩?/p>

效果：

DOM樹(shù)告訴我們fieldset的兄弟元素有四個(gè)名為“form-item”的div，但我們相鄰元素只對(duì)緊接著fieldset的兄弟元素起作用，所以我們效果圖中只有fieldset后的第一個(gè)div起變化，F(xiàn)irebug就看得更清楚了：

四、層次選擇器——兄弟選擇器（prev? ~? siblings）：

選擇器：

$("prev ~  siblings")  //prev是指任何有效果的元素選擇器，而siblings是指prev元素后面的所有兄弟元素

描述：

選取prev元素之后的所有siblings兄弟元素。

返回值：

集合元素

實(shí)例：

<script type="text/javascript">   $(document).ready(function(){
      $('div ~ div ').css('border','1px solid red');
   });</script>

功能：

改變表單div元素后面的所有div兄弟元素的邊框?qū)傩浴?/p>

效果：

結(jié)合前面給出的DOM樹(shù)，div后面有三個(gè)div和fieldset四個(gè)兄弟元素，那么div ~ div就讓我們選擇中了表單中第一個(gè)div元素的后面所有div元素，從而改變了他們的border屬性，同樣我們來(lái)看看Firebug下的代碼變化：

上面主要介紹了一下jQuery中的四種層次選擇器的功能和用法。在層次選擇器中，后代元素和子元素選擇器是我們常用的兩種層次選擇器，而后面兩種相鄰元素和兄弟元素的層次選擇器在jQuery中，我們可以使用next()方法來(lái)代替$("prev? +? next")選擇器，而用nextAll()方法來(lái)代替$("prev? ~? siblings")選擇器。

也就是說(shuō)我們前面應(yīng)用的

<script type="text/javascript">   $(document).ready(function(){
      $('fieldset + div ').css('border','1px solid red');
   });</script>

可以使用next()的方法來(lái)代替：

<script type="text/javascript">   $(document).ready(function(){
      $('fieldset').next('div').css('border','1px solid red');
   });</script>

而

<script type="text/javascript">   $(document).ready(function(){
      $('div ~ div ').css('border','1px solid red');
   });</script>

可以使用nextAll()的方法來(lái)代替：

<script type="text/javascript">   $(document).ready(function(){
      $('div').nextAll().css('border','1px solid red');
   });</script>