jQuery 是一個JavaScript 庫,它有助於簡化 JavaScript™ 以及 Asynchronous JavaScript + XML (Ajax) 編程。與類似的 JavaScript 庫不同,jQuery 具有獨特的基本原理,可以簡潔地表示常見的複雜代碼。學習 jQuery 基本原理,探索其特性和功能,執行一些常見的 Ajax 任務並掌握如何使用插件擴展 jQuery。
|
jQuery 由 John Resig 創建於 2006 年初,對於任何使用 JavaScript 代碼的程序員來說,它是一個非常有用的 JavaScript 庫。無論您是剛剛接觸 JavaScript 語言,並且希望獲得一個能解決文檔對象模型(Document Object Model,DOM)腳本和 Ajax 開發中一些複雜問題的庫,還是作爲一個厭倦了 DOM 腳本和 Ajax 開發中無聊的重複工作的資深 JavaScript 專家,jQuery 都會是您的首選。
jQuery 能幫助您保證代碼簡潔易讀。您再也不必編寫大堆重複的循環代碼和 DOM 腳本庫調用了。使用 jQuery,您可以把握問題的要點,並使用儘可能最少的代碼實現您想要的功能。
毫無疑問,jQuery 的原理是獨一無二的:它的目的就是保證代碼簡潔並可重用。當您理解並體會這一原理後,便可以開始學習本教程了,看看 jQuery 對我們的編程方式有多少改進吧。
下面是一個簡單示例,它說明了 jQuery 對代碼的影響。要執行一些真正簡單和常見的任務,比方說爲頁面的某一區域中的每個鏈接附加一個單擊(click)事件,您可以使用純 JavaScript 代碼和 DOM 腳本來實現,如清單 1所示。
var external_links = document.getElementById('external_links'); var links = external_links.getElementsByTagName('a'); for (var i=0;i < links.length;i++) { var link = links.item(i); link.onclick = function() { return confirm('You are going to visit: ' + this.href); }; } |
清單 2顯示了使用 jQuery 實現的相同的功能。
$('#external_links a').click(function() { return confirm('You are going to visit: ' + this.href); }); |
是不是很神奇? 使用 jQuery,您可以把握問題的要點,只讓代碼實現您想要的功能,而省去了一些繁瑣的過程。無需對元素進行循環,click()
函數將完成這些操作。同樣也不需要進行多個 DOM 腳本調用。您只需要使用一個簡短的字符串對所需的元素進行定義即可。
理解這一代碼的工作原理可能會有一點複雜。首先,我們使用了$()
函數 —— jQuery 中功能最強大的函數。通常,我們都是使用這個函數從文檔中選擇元素。在本例中,一個包含有一些層疊樣式表(Cascading Style Sheet,CSS)語法的字符串被傳遞給函數,然後 jQuery 儘可能高效地把這些元素找出來。
如果您具備 CSS 選擇器的基本知識,那麼應該很熟悉這些語法。在清單 2中,#external_links
用於檢索id
爲external_links
的元素。a
後的空格表示 jQuery 需要檢索external_links
元素中的所有<a>
元素。用英語說起來非常繞口,甚至在 DOM 腳本中也是這樣,但是在 CSS 中這再簡單不過了
$()
函數返回一個含有所有與 CSS 選擇器匹配的元素的 jQuery 對象。jQuery 對象類似於數組,但是它附帶有大量特殊的 jQuery 函數。比方說,您可以通過調用click
函數把 click 處理函數指定給 jQuery 對象中的所有元素。
還可以向$()
函數傳遞一個元素或者一個元素數組,該函數將把這些元素封裝在一個 jQuery 對象中。您可能會想要使用這個功能將 jQuery 函數用於一些對象,比方說window
對象。例如,我們通常會像下面這樣把函數分配給加載事件:
window.onload = function() { // do this stuff when the page is done loading }; |
使用 jQuery 編寫的功能相同的代碼:
$(window).load(function() { // run this when the whole page has been downloaded }); |
您可能有所體會,等待窗口加載的過程是非常緩慢而且令人痛苦的,這是因爲必須等整個頁面加載完所有的內容,包括頁面上所有的的圖片。有的時候,您希望首先完成圖片加載,但是在大多數情況下,您只需加載超文本標誌語言(Hypertext Markup Language,HTML)就可以了。通過在文檔中創建特殊的ready
事件,jQuery 解決了這個問題,方法如下:
$(document).ready(function() { // do this stuff when the HTML is all ready }); |
這個代碼圍繞document
元素創建了一個 jQuery 對象,然後建立一個函數,用於在 HTML DOM 文檔就緒的時候調用實例。可以根據需要任意地調用這個函數。並且能夠以真正的 jQuery 格式,使用快捷方式調用這個函數。這很簡單,只需向$()
函數傳遞一個函數就可以了:
$(function() { // run this when the HTML is done downloading }); 到目前以止,我已經向大家介紹了 清單 3 顯示的示例在頁面中添加了一個段落。 清單 3. 創建和附加一個簡單的段落
在前一個例子中您可能已經注意到,jQuery 中的另一個功能強大的特性就是方法鏈接(method chaining)。每次對 jQuery 對象調用方法時,方法都會返回相同的 jQuery 對象。這意味着如果您需要對 jQuery 對象調用多個方法,那麼您不必重新鍵入選擇器就可以實現這一目的:使 Ajax 變得簡單
使用 jQuery 將使 Ajax 變得及其簡單。jQuery 提供有一些函數,可以使簡單的工作變得更加簡單,複雜的工作變得不再複雜。 Ajax 最常見的用法就是把一塊 HTML 代碼加載到頁面的某個區域中去。爲此,只需簡單地選擇所需的元素,然後使用
通常,我們只需簡單地把一些參數傳遞給服務器中的某個頁面。正如您所預料的,使用 jQuery 實現這一操作非常地簡單。您可以使用 清單 4 顯示了一個發送數據和使用回調的簡單示例。 清單 4. 使用 Ajax 向頁面發送數據
如果您確實需要編寫一些複雜的 Ajax 腳本,那麼需要用到 還可以指定 此外,還有一些其它的參數可供使用,您可以使用它們設置 Ajax 請求的超時,也可以設置頁面 “最近一次修改” 的狀態。 清單 5 顯示了一個使用一些我所提到的參數檢索 XML 文檔的示例。 清單 5. $.ajax() 使 Ajax 由複雜變簡單
當 success 回調函數返回 XML 文檔後,您可以使用 jQuery 檢索這個 XML 文檔, 其方式與檢索 HTML 文檔是一樣的。這樣使得處理 XML 文檔變得相當地容易,並且把內容和數據集成到了您的 Web 站點裏面。 清單 6 顯示了 清單 6. 使用 jQuery 處理 XML 文檔
可以使用 jQuery 處理基本的動畫和顯示效果。 還可以指定動畫的速度,定爲毫秒或者預定義的速度:慢速,中速或快速。 下面是一個同時變化某個元素高度和寬度的示例。請注意,這些參數沒有開始值,只有最終值。 開始值取自元素的當前尺寸。同時我也附加了一個回調函數。
jQuery 的內置函數使更多常見的動畫更容易完成。 可以使用 還可以通過使用 下面的示例定義了一個下滑的導航菜單。
或許 jQuery 最擅長的就是簡化 DOM 腳本和事件處理。遍歷和處理 DOM 非常簡單,同時附加、移除和調用事件也十分容易,且不像手動操作那樣容易出錯。 從本質上說,jQuery 可以使 DOM 腳本中的常用操作變得更加容易。您可以創建元素並且使用 使用 即便是使用 通過遍歷 DOM,一些函數可以用於更改 jQuery 對象本身的內容。可以獲得元素所有的
如果結合使用 如果配合方法鏈接(method chaining)一起使用,這些函數可以使複雜的操作看上去非常簡單。清單 7 顯示了一個示例,其中包含有一個登錄表單並處理了一些與之有關的元素。 清單 7. 輕鬆地遍歷和處理 DOM
不管您是否相信,這個示例只是一行滿是空白的被鏈接的代碼。首先,選擇登錄表單。 然後,發現其中含有可選標籤,隱藏它們,並調用 然後,我創建了密碼字段,將其邊界變爲紅色,再次調用 最後,我在表單中添加了一個提交事件處理程序。 其中尤爲有趣的就是(除了其簡潔性以外),jQuery 完全優化了所有的查詢操作, 確保將所有內容很好地鏈接在一起後,不需要對一個元素執行兩次查詢。 處理常見事件就像調用函數(比方說 此外,還可以使用 可以使用 有關這些函數的使用方法的完整列表,請參閱 參考資料 中的 jQuery 應用程序編程接口(Application Program Interface,API)文檔。 我們經常會使用 ID 來選擇元素,比如 然而,jQuery 提供了更爲複雜和完整的選擇器語法,允許我們在單個選擇器中選擇幾乎所有的元素組合。 jQuery 的選擇器語法主要是基於 CSS3 和 XPath 的。對 CSS3 和 XPath 瞭解的越多, 使用 jQuery 時就越加得心應手。有關 jQuery 選擇器的完整列表,包括 CSS 和 XPath,請參閱 參考資料 中的鏈接。 CSS3 包含一些並不是所有瀏覽器都支持的語法,因此我們很少使用它。 然而,我們仍然可以在 jQuery 中使用 CSS3 選擇元素,因爲 jQuery 具備自己的自定義選擇器引擎。 比方說,要在表格中的每一個空列中都添加一個橫槓,可以使用:
如果需要找出所有不含特定類的元素呢? CSS3 同樣提供了一個語法可以完成這個目的, 使用
與在 CSS 中一樣,可以使用逗號將多個選擇器連接成一個。下面是一個同時隱藏頁面上所有類型列表的簡單示例:
XPath 是一種功能強大的語法,用於在文檔中搜尋元素。 它與 CSS 稍有區別,不過它能實現的功能略多於 CSS。 要在所有複選框的父元素中添加一個邊框,可以使用 XPath 的
jQuery 中也加入了一些 CSS 和 XPath 中沒有的選擇器。 比方說,要使一個表更具可讀性,通常可以在表格的奇數行或偶數行中附加一個不同的類名 —— 也可以稱作把表分段(striping)。 使用 jQuery 不費吹灰之力就可以做到這點,這需要歸功於 下面這個例子使用
我們可以看到強大的 jQuery 選擇器是如何簡化代碼的。 不論您想處理什麼樣的元素,不管這個元素是具體的還是模糊的,都有可能找到一種方法使用一個 jQuery選擇器對它們進行定義。 與大多數軟件不同,使用一個複雜的 API 爲 jQuery 編寫插件並不是非常困難。 事實上,jQuery 插件非常易於編寫,您甚至希望編寫一些插件來使代碼更加簡單。 下面是可以編寫的最基本的 jQuery 插件:
雖然非常簡單,但是還是需要對這個插件進行一些解釋。 首先,如果要爲每一個 jQuery 對象添加一個函數,必須把該函數指派給 第二,這個函數必須要返回一個 可以輕鬆地在這個示例之上構建。要編寫一個更換背景顏色的插件,以替代使用
清注意,可以只從 我建議在需要重複工作的時候使用 jQuery 插件。比方說,如果您需要使用 那麼可以使用一個插件來完成。 由於 jQuery 插件相當易於編寫,所以有上百種可供你選擇使用。 jQuery 提供的插件可用於製表、圓角、滑動顯示、工具提示、日期選擇器,以及我們可以想到的一切效果。 有關插件的完整列表,請參閱 參考資料。 最爲複雜、使用最爲廣泛的插件要屬界面(Interface),它是一種動畫插件,用於處理排序、拖放功能、複雜效果、以及其它有趣和複雜的用戶界面(User Interface,UI)。 界面對於 jQuery 來說就如 Scriptaculous 對於 Prototype 一樣。 表單插件也同樣流行且非常有用,通過它可以使用 Ajax 在後臺中輕鬆地提交表單。 這個插件用於處理一些常見的情況:您需要截獲某個表單的提交事件,找出所有不同的輸入字段,並使用這些字段構造一個 Ajax 調用。 我只是簡要地介紹了使用 jQuery 可能完成的任務。 jQuery 使用起來非常有趣,因此我們總是能學到看上去很簡單的新技巧和新特性。 從剛開始使用 jQuery 的那一刻起,jQuery 便可以完全簡化您的 JavaScript 和 Ajax 編程;每學會一點新知識, 您的代碼就會更簡單一點。 學習了 jQuery 之後,我在使用 JavaScript 語言進行編程的同時也獲得了許多的樂趣。 不用操心所有無聊的內容,我可以專注地編寫有趣的內容。使用 jQuery 後,我幾乎就告別了編寫 甚至在想到要使用其它 JavaScript 庫時,不禁會有所畏縮不前。jQuery 確確實實改變了我對 JavaScript 編程的看法。 |