1、概述

jQuery是一個非常優(yōu)秀的JS庫，與Prototype,YUI,Mootools等眾多的Js類庫相比，它劍走偏鋒，從web開發(fā)實用的角度出發(fā)，拋除了其它Lib中一些不實用的東西，為開發(fā)者提供了短小精悍的類庫。其短小精悍，使用簡單方便，性能高效，能極大地提高開發(fā)效率，是開發(fā)web應用的最佳的輔助工具之一。因此大部分開發(fā)者在拋棄Prototype而選擇Jquery來進行web開發(fā)。

一些開發(fā)人員在使用jquery時，由于僅僅只知道Jquery文檔中的使用方法，不明白Jquery的運行原理，時常會碰到許多的問題。這些問題大部分是使用不當而產生，極少數(shù)是Jquery的Bug。如果不明白其運行機理和核心源碼，我們也很難寫出基于jquery類庫的高性能的程序出來。

在調試基于jQuery的程序時，我們大部分時間都要跟蹤進入jQuery對象分析其運行的狀態(tài)，但是jQuery代碼不像Ext,YUI那樣中規(guī)中舉，它的代碼有點晦澀，難懂。也就說如果想用好jQuery，一定要清楚其源碼。

Jquery的網絡資源豐富，但Baidu了很久，卻很難找到那種完全深入地分析Jquery源碼的文稿。倒是Jquery的開發(fā)者，John Resi的《Pro Javascript Techniques》對于Jquery的源碼的分析涉及了，可以看作是jQuery的源碼分析，但是其主指在于JavaScript的使用。我們并不能很明白，很細致去了解Jquery的源碼。

2、構建jQuery對象

 在本節(jié)中，我們會就Jquery的運行機制和設計理念進行分析和說明。本節(jié)分成三個部分：jQuery的體系、構建及數(shù)組特性。

2.1、jQuery的設計理念

使用jQuery之前，我們都會問jQuery是什么？jQuery是一個類庫，和prototype，mootools等類庫一樣，為Web的Js開發(fā)提供輔助功能。那為什么要選用jQuery呢？在jQuery出現(xiàn)之前，Prototype，YUI都是很成熟的Js的框架，而且是各有各的特點。為什么要拋棄它們，而使用后起之秀的jQuery，它有什么優(yōu)秀的特性吸引開發(fā)人員呢？

回答這個問題，我們得明白jQuery的設計理念?；貞浕蛳胂笠幌?，我們在web開發(fā)中是如何使用JS？絕大多數(shù)時間都是采用getElementById在Dom文檔中找到Dom元素，然后取值或設定值，采用innerHTML取其內容或設定其內容，或進行事件的監(jiān)聽(如click)，在控制樣式方面，我們會進行height,width,display等的改變，達到視覺上的效果，對于Ajax方面，也是取到數(shù)據(jù)在頁面的某元素里面去添充內容。

綜之，我們就是在對Dom元素在進行操作。這個元素可能是一個或是多個。這個元素可能是document，window或Dom元素。這樣我們的任務就是二大部分，一是找Dom元素，二是對Dom元素進行操作。

對于用得熟練一點，不管是采用如getElementById這樣的直接查找方式還是采用如Element.lastChild這類的間接查找方式不是很難的，對于Dom元素，Dom的操作方面也是很豐富，也不是很難使用？那么要類庫做什么用呢？最難的一個問題就是瀏覽器的兼容的問題。所有的JS框架都要解決這一個問題，同時簡化JS的本身自帶的操作。

Prototype可以說是開創(chuàng)了Js類庫的先河，給我們耳目一新的感覺。它解決大部分的瀏覽器的兼容的問題。同時簡化了原始函數(shù)名長難于記憶的經常書寫出的錯的問題（采用$(xx)代替getElementById），提供了Ajax的訪問方式，擴展了Array,Object,Function，Event等JS原生對象。

但是這些還是不能滿足開發(fā)的需要，比如在Dom樹中尋找dom元素，僅僅只能是通過元素的ID，但是我們想要更方便的查找方法，同時還希望能有一個統(tǒng)一的入口，不要太泛，學習曲線過高或難于使用。

Jquery就是從這里出發(fā)，把所有一切都統(tǒng)一在jQuery對象中。使用jQuery就是使用jQuery對象。其實jQuery開創(chuàng)性的工作就是如其名一樣：query。它強大的查找功能令所有的框架都黯然失色。

jQuery實質就是一個查詢器。在查詢器的基礎還提供對查找到的元素進行操作的功能。這樣說來jQuery就是查詢和操作的統(tǒng)一。查詢是入口，操作是結果。

jQuery在實現(xiàn)上也可以分成兩大部分，一部分是jQuery的靜態(tài)方法，也可以稱作實用方法或工具方法，通過jQuery.xxx()的jQuery命名空間直接引用。第二部分是jQuery的實例方法，通過jQuery(xx)或$(xx)來生成jQuery實例，然后通過這個實例來引用的方法。這部分的方法大多數(shù)是從采用靜態(tài)方法代理來完成功能。真正的功能性的操作都在jQuery的靜態(tài)方法中實現(xiàn)。

這些功能細分起來，可以分成以下幾個部分：

1、Selector，查找元素。這個查找不但包含基于CSS1~CSS3的CSS Selector功能，還包含其對直接查找或間接查找而擴展的一些功能。

2、Dom元素的屬性操作。Dom元素可以看作html的標簽，對于屬性的操作就是對于標簽的屬性進行操作。這個屬性操作包含增加，修改，刪除，取值等。

3、Dom元素的CSS樣式的操作。CSS是控制頁面的顯示的效果。對CSS的操作那就得包含高度，寬度，display等這些常用的CSS的功能。

4、Ajax的操作。Ajax的功能就是異步從服務器取數(shù)據(jù)然后進行相關操作。

5、Event的操作。對Event的兼容做了統(tǒng)一的處理。

6、動畫(Fx)的操作?？梢钥醋魇?/span>CSS樣式上的擴展。

2.2、jQuery對象的構建

 生成或構建一個jQuery對象其實就是構建并運行一個查詢器（selector）。既然是查詢，肯定會查找的結果（Dom元素），之后才會有對這些結果進行操作。那么這些查找的結果存放在哪里呢？最好的地方當然是這個jQuery對象內面。查找的結果可能是一個元素，也有可以是多個元素如(NodeSet的集合的形式)。也就是說jQuery對象內面有一個集合。這個集合存放查找到Dom元素。

但是上一小節(jié)所提到jQuery對象是所有操作的統(tǒng)一入口，那么它的構建就不能只局限于從Dom文檔中查找到Dom元素，還有可能是從別的集合中轉移過來的Dom元素，還有可能是從html的字符串生成的Dom元素。

在Jquery文檔中提供了四種方式：jQuery(expression,[context])，jQuery(html)，jQuery(elements)，jQuery(callback)四種構尋jquery對象的方式。其中jQuery可以用$代替。這四種是經常用到。其實Jquery的參數(shù)可以是任何的元素，都能構成jquery對象。

舉幾個例子：

1、$($(“P”))可以看出其參數(shù)可以是jQuery對象或ArrayLike的集合。

2、$()是$(document)的簡寫。

3、$(3)會把3放到jQuery對象中集合中。

對于如$(3)這樣的其中元素（如ArrayLike集合的元素）不是Dom元素，最好不要構建jQuery對象，jQuery對象的方法都是針對于dom對象的。不是很清楚其使用的話，很有可能會導致錯誤。

上面講了這么多，還是很難明白其原理的，現(xiàn)在從源碼的角度細細分析：

通過jQuery(xxx)的調用實現(xiàn)沒有生成對象，它的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函數(shù)生成的對象。在里我們可以看出對于jQuery.prototype添加一些函數(shù)集的對象的意義不大。因為我們new jQuery()是可以的，但是生成的jQuery對象在return時會被拋棄。所以最好不要用new jQuery()來構建jQuery對象。

jQuery對象其實就是new jQuery.fn.init。那么jQuery.fn.init.prototype上就是掛著jQuery對象的操作方法。如

jQuery.fn.init.prototype = jQuery.fn;

有時間可能會擔心在589行就實現(xiàn)了把jQuery.fn中的函數(shù)放到jQuery.fn.init.prototype上去，那么之后的通過jquery.fn.extend的方法怎么辦呢？這里實際是對jQuery.fn的引用。在擴展jQuery的時候，只要把相關的函數(shù)extend到jQuery.fn就可以了。

現(xiàn)在我們看一下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.getElementById(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負責對傳進來的參數(shù)進行分析然后生成jQuery對象。它的第一個參數(shù)一般來說是必須的（為空的話，就是默認的document）。從源碼的角度第一個參數(shù)有著如下四種類型：

從上面的代碼和上表中，我們也可以看出構建jquery對象就是往jquery對象的集合中添加元素（一般都應該是dom元素）。添加的元素有兩種形式：

一是單個元素，可能通過直接的dom元素的傳參形式，還可以通過#id從dom文檔中找元素。

二是集合，如jquery對象，還有數(shù)組，還有通過CSS Selector找到的Dom集合等Array-Like。

上表僅僅是分析傳入的參數(shù)的類型，它是怎么做呢？在⑤處它實現(xiàn)CSS1~CSS3的兼容的Selector的查尋器的功能。通過jQuery().find(selector);來進行分析String并查找到符合傳入的Selector語法的Dom文檔樹中的元素集合。

在④處，它實現(xiàn)了把html的字符串轉換成Dom元素節(jié)點的集合。這個是通過jQuery.clean([match[1]], context);來實現(xiàn)的。

在⑧處，它實現(xiàn)DomReady的jQuery對象的統(tǒng)一入口，我們可以通過$(fn)要注冊domReady的監(jiān)聽函數(shù)。所有的調用jQuery實現(xiàn)的功能代碼都應該在domReady之后才運行。$(fn)是所有的應用開發(fā)中的功能代碼的入口。它支持任意多的$(fn)注冊。其是通過return jQuery(document)[jQuery.fn.ready ? "ready" : "load"](selector);來完成的。

找到元素之后就是構建集合了，在⑨處就是通過this.setArray(jQuery.makeArray(selector));來構建jquery對象內部的集合。

   文章來自：精靈部落

作者：prk(彭仁夔)   QQ：546711211   email:sjkjs155@126.com   水平有限，難免有錯誤，請多多請教

• jquery