jQuery技術内幕：深入解析jQuery架構設計與實作原理. 2.1 構造函數jQuery()

<b>2.1　構造函數jquery()</b>

如果調用構造函數jquery()時傳入的參數不同，建立jquery對象的邏輯也會随之不同。構造函數jquery()有7種用法，如圖2-1所示。

圖2-1　構造函數jquery()

下面分别介紹構造函數jquery()的7種用法。

<b>2.1.1　jquery( selector [,</b>

context] )

如果傳入一個字元串參數，jquery會檢查這個字元串是選擇器表達式還是html代碼。如果是選擇器表達式，則周遊文檔，查找與之比對的dom元素，并建立一個包含了這些dom元素引用的jquery對象；如果沒有元素與之比對，則建立一個空jquery對象，其中不包含任何元素，其屬性length等于0。字元串參數是html代碼的情況會在下一小節介紹。

預設情況下，對比對元素的查找将從根元素document對象開始，即查找範圍是整個文檔樹，不過也可以傳入第二個參數context來限定查找範圍（本書中把參數context稱為“選擇器的上下文”，或簡稱“上下文”）。例如，在一個事件監聽函數中，可以像下面這樣限制查找範圍：

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

$('span', this).addclass('bar'); // 限定查找範圍

});

在這個例子中，對選擇器表達式“span”的查找被限制在了this的範圍内，即隻有被點選元素内的span元素才會被添加類樣式“bar”。

如果選擇器表達式selector是簡單的“#id”，且沒有指定上下文context，則調用浏覽器原生方法document.getelementbyid()查找屬性id等于指定值的元素；如果是比“#id”複雜的選擇器表達式或指定了上下文，則通過jquery方法.find()查找，是以$('span', this)等價于$(this).find('span')。

至于方法.find()，會調用css選擇器引擎sizzle實作，在第3章中将會進行介紹和分析。

<b>2.1.2　jquery( html [,</b>

ownerdocument] )、jquery( html, props )

如果傳入的字元串參數看起來像一段html代碼（例如，字元串中含有&lt;tag…&gt;），jquery則嘗試用這段html代碼建立新的dom元素，并建立一個包含了這些dom元素引用的jquery對象。例如，下面的代碼将把html代碼轉換成dom元素并插入body節點的末尾：

$('&lt;p id="test"&gt;my

&lt;em&gt;new&lt;/em&gt; text&lt;/p&gt;').appendto('body');

如果html代碼是一個單獨标簽，例如，$('&lt;img/&gt;')或$('&lt;a&gt;&lt;/a&gt;')，jquery會使用浏覽器原生方法document.createelement()建立dom元素。如果是比單獨标簽更複雜的html片段，例如上面例子中的$('&lt;p id =

"test"&gt;my&lt;em&gt;new&lt;/em&gt;text&lt;/p&gt;')，則利用浏覽器的innerhtml機制建立dom元素，這個過程由方法jquery.buildfragment()和方法jquery.clean()實作，相關内容分别在2.4節和2.5節介紹和分析。

第二個參數ownerdocument用于指定建立新dom元素的文檔對象，如果不傳入，則預設為目前文檔對象。

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

參數props的屬性可以是任意的事件類型（如“click”），此時屬性值應該是事件監聽函數，它将被綁定到新建立的dom元素上；參數props可以含有以下特殊屬性：val、css、html、text、data、width、height、offset，相應的jquery方法：.val()、.css()、.html()、.text()、.data()、.width()、.height()、.offset()将被執行，并且屬性值會作為參數傳入；其他類型的屬性則會被設定到新建立的dom元素上，某些特殊屬性還會做跨浏覽器相容（如type、value、tabindex等）；可以通過屬性名class設定類樣式，但要用引号把class包裹起來，因為class是javascript保留字。例如，在下面的例子中，建立一個div元素，并設定類樣式為“test”、設定文本内容為“click me!”、綁定一個click事件，然後插入body節點的末尾，當點選該div元素時，還會切換類樣式test：

$("&lt;div/&gt;", {

"class": "test",

text: "click me!",

click: function(){

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

   }

}).appendto("body");

方法.attr()将在8.2節介紹和分析。

<b>2.1.3　jquery( element )、jquery(</b>

elementarray )

如果傳入一個dom元素或dom元素數組，則把dom元素封裝到jquery對象中并傳回。

這個功能常見于事件監聽函數，即把關鍵字this引用的dom元素封裝為jquery對象，然後在該jquery對象上調用jquery方法。例如，在下面的例子中，先調用$(this)把被點選的div元素封裝為jquery對象，然後調用方法slideup()以滑動動畫隐藏該div元素：

$(this).slideup();

<b>2.1.4　jquery( object )</b>

如果傳入一個普通javascript對象，則把該對象封裝到jquery對象中并傳回。

這個功能可以友善地在普通javascript對象上實作自定義事件的綁定和觸發，例如，執行下面的代碼會在對象foo上綁定一個自定義事件custom，然後手動觸發這個事件，執行綁定的custom事件監聽函數，如下所示：

// 定義一個普通 javascript 對象

var foo = {foo:'bar', hello:'world'};

// 封裝成 jquery 對象

var $foo = $(foo);

// 綁定一個事件

$foo.on('custom', function (){

console.log('custom event was called');

// 觸發這個事件

$foo.trigger('custom');                       // 在控制台列印"custom

event was called"

<b>2.1.5　jquery( callback )</b>

如果傳入一個函數，則在document上綁定一個ready事件監聽函數，當dom結構加載完成時執行。ready事件的觸發要早于load事件。ready事件并不是浏覽器原生事件，而是domcontentloaded事件、onreadystatechange事件和函數doscrollcheck()的統稱，将在9.11節介紹和分析。

<b>2.1.6　jquery( jquery</b>

object )

如果傳入一個jquery對象，則建立該jquery對象的一個副本并傳回，副本與傳入的jquery對象引用完全相同的dom元素。

<b>2.1.7　jquery()</b>

如果不傳入任何參數，則傳回一個空的jquery對象，屬性length為0。注意，在jquery 1.4之前，會傳回一個含有document對象的jquery對象。

這個功能可以用來複用jquery對象，例如，建立一個空的jquery對象，然後在需要時先手動修改其中的元素，再調用jquery方法，進而避免重複建立jquery對象。