第1章 jQuery開發入門

本章內容

? jQuery概述

? jQuery的簡單應用

? 本章小結

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

1.1 jQuery概述

1.1.1 認識jQuery

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

1.1.2 jQuery基本功能

1.訪問和操作DOM元素

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

2. 控制頁面樣式

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

3. 對頁面事件的處理

引入jQuery庫后，可以使頁面的表現層與功能開發分離，開發者更多地專注于程序的邏輯與功效；頁面設計者側重于頁面的優化與用戶體驗。然后，通過事件綁定機制，可以很輕松地實現二者的結合。

4.大量插件在頁面中的運用

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

5.與Ajax技術的完美結合

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

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

1.1.3 搭建jQuery開發環境

1.下載jQuery文件庫

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

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

2.引入jQuery文件庫

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

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

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

1.1.4 編寫第一個簡單的jQuery應用

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

示例1-1 編寫第一個簡單的jQuery程序

（1）功能描述

在頁面加載時，彈出一個模式對話框，顯示“您好，歡迎來到jQuery世界”字樣，單擊“確定”按鈕后關閉該窗口。

（2）實現代碼

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

代碼清單1-1第一個簡單的jQuery應用

        ＜!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程序＜/title＞
            ＜script language="javascript" type="text/javascript"
                    src="Jscript/jquery-1.4.2.min.js"＞＜/script＞
            ＜script type="text/javascript"＞
                    $(document).ready(function(){
                      alert("您好，歡迎來到jQuery世界")；
                    })
            ＜/script＞
        ＜/head＞
        ＜body＞
        ＜/body＞
        ＜/html＞

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

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

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

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

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

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

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

等價于

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

（3）頁面效果

HTML文件1-1.html最后實現的頁面效果如圖1-2所示。

1.1.5 jQuery程序的代碼風格

1.“$”美元符的使用

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

2. 事件操作鏈接式書寫

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

示例1-2 jQuery事件的鏈式寫法

（1）功能描述

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

（2）實現代碼

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

代碼清單1-2 jQuery事件的鏈式寫法

        ＜!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事件的鏈式寫法＜/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＞

在上述文件的代碼中，加粗的代碼是鏈式寫法。

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

（3）頁面效果

執行HTML文件1-2.html，實現的頁面效果如圖1-3所示。

1.2 jQuery的簡單應用

1.2.1 jQuery訪問DOM對象

1. 什么是DOM對象

DOM（Document Object Model，文本對象模型）的每一個頁面都是一個DOM對象，通過傳統的JavaScript方法訪問頁面中的元素，就是訪問DOM對象。

例如：在頁面中2個＜div＞標記元素，其代碼如下：

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

通過下面的JavaScript代碼可以訪問DOM對象和獲取或設置其內容值：

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

如果執行上面的JavaScript代碼，將在ID為"divOut"的標記中顯示ID為"divTmp"的標記內容。

2. 什么是jQuery對象

在jQuery庫中，通過本身自帶的方法獲取頁面元素的對象，我們稱之為jQuery對象；為了同樣實現在ID為"divOut"的標記中顯示ID為"divTmp"的標記內容，采用jQuery訪問頁面元素的方法，其實現的代碼如下：

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

通過代碼的對比，可以看出jQuery對象訪問方法比DOM對象訪問方法更簡單、高效，它們都實現同樣的功能。

1.2.2 jQuery控制DOM對象

在介紹使用jQuery控制DOM對象前，先通過一個簡單的示例，說明如何用傳統的JavaScript方法訪問DOM對象。

示例1-3 控制DOM對象

（1）功能描述

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

（2）實現代碼

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

代碼清單1-3使用傳統的JavaScript方法訪問DOM對象

        ＜!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對象＜/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)?"男":"女"；
                //獲取復選框按鈕值
                var oChkValue=(Checkbox1.checked)?"已婚":"未婚"；
                //顯示提示文本元素
                document.getElementById("divTip").style.display="block"；
                //設置文本元素的內容
                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＞

在上面的代碼中，使用傳統的JavaScript方法獲取用戶輸入的信息，并保存到變量中，最后通過document.getElementById("divTip").innerHTML方法顯示所有的數據信息。下面將示例1-3中的JavaScript代碼進行修改，引入jQuery庫，通過jQuery中的方法獲取元素的值，并將獲取的數據顯示出來。修改后的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")?"男":"女"；
              //獲取復選框按鈕值
              var oChkValue=$("#Checkbox1").is (":checked")?"已婚":"未婚"；
              //顯示提示文本元素和內容
              $("#divTip").css("display"，"block").html(oTxtValue+"＜br＞"+oRdoValue+"＜br＞"+
              oChkValue)；
              })
        })
        ＜/script＞
        ...

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

（3）頁面效果

最終實現的頁面效果如圖1-4所示。

1.2.3 jQuery控制頁面CSS

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

下面通過一個簡單的示例來介紹如何使用jQuery中的toggleClass(className)方法來實現頁面樣式的動態切換功能。

示例1-4 jQuery控制CSS樣式

（1）功能描述

在頁面中，增加一個＜div＞元素標記，當用戶單擊該元素時，變換其文本內容和背景色，再次單擊時，恢復其初始的內容和背景色。

（2）實現代碼

新建一個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("點擊后的樣式")；
                      })；
                })；
            ＜/script＞
        ＜/head＞
        ＜body＞
            ＜div class="divDefalut"＞點擊前的樣式＜/div＞
        ＜/body＞
        ＜/html＞

（3）頁面效果

HTML文件1-4.html執行后，最終實現的頁面效果如圖1-5所示。

在jQuery庫中，通過簡單的幾行代碼，就可以實現傳統JavaScript大量代碼完成的功能，節省開發者的時間，提高工作效率。

1.3 本章小結

本章通過循續漸進的方式，先從jQuery的基礎概念入手，介紹jQuery庫的下載，引入簡單應用方法；后部分側重于jQuery控制DOM對象和頁面CSS樣式的介紹，通過一些簡單的小示例，使讀者對jQuery在頁面中的功能應用有一個大致的了解，為下一章節進一步學習jQuery庫的詳細對象和方法奠定基礎。