jQuery中DOM節點如何遍歷

這篇文章將為大家詳細講解有關jQuery中DOM節點如何遍歷，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

children()方法

jQuery是一個合集對象，如果想快速查找合集里面的第一級子元素，此時可以用children()方法。這里需要注意：.children(selector) 方法是返回匹配元素集合中每個元素的所有子元素（僅兒子輩，這里可以理解為就是父親-兒子的關系）

節點查找關系

<div class="div">
  <ul class="son">
    <li class="grandson">1</li>
  </ul>
</div>

代碼如果是$("div").children()，那么意味著只能找到ul，因為div與ul是父子關系，li與div是祖輩關系，因此無法找到

children()無參數

允許通過在DOM樹中對這些元素的直接子元素進行搜索，并且構造一個新的匹配元素的jQuery對象

注意：jQuery是一個合集對象，所以通過children匹配合集中每一個元素的第一級子元素

.children()方法選擇性地接受同一類型選擇器表達式

$("div").children(".selected")

同樣的也是因為jQuery是合集對象，可能需要對這個合集對象進行一定的篩選，找出目標元素，所以允許傳一個選擇器的表達式

find()方法

jQuery是一個合集對象，如果想快速查找DOM樹中的這些元素的后代元素，此時可以用find()方法，這也是開發使用頻率很高的方法。這里要注意 children與find方法的區別，children是父子關系查找，find是后代關系（包含父子關系）

節點查找關系

<div class="div">
  <ul class="son">
    <li class="grandson">1</li>
  </ul>
</div>

代碼如果是$("div").find("li")，此時，li與div是祖輩關系，通過find方法就可以快速的查找到

.find()方法要注意的知識點

• find是遍歷當前元素集合中每個元素的后代。只要符合，不管是兒子輩，孫子輩都可以

• 與其他的樹遍歷方法不同，選擇器表達式對于 .find() 是必需的參數。如果我們需要實現對所有后代元素的取回，可以傳遞通配選擇器 '*'

• find只在后代中遍歷，不包括自己

• 選擇器 context 是由 .find() 方法實現的；因此，$('.item-ii').find('li') 等價于 $('li', '.item-ii')(找到類名為item-ii的標簽下的li標簽)
  

注意重點

.find()和.children()方法是相似的

• children只查找第一級的子節點

• find查找范圍包括子節點的所有后代節點

parent()方法
jQuery是一個合集對象，如果想快速查找合集里面的每一個元素的父元素（這里可以理解為就是父親-兒子的關系），此時可以用parent()方法；因為是父元素，這個方法只會向上查找一級

節點查找關系

<div class="div">
  <ul class="son">
    <li class="grandson">1</li>
  </ul>
</div>
// 查找ul的父元素div, $(ul).parent()

parent()無參數

parent()方法允許我們能夠在DOM樹中搜索到這些元素的父級元素，從有序的向上匹配元素，并根據匹配的元素創建一個新的 jQuery 對象

注意：jQuery是一個合集對象，所以通過parent是匹配合集中每一個元素的父元素

parent()方法選擇性地接受同一型選擇器表達式

同樣的也是因為jQuery是合集對象，可能需要對這個合集對象進行一定的篩選，找出目標元素，所以允許傳一個選擇器的表達式

parents()方法

jQuery是一個合集對象，如果想快速查找合集里面的每一個元素的所有祖輩元素，此時可以用parents()方法

其實也類似find與children的區別，parent只會查找一級，parents則會往上一直查到查找到祖先節點

節點查找關系

<div class="div">
  <ul class="son">
    <li class="grandson">1</li>
  </ul>
</div>
// 在li節點上找到祖輩元素div，用$("li").parents()方法

parents()無參數

parents()方法允許我們能夠在DOM樹中搜索到這些元素的祖先元素，從有序的向上匹配元素，并根據匹配的元素創建一個新的 jQuery 對象；返回的元素秩序是從離他們最近的父級元素開始的

注意：jQuery是一個合集對象，所以通過parent是匹配合集中所有元素的祖輩元素

parents()方法選擇性地接受同一型選擇器表達式

同樣的也是因為jQuery是合集對象，可能需要對這個合集對象進行一定的篩選，找出目標元素，所以允許傳一個選擇器的表達式

注意事項

1. .parents()和.parent()方法是相似的，但后者只是進行了一個單級的DOM樹查找

2. $( "html" ).parent()方法返回一個包含document的集合，而$( "html" ).parents()返回一個空集合。

closest()方法

以選定的元素為中心，往內查找可以通過find、children方法。如果往上查找，也就是查找當前元素的父輩祖輩元素，jQuery提供了closest()方法，這個方法類似parents但是又有一些細微的區別，屬于使用頻率很高的方法

closest()方法接受一個匹配元素的選擇器字符串

從元素本身開始，在DOM 樹上逐級向上級元素匹配，并返回最先匹配的祖先元素

// 在div元素中，往上查找所有的li元素，可以這樣表達
$("div").closet("li')

注意：jQuery是一個合集對象，所以通過closest是匹配合集中每一個元素的祖先元素

closest()方法給定的jQuery集合或元素來過濾元素

同樣的也是因為jQuery是合集對象，可能需要對這個合集對象進行一定的篩選，找出目標元素，所以允許傳一個jQuery的對象

注意事項

• 起始位置不同：.closest開始于當前元素 .parents開始于父元素

• 遍歷的目標不同：.closest要找到指定的目標，.parents遍歷到文檔根元素，closest向上查找，直到找到一個匹配的就停止查找，parents一直查找到根元素，并將匹配的元素加入集合

• 結果不同：.closest返回的是包含零個或一個元素的jquery對象，parents返回的是包含零個或一個或多個元素的jquery對象
  

next()方法

jQuery是一個合集對象，如果想快速查找指定元素集合中每一個元素緊鄰的后面同輩元素的元素集合，此時可以用next()方法

節點查找關系

//如下的class="item-2"就是class="item-1"的兄弟元素
<ul class="level-3">
  <li class="item-1">1</li>
  <li class="item-2">2</li>
  <li class="item-3">3</li>
</ul>

next()無參數

允許我們找遍元素集合中緊跟著這些元素的直接兄弟元素，并根據匹配的元素創建一個新的 jQuery 對象。

注意：jQuery是一個合集對象，所以通過next匹配合集中每一個元素的下一個兄弟元素

next()方法選擇性地接受同一類型選擇器表達式

同樣的也是因為jQuery是合集對象，可能需要對這個合集對象進行一定的篩選，找出目標元素，所以允許傳一個選擇器的表達式

prev()方法

jQuery是一個合集對象，如果想快速查找指定元素集合中每一個元素緊鄰的前面同輩元素的元素集合，此時可以用prev()方法

節點查找關系

如下的class="item-1"節點就是class="item-2"的li元素的prev兄弟節點

<ul class="level-3">
  <li class="item-1">1</li>
  <li class="item-2">2</li>
  <li class="item-3">3</li>
</ul>

prev()無參數

取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合

注意：jQuery是一個合集對象，所以通過prev是匹配合集中每一個元素的上一個兄弟元素
prev()方法選擇性地接受同一類型選擇器表達式

同樣的也是因為jQuery是合集對象，可能需要對這個合集對象進行一定的篩選，找出目標元素，所以允許傳一個選擇器的表達式

siblings()

jQuery是一個合集對象，如果想快速查找指定元素集合中每一個元素的同輩元素，此時可以用siblings()方法

節點查找關系
如下是class="item-1"和class="item-3"就是class="item-2"的siblings兄弟節點

<ul class="level-3">
  <li class="item-1">1</li>
  <li class="item-2">2</li>
  <li class="item-3">3</li>
</ul>

siblings()無參數

取得一個包含匹配的元素集合中每一個元素的同輩元素的元素集合

注意：jQuery是一個合集對象，所以通過siblings是匹配合集中每一個元素的同輩元素
siblings()方法選擇性地接受同一類型選擇器表達式

同樣的也是因為jQuery是合集對象，可能需要對這個合集對象進行一定的篩選，找出目標元素，所以允許傳一個選擇器的表達式

add()方法

jQuery是一個合集對象，通過$()方法找到指定的元素合集后可以進行一系列的操作。$()之后就意味著這個合集對象已經是確定的，如果后期需要再往這個合集中添加一新的元素要如何處理？jQuery為此提供add方法，用來創建一個新的jQuery對象 ，元素添加到匹配的元素集合中

.add()的參數可以幾乎接受任何的$()，包括一個jQuery選擇器表達式，DOM元素，或HTML片段引用

//操作：選擇所有的li元素，之后把p元素也加入到li的合集中
<ul>
  <li>list item 1</li>
  <li>list item 3</li>
</ul>
<p>新的p元素</p>

// 處理一：傳遞選擇器
$('li').add('p')
// 處理二：傳遞dom元素
$('li').add(document.getElementsByTagName('p')[0])
// 動態創建P標簽加入到合集，然后插入到指定的位置，但是這樣就改變元素的本身的排列了
 $('li').add('<p>新的p元素</p>').appendTo(目標位置)

each()

jQuery是一個合集對象，通過$()方法找到指定的元素合集后可以進行一系列的操作

如操作$("li").css('') 給所有的li設置style值，因為jQuery是一個合集對象，所以css方法內部就必須封裝一個遍歷的方法，被稱為隱式迭代的過程。要一個一個給合集中每一個li設置顏色，這里方法就是each

.each() 方法就是一個for循環的迭代器，它會迭代jQuery對象合集中的每一個DOM元素。每次回調函數執行時，會傳遞當前循環次數作為參數(從0開始計數)

三個重點

• each是一個for循環的包裝迭代器

• each通過回調的方式處理，并且會有2個固定的實參，索引與元素

• each回調方法中的this指向當前迭代的dom元素

實例：

<ul>
  <li>克利夫蘭騎士</li>
  <li>LeBorn James</li>
</ul>
開始迭代li，循環2次
$("li").each(function(index, element) {
   index 索引 0,1
   element是對應的li節點 li,li
   this 指向的是li
})

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style>
  .left {
    width: auto;
    height: 150px;
  }
  
  .left div {
    width: 150px;
    height: 120px;
    padding: 5px;
    margin: 5px;
    float: left;
    background: #bbffaa;
    border: 1px solid #ccc;
  }
  </style>
  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
  <h3>each方法</h3>
  <div class="left first-div">
    <div class="div">
      <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
      </ul>
    </div>
    <div class="div">
      <ul>
        <li>list item 4</li>
        <li>list item 5</li>
        <li>list item 6</li>
      </ul>
    </div>
  </div>

  <br/>
  <button>點擊：each方法遍歷元素</button>
  <button>點擊：each方法回調判斷</button>
  <script type="text/javascript">
  $("button:first").click(function() {
    //遍歷所有的li
    //修改每個li內的字體顏色
    $("li").each(function(index, element) {
      $(this).css('color','red')
    })

  })
  </script>
  <script type="text/javascript">
  $("button:last").click(function() {
    //遍歷所有的li
    //修改偶數li內的字體顏色
    $("li").each(function(index, element) {
      if (index % 2) {
        $(this).css('color','blue')
      }
    })
  })
  </script>
</body>

</html>

關于“jQuery中DOM節點如何遍歷”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。