JQuery無(wú)廢話系列教程

1、前言 貝殼(就是本文作者了)也屬于剛剛會(huì)用點(diǎn)JQuery的那一類(lèi)型, 在學(xué)習(xí)過(guò)程中也遇到挺多問(wèn)題,特別是在開(kāi)始入門(mén)的時(shí)候.一直準(zhǔn)備寫(xiě)些有關(guān)JQuery的文章,但又恐自己文筆及表達(dá)能力有限而誤人子弟,最終還是鼓起勇氣. 如在文章中有錯(cuò)誤或者不合適的理解望廣大朋友直接指出批評(píng). 本文的宗旨, 授人魚(yú)不如授人漁. 我只會(huì)講關(guān)鍵部分,不可能JQuery的每個(gè)函數(shù)我都講,因?yàn)橛泻芏嗪瘮?shù)貝殼自己在實(shí)際應(yīng)用中都從未使用過(guò). 但當(dāng)我們已經(jīng)會(huì)漁了還用擔(dān)心魚(yú)嗎!? BTW:貝殼假設(shè)你已經(jīng)掌了基本的JavaScript運(yùn)用能力及基礎(chǔ)的CSS知識(shí). JQuery是什么 JQuery只是一個(gè)JS文件 人對(duì)新鮮事業(yè)總是報(bào)

2、著好奇與排斥的情感,貝殼剛開(kāi)始學(xué)的時(shí)候也一樣. 想掌握又怕自己學(xué)不會(huì). 其實(shí)JQuery很簡(jiǎn)單. JQuery其實(shí)就是一個(gè)工具包,很多常用的功能已經(jīng)被好心人封裝好,我們真要直接調(diào)用就可以了(有點(diǎn)類(lèi)似SDK),具體內(nèi)部原理和實(shí)現(xiàn)我們現(xiàn)在不去討論. 記住JQuery很簡(jiǎn)單,很方便. 本系列教程基于1.32版進(jìn)行講解. JQuery有兩種版本: 一種為uncompressed版(未壓縮版)主要用在開(kāi)發(fā)中. 另一種為Minified(迷您版)當(dāng)開(kāi)發(fā)完畢了,就可以改用這個(gè)版本. 兩種版本的區(qū)別 文件大小不一樣, 最終用戶(hù)在瀏覽時(shí)可以減少下載JS時(shí)的等待時(shí)間. Uncompressed版文件大小為118K

3、B Minified版文件大小為56KB JQuery能帶給我們什么 一, 站在巨人的肩上 別人已經(jīng)發(fā)明了輪子,我們沒(méi)必要自己再去造一個(gè). 二, 強(qiáng)大的BOM,DOM,CSS,事件 的操作能力 我最常用的是CSS及DOM的操作,真的太方便了. 三, 更加簡(jiǎn)潔的代碼 自己的親身經(jīng)歷,比如表格(Table)中的TR奇偶為兩種顏色的代碼如果自己用JavaScript去編號(hào)得用幾十行代碼,JQuery只需要2行就可以了. 四, 與瀏覽器無(wú)關(guān)性 做過(guò)JavaScript開(kāi)發(fā)的就知道JavaScript在不同的瀏覽器下行為表現(xiàn)有時(shí)不一樣,我們不得不為不同的瀏覽器編寫(xiě)相應(yīng)的代碼. JQuery在這方法已經(jīng)內(nèi)

4、部處理,我們只管去用就是了. 五, 不錯(cuò)的性能 我自己有自知之明, 至少我寫(xiě)的JavaScript代碼的運(yùn)行效率不如JQuery的高. 如何使用JQuery 萬(wàn)年開(kāi)頭難,我在第一次使用JQuery時(shí)被嚇到過(guò),不知道怎么使用,其實(shí)很簡(jiǎn)單,下面我們用一個(gè)例子來(lái)說(shuō)明. : ) 建立一個(gè)html文件,比如index.html 并與JQuery庫(kù)文件jquery-1.3.2.js放到同目錄下(其實(shí)放那都可以) 首先我們解決JQuery的引用. 代碼如下: JQuery測(cè)試 紅色的那一行代碼就完成了JQuery的引用,簡(jiǎn)單吧! 現(xiàn)在我們?cè)贁U(kuò)充一個(gè)功能,使 index.html顯示一個(gè)表格,并且表格內(nèi)各行的

5、顏色奇偶不同.也就是奇數(shù)行是一種顏色,偶數(shù)行又是另一種顏色. index.html代碼結(jié)構(gòu): JQuery測(cè)試 /*table中偶數(shù)行*/ .tabEven background: #ff0000; /*table中奇數(shù)行*/ .tabOdd background: #00ff00; / 快購(gòu)利眾網(wǎng)_1 1 快購(gòu)利眾網(wǎng)_2 1 快購(gòu)利眾網(wǎng)_3 1 快購(gòu)利眾網(wǎng)_4 1 快購(gòu)利眾網(wǎng)_5 1 效果如下: 代碼解析: $(document).ready(function() $(#tabTest tr:even).addClass(tabEven); $(#tabTest tr:odd).addCla

6、ss(tabOdd); ); $(document).ready 的作用很簡(jiǎn)單,就是等待網(wǎng)頁(yè)全部?jī)?nèi)部載入后再執(zhí)行JavaScript代碼(別忘了JQuery也是JavaScript代碼喲), 這個(gè)函數(shù)幾乎在所有使用JQuery的代碼中都用到. 因?yàn)槿绻覀兊腏avascript代碼中如果有DOM操作,在網(wǎng)頁(yè)還沒(méi)完全讀取完時(shí)整個(gè)DOM框架還沒(méi)有真正建立起來(lái),在這之前的DOM操作都是無(wú)效的. $(#tabTest tr:even).addClass(tabEven); 為id為tabTest的表格的偶數(shù)行增加名為tabEven的CSS樣式 $(#tabTest tr:odd).addClass(t

7、abOdd); 為id為tabTest的表格的奇數(shù)行增加名為tabEven的CSS樣式 最后, 初學(xué)者千萬(wàn)不要為陌生的代碼而感到不知所措,記住JQuery很簡(jiǎn)單. 就進(jìn)入實(shí)戰(zhàn)?是不是太快了?我還不知道怎么用JQuery! . 我知道大家的想法, 放心好了,有些東西是不需要太多的理論知道做為基礎(chǔ), 其實(shí)在我們已經(jīng)掌握J(rèn)avaScript時(shí),就已經(jīng)掌握了JQuery的理論知識(shí). 還是入門(mén)篇所說(shuō)的那樣,其實(shí)JQuery很簡(jiǎn)單. : ) 在我們開(kāi)始學(xué)習(xí)之前建議大家先去下載JQuery1.3中文參考. 下載地址 /d/jQueryDocXML2CHM-.chm/

8、9c4465cbe627feb5c8046a5cba4b9bc7052ead0100 今天的教程有些復(fù)雜(只是概念多點(diǎn)而已),但過(guò)了這一關(guān),JQuery的學(xué)習(xí)可謂是一馬平川. 好了,進(jìn)入正題. 再次申明JQuery很簡(jiǎn)單,take easy! 從那開(kāi)始呢? 最好的切入地方就從JQuery的最基本的一個(gè)函數(shù) ready 開(kāi)始! 該函數(shù)的作用可以看做和onLoad,至少現(xiàn)在可以這么看待. 定義 ready(fn); 功能 這是事件模塊中最重要的一個(gè)函數(shù)，因?yàn)樗梢詷O大地提高web應(yīng)用程序的響應(yīng)速度。 簡(jiǎn)單地說(shuō)，這個(gè)方法純粹是對(duì)向window.load事件注冊(cè)事件的替代方法。通過(guò)使用這個(gè)方法，可以在

9、DOM載入就緒能夠讀取并操縱時(shí)立即調(diào)用你所綁定的函數(shù)，而99.99%的JavaScript函數(shù)都需要在那一刻執(zhí)行。 有一個(gè)參數(shù)對(duì)jQuery函數(shù)的引用會(huì)傳遞到這個(gè)ready事件處理函數(shù)中?？梢越o這個(gè)參數(shù)任意起一個(gè)名字，并因此可以不再擔(dān)心命名沖突而放心地使用$別名。 請(qǐng)確保在 元素的onload事件中沒(méi)有注冊(cè)函數(shù)，否則不會(huì)觸發(fā)$(document).ready()事件。 可以在同一個(gè)頁(yè)面中無(wú)限次地使用$(document).ready()事件。其中注冊(cè)的函數(shù)會(huì)按照（代碼中的）先后順序依次執(zhí)行。 通過(guò)上面所述,我們可以把ready看做onLoad的替代方法. 這時(shí)有的朋友就會(huì)問(wèn)了,有onLoad方

10、法我們干什么還要用ready方法? 我個(gè)人的體會(huì)及看法是 onLoad缺點(diǎn)是以后維護(hù)起來(lái)麻煩,到處都是JavaScript代碼,很容易出問(wèn)題的喲! 在 中,ppk針對(duì)這個(gè)問(wèn)題的看法也是如此,盡量不要在標(biāo)簽中直接編寫(xiě)JavaScript代碼. 實(shí)例 兩種編寫(xiě)方式 一 $(document).ready(function()alert(Hello World!);); 二 var myFun = function()alert(Hello World!); $(document).ready(myFun); 到這兒我想大家對(duì)ready的用法應(yīng)該是明白了,但對(duì)前面的 $(document)應(yīng)該很迷惑

11、. 這是什么東東?別急. 現(xiàn)在只要記住這段代碼的功能就是當(dāng)整個(gè)文檔載入完畢后再執(zhí)行ready內(nèi)的函數(shù)就夠了. 看完下面的代碼我們就明白了$()的用法. index.html代碼結(jié)構(gòu)如下: JQuery測(cè)試 .p1 background: #ff0000; .p2 background: #00ff00; .p3 background: #0000ff; .myPCss font-size:36px; / p).addClass(p3); $(div+p).addClass(p3); $(divp).addClass(p3); var aP = document.getElementById(m

12、yP); $(aP).addClass(p2); ); / 快購(gòu)利眾網(wǎng)1 快購(gòu)利眾網(wǎng)2 快購(gòu)利眾網(wǎng)3 快購(gòu)利眾網(wǎng)4 快購(gòu)利眾網(wǎng)5 快購(gòu)利眾網(wǎng)6 快購(gòu)利眾網(wǎng)7 代碼解析: $(p).addClass(p1); $(p).removeClass(p1); $(#myP).addClass(p2); $(.myPCss).addClass(p3); $(#myDiv p).addClass(p3); $(#myDivp).addClass(p3); $(div+p).addClass(p3); $(divp).addClass(p3); var aP = document.getElementByI

13、d(myP); $(aP).addClass(p2); $(p).addClass(p1); $(p).removeClass(p1); 選擇文檔里全部的 元素對(duì)象,不論 在文檔中所處的層次結(jié)構(gòu)如何, 最后選到了7個(gè) 元素對(duì)象 快購(gòu)利眾網(wǎng)1 快購(gòu)利眾網(wǎng)2 快購(gòu)利眾網(wǎng)3 快購(gòu)利眾網(wǎng)4 快購(gòu)利眾網(wǎng)5 快購(gòu)利眾網(wǎng)6 快購(gòu)利眾網(wǎng)7 addClass(css name)函數(shù)很簡(jiǎn)單,就是為前面$()選擇到的元素對(duì)象增加CSS樣式. removeClass(css name)函數(shù)也很簡(jiǎn)單,就是去掉前面$()選擇到的元素對(duì)象的指定的樣式. 在這兒,這兩段代碼功能抵消,相當(dāng)什么也沒(méi)做. $(#myP).addC

14、lass(p2); 選擇文檔里id為myP的指定元素對(duì)象,并為該元素對(duì)象增加名稱(chēng)為p2的樣式. 最后選到了1個(gè) 元素對(duì)象 快購(gòu)利眾網(wǎng)2 知識(shí)點(diǎn): 如果要選擇指定ID號(hào)的元素對(duì)象,記得前面用# $(.myPCss).addClass(p3); 選擇文檔里樣式名為myPCss的指定元素對(duì)象,并為該元素對(duì)象增加名稱(chēng)為p3的樣式. 最后選到了1個(gè) 元素對(duì)象 快購(gòu)利眾網(wǎng)3 知識(shí)點(diǎn): 如果要選擇指定樣式的元素對(duì)象,記得前面用. 現(xiàn)在可以為大家正式介紹$(),在JQuery里,我們稱(chēng)她為選擇器函數(shù),里面的內(nèi)容稱(chēng)為選擇器. 現(xiàn)在大家自己試試,記住選擇器選擇出的對(duì)象有可能是多個(gè)喲. 上面的內(nèi)容是不是挺簡(jiǎn)單的!

15、嗯,革命才剛剛開(kāi)始,下面的內(nèi)容稍稍復(fù)雜些因?yàn)闋可娴綄哟蔚母拍?但大家別急,只要記住選擇器選擇出的元素對(duì)象可能是多個(gè)這點(diǎn)就不用怕了. $(#myDiv p).addClass(p3); 功能:在給定的祖先元素下匹配所有的后代元素 分成兩部分來(lái)分析 一,$(#myDiv) 根據(jù)上面所學(xué)的知識(shí),選擇出1個(gè) 元素對(duì)象, 二,$(#myDiv p) 在上面2個(gè) 元素對(duì)象中的任意層中選擇 元素對(duì)象. 幾個(gè)? 3個(gè) 快購(gòu)利眾網(wǎng)4 快購(gòu)利眾網(wǎng)5 快購(gòu)利眾網(wǎng)6 其中 快購(gòu)利眾網(wǎng)4 快購(gòu)利眾網(wǎng)5 快購(gòu)利眾網(wǎng)6 都是在 內(nèi)部定義的 雖然 快購(gòu)利眾網(wǎng)4 是在id為myDivInner的div內(nèi)部定義的.但因?yàn)閕d為m

16、yDivInner的div 也是id為myDiv的下層,所以 快購(gòu)利眾網(wǎng)5 也屬于id為myDiv的下層. 有些繞口,記住一點(diǎn)就行. A,B操作器中如果是用空格連接,那么表示B屬于A的下層(可以為任意層)之中 最后為這3個(gè) 元素對(duì)象增加名為p3的樣式 知識(shí)點(diǎn): 對(duì)于這類(lèi)有層次的選擇表達(dá)式$(A B),A選擇器和B選擇器可以是標(biāo)簽名,#id,.css三種中的任意一種,中間用空格分開(kāi),空格表示任意層次. 右邊的B選擇器是在左邊A選擇器選擇的結(jié)果上進(jìn)行內(nèi)部任意層中選擇, 記住是在左邊選擇出的元素對(duì)象(可能是多個(gè))的內(nèi)部進(jìn)行再次選擇(可能是多個(gè)). p).addClass(p3); 功能:在給定的父元

17、素下匹配所有的子元素 代表#myDiv下的子元素對(duì)象(多個(gè)并只是下一層),最后選擇出2個(gè) 元素對(duì)象, 快購(gòu)利眾網(wǎng)5 快購(gòu)利眾網(wǎng)6 ,并為該 對(duì)象增加名為p3的樣式 $(div+p).addClass(p3); 功能:匹配所有緊接在 div 元素后的 第一個(gè)同輩p 元素 +代表緊接著div同層的第一個(gè)子元素對(duì)象. id為myDivInner同層后面第一個(gè)因?yàn)槭?,所以后沒(méi)有緊接著的 id為myDiv同層后面正好是一個(gè) 最后選擇出1個(gè) 元素對(duì)象, 快購(gòu)利眾網(wǎng)7 ,并為該 對(duì)象增加名為p3的樣式 知識(shí)點(diǎn): 是緊接著,如果A與B之間有其它元素都無(wú)法匹配. $(divp).addClass(p3); 功能:匹配 #myDiv 元素之后的所有同輩p 元素 該功能與 + 類(lèi)似,不同的有兩處. 一, +為同輩并且緊跟, 為同輩不需要一定緊跟 二, +為同輩并且第一個(gè), 為同輩多個(gè). v