1、遍歷簡介

在數(shù)據(jù)結(jié)構(gòu)中有遍歷這個概念，簡單的說就是將數(shù)據(jù)的所有節(jié)點查詢一遍，不同的數(shù)據(jù)結(jié)構(gòu)有不同的遍歷方法，同一種數(shù)據(jù)結(jié)構(gòu)也有不同的遍歷方法，jQuery的遍歷函數(shù)包含了篩選、查找元素等方法。

可以想看一個DOM樹：

DOM節(jié)點

• <div> 元素是 <ul> 的父元素，同時是其中所有內(nèi)容的祖先。
• <ul> 元素是 <li> 元素的父元素，同時是 <div> 的子元素
• 左邊的 <li> 元素是 <span> 的父元素，<ul> 的子元素，同時是 <div> 的后代。
• <span> 元素是 <li> 的子元素，同時是 <ul> 和 <div> 的后代。
• 兩個 <li> 元素是同胞（擁有相同的父元素）。
• 右邊的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同時是 <div> 的后代。
• <b> 元素是右邊的 <li> 的子元素，同時是 <ul> 和 <div> 的后代。

這里寫一個例子
HTML

<h2>文檔遍歷處理</h2>
<button id="test1">文檔篩選eq</button>
<button id="test2">文檔篩選filter</button>
<button id="test3">文檔篩選not</button>
<button id="test4">樹遍歷children</button>
<button id="test5">樹遍歷closest</button>
<button id="test6">樹遍歷find</button>

<h2>節(jié)點樹</h2>
<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

jQuery的一些遍歷方法

    //通過eq()查找對應(yīng)的序列的第三個li元素
    $('#test1').on('click',function(){
        $('li').eq(2).css('background','red')  
    })
    //通過filter()方法來進行篩選奇數(shù)的li元素
    $("#test2").click(function() {
        $('li').filter(':even').css('background-color', 'blue');
    })
    //通過not()方法進行否定的篩選，既除xxx外，僅查找同胞元素
    $("#test3").click(function() {
        $('li').not(':even').css('background-color', 'red');
    })
    //childern()查找兒子元素
    $("#test4").click(function() {
        $('ul.level-2').children().css('background-color', 'yellow');
    })
    //closest()方法是取得最近的匹配元素，從元素本身開始逐級向上
    $("#test5").click(function() {
        $('li.item-a').closest('ul').css('background-color', 'red');
    })
    //find()就不必說了，常用的查找方法
    $("#test6").click(function() {
        $('li.item-ii').find('li').css('background-color', 'blue');
    })

效果測試預(yù)覽：點擊我

2、jQuery的遍歷結(jié)構(gòu)設(shè)計

上面我們已經(jīng)發(fā)現(xiàn)jQuery的提供了各種遍歷的接口,同時這些遍歷的接口很多都是具有相似或者說是一類的處理功能，那么這種接口的設(shè)計我們不能就事論事的一個一個去實現(xiàn)，這樣代碼就會顯得非常累贅也不容易維護，豐富的接口可以讓高層的設(shè)計更為簡單,但是框架內(nèi)部的卻要簡練。那么針對這種類似功能的接口，jQuery內(nèi)部就會做更多的抽象處理了。

接口的遍歷我們可以分為下面幾大類：

• 1 祖先
• 2 同胞兄弟
• 3 后代
• 4 過濾