快捷導(dǎo)航

JQuery 無廢話系列教程(一) jquery入門 [推薦]

更新時(shí)間：2009年06月23日 00:34:50 作者：

貝殼(就是本文作者了)也屬于剛剛會(huì)用點(diǎn)JQuery的那一類型, 在學(xué)習(xí)過程中也遇到挺多問題,特別是在開始入門的時(shí)候.一直準(zhǔn)備寫些有關(guān)JQuery的文章,但又恐自己文筆及表達(dá)能力有限而"誤人子弟",最終還是鼓起勇氣. 如在文章中有錯(cuò)誤或者不合適的理解望廣大朋友直接指出批評(píng).

本文的宗旨, 授人魚不如授人漁. 我只會(huì)講關(guān)鍵部分,不可能JQuery的每個(gè)函數(shù)我都講,因?yàn)橛泻芏嗪瘮?shù)貝殼自己在實(shí)際應(yīng)用中都從未使用過. 但當(dāng)我們已經(jīng)會(huì)漁了還用擔(dān)心魚嗎!?

BTW:貝殼假設(shè)你已經(jīng)掌了基本的JavaScript運(yùn)用能力及基礎(chǔ)的CSS知識(shí).

JQuery是什么

JQuery只是一個(gè)JS文件

人對(duì)新鮮事業(yè)總是報(bào)著好奇與排斥的情感,貝殼剛開始學(xué)的時(shí)候也一樣. 想掌握又怕自己學(xué)不會(huì). 其實(shí)JQuery很簡單.

JQuery其實(shí)就是一個(gè)工具包,很多常用的功能已經(jīng)被好心人封裝好,我們真要直接調(diào)用就可以了(有點(diǎn)類似SDK),具體內(nèi)部原理和實(shí)現(xiàn)我們現(xiàn)在不去討論. 記住JQuery很簡單,很方便.

目前jQuery最新Release版本為1.32,官方下載地址為:http://docs.jquery.com/Downloading_jQuery

本系列教程基于1.32版進(jìn)行講解.

JQuery有兩種版本:

一種為uncompressed版(未壓縮版)主要用在開發(fā)中.

另一種為Minified(迷您版)當(dāng)開發(fā)完畢了,就可以改用這個(gè)版本.

兩種版本的區(qū)別

文件大小不一樣, 最終用戶在瀏覽時(shí)可以減少下載JS時(shí)的等待時(shí)間.

Uncompressed版文件大小為118KB

Minified版文件大小為56KB

JQuery能帶給我們什么

一, 站在巨人的肩上

別人已經(jīng)發(fā)明了輪子,我們沒必要自己再去造一個(gè).

二, 強(qiáng)大的BOM,DOM,CSS,事件的操作能力

我最常用的是CSS及DOM的操作,真的太方便了.

三, 更加簡潔的代碼

自己的親身經(jīng)歷,比如表格(Table)中的TR奇偶為兩種顏色的代碼如果自己用JavaScript去編號(hào)得用幾十行代碼,JQuery只需要2行就可以了.

四, 與瀏覽器無關(guān)性

做過JavaScript開發(fā)的就知道JavaScript在不同的瀏覽器下行為表現(xiàn)有時(shí)不一樣,我們不得不為不同的瀏覽器編寫相應(yīng)的代碼. JQuery在這方法已經(jīng)內(nèi)部處理,我們只管去用就是了.

五, 不錯(cuò)的性能

我自己有自知之明, 至少我寫的JavaScript代碼的運(yùn)行效率不如JQuery的高.

如何使用JQuery

萬年開頭難,我在第一次使用JQuery時(shí)被嚇到過,不知道怎么使用,其實(shí)很簡單,下面我們用一個(gè)例子來說明. : )

建立一個(gè)html文件,比如index.html 并與JQuery庫文件jquery-1.3.2.js放到同目錄下(其實(shí)放那都可以)

首先我們解決JQuery的引用. 代碼如下:

<html>

<head>

<title>JQuery測試</title>

</head>

<body>

</body>

</thml>

紅色的那一行代碼就完成了JQuery的引用,簡單吧!

現(xiàn)在我們再擴(kuò)充一個(gè)功能,使 index.html顯示一個(gè)表格,并且表格內(nèi)各行的顏色奇偶不同.也就是奇數(shù)行是一種顏色,偶數(shù)行又是另一種顏色.

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

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

        /*table中偶數(shù)行*/

        .tabEven {
            background: #ff0000;
        }

        /*table中奇數(shù)行*/

        .tabOdd {
            background: #00ff00;
        }
    </style>
    <script language="javascript" src="jquery-1.3.2.js">
    </script>
    <script language = "JavaScript" type="text/javascript">
        //<![CDATA[
        $(document).ready(function(){
            $("#tabTest tr:even").addClass("tabEven");
            $("#tabTest tr:odd").addClass("tabOdd");
        });
        //]]>
    </script>
</head>
<body>
    <table id="tabTest">
        <tbody>
            <tr>
                <td>快購利眾網(wǎng)_1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>快購利眾網(wǎng)_2</td>
                <td>1</td>
            </tr>
            <tr>
                <td>快購利眾網(wǎng)_3</td>
                <td>1</td>
            </tr>
            <tr>
                <td>快購利眾網(wǎng)_4</td>
                <td>1</td>
            </tr>
            <tr>
                <td>快購利眾網(wǎng)_5</td>
                <td>1</td>
            </tr>
        </tbody>
    </table>
</body>
</thml>

效果如下:

效果圖

代碼解析:

     $(document).ready(function(){
            $("#tabTest tr:even").addClass("tabEven");
            $("#tabTest tr:odd").addClass("tabOdd");
        });

$(document).ready 的作用很簡單,就是等待網(wǎng)頁全部內(nèi)部載入后再執(zhí)行JavaScript代碼(別忘了JQuery也是JavaScript代碼喲), 這個(gè)函數(shù)幾乎在所有使用JQuery的代碼中都用到. 因?yàn)槿绻覀兊腏avascript代碼中如果有DOM操作,在網(wǎng)頁還沒完全讀取完時(shí)整個(gè)DOM框架還沒有真正建立起來,在這之前的DOM操作都是無效的.

$("#tabTest tr:even").addClass("tabEven"); 為id為tabTest的表格的偶數(shù)行增加名為tabEven的CSS樣式
$("#tabTest tr:odd").addClass("tabOdd"); 為id為tabTest的表格的奇數(shù)行增加名為tabEven的CSS樣式

最后, 初學(xué)者千萬不要為陌生的代碼而感到不知所措,記住JQuery很簡單.

作者信息:萬思杰