jQuery的功能:
我們日常使用javascript干(gan)的最多的事情也就是
1.查找DOM節點(dian)
2.然后(hou)再對查找(zhao)到(dao)的節點進(jin)行操作(zuo),例如修(xiu)改(gai)樣式 添(tian)加事件監(jian)聽(ting) 修(xiu)改(gai)內容等。
而(er)jQuery框架的功能就是根據傳遞進來的參數(shu)賽(sai)選DOM節點,將(jiang)DOM節點數(shu)組封裝(zhuang)成(cheng)jQuery對象.然后對這個(ge) jQuery對象進行(xing)操作。
jQuery框架(jia)(jia)的總(zong)體架(jia)(jia)構(gou):
//jQuery的源碼
})(window)
可(ke)以看到這里使(shi)用了(le)一個匿(ni)名函數將所有源碼(ma)進行了(le)封裝,這樣有以下幾個好處:
1. 可以防止命名沖突 里(li)面定(ding)義的(de)(de)變量不會給外(wai)面的(de)(de)矛盾。
2. 可以(yi)實(shi)現私有(you)變量和(he)私有(you)方法,只將提供給(gei)外界(jie)的公共接口暴露出來。
jQuery對象的創建:
由上(shang)面的講解可知(zhi)所(suo)有的功能都是(shi)建立在jQuery對象的基礎之上(shang)的所(suo)以我們首(shou)先來看一下這個對象的構建:
return new jQuery.fn.init( selector, context );
},
這(zhe)里我們可以(yi)看(kan)到其實(shi)jQuery對(dui)象(xiang)就(jiu)是(shi)jQuery.fn.init對(dui)象(xiang)，在init方法(fa)里面(mian)完成了(le)jQuery對(dui)象(xiang)的創建。這(zhe)個(ge)方法(fa)的作(zuo)用就(jiu)是(shi)根據接(jie)受的字符(fu)串(chuan)創建一(yi)個(ge)jQuery對(dui)象(xiang),其實(shi)這(zhe)個(ge)對(dui)象(xiang)就(jiu)是(shi)一(yi)個(ge)DOM節點集合的數組。
jQuery對象的擴展機制:
創建了jQuery對(dui)象(xiang)(xiang)接下(xia)來就是要對(dui)對(dui)象(xiang)(xiang)進行方(fang)(fang)法(fa)(fa)擴展了。jQuery中有(you)兩種(zhong)類(lei)型(xing)的(de)(de)(de)方(fang)(fang)法(fa)(fa)，一種(zhong)是jQuery的(de)(de)(de)靜態方(fang)(fang)法(fa)(fa)還有(you)一種(zhong)是類(lei)的(de)(de)(de)實例方(fang)(fang)法(fa)(fa)。
接著定義了extend方法: 用來擴展jQuery對象。
從上面的方法可以看出
jQuery.extend()是給類擴展靜態方法
jQuery.fn.extend()是給類擴展實(shi)例方法
jQuery庫的擴展:
上面(mian)這些(xie)準備工作都做完之后接著(zhu)就(jiu)是要對jQuery對象進行擴展了，對于jQuery的擴展可(ke)以分為(wei)以下幾個模塊:
核心(xin)模塊 :
1. 對jQuery對象進(jin)行操作的(de)一些方法,因為jQuery對象實(shi)際是一個數(shu)組所(suo)以就是添(tian)加了(le)一些數(shu)組的(de)常用方法.。 例如: size() get() first() last() slice() map()等。
2. 緩存系統
用來給DOM節點上存貯數據的。方法有data() removeData()兩個方法。具體實習(xi)實現(xian)參(can)考后面的文章。
; 3. 隊列系統
這幾個方(fang)法(fa)主要用來實現動畫(hua)模(mo)塊，方(fang)法(fa)有queue() dequeue() clearQueue().
工(gong)具(ju)類模塊 :
這部分主要提供了(le)一些工具方法例如對字符串的處理(li),數組的處理(li),瀏覽器(qi)特(te)性的一些測試等。
事件處理模(mo)塊 :
jQuery對(dui)(dui)(dui)(dui)于事(shi)件的(de)(de)處(chu)理方(fang)(fang)式(shi)是(shi)： 創建了(le)(le)(le)一(yi)個(ge)Event構(gou)造(zao)函(han)數用來(lai)生成(cheng) 事(shi)件對(dui)(dui)(dui)(dui)象(xiang)(xiang)(xiang) ，這(zhe)個(ge)對(dui)(dui)(dui)(dui)象(xiang)(xiang)(xiang)是(shi)在 W3C event對(dui)(dui)(dui)(dui)象(xiang)(xiang)(xiang)基礎上建立(li)的(de)(de)，并且屏蔽(bi)了(le)(le)(le)瀏覽器之間(jian)的(de)(de)差(cha)異。還(huan)定義了(le)(le)(le)一(yi)個(ge)event對(dui)(dui)(dui)(dui)象(xiang)(xiang)(xiang) 里面添加 了(le)(le)(le)一(yi)些(xie)(xie)常用的(de)(de)對(dui)(dui)(dui)(dui)事(shi)件處(chu)理的(de)(de)方(fang)(fang)法 例如事(shi)件綁定 解綁 事(shi)件觸(chu)發 等這(zhe)些(xie)(xie)方(fang)(fang)法使(shi)用的(de)(de)都是(shi)Event構(gou)造(zao)函(han) 數創建出來(lai)的(de)(de)對(dui)(dui)(dui)(dui)象(xiang)(xiang)(xiang)。有了(le)(le)(le)這(zhe)個(ge)event對(dui)(dui)(dui)(dui)象(xiang)(xiang)(xiang) 接(jie)下來(lai)就是(shi)利(li)用each方(fang)(fang)法和extend方(fang)(fang)法jquery.fn這(zhe)個(ge)對(dui)(dui)(dui)(dui)象(xiang)(xiang)(xiang)添加一(yi)些(xie)(xie)事(shi)件監聽(ting)器。內(nei)部都是(shi)調用了(le)(le)(le)event的(de)(de)方(fang)(fang)法。
動畫模(mo)(mo)塊 : 包括CSS選擇器(qi)模(mo)(mo)塊、 DOM操(cao)作模(mo)(mo)塊。