我知道大家的想法, 放心好了,有些東西是不需要太多的理論知道做為基礎, 其實在我們已經掌握JavaScript時,就已經掌握了JQuery的理論知識. 還是入門篇所說的那樣,其實JQuery很簡單. : )
在我們開始學習之前建議大家先去下載JQuery1.3中文參考. 下載地址
/books/
好了,進入正題. 再次申明JQuery很簡單,take easy!
從那開始呢? 最好的切入地方就從 ready 函式開始!
定義
ready(fn);
功能
這是事件模組中最重要的一個函式，因為它可以極大地提高web應用程式的響應速度。
簡單地說，這個方法純粹是對向事件註冊事件的替代方法。通過使用這個方法，可以在DOM載入就緒能夠讀取並操縱時立即呼叫你所繫結的函式，而99.99%的JavaScript函式都需要在那一刻執行。
有一個引數－－對jQuery函式的引用－－會傳遞到這個ready事件處理函式中。可以給這個引數任意起一個名字，並因此可以不再擔心命名衝突而放心地使用$別名。
請確保在 元素的onload事件中沒有註冊函式，否則不會觸發$(document)y()事件。
可以在同一個頁面中無限次地使用$(document)y()事件。其中註冊的函式會按照（程式碼中的）先後順序依次執行。
通過上面所述,我們可以把ready看做onLoad的.替代方法. 這時有的朋友就會問了,有onLoad方法我們幹什麼還要用ready方法?
我個人的體會及看法是 onLoad缺點是以後維護起來麻煩,到處都是JavaScript程式碼,很容易出問題的喲! 在<>中,ppk針對這個問題的看法也是如此,儘量不要在標籤中直接編寫JavaScript 程式碼.
例項
兩種編寫方式
一
$(document)y(function(){alert("Hello World!");});
二
var myFun = function(){alert("Hello World!");}
$(document)y(myFun);
到這兒我想大家對ready的用法應該是明白了,但對前面的 $(document)應該很迷惑. 這是什麼東東?別急... 現在只要記住這段程式碼的功能就是當整個文件載入完畢後再執行ready內的函式就夠了.
看完下面的程式碼我們就明白了$()的用法.
程式碼結構如下:
.p1 {
background: #ff0000;
}
.p2 {
background: #00ff00;
}
.p3{
background: #0000ff;
}
ss{
font-size:36px;
}
//
$(document)y(function(){ $("p")lass("p1"); $("p")veClass("p1"); $("#myP")lass("p2"); $("ss")lass("p3"); $("#myDiv p")lass("p3"); $("#myDiv>p")lass("p3"); $("div+p")lass("p3"); $("div~p")lass("p3"); var aP = lementById("myP"); $(aP)lass("p2"); }); //]]>
快購利眾網1
快購利眾網2
快購利眾網3
快購利眾網4
快購利眾網5
快購利眾網6
快購利眾網7
程式碼解析:
$("p")lass("p1");
$("p")veClass("p1");
$("#myP")lass("p2");
$("ss")lass("p3");
$("#myDiv p")lass("p3");
$("#myDiv>p")lass("p3");
$("div+p")lass("p3");
$("div~p")lass("p3");
var aP = lementById("myP");
$(aP)lass("p2");
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
$("p")lass("p1");
$("p")veClass("p1");
選擇文件裡全部的
元素物件,不論
在文件中所處的層次結構如何, 最後選到了7個
元素物件 "
快購利眾網1
快購利眾網2
快購利眾網3
快購利眾網4
快購利眾網5
快購利眾網6
快購利眾網7
"
addClass("css name")函式很簡單,就是為前面$()選擇到的元素物件增加CSS樣式.
removeClass("css name")函式也很簡單,就是去掉前面$()選擇到的元素物件的指定的樣式.
在這兒,這兩段程式碼功能抵消,相當什麼也沒做.
$("#myP")lass("p2");
選擇文件裡id為"myP"的指定元素物件,併為該元素物件增加名稱為"p2"的樣式. 最後選到了1個
元素物件 "
快購利眾網2
"
知識點: 如果要選擇指定ID號的元素物件,記得前面用"#"
$("ss")lass("p3");
選擇文件裡樣式名為"myPCss"的指定元素物件,併為該元素物件增加名稱為"p3"的樣式. 最後選到了1個
元素物件 "
快購利眾網3
"
知識點: 如果要選擇指定樣式的元素物件,記得前面用"."
現在可以為大家正式介紹$(),在JQuery裡,我們稱她為"選擇器函式",裡面的內容稱為"選擇器".
現在大家自己試試,記住選擇器選擇出的物件有可能是多個喲.
上面的內容是不是挺簡單的!! 嗯,革命才剛剛開始,下面的內容稍稍複雜些因為牽涉到層次的概念,但大家別急,只要記住"選擇器"選擇出的元素物件可能是多個這點就不用怕了.
$("#myDiv p")lass("p3");
功能:在給定的祖先元素下匹配所有的後代元素
分成兩部分來分析
一,$("#myDiv") 根據上面所學的知識,選擇出1個
元素物件, "
"
二,$("#myDiv p") 在上面2個
元素物件中的任意層中選擇
元素物件. 幾個? 3個 "
快購利眾網4
快購利眾網5
快購利眾網6
"
其中"
快購利眾網4
快購利眾網5
快購利眾網6< /p>"都是在"
"內部定義的
雖然"
快購利眾網4
"是在id為"myDivInner的"div"內部定義的.但因為id 為"myDivInner的"div" 也是id為"myDiv的下層,所以"
快購利眾網5
"也屬於id為"myDiv的下層. 有些繞口,記住一點就行. A,B操作器中如果是用空格連線,那麼表示B屬於A的下層(可以為任意層)之中
最後為這3個
元素物件增加名為"p3"的樣式
知識點: 對於這類有層次的選擇表示式$("A B"),A選擇器和B選擇器可以是"標籤名","#id",""三種中的任意一種,中間用空格分開,空格表示任意次.
右邊的B選擇器是在左邊A選擇器選擇的結果上進行內部任意層中選擇, 記住是在左邊選擇出的元素物件(可能是多個)的內部進行再次選擇(可能是多個). <- 這個知識點一定要理解透!
$("#myDiv>p")lass("p3");
功能:在給定的父元素下匹配所有的子元素
>代表#myDiv下的子元素物件(多個並只是下一層),最後選擇出2個
元素物件,""
快購利眾網5
快購利眾網6
",併為該
物件增加名為"p3"的樣式
$("div+p")lass("p3");
功能:匹配所有緊接在 div 元素後的第一個同輩p 元素
+代表緊接著div同層的第一個子元素物件.
id為"myDivInner"同層後面第一個因為是"
",所以後沒有緊接著的"
"
id為"myDiv"同層後面正好是一個"
"
最後選擇出1個
元素物件,""
快購利眾網7
",併為該
物件增加名為"p3"的樣式
知識點: 是緊接著,如果A與B之間有其它元素都無法匹配.
$("div~p")lass("p3");
功能:匹配 #myDiv 元素之後的所有同輩p 元素
該功能與 + 類似,不同的有兩處.
一, +為同輩並且緊跟, ~為同輩不需要一定緊跟
二, +為同輩並且第一個, ~為同輩多個.
var aP = lementById("myP");
$(aP)lass("p2");
$(aP)lass("p2") 其實就是$("#myP")lass("p2") 的另一種形式.
$()中處了可以用字串的表示式選擇器,還可以使用DOM物件
當你能看到這句話,我想對你說"辛苦了."
學習的過程本來就是艱辛難耐的,唯為堅持才能戰勝一切.
到現在我們應該明白之前的"$(document)"代表什麼意思了吧.
好了, 今天先講到這兒. 要快速熟悉選擇器的用法只有多加練習.更多的高階應用我相信大家都能自己學會,掌握.
