在DOM元素之間的層次關(guān)係主要包含元素的後代元素、子元素、相鄰元素和兄弟元素等，那麼我們?cè)谕高^選擇DOM元素之間的層次關(guān)係來取得我們想要選擇的元素時(shí)，這種層次選擇器對(duì)我們選擇元素來說是一種特棒的選擇方法。為了更好的學(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)，我們先來看看其在BODY中的DOM樹形結(jié)構(gòu)圖：

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

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

選擇器：

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

#描述：

選擇ancestor元素裡的所有後代元素descendant。

傳回值：

集合元素

我們來看下面一個(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ū)別的，前者只能選擇到子元素，而後者能選擇到所有後代元素，比如說子元素還有孫子輩的元素等。

傳回值：

集合元素

#實(shí)例：

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

#功能：

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

實(shí)例效果：

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

綠色部分的div是form的子元素，所以加上了border:1px solid red的CSS樣式，而蘭色背景那個(gè)div是其後代元素，所以沒有被加上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樹告訴我們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ū)傩浴?

效果：

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

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

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

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

可以用next()的方法來取代：

<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()的方法來代替：

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