1、概述
jQuery是一個非常優秀的JS庫，與Prototype,YUI,Mootools等衆多的Js類庫相比，它劍走偏鋒，從web開發實用的角度出發，拋除了其它Lib中一些不實用的東西，爲開發者提供了短小精悍的類庫。其短小精悍，使用簡單方便，性能高效，能極大地提高開發效率，是開發web應用的最佳的輔助工具之一。因此大部分開發者在拋棄Prototype而選擇Jquery來進行web開發。
一些開發人員在使用jquery時，由於僅僅只知道Jquery文檔中的使用方法，不明白Jquery的運行原理，時常會碰到許多的問題。這些問題大部分是使用不當而產生，極少數是Jquery的Bug。如果不明白其運行機理和核心源碼，我們也很難寫出基於jquery類庫的高性能的程序出來。
在調試基於jQuery的程序時，我們大部分時間都要跟蹤進入jQuery對象分析其運行的狀態，但是jQuery代碼不像Ext,YUI那樣中規中舉，它的代碼有點晦澀，難懂。也就說如果想用好jQuery，一定要清楚其源碼。
Jquery的網絡資源豐富，但Baidu了很久，卻很難找到那種完全深入地分析Jquery源碼的文稿。倒是Jquery的開發者，John Resi的《Pro Javascript Techniques》對於Jquery的源碼的分析涉及了，可以看作是jQuery的源碼分析，但是其主指在於JavaScript的使用。我們並不能很明白，很細緻去了解Jquery的源碼。
2、jQuery對象
在本節中，我們會就Jquery的運行機制和設計理念進行分析和說明。本節分成三個部分：jQuery的體系、構建及數組特性。
2.1、jQuery的設計理念
使用jQuery之前，我們都會問jQuery是什麼？jQuery是一個類庫，和prototype，mootools等類庫一樣，爲Web的Js開發提供輔助功能。那爲什麼要選用jQuery呢？在jQuery出現之前，Prototype，YUI都是很成熟的Js的框架，而且是各有各的特點。爲什麼要拋棄它們，而使用後起之秀的jQuery，它有什麼優秀的特性吸引開發人員呢？
回答這個問題，我們得明白jQuery的設計理念。回憶或想象一下，我們在web開發中是如何使用JS？絕大多數時間都是採用getElementById在Dom文檔中找到Dom元素，然後取值或設定值，採用 innerHTML取其內容或設定其內容，或進行事件的監聽(如click)，在控制樣式方面，我們會進行height,width,display等的改變，達到視覺上的效果，對於Ajax方面，也是取到數據在頁面的某元素裏面去添充內容。
綜之，我們就是在對Dom元素在進行操作。這個元素可能是一個或是多個。這個元素可能是document，window或Dom元素。這樣我們的任務就是二大部分，一是找Dom元素，二是對Dom元素進行操作。
對於用得熟練一點，不管是採用如getElementById這樣的直接查找方式還是採用如 Element.lastChild這類的間接查找方式不是很難的，對於Dom元素，Dom的操作方面也是很豐富，也不是很難使用？那麼要類庫做什麼用呢？最難的一個問題就是瀏覽器的兼容的問題。所有的JS框架都要解決這一個問題，同時簡化JS的本身自帶的操作。
Prototype可以說是開創了Js類庫的先河，給我們耳目一新的感覺。它解決大部分的瀏覽器的兼容的問題。同時簡化了原始函數名長難於記憶的經常書寫出的錯的問題（採用$(xx)代替getElementById），提供了Ajax的訪問方式，擴展了Array,Object,Function，Event等JS原生對象。
但是這些還是不能滿足開發的需要，比如在Dom樹中尋找dom元素，僅僅只能是通過元素的ID，但是我們想要更方便的查找方法，同時還希望能有一個統一的入口，不要太泛，學習曲線過高或難於使用。
Jquery就是從這裏出發，把所有一切都統一在jQuery對象中。使用jQuery就是使用jQuery對象。其實jQuery開創性的工作就是如其名一樣：query。它強大的查找功能令所有的框架都黯然失色。
jQuery實質就是一個查詢器。在查詢器的基礎還提供對查找到的元素進行操作的功能。這樣說來jQuery就是查詢和操作的統一。查詢是入口，操作是結果。
jQuery在實現上也可以分成兩大部分，一部分是jQuery的靜態方法，也可以稱作實用方法或工具方法，通過jQuery.xxx()的jQuery命名空間直接引用。第二部分是jQuery的實例方法，通過jQuery(xx)或$(xx)來生成 jQuery實例，然後通過這個實例來引用的方法。這部分的方法大多數是從採用靜態方法代理來完成功能。真正的功能性的操作都在jQuery的靜態方法中實現。
這些功能細分起來，可以分成以下幾個部分：
1、Selector，查找元素。這個查找不但包含基於 CSS1~CSS3的CSS Selector功能，還包含其對直接查找或間接查找而擴展的一些功能。
2、Dom元素的屬性操作。Dom 元素可以看作html的標籤，對於屬性的操作就是對於標籤的屬性進行操作。這個屬性操作包含增加，修改，刪除，取值等。
3、Dom元素的 CSS樣式的操作。CSS是控制頁面的顯示的效果。對CSS的操作那就得包含高度，寬度，display等這些常用的CSS的功能。
4、 Ajax的操作。Ajax的功能就是異步從服務器取數據然後進行相關操作。
5、Event的操作。對Event的兼容做了統一的處理。
6、動畫(Fx)的操作。可以看作是CSS樣式上的擴展。
2.2、jQuery對象的構建
生成或構建一個jQuery對象其實就是構建並運行一個查詢器（selector）。既然是查詢，肯定會查找的結果（Dom元素），之後纔會有對這些結果進行操作。那麼這些查找的結果存放在哪裏呢？最好的地方當然是這個jQuery對象內面。查找的結果可能是一個元素，也有可以是多個元素如(NodeSet 的集合的形式)。也就是說jQuery對象內面有一個集合。這個集合存放查找到Dom元素。
但是上一小節所提到jQuery對象是所有操作的統一入口，那麼它的構建就不能只侷限於從Dom文檔中查找到Dom元素，還有可能是從別的集合中轉移過來的Dom元素，還有可能是從html的字符串生成的Dom元素。
在Jquery文檔中提供了四種方式：jQuery(expression, [context])，jQuery(html)，jQuery(elements)，jQuery(callback)四種構尋jquery對象的方式。其中jQuery可以用$代替。這四種是經常用到。其實Jquery的參數可以是任何的元素，都能構成jquery對象。
舉幾個例 子：
1、$($(“P”))可以看出其參數可以是jQuery對象或ArrayLike的集合。
2、$() 是$(document)的簡寫。
3、$(3)會把3放到jQuery對象中集合中。
對於如$(3)這樣的其中元素（如 ArrayLike集合的元素）不是Dom元素，最好不要構建jQuery對象，jQuery對象的方法都是針對於dom對象的。不是很清楚其使用的話，很有可能會導致錯誤。
上面講了這麼多，還是很難明白其原理的，現在從源碼的角度細細分析：
通過 jQuery(xxx)的調用實現沒有生成對象，它的this是指向window對象的。那麼jQuery的那些實例方法是怎樣繼承過來的呢？看一下：
var jQuery = window.jQuery = window.$ = function(selector, context) { return new jQuery.fn.init(selector, context); ①
};
這是jquery的總的入口，jQuery對 象實際上不是通過new jQuery（）而繼承其prototype的中的方法。jQuery對象實際是jQuery.fn.init函數生成的對象。在裏我們可以看出對於 jQuery.prototype添加一些函數集的對象的意義不大。因爲我們new jQuery()是可以的，但是生成的jQuery對象在return時會被拋棄。所以最好不要用new jQuery()來構建jQuery對象。
jQuery對象其實就是new jQuery.fn.init。那麼jQuery.fn.init.prototype上就是掛着jQuery對象的操作方法。如
jQuery.fn.init.prototype = jQuery.fn;
有時間可能會擔心在589行就實現了把jQuery.fn中的函數放到 jQuery.fn.init.prototype上去，那麼之後的通過jquery.fn.extend的方法怎麼辦呢？這裏實際是對 jQuery.fn的引用。在擴展jQuery的時候，只要把相關的函數extend到jQuery.fn就可以了。
現在我們看一下 jQuery.fn.init是怎麼完成工作的：
init : function(selector, context) {
selector = selector || document;// 確定selector存在
// 第一種情況 Handle $(DOMElement)單個Dom 元素，忽略上下文
if (selector.nodeType) { ②
this[0] = selector;
this.length = 1;
return this;
}
if (typeof selector == "string") {//selector爲string ③
var match = quickExpr.exec(selector);
if (match && (match[1] || !context)) {
if (match[1])// 第二種情況處理$(html) -> $(array) ④
selector = jQuery.clean([match[1]], context);
else {// 第三種情況：HANDLE: $("#id")//處理$("#id")
var elem = document.getElementByIdx(match[3]);
if (elem) {
// IE會返回name=id的元素，如果是這樣，就document.find(s)
if (elem.id != match[3]) ⑤
return jQuery().find(selector);
// 構建一個新的jQuery(elem)
return jQuery(elem); ⑥
}
selector = [];
}
} else
// 第四種情況：處理$(expr, [context])==$(content).find(expr)
return jQuery(context).find(selector); ⑦
} else if (jQuery.isFunction(selector)) ⑧ // 第五種情況：處理$(function)七Shortcut for document ready
return jQuery(document)[jQuery.fn.ready ? "ready" : "load"](selector);
// 第六種情況：處理$(elements)
return this.setArray(jQuery.makeArray(selector)); ⑨
},
jQuery.fn.init負責對傳進來的參數進行分析然後生成jQuery對象。它的第一個參數一般來說是必須的（爲空的話，就是默認的document）。從源碼的角度第一個參數有着如下四種類型：
類型 說明
Dom Element
第一個參數爲Dom元素，第二個參數不用。直接把Dom元素存在新生成的jQuery對象的集合中。返回這個 jQuery對象。構建jQuery對象完成。
String
第一個參數爲string有三種情況：
1、html的標籤字符串，$(html) -> $(array)，第二個參數可選。
執行selector = jQuery.clean([match[1]], context);。該語句是把 hteml的字符串轉換成dom對象的數組。接着執行Array類型的返回。
2、字符串爲#id時$(id)
首先通過var elem = document.getElementByIdx(match[3]);取得elem，如沒有取到selector = [];轉到執行Array類型的返回空集合jquery對象。
如找到elem,通過return jQuery(elem);再次生成jquery對象，這次是Dom Element類型的jquery對象的返回。
3、兼容 css1-3語法的selector字符串，第二個參數是可選的。 執行return jQuery(context).find(selector);。該語句先執行jQuery(context)。可以看出context第二參數可以是任意的值，可以是集合形式。之後就通過find(selector)找到jQuery(context)中所有dom元素都滿足selector表達式的 dom元素的集合，構建新的jquery對象，並返回。
#id其實和這種方式是統一的，單獨出來是爲了提高性能。
Fn
第一參數是函數。第二個參數不用。是$(document).ready(fn) 的簡寫，其return jQuery(document)[jQuery.fn.ready ? "ready" : "load"](selector)是其執行的代碼。這個語句首先執行jQuery(document)，它再一次newjQuery.fn.init函數,生成jQuery對象（元素爲document）。再調用這個對象的ready(fn)方法。Ready(fn)返回當前對象。而上面的語句又是返回這個Ready(fn)的返回對象。
可見這個$(fn)返回是$(document)的對象。拋棄了第一次生成的$(fn)對象。
Array
第一參數是除上面提到Dom元素，函數，string所有其它的類型。可以爲空如$()。第二個參數不用。
語句：return this.setArray(jQuery.makeArray(selector));
它首先是把第一個參數轉換數組。 Selector可以是Array-like的集合，如jQuery對象，如getElementsByTag返回的Dom元素集合等，可能支持$(this)。Selector還可能是單個任意的對象。
轉換成標準的數組之後，執行 this.setArray把這個數組中的元素全部存到當前jquery對象的集合中。之後返回當前的jquery對象。
其實Dom Element完全可能綜合在這裏面，單獨拿起來爲了提高性能。
從上面的代碼和上表中，我們也可以看出構建jquery對象就是往jquery對象的集合中添加元素（一般都應該是dom元素）。添加的元素有兩種形式：
一是單個元素，可能通過直接的dom元素的傳參形式，還可以通過#id從dom文檔中找元素。
二是集合，如jquery對象，還有數組，還有通過CSS Selector找到的Dom集合等Array-Like。
上表僅僅是分析傳入的參數的類型，它是怎麼做呢？在⑤處它實現 CSS1~CSS3的兼容的Selector的查尋器的功能。通過jQuery().find(selector);來進行分析String並查找到符合傳入的Selector語法的Dom文檔樹中的元素集合。
在④處，它實現了把html的字符串轉換成Dom元素節點的集合。這個是通過 jQuery.clean([match[1]], context);來實現的。
在⑧處，它實現DomReady的jQuery對象的統一入口，我們可以通過$(fn)要註冊domReady的監聽函數。所有的調用jQuery實現的功能代碼都應該在domReady之後才運行。$(fn)是所有的應用開發中的功能代碼的入口。它支持任意多的$(fn)註冊。其是通過return jQuery(document)[jQuery.fn.ready ? "ready" : "load"](selector);來完成的。
找到元素之後就是構建集合了，在⑨處就是通過this.setArray(jQuery.makeArray(selector));來構建jquery對象內部的集合。下面一小節就專門分析它的集合是怎麼實現的。
2.3、jquery對象的數組特性
從上面一小節可以看出jquery構建函數完成了查找或轉換或其它的功能，其結果就是找到元素，查找，轉找不過是方式而已。找到元素就得找個地方去存儲起來。這個地方是就是這一節要分析的。
存儲有序數據的地方（集合）在JS中最好的當然是數組。那麼又如何在jQuery內面實現數組呢？可以採用如下的方式：
jQuery.fn.prototype=new Array();
在上一節中的this.setArray(arr)函數中加上
Array.apply(this,arr);
如果還要完美一點，就加上：
jQuery.fn.prototype.constructor=jQuery。
這樣我們繼承了數組的所有特性，又可以在Jquery對象進行數組的功能擴展。但是jQuery並沒有這樣採用繼承Array而實現這個內部的集合。它採用了Array-Like的對象的實現（見JavaScript: The Definitive Guide, 5th Edition7.8節）。
類數組的對象還是對象，只不過像數組。數組與對象其實是沒有什麼好大的區別的，有序和無序的集合是它們區別。這個區別反應在數組有的length屬性。當添加元素它會自動加上相對的個數，當刪除元素，它會自動減去相對的個數。
看一下jQuery 是怎麼實現的：
// 第一種情況 Handle $(DOMElement)單個Dom 元素，忽略上下文
if (selector.nodeType) { ②
this[0] = selector;
this.length = 1;
return this;
}
這是它的第一種實現方法，通過this[0]來直接設定第一個位置的Dom元素，同時設定length=1。這裏我們可以看出對象與數組一樣都是採用 key/Value對的形式存在對象中。上面的Json形式爲{0：aDom,length=1}。這裏細細分析一下數組，數組是繼承於對象。其[]的解釋分析最終結果可以看作{}構的對象，對[]或數組的構建時會進行把index(如0.1,….)做爲對象屬性的key。把數組中的值做爲其對應的 value。同時改變length的值。這也就是說爲什麼本質上對象與數組沒有多大的區別。在很多的源碼中，如YUI中都採用對象的形式來構建多維數組。
this.setArray(jQuery.makeArray(selector));
是其第二種實現的方法，上面實現是單個的元素，這個實現的多個元素的集合。它首先調用了jQuery.makeArray(selector)這個靜態方法把集合（類數組）轉換成數組。
上面已經分析了數組和對象都可以採用obj.[attr]的形式來取得其key對應的value。對於集合或類數組，必須要求其實現length屬性，有了length的長度，那麼就從0~length-1的key屬性中取得對應的value就可以了：
//把類數組的集合轉換成數組，如果是單個元素就生成單個元素的數組。
makeArray: function( array ) {
var ret = [];
if( array != null ){ var i = array.length;
//單個元素，但window, string、 function有 'length'的屬性，加其它的判斷
if( i == null || array.split || array.setInterval || array.call )
ret[0] = array;
else//類數組的集合
while( i ) ret[--i] = array[i];//Clone數組
}
return ret;
},
生成了一個標準的數組，那麼接下來setArray來幹什麼呢？
// 把array-like對象的元素全部push當前jquery對象。
setArray : function(elems) {
this.length = 0;//初始化長度，因爲push會在原始的length++
Array.prototype.push.apply(this, elems);
return this;
},
這個調用了Array.prototype.push來自動修改length的屬性值（當然是加入了元素）。由此可以推想到Array中衆多的方法（如shift）都可以看作改變length的值在對象的key/value對中完成無序到有序或重新排序的工作。實際上Array等是採用C或C++來實現的。但是它構出的JS特性讓我們可以這樣去思考採用JavaScript的實現方式。
上面的 setArray(elems)函數只是會改變當前jQuery對象的集合，它會清除這個對象集合中以前的元素。但是有的時候我們想保存原來的集合中元素，同時也能就新傳入的元素進行jquery對象的操作。它提供了pushStack函數來新建一個jQuery對象同時保存原來對象的引用。這樣就可能在需要時用到自己所要的對象：
pushStack : function(elems) {// 採用jQuery構建新對象，同時引用老對象。
var ret = jQuery(elems);// 構建新的jquery對象
ret.prevObject = this;// 保存老的對象的引用
return ret;
},
返回的是新構建成的對象，有着jQuery對象的全部功能，同時還可以通過 prevObject來訪問原來的老對象。
構建了類數組，那麼還得提供一些方法來操作這個集合，對於集合的操作無非就是定位元素，查找元素，複製（slice）和刪除的操作（splice）等。jQuery還提供each,map的擴展。
這些方法只和集合相關，與集合的元素的無關。jQuery提供了衆多的和其中元素（DOM元素）相關的方法。
它提供了兩個get元素的方法，get(index)和eq（index）,不同是get取得是集合中的元素，而eq則是返回該元素的Clone。不會修改數組。其實可以直接通過 [i]來代替get(i)。如果get沒有參數則是獲得全部元素。
// 取到本jquery對象的第幾個Dom元素，無參數，代表全部的Dom元素
get : function(num) {
return num == undefined ? jQuery.makeArray(this) : this[num];
},
// 獲取第N個元素。這個元素的位置是從0算起。
eq : function(i) {
return this.slice(i, +i + 1);
},
這兩個函數就不用分析了。接下來看看如何實現在集合中定位元素：
/ 找到elem在本jquery對象的位置(index)
index : function(elem) {
var ret = -1;
return jQuery.inArray( // 如是jQuery對象就取第一個元素
elem && elem.jquery ? elem[0] : elem, this);
},
// 判斷elem元素在array中的位置(index) 靜態方法
inArray : function(elem, array) {
for (var i = 0, length = array.length;i < length; i++)
// Use === because on IE, window == document
if (array[i] === elem)
return i;
return -1;
},
inArray 是jQuery的靜態方法，而index是通過調用inArray來實現其定位的功能。Index的函數支持的參數可以是jQuery對象或Dom元素，而inArray則是實用方法，支持任何的元素。
Jquery提供瞭如數組中slice複製的功能的方法，還提供類似 concat的靜態方法merge。Slice是通過Array中slice來實現的：
/ 代理數組的slice,同樣的操作。
slice : function() {
return this.pushStack(Array.prototype.slice.apply(this, arguments));
},
它返回生成新的jQuery對象。這個對象的集合就是要複製後的集合。對於merge，它是靜態方法，實現把第二個元素追加到第一個參數的數組中。
// 把second 元素追加到first的數組中。
merge : function(first, second) {
// We have to loop this way because IE & Opera overwrite the length
// expando of getElementsByTagName
var i = 0, elem, pos = first.length;
// Also, we need to make sure that the correct elements are being
// returned (IE returns comment nodes in a '*' query)
if (jQuery.browser.msie) {
while (elem = second[i++])
if (elem.nodeType != 8)
first[pos++] = elem;
} else
while (elem = second[i++])
first[pos++] = elem;
return first;
},
Jquery 的each是對集合中每個元素都執行回調函數。
// 當前jquery對象中每個元素都執行callback(index,elem)函數
each : function(callback, args) {// 返回this
// 其調用了jQuery的靜態方法。prototype中的mothodize是解決這類問題的好方法
return jQuery.each(this, callback, args);
},
它通過調用 jQuery.each這個靜態方法來完成功能的：
// 對object中的每個對象都執行callback函數進行處理。args僅僅內部用
each : function(object, callback, args) {
var name, i = 0, length = object.length;
// 和else的處理差不多，args的傳參代替object的屬性值
if (args) {
if (length == undefined) {
for (name in object)
if (callback.apply(object[name], args) === false)
break;
} else
for (;i < length;)
if (callback.apply(object[i++], args) === false)
break;
} else {
// 不是array-like的object，對每個屬性進行callback函數的調用
if (length == undefined) {
for (name in object)
if (callback.call(object[name], name, object[name]) === false)
break;
} else
// array-like object,採用數組的形式來處理
for (var value = object[0];i < length && callback.call(value, i, value) !== false; value = object[++i]) {}
}
return object;
},
該靜態方法支持第一個參數的類數組（數組）或對象。是數組就對每個元素進行 callback的操作。如果是對象，就是對每個屬性值進行callback的操作。這個callback回調函數的格式如下：callback:function(index,value)。Index是索引號，value是數組的index對應的元素或對象的第index 個處理的屬性。如果使用args參數，那callback回調函數的格式如下：callback:function(args)。Args是給回調函數設定參數。再看一下jQuery對象的each。它的第二個參數args就是採用傳入的args直接進行給callback設定參數，而不是默認提集合中
index和對應的元素，但執行的次數還是集合的length次。
Jquery的map是將一組元素轉換成其他數組（通過回調函數返回值組成的） // 將一組元素轉換成其他數組然後根據這個數組構建新的jquery對象。。
map : function(callback) {
return this.pushStack(jQuery.map(this, function(elem, i) {
return callback.call(elem, i, elem);
}));
},
這個函數首先通過jQuery.map(this, function(elem, i){}來把this的jQuery對象集合的每個元素當作回調函數的elem的參數傳到回調函數中。而這個回調函數又執行實例方法的map : function(callback)中callback函數，也就是jQuery.map中的回調僅僅是傳參代理的功能。jQuery.map通過代理的回調來取得轉換而成的元素集合。
接下來就是採用pushStack把這集合的元素構建成新的jQuery對象並返回,同時保存原 jQuery對象的引用。
看下Map的靜態方法：
// 返回對elems每個元素都進行操作的callback函數的返回值的集合。
map : function(elems, callback) {
var ret = [];
for (var i = 0, length = elems.length;i < length; i++) {
var value = callback(elems[i], i);
if (value != null)//說明轉換的集合的個數可能少於原來的集合
ret[ret.length] = value;
}
return ret.concat.apply([], ret);//採用array的concat實現
}
Map 的靜態方法返回每個callback返回的元素組成的數組。