- 相關(guān)推薦
JQuery系列教程講解
我知道大家的想法, 放心好了,有些東西是不需要太多的理論知道做為基礎, 其實(shí)在我們已經(jīng)掌握JavaScript時(shí),就已經(jīng)掌握了JQuery的理論知識. 還是入門(mén)篇所說(shuō)的那樣,其實(shí)JQuery很簡(jiǎn)單. : )
在我們開(kāi)始學(xué)習之前建議大家先去下載JQuery1.3中文參考. 下載地址
/books/17812.html
好了,進(jìn)入正題. 再次申明JQuery很簡(jiǎn)單,take easy!
從那開(kāi)始呢? 最好的切入地方就從 ready 函數開(kāi)始!
定義
ready(fn);
功能
這是事件模塊中最重要的一個(gè)函數，因為它可以極大地提高web應用程序的響應速度。
簡(jiǎn)單地說(shuō)，這個(gè)方法純粹是對向window.load事件注冊事件的替代方法。通過(guò)使用這個(gè)方法，可以在DOM載入就緒能夠讀取并操縱時(shí)立即調用你所綁定的函數，而99.99%的JavaScript函數都需要在那一刻執行。
有一個(gè)參數－－對jQuery函數的引用－－會(huì )傳遞到這個(gè)ready事件處理函數中�？梢越o這個(gè)參數任意起一個(gè)名字，并因此可以不再擔心命名沖突而放心地使用$別名。
請確保在 元素的onload事件中沒(méi)有注冊函數，否則不會(huì )觸發(fā)$(document).ready()事件。
可以在同一個(gè)頁(yè)面中無(wú)限次地使用$(document).ready()事件。其中注冊的函數會(huì )按照（代碼中的）先后順序依次執行。
通過(guò)上面所述,我們可以把ready看做onLoad的替代方法. 這時(shí)有的朋友就會(huì )問(wèn)了,有onLoad方法我們干什么還要用ready方法?
我個(gè)人的體會(huì )及看法是 onLoad缺點(diǎn)是以后維護起來(lái)麻煩,到處都是JavaScript代碼,很容易出問(wèn)題的喲! 在<>中,ppk針對這個(gè)問(wèn)題的看法也是如此,盡量不要在標簽中直接編寫(xiě)JavaScript 代碼.
實(shí)例
兩種編寫(xiě)方式
一
$(document).ready(function(){alert("Hello World!");});
二
var myFun = function(){alert("Hello World!");}
$(document).ready(myFun);
到這兒我想大家對ready的用法應該是明白了,但對前面的 $(document)應該很迷惑. 這是什么東東?別急... 現在只要記住這段代碼的功能就是當整個(gè)文檔載入完畢后再執行ready內的函數就夠了.
看完下面的代碼我們就明白了$()的用法.
index.html代碼結構如下:
.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"); $("div+p").addClass("p3"); $("div~p").addClass("p3"); var aP = document.getElementById("myP"); $(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");
$("#myDiv>p").addClass("p3");
$("div+p").addClass("p3");
$("div~p").addClass("p3");
var aP = document.getElementById("myP");
$(aP).addClass("p2");
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
$("p").addClass("p1");
$("p").removeClass("p1");
選擇文檔里全部的
元素對象,不論
在文檔中所處的層次結構如何, 最后選到了7個(gè)
元素對象 "
快購利眾網(wǎng)1
快購利眾網(wǎng)2
快購利眾網(wǎng)3
快購利眾網(wǎng)4
快購利眾網(wǎng)5
快購利眾網(wǎng)6
快購利眾網(wǎng)7
"
addClass("css name")函數很簡(jiǎn)單,就是為前面$()選擇到的元素對象增加CSS樣式.
removeClass("css name")函數也很簡(jiǎn)單,就是去掉前面$()選擇到的元素對象的指定的樣式.
在這兒,這兩段代碼功能抵消,相當什么也沒(méi)做.
$("#myP").addClass("p2");
選擇文檔里id為"myP"的指定元素對象,并為該元素對象增加名稱(chēng)為"p2"的樣式. 最后選到了1個(gè)
元素對象 "
快購利眾網(wǎng)2
"
知識點(diǎn): 如果要選擇指定ID號的元素對象,記得前面用"#"
$(".myPCss").addClass("p3");
選擇文檔里樣式名為"myPCss"的指定元素對象,并為該元素對象增加名稱(chēng)為"p3"的樣式. 最后選到了1個(gè)
元素對象 "
快購利眾網(wǎng)3
"
知識點(diǎn): 如果要選擇指定樣式的元素對象,記得前面用"."
現在可以為大家正式介紹$(),在JQuery里,我們稱(chēng)她為"選擇器函數",里面的內容稱(chēng)為"選擇器".
現在大家自己試試,記住選擇器選擇出的對象有可能是多個(gè)喲.
上面的內容是不是挺簡(jiǎn)單的!! 嗯,革命才剛剛開(kāi)始,下面的內容稍稍復雜些因為牽涉到層次的概念,但大家別急,只要記住"選擇器"選擇出的元素對象可能是多個(gè)這點(diǎn)就不用怕了.
$("#myDiv p").addClass("p3");
功能:在給定的祖先元素下匹配所有的后代元素
分成兩部分來(lái)分析
一,$("#myDiv") 根據上面所學(xué)的知識,選擇出1個(gè)
元素對象, "
"
二,$("#myDiv p") 在上面2個(gè)
元素對象中的任意層中選擇
元素對象. 幾個(gè)? 3個(gè) "
快購利眾網(wǎng)4
快購利眾網(wǎng)5
快購利眾網(wǎng)6
"
其中"
快購利眾網(wǎng)4
快購利眾網(wǎng)5
快購利眾網(wǎng)6< /p>"都是在"
"內部定義的
雖然"
快購利眾網(wǎng)4
"是在id為"myDivInner的"div"內部定義的.但因為id 為"myDivInner的"div" 也是id為"myDiv的下層,所以"
快購利眾網(wǎng)5
"也屬于id為"myDiv的下層. 有些繞口,記住一點(diǎn)就行. A,B操作器中如果是用空格連接,那么表示B屬于A(yíng)的下層(可以為任意層)之中
最后為這3個(gè)
元素對象增加名為"p3"的樣式
知識點(diǎn): 對于這類(lèi)有層次的選擇表達式$("A B"),A選擇器和B選擇器可以是"標簽名","#id",".css"三種中的任意一種,中間用空格分開(kāi),空格表示任意次.
右邊的B選擇器是在左邊A選擇器選擇的結果上進(jìn)行內部任意層中選擇, 記住是在左邊選擇出的元素對象(可能是多個(gè))的內部進(jìn)行再次選擇(可能是多個(gè)). <- 這個(gè)知識點(diǎn)一定要理解透!
$("#myDiv>p").addClass("p3");
功能:在給定的父元素下匹配所有的子元素
>代表#myDiv下的子元素對象(多個(gè)并只是下一層),最后選擇出2個(gè)
元素對象,""
快購利眾網(wǎng)5
快購利眾網(wǎng)6
",并為該
對象增加名為"p3"的樣式
$("div+p").addClass("p3");
功能:匹配所有緊接在 div 元素后的第一個(gè)同輩p 元素
+代表緊接著(zhù)div同層的第一個(gè)子元素對象.
id為"myDivInner"同層后面第一個(gè)因為是"
",所以后沒(méi)有緊接著(zhù)的"
"
id為"myDiv"同層后面正好是一個(gè)"
"
最后選擇出1個(gè)
元素對象,""
快購利眾網(wǎng)7
",并為該
對象增加名為"p3"的樣式
知識點(diǎn): 是緊接著(zhù),如果A與B之間有其它元素都無(wú)法匹配.
$("div~p").addClass("p3");
功能:匹配 #myDiv 元素之后的所有同輩p 元素
該功能與 + 類(lèi)似,不同的有兩處.
一, +為同輩并且緊跟, ~為同輩不需要一定緊跟
二, +為同輩并且第一個(gè), ~為同輩多個(gè).
var aP = document.getElementById("myP");
$(aP).addClass("p2");
$(aP).addClass("p2") 其實(shí)就是$("#myP").addClass("p2") 的另一種形式.
$()中處了可以用字符串的表達式選擇器,還可以使用DOM對象
當你能看到這句話(huà),我想對你說(shuō)"辛苦了."
學(xué)習的過(guò)程本來(lái)就是艱辛難耐的,唯為堅持才能戰勝一切.
到現在我們應該明白之前的"$(document)"代表什么意思了吧.
好了, 今天先講到這兒. 要快速熟悉選擇器的用法只有多加練習.更多的高級應用我相信大家都能自己學(xué)會(huì ),掌握.
【JQuery系列教程講解】相關(guān)文章：
jquery與json的結合的知識點(diǎn)講解08-10
jQuery程序設計08-05
jquery提交按鈕的代碼07-28
全新大學(xué)英語(yǔ)綜合教程第二冊單元6內容講解07-30
jQuery中prev()方法用法07-16
如何理解jquery事件冒泡09-15
jQuery的DOM操作筆記07-29
jQuery 源碼分析和Ready函數06-28