jQuery是一個非常優(yōu)秀的JavaScript庫,，與Prototype,YUI,Mootools等眾多的Js類庫相比，它劍走偏鋒,，從Web開發(fā)實用的角度出發(fā),，拋除了其它Lib中一些不實用的東西，為開發(fā)者提供了短小精悍的類庫,。

其短小精悍,，使用簡單方便，性能高效,，能極大地提高開發(fā)效率,，是開發(fā)Web應(yīng)用的最佳的輔助工具之一。因此大部分開發(fā)者在拋棄Prototype而選擇jQuery來進行Web開發(fā),。

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

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

jQuery的設(shè)計理念

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

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

綜之，我們就是在對DOM元素在進行操作,。這個元素可能是一個或是多個,。這個元素可能是Document，Window或DOM元素,。這樣我們的任務(wù)就是二大部分,，一是找DOM元素，二是對DOM元素進行操作,。

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

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

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

jQuery就是從這里出發(fā)，把所有一切都統(tǒng)一在jQuery對象中,。使用jQuery就是使用jQuery對象,。其實jQuery開創(chuàng)性的工作就是如其名一樣：query。它強大的查找功能令所有的框架都黯然失色,。jQuery實質(zhì)就是一個查詢器,。在查詢器的基礎(chǔ)還提供對查找到的元素進行操作的功能。這樣說來jQuery就是查詢和操作的統(tǒng)一,。查詢是入口,，操作是結(jié)果。

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的功能就是異步從服務(wù)器取數(shù)據(jù)然后進行相關(guān)操作,。

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

6、動畫(Fx)的操作,?？梢钥醋魇荂SS樣式上的擴展。

jQuery對象的構(gòu)建

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

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

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

舉幾個例子：

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

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

3,、$(3)會把3放到j(luò)Query對象中集合中。

對于如$(3)這樣的其中元素（如ArrayLike集合的元素）不是DOM元素,，最好不要構(gòu)建jQuery對象,，jQuery對象的方法都是針對于DOM對象的。不是很清楚其使用的話,，很有可能會導(dǎo)致錯誤,。上面講了這么多，還是很難明白其原理的,，現(xiàn)在從源碼的角度細細分析：

通過jQuery(xxx)的調(diào)用實現(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()來構(gòu)建jQuery對象,。jQuery對象其實就是new jQuery.fn.init。那么jQuery.fn.init.prototype上就是掛著jQuery對象的操作方法,。如

        

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

有時間可能會擔(dān)心在589行就實現(xiàn)了把jQuery.fn中的函數(shù)放到j(luò)Query.fn.init.prototype上去,，那么之后的通過jQuery.fn.extend的方法怎么辦呢？這里實際是對jQuery.fn的引用,。在擴展jQuery的時候,，只要把相關(guān)的函數(shù)extend到j(luò)Query.fn就可以了。現(xiàn)在我們看一下jQuery.fn.init是怎么完成工作的：

        

            
init : function(selector, context) {  
            
selectorselector = 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);  
            
// 構(gòu)建一個新的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));   
            
}