使用jQuery簡化Ajax開發(fā)_第1頁
使用jQuery簡化Ajax開發(fā)_第2頁
使用jQuery簡化Ajax開發(fā)_第3頁
使用jQuery簡化Ajax開發(fā)_第4頁
使用jQuery簡化Ajax開發(fā)_第5頁
已閱讀5頁,還剩1頁未讀 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)

文檔簡介

1、使用 jQuery 簡化 Ajax 開發(fā)(轉(zhuǎn)載) jQuery 是什么? jQuery 由 John Resig 創(chuàng)建于 2006 年初,對于任何使用 JavaScript 代碼的程序員來說,它是一個非常有用的 JavaScript 庫。無論您是剛剛接觸 JavaScript 語言,并且希望獲得一個能解決文檔對象模型(Document Object Model,DOM)腳本和 Ajax 開發(fā)中一些復(fù)雜問題的庫,還是作為一個厭倦了 DOM 腳本和 Ajax 開發(fā)中無聊的重復(fù)工作的資深 JavaScript 專家,jQuery 都會是您的首選。jQuery 能幫助您保證代碼簡潔易讀。您再也不必編寫

2、大堆重復(fù)的循環(huán)代碼和 DOM 腳本庫調(diào)用了。使用 jQuery,您可以把握問題的要點,并使用盡可能最少的代碼實現(xiàn)您想要的功能。毫無疑問,jQuery 的原理是獨一無二的:它的目的就是保證代碼簡潔并可重用。當您理解并體會這一原理后,便可以開始學(xué)習(xí)本教程了,看看 jQuery 對我們的編程方式有多少改進吧。一些簡單的代碼簡化下面是一個簡單示例,它說明了 jQuery 對代碼的影響。要執(zhí)行一些真正簡單和常見的任務(wù),比方說為頁面的某一區(qū)域中的每個鏈接附加一個單擊(click)事件,您可以使用純 JavaScript 代碼和 DOM 腳本來實現(xiàn),如 清單 1 所示。清單 1. 沒有使用 jQuery 的

3、 DOM 腳本 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 實現(xiàn)的相同的功能。清單 2. 使用了 jQuer

4、y 的 DOM 腳本 $(#external_links a).click(function() return confirm(You are going to visit: + this.href););是不是很神奇? 使用 jQuery,您可以把握問題的要點,只讓代碼實現(xiàn)您想要的功能,而省去了一些繁瑣的過程。無需對元素進行循環(huán),click() 函數(shù)將完成這些操作。同樣也不需要進行多個 DOM 腳本調(diào)用。您只需要使用一個簡短的字符串對所需的元素進行定義即可。理解這一代碼的工作原理可能會有一點復(fù)雜。首先,我們使用了 $() 函數(shù) jQuery 中功能最強大的函數(shù)。通常,我們都是使用這個函數(shù)從文

5、檔中選擇元素。在本例中,一個包含有一些層疊樣式表(Cascading Style Sheet,CSS)語法的字符串被傳遞給函數(shù),然后 jQuery 盡可能高效地把這些元素找出來。如果您具備 CSS 選擇器的基本知識,那么應(yīng)該很熟悉這些語法。在 清單 2 中,#external_links 用于檢索 id 為 external_links 的元素。a 后的空格表示 jQuery 需要檢索 external_links 元素中的所有 元素。用英語說起來非常繞口,甚至在 DOM 腳本中也是這樣,但是在 CSS 中這再簡單不過了 $() 函數(shù)返回一個含有所有與 CSS 選擇器匹配的元素的 jQuery

6、 對象。jQuery 對象 類似于數(shù)組,但是它附帶有大量特殊的 jQuery 函數(shù)。比方說,您可以通過調(diào)用 click 函數(shù)把 click 處理函數(shù)指定給 jQuery 對象中的所有元素。還可以向 $() 函數(shù)傳遞一個元素或者一個元素數(shù)組,該函數(shù)將把這些元素封裝在一個 jQuery 對象中。您可能會想要使用這個功能將 jQuery 函數(shù)用于一些對象,比方說 window 對象。例如,我們通常會像下面這樣把函數(shù)分配給加載事件:window.onload = function() / do this stuff when the page is done loading;使用 jQuery 編寫的

7、功能相同的代碼:$(window).load(function() / run this when the whole page has been downloaded);您可能有所體會,等待窗口加載的過程是非常緩慢而且令人痛苦的,這是因為必須等整個頁面加載完所有的內(nèi)容,包括頁面上所有的的圖片。有的時候,您希望首先完成圖片加載,但是在大多數(shù)情況下,您只需加載超文本標志語言(Hypertext Markup Language,HTML)就可以了。通過在文檔中創(chuàng)建特殊的 ready 事件,jQuery 解決了這個問題,方法如下:$(document).ready(function() / do t

8、his stuff when the HTML is all ready);這個代碼圍繞 document 元素創(chuàng)建了一個 jQuery 對象,然后建立一個函數(shù),用于在 HTML DOM 文檔就緒的時候調(diào)用實例??梢愿鶕?jù)需要任意地調(diào)用這個函數(shù)。并且能夠以真正的 jQuery 格式,使用快捷方式調(diào)用這個函數(shù)。這很簡單,只需向 $() 函數(shù)傳遞一個函數(shù)就可以了:$(function() / run this when the HTML is done downloading);到目前以止,我已經(jīng)向大家介紹了 $() 函數(shù)的三種用法。第四種方法可以使用字符串來創(chuàng)建元素。結(jié)果會產(chǎn)生一個包含該元素的 j

9、Query 對象。清單 3 顯示的示例在頁面中添加了一個段落。清單 3. 創(chuàng)建和附加一個簡單的段落 $() .html(Hey World!) .css(background, yellow) .appendTo(body);在前一個例子中您可能已經(jīng)注意到,jQuery 中的另一個功能強大的特性就是方法鏈接(method chaining)。每次對 jQuery 對象調(diào)用方法時,方法都會返回相同的 jQuery 對象。這意味著如果您需要對 jQuery 對象調(diào)用多個方法,那么您不必重新鍵入選擇器就可以實現(xiàn)這一目的:使 Ajax 變得簡單$(#message).css(background, y

10、ellow).html(Hello!).show(); 使用 jQuery 將使 Ajax 變得及其簡單。jQuery 提供有一些函數(shù),可以使簡單的工作變得更加簡單,復(fù)雜的工作變得不再復(fù)雜。Ajax 最常見的用法就是把一塊 HTML 代碼加載到頁面的某個區(qū)域中去。為此,只需簡單地選擇所需的元素,然后使用 load() 函數(shù)即可。下面是一個用于更新統(tǒng)計信息的示例:$(#stats).load(stats.html);通常,我們只需簡單地把一些參數(shù)傳遞給服務(wù)器中的某個頁面。正如您所預(yù)料的,使用 jQuery 實現(xiàn)這一操作非常地簡單。您可以使用 $.post() 或者 $.get(),這由所需的方法

11、決定。如果需要的話,您還可以傳遞一個可選的數(shù)據(jù)對象和回調(diào)函數(shù)。清單 4 顯示了一個發(fā)送數(shù)據(jù)和使用回調(diào)的簡單示例。清單 4. 使用 Ajax 向頁面發(fā)送數(shù)據(jù) $.post(save.cgi, text: my string, number: 23, function() alert(Your data has been saved.););如果您確實需要編寫一些復(fù)雜的 Ajax 腳本,那么需要用到 $.ajax() 函數(shù)。您可以指定 xml、script、html 或者 json,jQuery 將自動為回調(diào)函數(shù)準備合適的結(jié)果,這樣您便可以立即使用該結(jié)果。還可以指定 beforeSend、erro

12、r、success 或者 complete 回調(diào)函數(shù),向用戶提供更多有關(guān) Ajax 體驗的反饋。此外,還有一些其它的參數(shù)可供使用,您可以使用它們設(shè)置 Ajax 請求的超時,也可以設(shè)置頁面 “最近一次修改” 的狀態(tài)。清單 5 顯示了一個使用一些我所提到的參數(shù)檢索 XML 文檔的示例。清單 5. $.ajax() 使 Ajax 由復(fù)雜變簡單 $.ajax( url: document.xml, type: GET, dataType: xml, timeout: 1000, error: function() alert(Error loading XML document); , success

13、: function(xml) / do something with xml );當 success 回調(diào)函數(shù)返回 XML 文檔后,您可以使用 jQuery 檢索這個 XML 文檔,其方式與檢索 HTML 文檔是一樣的。這樣使得處理 XML 文檔變得相當?shù)厝菀祝⑶野褍?nèi)容和數(shù)據(jù)集成到了您的 Web 站點里面。清單 6 顯示了 success 函數(shù)的一個擴展,它為 XML 中的每個 元素都添加了一個列表項到 Web 頁面中。清單 6. 使用 jQuery 處理 XML 文檔 success: function(xml) $(xml).find(item).each(function() var

14、 item_text = $(this).text(); $() .html(item_text) .appendTo(ol); );為 HTML 添加動畫可以使用 jQuery 處理基本的動畫和顯示效果。animate() 函數(shù)是動畫代碼的核心,它用于更改任何隨時間變化的數(shù)值型的 CSS 樣式值。比方說,您可以變化高度、寬度、不透明度和位置。還可以指定動畫的速度,定為毫秒或者預(yù)定義的速度:慢速,中速或快速。下面是一個同時變化某個元素高度和寬度的示例。請注意,這些參數(shù)沒有開始值,只有最終值。開始值取自元素的當前尺寸。同時我也附加了一個回調(diào)函數(shù)。$(#grow).animate( height:

15、 500, width: 500 , slow, function() alert(The element is done growing!););jQuery 的內(nèi)置函數(shù)使更多常見的動畫更容易完成??梢允褂?show() 和 hide() 元素,立即顯示或者以特定的速度顯示。還可以通過使用 fadeIn() 和 fadeOut(),或者 slideDown() 和 slideUp() 顯示和隱藏元素,這取決于您所需要的顯示效果。下面的示例定義了一個下滑的導(dǎo)航菜單。$(#nav).slideDown(slow); DOM 腳本和事件處理或許 jQuery 最擅長的就是簡化 DOM 腳本和事件處

16、理。遍歷和處理 DOM 非常簡單,同時附加、移除和調(diào)用事件也十分容易,且不像手動操作那樣容易出錯。從本質(zhì)上說,jQuery 可以使 DOM 腳本中的常用操作變得更加容易。您可以創(chuàng)建元素并且使用 append() 函數(shù)把它們與其它的一些元素鏈接到一起,使用 clone() 復(fù)制元素,使用 html() 設(shè)置內(nèi)容,使用 empty() 函數(shù)刪除內(nèi)容,使用 remove() 函數(shù)刪除所有的元素,即便是使用 wrap() 函數(shù),用其他元素將這些元素包裝起來。通過遍歷 DOM,一些函數(shù)可以用于更改 jQuery 對象本身的內(nèi)容??梢垣@得元素所有的 siblings()、parents() 和 child

17、ren()。還可以選擇 next() 和 prev() 兄弟元素。find() 函數(shù)或許是功能最強大的函數(shù),它允許使用 jQuery 選擇器搜索 jQuery 對象中元素的后代元素。如果結(jié)合使用 end() 函數(shù),那么這些函數(shù)將變得更加強大。這個函數(shù)的功能類似于 undo 函數(shù),用于返回到調(diào)用 find() 或 parents() 函數(shù)(或者其它遍歷函數(shù))之前的 jQuery 對象。如果配合方法鏈接(method chaining)一起使用,這些函數(shù)可以使復(fù)雜的操作看上去非常簡單。清單 7 顯示了一個示例,其中包含有一個登錄表單并處理了一些與之有關(guān)的元素。清單 7. 輕松地遍歷和處理 DOM

18、$(form#login) / hide all the labels inside the form with the optional class .find(label.optional).hide().end() / add a red border to any password fields in the form .find(input:password).css(border, 1px solid red).end() / add a submit handler to the form .submit(function() return confirm(Are you sur

19、e you want to submit?); );不管您是否相信,這個示例只是一行滿是空白的被鏈接的代碼。首先,選擇登錄表單。然后,發(fā)現(xiàn)其中含有可選標簽,隱藏它們,并調(diào)用 end() 返回表單。然后,我創(chuàng)建了密碼字段,將其邊界變?yōu)榧t色,再次調(diào)用 end() 返回表單。最后,我在表單中添加了一個提交事件處理程序。其中尤為有趣的就是(除了其簡潔性以外),jQuery 完全優(yōu)化了所有的查詢操作,確保將所有內(nèi)容很好地鏈接在一起后,不需要對一個元素執(zhí)行兩次查詢。處理常見事件就像調(diào)用函數(shù)(比方說 click()、submit() 或 mouseover())和為其傳遞事件處理函數(shù)一樣簡單。此外,還可以使

20、用 bind(eventname, function() 指定自定義的事件處理程序。可以使用 unbind(eventname) 刪除某些事件或者使用 unbind() 刪除所有的事件。有關(guān)這些函數(shù)的使用方法的完整列表,請參閱 參考資料 中的 jQuery 應(yīng)用程序編程接口(Application Program Interface,API)文檔。 釋放 jQuery 選擇器的強大能量我們經(jīng)常會使用 ID 來選擇元素,比如 #myid,或者通過類名,比如 div.myclass 來選擇元素。然而,jQuery 提供了更為復(fù)雜和完整的選擇器語法,允許我們在單個選擇器中選擇幾乎所有的元素組合。jQ

21、uery 的選擇器語法主要是基于 CSS3 和 XPath 的。對 CSS3 和 XPath 了解的越多,使用 jQuery 時就越加得心應(yīng)手。有關(guān) jQuery 選擇器的完整列表,包括 CSS 和 XPath,請參閱 參考資料 中的鏈接。CSS3 包含一些并不是所有瀏覽器都支持的語法,因此我們很少使用它。然而,我們?nèi)匀豢梢栽?jQuery 中使用 CSS3 選擇元素,因為 jQuery 具備自己的自定義選擇器引擎。比方說,要在表格中的每一個空列中都添加一個橫杠,可以使用::empty 偽選擇器(pseudo-selector):$(td:empty).html(-);如果需要找出所有不含特定

22、類的元素呢? CSS3 同樣提供了一個語法可以完成這個目的,使用 :not 偽選擇器: 如下代碼顯示了如何隱藏所有不含 required 類的輸入內(nèi)容:$(input:not(.required).hide();與在 CSS 中一樣,可以使用逗號將多個選擇器連接成一個。下面是一個同時隱藏頁面上所有類型列表的簡單示例:$(ul, ol, dl).hide();XPath 是一種功能強大的語法,用于在文檔中搜尋元素。它與 CSS 稍有區(qū)別,不過它能實現(xiàn)的功能略多于 CSS。要在所有復(fù)選框的父元素中添加一個邊框,可以使用 XPath 的 /. 語法:$(input:checkbox/.).css(b

23、order, 1px solid #777);jQuery 中也加入了一些 CSS 和 XPath 中沒有的選擇器。比方說,要使一個表更具可讀性,通??梢栽诒砀竦钠鏀?shù)行或偶數(shù)行中附加一個不同的類名 也可以稱作把表分段(striping)。使用 jQuery 不費吹灰之力就可以做到這點,這需要歸功于 odd 偽選擇器。下面這個例子使用 striped 類改變了表格中所有奇數(shù)行的背景顏色:$(table.striped tr:odd).css(background, #999999);我們可以看到強大的 jQuery 選擇器是如何簡化代碼的。不論您想處理什么樣的元素,不管這個元素是具體的還是模糊的,都有可能找到一種方法使用一個 jQuery選擇器對它們進行定義。使用插件擴展 jQuery與大多數(shù)軟件不同,使用一個復(fù)雜的 API 為 jQuery 編寫插件并不是非常困難。事實上,jQuery 插件非常易于編寫,您甚至希望編寫一些插件來使代碼更加簡單。下面是可以編寫的最基本的 jQue

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論