jQuery的功能:
我們?nèi)粘Ｊ褂胘avascript干的最多的事情也就是
1.查找DOM節(jié)點
2.然后再對查找到的節(jié)點進行操作,例如修改樣式 添加事件監(jiān)聽 修改內(nèi)容等。
而jQuery框架的功能就是根據(jù)傳遞進來的參數(shù)賽選DOM節(jié)點,將DOM節(jié)點數(shù)組封裝成jQuery對象.然后對這個 jQuery對象進行操作。
jQuery框架的總體架構(gòu):
//jQuery的源碼
})(window)
可以看到這里使用了一個匿名函數(shù)將所有源碼進行了封裝,這樣有以下幾個好處:
1. 可以防止命名沖突 里面定義的變量不會給外面的矛盾。
2. 可以實現(xiàn)私有變量和私有方法,只將提供給外界的公共接口暴露出來。
jQuery對象的創(chuàng)建:
由上面的講解可知所有的功能都是建立在jQuery對象的基礎(chǔ)之上的所以我們首先來看一下這個對象的構(gòu)建:
return new jQuery.fn.init( selector, context );
},
這里我們可以看到其實jQuery對象就是jQuery.fn.init對象，在init方法里面完成了jQuery對象的創(chuàng)建。這個方法的作用就是根據(jù)接受的字符串創(chuàng)建一個jQuery對象,其實這個對象就是一個DOM節(jié)點集合的數(shù)組。
jQuery對象的擴展機制:
創(chuàng)建了jQuery對象接下來就是要對對象進行方法擴展了。jQuery中有兩種類型的方法，一種是jQuery的靜態(tài)方法還有一種是類的實例方法。
接著定義了extend方法: 用來擴展jQuery對象。
從上面的方法可以看出
jQuery.extend()是給類擴展靜態(tài)方法
jQuery.fn.extend()是給類擴展實例方法
jQuery庫的擴展:
上面這些準備工作都做完之后接著就是要對jQuery對象進行擴展了，對于jQuery的擴展可以分為以下幾個模塊:
核心模塊 :
1. 對jQuery對象進行操作的一些方法,因為jQuery對象實際是一個數(shù)組所以就是添加了一些數(shù)組的常用方法.。 例如: size() get() first() last() slice() map()等。
2. 緩存系統(tǒng)
用來給DOM節(jié)點上存貯數(shù)據(jù)的。方法有data() removeData()兩個方法。具體實習實現(xiàn)參考后面的文章。
3. 隊列系統(tǒng)
這幾個方法主要用來實現(xiàn)動畫模塊，方法有queue() dequeue() clearQueue().
工具類模塊 :
這部分主要提供了一些工具方法例如對字符串的處理,數(shù)組的處理,瀏覽器特性的一些測試等。
事件處理模塊 :
jQuery對于事件的處理方式是： 創(chuàng)建了一個Event構(gòu)造函數(shù)用來生成 事件對象 ，這個對象是在 W3C event對象基礎(chǔ)上建立的，并且屏蔽了瀏覽器之間的差異。還定義了一個event對象 里面添加 了一些常用的對事件處理的方法 例如事件綁定 解綁 事件觸發(fā) 等這些方法使用的都是Event構(gòu)造函 數(shù)創(chuàng)建出來的對象。有了這個event對象 接下來就是利用each方法和extend方法jquery.fn這個對象添加一些事件監(jiān)聽器。內(nèi)部都是調(diào)用了event的方法。
動畫模塊 : 包括CSS選擇器模塊、 DOM操作模塊。