jQuery源码解读(DOM核心模块)-01节点遍历

1、遍历简介

在数据结构中有遍历这个概念，简单的说就是将数据的所有节点查询一遍，不同的数据结构有不同的遍历方法，同一种数据结构也有不同的遍历方法，jQuery的遍历函数包含了筛选、查找元素等方法。

可以想看一个DOM树：

DOM节点

• <div> 元素是 <ul> 的父元素，同时是其中所有内容的祖先。
• <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>节点树</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()查找对应的序列的第三个li元素
    $('#test1').on('click',function(){
        $('li').eq(2).css('background','red')  
    })
    //通过filter()方法来进行筛选奇数的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');
    })

效果测试预览：点击我

2、jQuery的遍历结构设计

上面我们已经发现jQuery的提供了各种遍历的接口,同时这些遍历的接口很多都是具有相似或者说是一类的处理功能，那么这种接口的设计我们不能就事论事的一个一个去实现，这样代码就会显得非常累赘也不容易维护，丰富的接口可以让高层的设计更为简单,但是框架内部的却要简练。那么针对这种类似功能的接口，jQuery内部就会做更多的抽象处理了。

接口的遍历我们可以分为下面几大类：

• 1 祖先
• 2 同胞兄弟
• 3 后代
• 4 过滤