jQuery 技術解密(五)

2021-07-08 08:58:37 字數 3424 閱讀 9577

jquery() 函式能夠直接接受 html 字串,並把它們轉換為 dom 結構,這是上一節中所講解的利用 jquery() 函式生成 dom 元素。當然,我們也可以看到 jquery() 函式還可以接收 dom 元素、dom元素集合、html標籤或者 id 值。下面我們就來分析 jquery.fn.init() 構造器是如何把這些型別的引數轉換為 dom 元素的。

對於 html 標籤來說,它使用 document.getelementsbytagname() 方法獲取 dom 元素集合。對於 id 引數來說,它使用 document.getelementbyid() 方法獲取特定的 dom 元素。另外,還可以使用 dom 元素的 childnodes、firstchild、lastchild、nextsibling、parentnode 和 previoussibling 的屬性引用 dom 節點。

既然說 dom 元素能夠通過 lastchild、parentnode 等屬性引用節點,jquery 物件又是 dom 元素的集合,因此,jquery 就可以考慮通過整合 dom 元素的這些屬性來獲得其集合中所有元素各自引用的節點。把這些間接引用的節點組合起來又構成了新的 dom 元素集合。下面我們就來分析 jquery 是如何引用節點的。

[html]view plain

copy

// 通過 each() 方法為 jquery 物件對映一組引用 dom 節點的方法  

jquery.each(, // 引用父節點  

parents: function(elem), // 引用所有父節點  

next: function(elem),// 引用相鄰的下乙個 dom 元素  

prev: function(elem), // 引用相鄰的上乙個dom元素  

nextall: function(elem), // 引用所有後繼dom元素  

prevall: function(elem), // 引用所有前繼dom元素  

sibling: function(elem), // 引用相鄰dom元素  

children: function(elem),// 引用所有子元素  

// 如果存在 iframe,則就是文件,或者所有子節點  

// elem.contentdocument || elem.contentwindow.document iframe 的屬性  

//   

contents: function(elem)  

}, function(name, fn);  

});  

在上面的**中,為 jquery 物件繫結了一組方法,這些方法能夠引用不同位置的節點,主要包括父節點、子節點和兄弟節點三類。

jquery 通過 jquery.each() 公共函式把這個節點引用的方法註冊到 jquery.fn 原型物件中,即 jquery 物件的同名方法中。因為 jquery 物件的 dom 元素是乙個集合,所以就必須對集合中每個 dom 元素執行相同的操作,也就是說為每個 dom 元素呼叫屬性包含的函式,如 parent: function(elem); 中的 function(elem) 。

當然,在引用的節點中,還包括很多重複的 dom 元素,或者使用者需要過濾的其他節點,這些操作都需要利用過濾函式進行過濾,關於這個話題將在 css 選擇器一節中進行詳細的講解。

在上面定義的 jquery 物件方法中,jquery 也提供了幾個公共函式: jquery.dir()、jquery.nth() 和 jquery.sibling() 來輔助完成引用 dom 節點。下面我們來分析這幾個公共函式的用法。 

[html]view plain

copy

// 從乙個元素出發,檢索某個方向上的所有元素  

// 如可以把元素的 parentnode、nextsibling、previoussibling、lastchild、firstchild 屬性作為方向  

// 引數說明:  

// elem 引數表示起點元素  

// dir 引數表示元素的方向屬性,如 parentnode、nextsibling、previoussibling、lastchild、firstchild  

jquery.dir

= function

(elem, dir)  

return matched;  

};  

dir 是 direction(方向) 一詞的縮寫,表示朝乙個方向一直迭代到盡頭。例如,parentnode 能夠把父節點作為當前節點,再取其父節點,通過這種方式可以迭代到 document 物件為止。另外,對於 nextsibling、previoussibling、lastchild 和 firstchild 元素屬性都具有方向性,因此只要獲取元素具有 dir (方向) 特性的屬性,就可以反覆迭代讀取。每迴圈一次都會把取到的元素儲存起來。

所以說,dir() 函式對於檢索 dom 文件樹中呈放射線性排列的元素來說,是非常有用的。但是如果要檢索在某個方向上的第幾個元素,如檢索偶數序號位置的元素,就需要使用 nth() 函式。該函式的源**如下所示。

[html]view plain

copy

// 從乙個元素出發,檢索某個方向上的第幾個元素。引數 result 是第幾個  

// 引數說明:  

// cur 引數表示起點元素  

// dir 引數表示元素的方向屬性,如 parentnode、nextsibling、previoussibling、lastchild 和 firstchild  

// result 引數表示級數,預設值為 1  

// elem 引數是乙個無用引數  

jquery.nth

= function

(cur, result, dir, elem);  

jquery.nth() 函式與 jquery.dir() 函式在設計思路上是完全相同的,但是 jquery.dir() 函式不包含自身,而 jquery.nth() 函式可以包含自身,如果 jquery.nth() 函式的引數 result 等於 1,則返回自身元素。如果沒有找到元素則返回空,如 undifined 或 null 。

jquery.sibling() 函式就比較簡單,但是沒有上面兩個方法有用。它實現了從乙個元素(包括自身)檢索所有後續相鄰元素,然後再從這個後續的相鄰元素排除乙個指定元素。例如:

[html]view plain

copy

// 從包含引數 n 的元素開始檢索所有後續相鄰元素,但不包含引數 elem 指定的元素  

// 引數說明:  

// n 引數表示起點元素  

// elem 引數排除元素  

jquery.sibling

= function

(n, elem)  

return r;  

}; 

第二章 jQuery技術解密 五

jquery 函式能夠直接接受 html 字串,並把它們轉換為 dom 結構,這是上一節中所講解的利用 jquery 函式生成 dom 元素。當然,我們也可以看到 jquery 函式還可以接收 dom 元素 dom元素集合 html標籤或者 id 值。下面我們就來分析 jquery.fn.init ...

第二章 jQuery技術解密 五

jquery 函式能夠直接接受 html 字串,並把它們轉換為 dom 結構,這是上一節中所講解的利用 jquery 函式生成 dom 元素。當然,我們也可以看到 jquery 函式還可以接收 dom 元素 dom元素集合 html標籤或者 id 值。下面我們就來分析 jquery.fn.init ...

jQuery 技術解密(七)

在 jquery.fn.init 構造器中,通過呼叫 jquery context find selector 函式來解析並匹配 dom 元素。jquery.find 函式實際上是引用 sizzle 函式,而 sizzle 函式僅是 sizzle 引擎的構造器,它主要呼叫 sizzle.find 函...