JQuery無廢話系列教程

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

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

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

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

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

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

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

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

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

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

11、. 這是什么東東?別急. 現(xiàn)在只要記住這段代碼的功能就是當整個文檔載入完畢后再執(zhí)行ready內的函數(shù)就夠了. 看完下面的代碼我們就明白了$()的用法. index.html代碼結構如下: JQuery測試 .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); ); / 快購利眾網(wǎng)1 快購利眾網(wǎng)2 快購利眾網(wǎng)3 快購利眾網(wǎng)4 快購利眾網(wǎng)5 快購利眾網(wǎng)6 快購利眾網(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); 選擇文檔里全部的 元素對象,不論 在文檔中所處的層次結構如何, 最后選到了7個 元素對象 快購利眾網(wǎng)1 快購利眾網(wǎng)2 快購利眾網(wǎng)3 快購利眾網(wǎng)4 快購利眾網(wǎng)5 快購利眾網(wǎng)6 快購利眾網(wǎng)7 addClass(css name)函數(shù)很簡單,就是為前面$()選擇到的元素對象增加CSS樣式. removeClass(css name)函數(shù)也很簡單,就是去掉前面$()選擇到的元素對象的指定的樣式. 在這兒,這兩段代碼功能抵消,相當什么也沒做. $(#myP).addC

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

15、嗯,革命才剛剛開始,下面的內容稍稍復雜些因為牽涉到層次的概念,但大家別急,只要記住選擇器選擇出的元素對象可能是多個這點就不用怕了. $(#myDiv p).addClass(p3); 功能:在給定的祖先元素下匹配所有的后代元素 分成兩部分來分析 一,$(#myDiv) 根據(jù)上面所學的知識,選擇出1個 元素對象, 二,$(#myDiv p) 在上面2個 元素對象中的任意層中選擇 元素對象. 幾個? 3個 快購利眾網(wǎng)4 快購利眾網(wǎng)5 快購利眾網(wǎng)6 其中 快購利眾網(wǎng)4 快購利眾網(wǎng)5 快購利眾網(wǎng)6 都是在 內部定義的 雖然 快購利眾網(wǎng)4 是在id為myDivInner的div內部定義的.但因為id為m

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

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