第1章 jQuery開發(fā)入門

本章內(nèi)容

? jQuery概述

? jQuery的簡單應(yīng)用

? 本章小結(jié)

隨著互聯(lián)網(wǎng)的迅速發(fā)展，Web頁面得到了廣泛應(yīng)用，但人們的需求已不僅限于頁面的功能，而更多地注重頁面展示形式和用戶體驗(yàn)度。JavaScript語言可以很好地滿足程序開發(fā)者的需求，幫助程序開發(fā)者開發(fā)出用戶體驗(yàn)度很高的頁面，因而越來越受到廣大程序員的關(guān)注。jQuery是JavaScript庫中的優(yōu)秀一員，代碼高效、兼容性強(qiáng)等特點(diǎn)使得它近年來風(fēng)靡全球，越來越多的開發(fā)者癡迷其中。

1.1 jQuery概述

1.1.1 認(rèn)識(shí)jQuery

jQuery是由美國人John Resig于2006年創(chuàng)建的一個(gè)開源項(xiàng)目，隨著被人們熟知，越來越多的程序高手加入其中，完善并壯大其項(xiàng)目內(nèi)容，如今已發(fā)展成為集JavaScript、CSS、DOM、Ajax于一體的強(qiáng)大框架體系。它的主旨是：以更少的代碼，實(shí)現(xiàn)更多的功能（Write less，do more）。

1.1.2 jQuery基本功能

1.訪問和操作DOM元素

使用jQuery庫，可以很方便地獲取和修改頁面中的某元素，無論是刪除、移動(dòng)還是復(fù)制某元素，jQuery都提供了一整套方便、快捷的方法，既減少了代碼的編寫，又大大提高了用戶對(duì)頁面的體驗(yàn)度；其具體示例，我們將在后面的章節(jié)中陸續(xù)展示。

2. 控制頁面樣式

通過引入jQuery，程序開發(fā)人員可以很便捷地控制頁面的CSS文件。瀏覽器對(duì)頁面文件的兼容性，一直以來都是頁面開發(fā)者最為頭痛的事，而使用jQuery操作頁面的樣式卻可以很好地兼容各種瀏覽器。

3. 對(duì)頁面事件的處理

引入jQuery庫后，可以使頁面的表現(xiàn)層與功能開發(fā)分離，開發(fā)者更多地專注于程序的邏輯與功效；頁面設(shè)計(jì)者側(cè)重于頁面的優(yōu)化與用戶體驗(yàn)。然后，通過事件綁定機(jī)制，可以很輕松地實(shí)現(xiàn)二者的結(jié)合。

4.大量插件在頁面中的運(yùn)用

在引入jQuery庫后，還可以使用大量的插件來完善頁面的功能和效果，如表單插件、UI插件，這些插件的使用極大地豐富了頁的展示效果，使原來使用JavaScript代碼遙不可及的功能通過插件的引入而輕松地實(shí)現(xiàn)。

5.與Ajax技術(shù)的完美結(jié)合

Ajax的異步讀取服務(wù)器數(shù)據(jù)的方法，極大地方便了程序的開發(fā)，加深了用戶的頁面體驗(yàn)度；而引入jQuery庫后，不僅完善了原有的功能，而且減少了代碼的書寫，通過其內(nèi)部對(duì)象或函數(shù)，加上幾行代碼就可以實(shí)現(xiàn)復(fù)雜的功能。

綜上所述，jQuery在頁面中的功能還有很多，我們將在接下來的章節(jié)中一一介紹。

1.1.3 搭建jQuery開發(fā)環(huán)境

1.下載jQuery文件庫

在jQuery的官方網(wǎng)站（http://jquery.com）中，下載最新版本的jQuery文件庫，其網(wǎng)站頁面如圖1-1所示。

在網(wǎng)站中，選擇大小為24KB的壓縮包，單擊Download（下載）按鈕，便可以將最新版的jQuery框架下載到本地。目前（截止到2010年7月）最新版本為V1.4.2。

2.引入jQuery文件庫

下載完jQuery框架文件后，并不需要任何安裝，僅需要使用＜script＞文件導(dǎo)入標(biāo)記，將jQuery框架文件jquery-1.4.2.min.js導(dǎo)入頁面中即可。假設(shè)該文件下載后保存在項(xiàng)目文件夾Jscript中，那么，在頁面的＜head＞＜/head＞中加入如下代碼：

        ＜script language="javascript" type="text/javascript"
        src="Jscript/jquery-1.4.2.min.js"＞＜/script＞

在頁面的頭部分，加入上述代碼后，便完成了jQuery框架的引入，就可以開始我們的jQuery之旅了。

1.1.4 編寫第一個(gè)簡單的jQuery應(yīng)用

首先，我們來編寫一個(gè)簡單的程序，參見下面的示例。

示例1-1 編寫第一個(gè)簡單的jQuery程序

（1）功能描述

在頁面加載時(shí)，彈出一個(gè)模式對(duì)話框，顯示“您好，歡迎來到j(luò)Query世界”字樣，單擊“確定”按鈕后關(guān)閉該窗口。

（2）實(shí)現(xiàn)代碼

新建一個(gè)HTML文件1-1.html，加入如代碼清單1-1所示的代碼。

代碼清單1-1第一個(gè)簡單的jQuery應(yīng)用

        ＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
        Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
        ＜html xmlns="http://www.w3.org/1999/xhtml"＞
        ＜head＞
            ＜title＞第一個(gè)簡單的jQuery程序＜/title＞
            ＜script language="javascript" type="text/javascript"
                    src="Jscript/jquery-1.4.2.min.js"＞＜/script＞
            ＜script type="text/javascript"＞
                    $(document).ready(function(){
                      alert("您好，歡迎來到j(luò)Query世界")；
                    })
            ＜/script＞
        ＜/head＞
        ＜body＞
        ＜/body＞
        ＜/html＞

在上述文件的代碼中，有一段如下的代碼：

        $(document).ready(function(){
                      //程序段
        })
        該段代碼類似于傳統(tǒng)的JavaScript代碼：
        window.onload=function(){
                      //程序段
        }

雖然上述兩段代碼在功能上可以互換，但它們之間又有許多區(qū)別：

? 執(zhí)行時(shí)間不同：$(document).ready在頁面框架下載完畢后就執(zhí)行；而window.onload必須在頁面全部加載完畢（包含圖片下載）后才能執(zhí)行。很明顯，前者的執(zhí)行效率高于后者。

? 執(zhí)行數(shù)量不同：$(document).ready可以重復(fù)寫多個(gè)，并且每次執(zhí)行結(jié)果不同；而window. onload盡管可以執(zhí)行多個(gè)，但僅輸出最后一個(gè)執(zhí)行結(jié)果，無法完成多個(gè)結(jié)果的輸出。

? $(document).ready(function(){})可以簡寫成$(function(){})，因此與下面的代碼是等價(jià)的。

        $(document).ready(function(){
                      //程序段
        })

等價(jià)于

        $(function(){
                      //程序段
        })

（3）頁面效果

HTML文件1-1.html最后實(shí)現(xiàn)的頁面效果如圖1-2所示。

1.1.5 jQuery程序的代碼風(fēng)格

1.“$”美元符的使用

在jQuery程序中，使用最多的莫過于“$”美元符了，無論是頁面元素的選擇、功能函數(shù)的前綴，都必須使用該符號(hào)，可以說它是jQuery程序的標(biāo)志。

2. 事件操作鏈接式書寫

在編寫頁面某元素事件時(shí)，jQuery程序可以使用鏈接式的方式編寫該元素的所有事件。為了更好地說明該書寫方法的使用，我們通過一個(gè)示例加以闡述。

示例1-2 jQuery事件的鏈?zhǔn)綄懛?/h4>

（1）功能描述

在頁面中，有一個(gè)＜div＞標(biāo)記，在該標(biāo)記內(nèi)，包含二個(gè)＜div＞標(biāo)記，一個(gè)為主題，另一個(gè)為內(nèi)容，頁面首次加載時(shí)，被包含的內(nèi)容＜div＞標(biāo)記是不可見的，當(dāng)用戶單擊主題＜div＞標(biāo)記時(shí)，改變自身的背景色，并將內(nèi)容＜div＞標(biāo)記顯示出來。

（2）實(shí)現(xiàn)代碼

新建一個(gè)HTML文件1-2.html，加入如代碼清單1-2所示的代碼。

代碼清單1-2 jQuery事件的鏈?zhǔn)綄懛?/p>

        ＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
        Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
        ＜html xmlns="http://www.w3.org/1999/xhtml"＞
        ＜head＞
            ＜title＞jQuery事件的鏈?zhǔn)綄懛ǎ?title＞
            ＜script language="javascript" type="text/javascript"
                    src="Jscript/jquery-1.4.2.min.js"＞＜/script＞
            ＜style type="text/css"＞
                    .divFrame{width:260px；border:solid 1px #666；
                            font-size:10pt}
                    .divTitle{background-color:#eee；padding:5px}
                    .divContent{padding:5px；display:none}
                    .divCurrColor{ background-color:Red}
            ＜/style＞
            ＜script type="text/javascript"＞
                $(function(){
                  $(".divTitle").click(function(){
                    $(this).addClass("divCurrColor")
                          .next(".divContent").css("display","block");
                  });
                });
            ＜/script＞
        ＜/head＞
        ＜body＞
            ＜div class="divFrame"＞
                  ＜div class="divTitle"＞主題＜/div＞
                  ＜div class="divContent"＞
                    ＜a href="#"＞鏈接一＜/a＞＜br /＞
                    ＜a href="#"＞鏈接二＜/a＞＜br /＞
                    ＜a href="#"＞鏈接三＜/a＞
                  ＜/div＞
            ＜/div＞
        ＜/body＞
        ＜/html＞

在上述文件的代碼中，加粗的代碼是鏈?zhǔn)綄懛ā?/p>

代碼功能說明：當(dāng)用戶單擊Class名稱為"divTitle"的元素時(shí)，自身增加名稱為"divCurrColor"的樣式；同時(shí)，將接下來的Class名稱為"divContent"元素顯示出來。可以看出，兩個(gè)功能的實(shí)現(xiàn)通過"."符號(hào)鏈接在一起。

（3）頁面效果

執(zhí)行HTML文件1-2.html，實(shí)現(xiàn)的頁面效果如圖1-3所示。

圖1-3 DIV元素單擊前后的頁面對(duì)比效果

1.2 jQuery的簡單應(yīng)用

1.2.1 jQuery訪問DOM對(duì)象

1. 什么是DOM對(duì)象

DOM（Document Object Model，文本對(duì)象模型）的每一個(gè)頁面都是一個(gè)DOM對(duì)象，通過傳統(tǒng)的JavaScript方法訪問頁面中的元素，就是訪問DOM對(duì)象。

例如：在頁面中2個(gè)＜div＞標(biāo)記元素，其代碼如下：

        ＜div id="divTmp"＞測試文本＜/div＞
        ＜div id="divOut"＞＜/div＞

通過下面的JavaScript代碼可以訪問DOM對(duì)象和獲取或設(shè)置其內(nèi)容值：

        var tDiv=document.getElementById("divTmp")；//獲取DOM對(duì)象
        var oDiv=document.getElementById("divOut")；//獲取DOM對(duì)象
        var cDiv=tDiv.innerHTML；//獲取DOM對(duì)象中的內(nèi)容
        oDiv.innerHTML=cDiv；//設(shè)置DOM對(duì)象中的內(nèi)容

如果執(zhí)行上面的JavaScript代碼，將在ID為"divOut"的標(biāo)記中顯示ID為"divTmp"的標(biāo)記內(nèi)容。

2. 什么是jQuery對(duì)象

在jQuery庫中，通過本身自帶的方法獲取頁面元素的對(duì)象，我們稱之為jQuery對(duì)象；為了同樣實(shí)現(xiàn)在ID為"divOut"的標(biāo)記中顯示ID為"divTmp"的標(biāo)記內(nèi)容，采用jQuery訪問頁面元素的方法，其實(shí)現(xiàn)的代碼如下：

        var tDiv=$("#divTmp")；//獲取jQuery對(duì)象
        var oDiv=$("#divOut")；//獲取jQuery對(duì)象
        var cDiv=tDiv.html()；//獲取jQuery對(duì)象中的內(nèi)容
        oDiv.html(cDiv)；//設(shè)置jQuery對(duì)象中的內(nèi)容

通過代碼的對(duì)比，可以看出jQuery對(duì)象訪問方法比DOM對(duì)象訪問方法更簡單、高效，它們都實(shí)現(xiàn)同樣的功能。

1.2.2 jQuery控制DOM對(duì)象

在介紹使用jQuery控制DOM對(duì)象前，先通過一個(gè)簡單的示例，說明如何用傳統(tǒng)的JavaScript方法訪問DOM對(duì)象。

示例1-3 控制DOM對(duì)象

（1）功能描述

在頁面中，用戶輸入姓名、性別和婚姻狀況，單擊“提交”按鈕后，將獲取到的數(shù)據(jù)信息顯示在頁面＜div＞標(biāo)記中。

（2）實(shí)現(xiàn)代碼

新建一個(gè)HTML文件1-3.html,加入如代碼清單1-3所示的代碼。

代碼清單1-3使用傳統(tǒng)的JavaScript方法訪問DOM對(duì)象

        ＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
        Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
        ＜html xmlns="http://www.w3.org/1999/xhtml"＞
        ＜head＞
            ＜title＞控制DOM對(duì)象＜/title＞
            ＜style type="text/css"＞
                    .divFrame{width:260px；border:solid 1px #666；
                            font-size:10pt}
                    .divTitle{background-color:#eee；padding:5px}
                    .divContent{padding:8px；font-size:9pt}
                    .divTip{width:244px；border:solid 1px #666；
                          padding:8px；font-size:9pt；
                          margin-top:5px；display:none}
                    .txtCss{border:solid 1px #ccc}
                    .divBtn{padding-top:5px}
                    .divBtn .btnCss{border:solid 1px #535353；width:60px}
            ＜/style＞
            ＜script type="text/javascript"＞
                function btnClick(){
                //獲取文本框的值
                var oTxtValue=document.getElementById("Text1").value；
                //獲取單選框按鈕值
                var oRdoValue=(Radio1.checked)?"男":"女"；
                //獲取復(fù)選框按鈕值
                var oChkValue=(Checkbox1.checked)?"已婚":"未婚"；
                //顯示提示文本元素
                document.getElementById("divTip").style.display="block"；
                //設(shè)置文本元素的內(nèi)容
                document.getElementById("divTip").innerHTML=oTxtValue+"＜br＞"
                +oRdoValue+"＜br＞"+oChkValue；
                }
            ＜/script＞
        ＜/head＞
        ＜body＞
        ＜div class="divFrame"＞
            ＜div class="divTitle"＞請輸入如下信息＜/div＞
            ＜div class="divContent"＞
                姓名：＜input id="Text1" type="text" class="txtCss"/＞＜br /＞
                性別：＜input id="Radio1" name="rdoSex" type="radio"
                            value="男" /＞男
                    ＜input id="Radio2" name="rdoSex" type="radio"
                            value="女" /＞女＜br /＞
                婚否：＜input id="Checkbox1" type="checkbox" /＞
                ＜div class="divBtn"＞＜input id="Button1" type="button"
                            value="提交" class="btnCss"
                            onclick="btnClick()；" /＞
                ＜/div＞
            ＜/div＞
        ＜/div＞
        ＜div id="divTip" class="divTip"＞＜/div＞
        ＜/body＞
        ＜/html＞

在上面的代碼中，使用傳統(tǒng)的JavaScript方法獲取用戶輸入的信息，并保存到變量中，最后通過document.getElementById("divTip").innerHTML方法顯示所有的數(shù)據(jù)信息。下面將示例1-3中的JavaScript代碼進(jìn)行修改，引入jQuery庫，通過jQuery中的方法獲取元素的值，并將獲取的數(shù)據(jù)顯示出來。修改后的JavaScript代碼如下所示：

        ...
        ＜script language="javascript" type="text/javascript"
                    src="Jscript/jquery-1.4.2.min.js"＞＜/script＞
        ＜script type="text/javascript"＞
        $(function(){
            $("#btnSubmit").click(function(){
              //獲取文本框的值
              var oTxtValue=$("#Text1").val()；
              //獲取單選框按鈕值
              var oRdoValue=$("#Radio1").is (":checked")?"男":"女"；
              //獲取復(fù)選框按鈕值
              var oChkValue=$("#Checkbox1").is (":checked")?"已婚":"未婚"；
              //顯示提示文本元素和內(nèi)容
              $("#divTip").css("display"，"block").html(oTxtValue+"＜br＞"+oRdoValue+"＜br＞"+
              oChkValue)；
              })
        })
        ＜/script＞
        ...

在修改后的JavaScript代碼中，$("#Text1").val()在jQuery庫中表示獲取ID號(hào)為“Text1”的值；$("#Radio1").is (":checked")表示ID號(hào)為“Radio1”的單選按鈕是否被選中，如果選中，則返回“男”，否則，返回“女”。可以看出，通過jQuery庫中的方法訪問或控制頁面中的元素，比使用傳統(tǒng)的JavaScript代碼要簡潔得多，并且還兼容各種瀏覽器。

（3）頁面效果

最終實(shí)現(xiàn)的頁面效果如圖1-4所示。

1.2.3 jQuery控制頁面CSS

在jQuery框架中，通過自帶的JavaScript編程，提供全部的CSS3下的選擇器，開發(fā)者可以首先定義自己的樣式文件，然后通過jQuery中的addClass()方法將該樣式輕松地添加到頁面指定的某元素中，而不用考慮瀏覽器的兼容性。

下面通過一個(gè)簡單的示例來介紹如何使用jQuery中的toggleClass(className)方法來實(shí)現(xiàn)頁面樣式的動(dòng)態(tài)切換功能。

示例1-4 jQuery控制CSS樣式

（1）功能描述

在頁面中，增加一個(gè)＜div＞元素標(biāo)記，當(dāng)用戶單擊該元素時(shí)，變換其文本內(nèi)容和背景色，再次單擊時(shí)，恢復(fù)其初始的內(nèi)容和背景色。

（2）實(shí)現(xiàn)代碼

新建一個(gè)HTML文件1-4.html，加入如代碼清單1-4所示的代碼。

代碼清單1-4 jQuery控制CSS樣式

        ＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
        Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
        ＜html xmlns="http://www.w3.org/1999/xhtml"＞
        ＜head＞
            ＜title＞jQuery控制CSS樣式＜/title＞
            ＜script language="javascript" type="text/javascript"
                      src="Jscript/jquery-1.4.2.min.js"＞＜/script＞
            ＜style type="text/css"＞
                    .divDefalut{width:260px；font-size:10pt；padding:5px}
                    .divClick{width:260px；border:solid 1px #666；
                    font-size:10pt；background-color:#eee；padding:5px}
            ＜/style＞
            ＜script type="text/javascript"＞
                $(function(){
                      $(".divDefalut").click(function(){
                      $(this).toggleClass("divClick").html("點(diǎn)擊后的樣式")；
                      })；
                })；
            ＜/script＞
        ＜/head＞
        ＜body＞
            ＜div class="divDefalut"＞點(diǎn)擊前的樣式＜/div＞
        ＜/body＞
        ＜/html＞

（3）頁面效果

HTML文件1-4.html執(zhí)行后，最終實(shí)現(xiàn)的頁面效果如圖1-5所示。

在jQuery庫中，通過簡單的幾行代碼，就可以實(shí)現(xiàn)傳統(tǒng)JavaScript大量代碼完成的功能，節(jié)省開發(fā)者的時(shí)間，提高工作效率。

1.3 本章小結(jié)

本章通過循續(xù)漸進(jìn)的方式，先從jQuery的基礎(chǔ)概念入手，介紹jQuery庫的下載，引入簡單應(yīng)用方法；后部分側(cè)重于jQuery控制DOM對(duì)象和頁面CSS樣式的介紹，通過一些簡單的小示例，使讀者對(duì)jQuery在頁面中的功能應(yīng)用有一個(gè)大致的了解，為下一章節(jié)進(jìn)一步學(xué)習(xí)jQuery庫的詳細(xì)對(duì)象和方法奠定基礎(chǔ)。