jQuery技術內幕預覽版.pdf2

標籤：style   blog   http   java   使用   strong   io   2014   

第二章 構造jQuery對象

jQuery對象是一個類數組對象，含有連續的整型屬性、length屬性和大量的jQuery方法，$()是jQuery()的縮寫

建構函式jQuery()

如果調用建構函式jQuery()時傳入的參數不同，建立的jQuery對象的邏輯也會隨之不同

jQuery(selector[,context]):

如果傳入一個字串參數，jQuery會檢查這個字串是選取器運算式還是HTML代碼。如果是選取器運算式，則遍曆文檔，尋找與之匹配的DOM元素，並建立一個包含了這些DOM元素引用的jQuery對象；如果沒有元素與之匹配，則建立一個空jQuery對象，其中不包含任何元素，其屬性length等於0；

預設情況下，對匹配元素的尋找將從根項目document對象開始，也可以傳入第二個參數context（上下文）來限定尋找範圍

$(‘div.foo‘).click(function(){

　　$(‘span‘,this).addClass(‘bar‘);　　//限定尋找範圍，等價於$(‘this‘).find(‘span‘)

});

jQuery(html[,ownerDocument])、jQuery(html,props):

如果傳入的字串是一段HTML代碼，jQuery則嘗試用這段HTML代碼建立新的DOM元素，並建立一個包含了這些DOM元素引用的jQuery對象

$(‘<p id="test">My<em>text</em></p>‘).appendTo(‘body‘);

第二個參數ownerDocument用於指定建立DOM元素的文檔對象，如不傳入，預設當前文檔對象；

如果HTML代碼是一個單獨的標籤，那麼第二個參數還可以是props，props是一個包含了屬性、事件的普通對象；在調用document.createElement()建立DOM元素後，參數props會被傳給jQuery方法.attr()，由attr()負責把參數props中得屬性、事件設定到新建立的DOM元素上

參數 props 可以含有以下特殊屬性：val、css、
html、text、data、width、height、offset，相應的 jQuery 方 法：.val()、.css()、.html()、.text()、.
data()、.width()、.height()、.offset() 將被執行，並且屬性值會作為參數傳入

$("<div/>",{

"class":"test",　　//class是JavaScript保留字

text:"Click me!"

click:function(){

　　$(this).toggleClass("test");

}

}).appendTo("body");

jQuery(element)、jQuery(elementArray):

如果傳入一個 DOM 元素或 DOM元素數組，則把 DOM 元素封裝到 jQuery 對象中並返回，

這個功能常見於事件監聽函數，即把關鍵字 this 引用的 DOM 元素封裝為 jQuery 對象，
然後在該 jQuery 對象上調用 jQuery 方法。

$(‘div .foo‘).click(function(){

　　$(this).slideUp();

});

jQuery(object):

如果傳入一個普通 JavaScript 對象，則把該對象封裝到 jQuery 對象中並返回，可以為這個封裝後的對象添加方法屬性

jQuery(callback):

如果傳入一個函數，則在 document 上綁定一個 ready 事件監聽函數，當 DOM 結構載入
完成時執行，ready 事件的觸發要早於 load 事件

jQuery(jQuery object):

如果傳入一個 jQuery 對象，則建立該 jQuery 對象的一個副本並返回，副本與傳入的
jQuery 對象引用完全相同的 DOM 元素

jQuery():

如果不傳入任何參數，則返回一個空的 jQuery 對象，屬性 length 為 0

第 25 行又定義了一個變數 jQuery，它的值是 jQuery 建構函式

第 97 ～ 319 行覆蓋了建構函式 jQuery() 的原型對象

第 98 行覆蓋了原型對象的屬性 constructor，使它指向 jQuery 建構函式

第 99 行定義了原型方法 jQuery.fn.init()，它負責 解析參數 selector 和 context 的類型並執行相應的尋找

1）為什麼要在建構函式 jQuery() 內部用運算子 new 建立並返回另一個建構函式的執行個體？

例如， newDate() 會返回一個 Date 對象；但是，如果建構函式有傳回值，運算子 new 所建立的對象 會被丟棄，傳回值將作為 new 運算式的值。

通過在建構函式 jQuery() 內部用運算子 new 建立並返回另一個 建構函式的執行個體，省去了建構函式 jQuery() 前面的運算子 new，即我們建立 jQuery 對象時， 可以省略運算子 new 直接寫 jQuery()

2）為什麼在第 97 行執行 jQuery.fn = jQuery.prototype，設定 jQuery.fn 指向建構函式 jQuery() 的原型對象 jQuery.prototype ？

jQuery.fn 是 jQuery.prototype 的簡寫，可以少寫 7 個字元，以方便拼字。

3）既然調用建構函式 jQuery() 返回的 jQuery 對象實際上是建構函式 jQuery.fn.init() 的
執行個體，為什麼能在建構函式 jQuery.fn.init() 的執行個體上調用建構函式 jQuery() 的原型方法和屬
性？例如，$(‘#id‘).length 和 $(‘#id‘).size()。

在第 322 行執行 jQuery.fn.init.prototype = jQuery.fn 時，用建構函式 jQuery() 的原型對象
覆蓋了建構函式 jQuery.fn.init() 的原型對象，從而使建構函式 jQuery.fn.init() 的執行個體也可以訪
問建構函式 jQuery() 的原型方法和屬性

4）為什麼要把第 25 ～ 955 行的程式碼封裝裹在一個自調用匿名函數中，然後把第 25 行定
義的建構函式 jQuery() 作為傳回值賦值給第 22 行的 jQuery 變數？去掉這個自調用匿名函
數，直接在第 25 行定義建構函式 jQuery() 不也可以嗎？去掉了不是更容易閱讀和理解嗎？

去掉第 25 ～ 955 行的自調用匿名函數當然可以，但會潛在地增加構造 jQuery 對象模組
與其他模組的耦合度。在第 25 ～ 97 行之間還定義了很多其他的局部變數，這些局部變數只
在構造 jQuery 對象模組內部使用。通過把這些局部變數包裹在一個自調用匿名函數中，實現
了高內聚低耦合的設計思想

為什麼要覆蓋建構函式 jQuery() 的原型對象 jQuery.prototype ？

在原型對象 jQuery.prototype 上定義的屬性和方法會被所有 jQuery 對象繼承，可以有
效減少每個 jQuery 對象所需的記憶體