快捷導(dǎo)航

JQuery 無廢話系列教程(二) jquery實戰(zhàn)篇上

更新時間：2009年06月23日 00:47:28 作者：

就進入實戰(zhàn)?是不是太快了?我還不知道怎么用JQuery!! ...

我知道大家的想法, 放心好了,有些東西是不需要太多的理論知道做為基礎(chǔ), 其實在我們已經(jīng)掌握J(rèn)avaScript時,就已經(jīng)掌握了JQuery的理論知識. 還是入門篇所說的那樣,其實JQuery很簡單. : )
在我們開始學(xué)習(xí)之前建議大家先去下載JQuery1.3中文參考. 下載地址
http://www.dbjr.com.cn/books/17812.html

好了,進入正題. 再次申明JQuery很簡單,take easy!

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

定義

ready(fn);

功能

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

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

有一個參數(shù)－－對jQuery函數(shù)的引用－－會傳遞到這個ready事件處理函數(shù)中?？梢越o這個參數(shù)任意起一個名字，并因此可以不再擔(dān)心命名沖突而放心地使用$別名。

請確保在元素的onload事件中沒有注冊函數(shù)，否則不會觸發(fā)$(document).ready()事件。

可以在同一個頁面中無限次地使用$(document).ready()事件。其中注冊的函數(shù)會按照（代碼中的）先后順序依次執(zhí)行。

通過上面所述,我們可以把ready看做onLoad的替代方法. 這時有的朋友就會問了,有onLoad方法我們干什么還要用ready方法?

我個人的體會及看法是 onLoad缺點是以后維護起來麻煩,到處都是JavaScript代碼,很容易出問題的喲! 在<<ppk談JavaScript>>中,ppk針對這個問題的看法也是如此,盡量不要在標(biāo)簽中直接編寫JavaScript 代碼.

實例

兩種編寫方式

一

$(document).ready(function(){alert("Hello World!");});

二

var myFun = function(){alert("Hello World!");}

$(document).ready(myFun);

到這兒我想大家對ready的用法應(yīng)該是明白了,但對前面的 $(document)應(yīng)該很迷惑. 這是什么東東?別急... 現(xiàn)在只要記住這段代碼的功能就是當(dāng)整個文檔載入完畢后再執(zhí)行ready內(nèi)的函數(shù)就夠了.

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

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery測試</title>

        .p1 {
            background: #ff0000;
        }

        .p2 {
            background: #00ff00;
        }

.p3{

background: #0000ff;

}

.myPCss{

font-size:36px;

        }
    </style>
    <script language="javascript" src="jquery-1.3.2.js">
    </script>
    <script language = "JavaScript" type="text/javascript">
        //<![CDATA[
        $(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");

        });
        //]]>
    </script>
</head>
<body>

<p>快購利眾網(wǎng)1</p>

<p id="myP">快購利眾網(wǎng)2</p>

<p class="myPCss">快購利眾網(wǎng)3</p>

<p>快購利眾網(wǎng)4</p>

</div>

</div>

<p>快購利眾網(wǎng)5</p>

<p>快購利眾網(wǎng)6</p>

</div>

<p>快購利眾網(wǎng)7</p>
</body>
</thml>

代碼解析:

$("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");

選擇文檔里全部的<p>元素對象,不論<p>在文檔中所處的層次結(jié)構(gòu)如何, 最后選到了7個<p> 元素對象 "<p>快購利眾網(wǎng)1</p><p id="myP">快購利眾網(wǎng)2</p><p class="myPCss">快購利眾網(wǎng)3</p><p>快購利眾網(wǎng)4</p><p>快購利眾網(wǎng)5</p><p>快購利眾網(wǎng)6</p><p>快購利眾網(wǎng)7</p>"

addClass("css name")函數(shù)很簡單,就是為前面$()選擇到的元素對象增加CSS樣式.

removeClass("css name")函數(shù)也很簡單,就是去掉前面$()選擇到的元素對象的指定的樣式.

在這兒,這兩段代碼功能抵消,相當(dāng)什么也沒做.

$("#myP").addClass("p2");

選擇文檔里id為"myP"的指定元素對象,并為該元素對象增加名稱為"p2"的樣式. 最后選到了1個<p>元素對象 "<p id="myP">快購利眾網(wǎng)2</p>"

知識點: 如果要選擇指定ID號的元素對象,記得前面用"#"

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

選擇文檔里樣式名為"myPCss"的指定元素對象,并為該元素對象增加名稱為"p3"的樣式. 最后選到了1個<p>元素對象 "<p class="myPCss">快購利眾網(wǎng)3</p>"

知識點: 如果要選擇指定樣式的元素對象,記得前面用"."

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

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

上面的內(nèi)容是不是挺簡單的!! 嗯,革命才剛剛開始,下面的內(nèi)容稍稍復(fù)雜些因為牽涉到層次的概念,但大家別急,只要記住"選擇器"選擇出的元素對象可能是多個這點就不用怕了.

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

功能:在給定的祖先元素下匹配所有的后代元素

分成兩部分來分析

一,$("#myDiv") 根據(jù)上面所學(xué)的知識,選擇出1個<div>元素對象, "<div id="myDiv">"

二,$("#myDiv p") 在上面2個<div>元素對象中的任意層中選擇<p>元素對象. 幾個? 3個 "<p>快購利眾網(wǎng)4</p><p>快購利眾網(wǎng)5</p><p>快購利眾網(wǎng)6</p>"

其中"<p>快購利眾網(wǎng)4</p><p>快購利眾網(wǎng)5</p><p>快購利眾網(wǎng)6< /p>"都是在"<div id="myDiv"></div>"內(nèi)部定義的

雖然"<p>快購利眾網(wǎng)4</p>"是在id為"myDivInner的"div"內(nèi)部定義的.但因為id 為"myDivInner的"div" 也是id為"myDiv的下層,所以"<p>快購利眾網(wǎng)5</p>"也屬于id為"myDiv的下層. 有些繞口,記住一點就行. A,B操作器中如果是用空格連接,那么表示B屬于A的下層(可以為任意層)之中

最后為這3個<p>元素對象增加名為"p3"的樣式

知識點: 對于這類有層次的選擇表達式$("A B"),A選擇器和B選擇器可以是"標(biāo)簽名","#id",".css"三種中的任意一種,中間用空格分開,空格表示任意次.

右邊的B選擇器是在左邊A選擇器選擇的結(jié)果上進行內(nèi)部任意層中選擇, 記住是在左邊選擇出的元素對象(可能是多個)的內(nèi)部進行再次選擇(可能是多個). <- 這個知識點一定要理解透!

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

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

>代表#myDiv下的子元素對象(多個并只是下一層),最后選擇出2個<p>元素對象,""<p>快購利眾網(wǎng)5</p><p>快購利眾網(wǎng)6</p>",并為該<p>對象增加名為"p3"的樣式

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

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

+代表緊接著div同層的第一個子元素對象.

id為"myDivInner"同層后面第一個因為是"<div>",所以后沒有緊接著的"<p>"

id為"myDiv"同層后面正好是一個"<p>"

最后選擇出1個<p>元素對象,""<p>快購利眾網(wǎng)7</p>",并為該<p>對象增加名為"p3"的樣式