大連 網站建設: 如何使用jQuery簡化Ajax開發
一些簡單地代碼簡化
下面是一個簡單示例,它說明了 jQuery 對代碼的影響。要執行一些真正簡單和常見的任務,比方說為頁面的某一區域中的每個鏈接附加一個單擊(click)事件,您可以使用純 JavaScript 代碼和 DOM 腳本來實現,如實例 1 所示。
清單 1 :沒有使用 jQuery 地 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 實現的相同的功能。
清單 2. 使用了 jQuery 的 DOM 腳本
$('#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 元素中的所有 元素。用英語說起來非常繞口,甚至在 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
});
到目前以止,我已經向大家介紹了 $() 函數的三種用法。第四種方法可以使用字符串來創建元素。結果會產生一個包含該元素的 jQuery 對象。清單 3 顯示的示例在頁面中添加了一個段落。
實例 3. 創建和附加一個簡單的段落
Copyright@ 2011-2016 版權所有:大連千億科技有限公司 遼ICP備11013762-3號 google網站地圖 百度網站地圖 網站地圖
公司地址:大連市沙河口區中山路692號辰熙星海國際2317 客服電話:0411-39943997 QQ:2088827823 37482752
法律聲明:未經許可,任何模仿本站模板、轉載本站內容等行為者,本站保留追究其法律責任的權利! 隱私權政策聲明