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

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

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

jQuery的設(shè)計(jì)理念

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

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

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

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

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

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

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

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

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

2、Dom元素的屬性操作。Dom元素可以看作html的標(biāo)簽，對(duì)于屬性的操作就是對(duì)于標(biāo)簽的屬性進(jìn)行操作。這個(gè)屬性操作包含增加，修改，刪除，取值等。

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

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

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

6、動(dòng)畫(huà)(Fx)的操作。可以看作是CSS樣式上的擴(kuò)展。

jQuery對(duì)象的構(gòu)建

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

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

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

舉幾個(gè)例子：

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

2、$()是$(document)的簡(jiǎn)寫(xiě)。

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

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

通過(guò)jQuery(xxx)的調(diào)用實(shí)現(xiàn)沒(méi)有生成對(duì)象，它的this是指向Window對(duì)象的。那么jQuery的那些實(shí)例方法是怎樣繼承過(guò)來(lái)的呢？看一下：

var jQuery = window.jQuery = window.$ = function(selector, context)
{ return new jQuery.fn.init(selector, context);
};
這是jQuery的總的入口，jQuery對(duì)象實(shí)際上不是通過(guò)new jQuery（）而繼承其prototype的中的方法。jQuery對(duì)象實(shí)際是jQuery.fn.init函數(shù)生成的對(duì)象。在里我們可以看出對(duì)于 jQuery.prototype添加一些函數(shù)集的對(duì)象的意義不大。因?yàn)槲覀僴ew jQuery()是可以的，但是生成的jQuery對(duì)象在return時(shí)會(huì)被拋棄。所以最好不要用new jQuery()來(lái)構(gòu)建jQuery對(duì)象。jQuery對(duì)象其實(shí)就是new jQuery.fn.init。那么jQuery.fn.init.prototype上就是掛著jQuery對(duì)象的操作方法。如

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

最新評(píng)論