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中文參考. 下載地址

　　/books/17812.html

　　好了,進(jìn)入正題. 再次申明JQuery很簡(jiǎn)單,take easy!

　　從那開(kāi)始呢? 最好的切入地方就從 ready 函數(shù)開(kāi)始!

　　定義

　　ready(fn);

　　功能

　　這是事件模塊中最重要的一個(gè)函數(shù)，因?yàn)樗�可以極大地提高web應(yīng)用程序的響應(yīng)速度。

　　簡(jiǎn)單地說(shuō)，這個(gè)方法純粹是對(duì)向window.load事件注冊(cè)事件的替代方法。通過(guò)使用這個(gè)方法，可以在DOM載入就緒能夠讀取并操縱時(shí)立即調(diào)用你所綁定的函數(shù)，而99.99%的JavaScript函數(shù)都需要在那一刻執(zhí)行。

　　有一個(gè)參數(shù)－－對(duì)jQuery函數(shù)的引用－－會(huì)傳遞到這個(gè)ready事件處理函數(shù)中。可以給這個(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方法我們干什么還要用ready方法?

　　我個(gè)人的體會(huì)及看法是 onl oad缺點(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)該很迷惑. 這是什么東東?別急... 現(xiàn)在只要記住這段代碼的功能就是當(dāng)整個(gè)文檔載入完畢后再執(zhí)行ready內(nèi)的函數(shù)就夠了.

　　看完下面的代碼我們就明白了$()的用法.

　　index.html代碼結(jié)構(gòu)如下:

　　.p1 {

　　background: #ff0000;

　　}

　　.p2 {

　　background: #00ff00;

　　}

　　.p3{

　　background: #0000ff;

　　}

　　.myPCss{

　　font-size:36px;

　　}

　　//

　　$(document).ready(function(){ $("p").addClass("p1"); $("p").removeClass("p1"); $("#myP").addClass("p2"); $(".myPCss").addClass("p3"); $("#myDiv p").addClass("p3"); $("#myDiv>p").addClass("p3"); $("p+p").addClass("p3"); $("p~p").addClass("p3"); var aP = document.getElementById("myP"); $(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");

　　$("#myDiv>p").addClass("p3");

　　$("p+p").addClass("p3");

　　$("p~p").addClass("p3");

　　var aP = document.getElementById("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").addClass("p2");

　　選擇文檔里id為"myP"的指定元素對(duì)象,并為該元素對(duì)象增加名稱為"p2"的樣式. 最后選到了1個(gè)

　　元素對(duì)象 "

　　快購(gòu)利眾網(wǎng)2

　　"

　　知識(shí)點(diǎn): 如果要選擇指定ID號(hào)的元素對(duì)象,記得前面用"#"

　　$(".myPCss").addClass("p3");

　　選擇文檔里樣式名為"myPCss"的指定元素對(duì)象,并為該元素對(duì)象增加名稱為"p3"的樣式. 最后選到了1個(gè)

　　元素對(duì)象 "

　　快購(gòu)利眾網(wǎng)3

　　"

　　知識(shí)點(diǎn): 如果要選擇指定樣式的元素對(duì)象,記得前面用"."

　　現(xiàn)在可以為大家正式介紹$(),在JQuery里,我們稱她為"選擇器函數(shù)",里面的內(nèi)容稱為"選擇器".

　　現(xiàn)在大家自己試試,記住選擇器選擇出的對(duì)象有可能是多個(gè)喲.

　　上面的內(nèi)容是不是挺簡(jiǎn)單的!! 嗯,革命才剛剛開(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< /p>"都是在"

　　"內(nèi)部定義的

　　雖然"

　　快購(gòu)利眾網(wǎng)4

　　"是在id為"myDivInner的"p"內(nèi)部定義的.但因?yàn)閕d 為"myDivInner的"p" 也是id為"myDiv的下層,所以"

　　快購(gòu)利眾網(wǎng)5

　　"也屬于id為"myDiv的下層. 有些繞口,記住一點(diǎn)就行. A,B操作器中如果是用空格連接,那么表示B屬于A的下層(可以為任意層)之中

　　最后為這3個(gè)

　　元素對(duì)象增加名為"p3"的樣式

　　知識(shí)點(diǎn): 對(duì)于這類有層次的選擇表達(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è)). <- 這個(gè)知識(shí)點(diǎn)一定要理解透!

　　$("#myDiv>p").addClass("p3");

　　功能:在給定的父元素下匹配所有的子元素

　　>代表#myDiv下的子元素對(duì)象(多個(gè)并只是下一層),最后選擇出2個(gè)

　　元素對(duì)象,""

　　快購(gòu)利眾網(wǎng)5

　　快購(gòu)利眾網(wǎng)6

　　",并為該

　　對(duì)象增加名為"p3"的樣式

　　$("p+p").addClass("p3");

　　功能:匹配所有緊接在 p 元素后的第一個(gè)同輩p 元素

　　+代表緊接著p同層的第一個(gè)子元素對(duì)象.

　　id為"myDivInner"同層后面第一個(gè)因?yàn)槭?quot;

　　",所以后沒(méi)有緊接著的"

　　"

　　id為"myDiv"同層后面正好是一個(gè)"

　　"

　　最后選擇出1個(gè)

　　元素對(duì)象,""

　　快購(gòu)利眾網(wǎng)7

　　",并為該

　　對(duì)象增加名為"p3"的樣式

　　知識(shí)點(diǎn): 是緊接著,如果A與B之間有其它元素都無(wú)法匹配.

　　$("p~p").addClass("p3");

　　功能:匹配 #myDiv 元素之后的所有同輩p 元素

　　該功能與 + 類似,不同的有兩處.

　　一, +為同輩并且緊跟, ~為同輩不需要一定緊跟

　　二, +為同輩并且第一個(gè), ~為同輩多個(gè).

　　var aP = document.getElementById("myP");

　　$(aP).addClass("p2");

　　$(aP).addClass("p2") 其實(shí)就是$("#myP").addClass("p2") 的另一種形式.

　　$()中處了可以用字符串的表達(dá)式選擇器,還可以使用DOM對(duì)象

　　當(dāng)你能看到這句話,我想對(duì)你說(shuō)"辛苦了."

　　學(xué)習(xí)的過(guò)程本來(lái)就是艱辛難耐的,唯為堅(jiān)持才能戰(zhàn)勝一切.

　　到現(xiàn)在我們應(yīng)該明白之前的"$(document)"代表什么意思了吧.

　　好了, 今天先講到這兒. 要快速熟悉選擇器的用法只有多加練習(xí).更多的高級(jí)應(yīng)用我相信大家都能自己學(xué)會(huì),掌握.