jQuery原理

1. 引入jquery.js后: 在全局創(chuàng)建了一種新的類型jQuery

(1). 構(gòu)造函數(shù): 負(fù)責(zé)創(chuàng)建當(dāng)前類型的一個(gè)新的子對(duì)象

(2). 原型對(duì)象: 負(fù)責(zé)保存該類型所有子對(duì)象共有的方法

2. 創(chuàng)建jQuery子對(duì)象： 要想使用jQuery家所有簡(jiǎn)化版函數(shù)，必須先創(chuàng)建jQuery家的子對(duì)象。然后，才能用子對(duì)象調(diào)用jQuery原型對(duì)象中的簡(jiǎn)化版函數(shù)

3. 問題：jQuery的簡(jiǎn)化版函數(shù)，都是為了簡(jiǎn)化DOM操作，來操作DOM元素的。比如: .click()代替DOM的onclick為元素綁定事件。.html()就是代替innerHTML獲取或修改元素的內(nèi)容。但是，如果只創(chuàng)建jQuery家子對(duì)象，是不知道該用這些函數(shù)操作哪個(gè)DOM元素的！

4. 解決：今后創(chuàng)建jQuery子對(duì)象時(shí)，都會(huì)順便傳入一個(gè)DOM元素，供jQuery簡(jiǎn)化版函數(shù)去操作！2種方式:

(1). 在創(chuàng)建jQuery子對(duì)象時(shí)，提供一個(gè)選擇器，去查找DOM元素，并將找到的DOM元素放入新創(chuàng)建的jQuery子對(duì)象中。

var jq子對(duì)象=new jQuery("選擇器")

(2). 也可以直接在new jQuery()中放入一個(gè)已經(jīng)獲得的DOM元素參數(shù)。表示將一個(gè)原生DOM元素封裝為jQuery類型的子對(duì)象

var jq子對(duì)象=new jQuery(DOM元素對(duì)象)

比如: var $this=$(this)

5. 結(jié)果：將來對(duì)jQuery子對(duì)象調(diào)用那些簡(jiǎn)化版的函數(shù)，其實(shí)操作的就是找到的這個(gè)DOM元素。

6. 問題: 簡(jiǎn)化版函數(shù)如何變成原生DOM的屬性和方法呢？

7. 解決: 其實(shí)，每當(dāng)我們調(diào)用一個(gè)簡(jiǎn)化版函數(shù)時(shí)，jq子對(duì)象都會(huì)自動(dòng)將簡(jiǎn)化版函數(shù)翻譯為對(duì)應(yīng)的原生的屬性和方法

8. 問題: jquery的作者認(rèn)為，每次使用jquery都要new jQuery()太繁瑣！

9. 解決: 簡(jiǎn)化:

(1). 將new jQuery()放入jquery構(gòu)造函數(shù)內(nèi)。結(jié)果: 今后創(chuàng)建jQuery子對(duì)象時(shí)，不用每次都寫new，只寫jQuery()即可

(2). 給jQuery起了一個(gè)別名叫$。從此要想創(chuàng)建jquery類型的子對(duì)象，只用$()即可。

10. $的本質(zhì): 創(chuàng)建一個(gè)jQuery類型的子對(duì)象，等效于new jQuery()

11. 問題: 使用原生的DOM查找函數(shù)找到的元素對(duì)象和使用jquery的$()找到的結(jié)果對(duì)象是不一樣的！

(1). 原生的DOM查找函數(shù)，找到的直接就是原生的DOM元素

(2). $()最后獲得的是一個(gè)jQuery類型的子對(duì)象，其中包含著找到的原生DOM元素對(duì)象

如何區(qū)分？

12. 解決: 今后，凡是用$()找到的結(jié)果對(duì)象，都要以$開頭命名！

13. 問題: jQuery事件處理函數(shù)中的this

(1). jQuery事件處理函數(shù)的原理和DOM事件處理函數(shù)的原理是一模一樣的。$btn.click(function(){ ... })就等效于btn.οnclick=function(){ ... }

(2). 所以, jQuery事件處理函數(shù)中的this->當(dāng)前觸發(fā)事件的DOM元素對(duì)象

(3). 但是, this默認(rèn)指的是當(dāng)前正在觸發(fā)事件的原生DOM元素，無法使用jQuery家所有簡(jiǎn)化版函數(shù)

14. 解決: 只要將this，用$()包裝一下，包裝成一個(gè)jQuery類型的子對(duì)象。就可以使用jQuery類型的子對(duì)象調(diào)用簡(jiǎn)化版函數(shù)，來操作this指向的DOM元素對(duì)象。

var $btn=$(this)

15. 問題: 案例中, 獲取按鈕的內(nèi)容用.html()，修改按鈕的內(nèi)容用的還是.html()。一個(gè)函數(shù)，怎么既能獲取，又能修改呢？

16. 總結(jié): 其實(shí)大部分jquery簡(jiǎn)化版函數(shù)都有三大特征:

(1). 一個(gè)函數(shù)兩用: 多數(shù)和修改相關(guān)的函數(shù)，都是一個(gè)函數(shù)兩用。即能獲取舊值，又能修改新值。如何判斷本次是該修改，還是該獲取？重載。

a. 如果本次調(diào)用函數(shù)時(shí)，沒有傳新值，就默認(rèn)執(zhí)行獲取舊值的操作

b. 如果本次調(diào)用函數(shù)時(shí)，傳了新值，就自動(dòng)切換為修改操作。

(2). 自帶遍歷:

a. 其實(shí), jquery查找結(jié)果對(duì)象是一個(gè)類數(shù)組對(duì)象。無論選擇器找到多少元素，都可以包裹進(jìn)jquery對(duì)象中

b. 只要對(duì)整個(gè)jQuery子對(duì)象調(diào)用一次簡(jiǎn)化版函數(shù)，就等效于對(duì)jquery對(duì)象內(nèi)每個(gè)DOM元素都調(diào)用一次對(duì)應(yīng)的原生DOM屬性或方法。無需自己寫for循環(huán)。

c. 示例: 使用jQuery記錄三個(gè)按鈕各自的單擊次數(shù)

2_jQueryAPI.html

(3). 多數(shù)函數(shù)都會(huì)返回正在操作的.前的主語jq對(duì)象——鏈?zhǔn)讲僮?。（需要循序漸進(jìn)，以后的知識(shí)點(diǎn)中，會(huì)逐步介紹，請(qǐng)持續(xù)關(guān)注，待續(xù)...）