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

1、遍历简介

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

可以想看一个DOM树：

DOM节点

• 元素是

  的父元素，同时是其中所有内容的祖先。
  • 元素是
    • 元素的父元素，同时是
      的子元素
    • 左边的
    • 元素是 的父元素，
      的子元素，同时是
      的后代。
      元素是
      的子元素，同时是
      和
      的后代。
      两个
      元素是同胞（拥有相同的父元素）。
      右边的
      元素是 的父元素，
      的子元素，同时是
      的后代。
      元素是右边的
      的子元素，同时是
      和
      的后代。
      这里写一个例子
      HTML
      文档遍历处理
      文档筛选eq
      文档筛选filter
      文档筛选not
      树遍历children
      树遍历closest
      树遍历find
      
      节点树
      
        
      I
        
      II
          
      
            
      A
            
      B
              
      
                
      1
                
      2
                
      3
              
            
            
      C
          
        
        
      III
      
      
      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 过滤