在慕課網上學習jQuery源碼，做一些筆記小研究。

第1章 節點遍歷

第2章 文檔處理

第3章 元素操作

第4章 樣式操作

第5章 事件體系

第6章 數據交互

第7章 動畫引擎

首先瞅瞅目錄，大概可以了解一下這個是怎麽講的QAQ。

今天學習的是節點遍歷。

遍歷的對象主要是：1 祖先 2 同胞兄弟 3 後代 4 過濾

我們先看祖先。

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

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

.parentsUntil() 方法會找遍所有這些元素的前輩元素，直到遇到了跟參數匹配的元素才會停止。返回的jQuery對象中包含了所有找到的前輩元素，除了與 .parentsUntil() 選擇器匹配的那個元素。

簡單來說.parent()是一個父元素，最近的那個，.parents是所有的父元素。.parentsUntil()是你可以傳入一個搜尋終止點。

然後大概來看看它的寫法（首先看看nodeType：http://www.w3school.com.cn/jsref/prop_node_nodetype.asp）

function parent(elem) {
  var parent = elem.parentNode;  
  //如果父親節點是DocumentFragment就返回null
  return parent && parent.nodeType !== 11 ? parent : null
 
;
}


function parents(elem){
  var matched = [];
  //如果元素存在父元素且元素不是根節點
  while ( (elem = elem[ ‘parentNode‘ ]) && elem.nodeType !== 9 ) {
    //如果是元素類型就加入到數組中
    if ( elem.nodeType === 1 ) {
      matched.push( elem );
    }
  }
  return matched;
}

function parentsUntil(elem, filter) {
  var matched = [],
    until,
   //如果沒有定義過濾器，就把truncate設為false
    truncate 
 
= filter !== undefined;
    
  while ((elem = elem[‘parentNode‘]) && elem.nodeType !== 9) {
    if (elem.nodeType === 1) {
      //如果設置了過濾器就執行以下
      if (truncate) {
        //元素名稱小寫化比對是否是終止元素
        if(elem.nodeName.toLowerCase() ==filter){
          break;
        }
      }
      matched.push(elem);
    }
  }
  return matched;
}

兄弟節點

//定義了一個公共的函數，減少重復的代碼。
//elem中心元素，dir是尋找元素的類型,until是終止元素的標簽名或者類名
function dir(elem, dir, until) {
  var matched = [],
    truncate = until !== undefined;
  while ((elem = elem[dir]) && elem.nodeType !== 9) {
    if (elem.nodeType === 1) {
      if (truncate) {
        if (elem.nodeName.toLowerCase() == until || elem.className == until) {
          break;
        }
      }
      matched.push(elem);
    }
  }
  return matched;
}

//後面全部的兄弟節點
function nextAll(elem) {
  return dir(elem, "nextSibling");
}

//前面全部的兄弟節點
function prevAll(elem) {
  return dir(elem, "previousSibling");
}

function nextUntil(elem, until) {
  return dir(elem, "nextSibling", until);
}

function prevUntil(elem, until) {
  return dir(elem, "previousSibling", until);
}

function sibling(cur, dir) {
  while ((cur = cur[dir]) && cur.nodeType !== 1) {}
  return cur;
}

function next(elem) {
  return sibling(elem, "nextSibling");
}

function prev(elem) {
  return sibling(elem, "previousSibling");
}

.next() 獲得自己同族的下一個同胞

.prev() 獲得自己同族的上一個同胞

.siblings() 獲得自己同族的所有同胞除了自己

感覺有點疑惑這個siblings...今天先學習到這裏吧。

jQuery源碼學習筆記（1）