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);
  };
}

如果使用jQuery的話實(shí)現(xiàn)如下：

Listing 2. DOM scripting with jQuery

$('#external_links a').click(function() {
  return confirm('You are going to visit: ' + this.href);
});


很驚訝，是吧？使用jQuery的話，你可以很快找到關(guān)鍵點(diǎn)，并且只需要表達(dá)你需要表達(dá)的，
而不需要羅里羅嗦。不需要對這些元素進(jìn)行循環(huán)，click()函數(shù)可以處理好這一切。而且你不要謝太多的操作DOM的代碼，
你需要的僅僅是使用很少的字符定義你要找的那個(gè)元素。

來看一下這段代碼是如何工作的，有點(diǎn)小技巧。首先，看到$()函數(shù)--jQuery里最有用的最強(qiáng)大的函數(shù).大部分情況下,
你使用這個(gè)函數(shù)從文檔中選擇元素.在這個(gè)例子中,使用這個(gè)函數(shù)傳遞帶有一些級(jí)聯(lián)樣式表(Cascading Style Sheets,CSS)
語法的字符串,jQuery可以很方便的找到這個(gè)元素.

如果你懂一點(diǎn)基本的CSS選擇符的只是,我想這個(gè)語法應(yīng)該看起來相當(dāng)熟悉.在Listing2中,#external_links用來尋找?guī)в衖d為
external_links的元素.接下來的空格表示jQuery要找到在#external_links元素內(nèi)的所有的<a>元素.用口語開表達(dá)的話有點(diǎn)費(fèi)勁--
用DOM腳本來寫也挺麻煩,不過,在CSS里,沒有比這個(gè)更簡單的了.

$()函數(shù)返回一個(gè)包含與css選擇符匹配的所有元素的一個(gè)jQuery對象. jQuery對象的概念就像是數(shù)組,但是它可能含有許多jQuery函數(shù). 舉例來說,你可以調(diào)用click函數(shù)來綁定一個(gè)click事件響應(yīng)到j(luò)Query對象中的每個(gè)元素上.

你還可以向$()函數(shù)傳遞一個(gè)元素或者是元素的數(shù)組,它將把所有的元素打包成一個(gè)jQuery對象.你可能想要把這一特性應(yīng)用到象窗口對象上面.舉例來說, 你有可能使用此函數(shù)來加載事件,像這樣:

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
});

如你所知,等待一個(gè)窗口的加載是異常痛苦的,因?yàn)楸仨毤虞d整個(gè)頁面,包括頁面上所有的圖片. 某些情況下,你需要首先加載圖片,
但是大部分時(shí)候,你可能只需要看到一下超文本的標(biāo)記(HTML).jQuery通過在文檔上創(chuàng)建一個(gè)很特殊的事件ready來解決這個(gè)問題,
使用方法如下:

$(document).ready(function() {
  // do this stuff when the HTML is all ready
});

這段代碼創(chuàng)建一個(gè)document元素的jQuery對象, 然后當(dāng)html DOM文檔準(zhǔn)備完畢后調(diào)用此實(shí)例. 你可以無限次的調(diào)用這個(gè)函數(shù). 另外,
在真正的jQuery風(fēng)格代碼中,這個(gè)函數(shù)還有一個(gè)縮寫形式.簡單的傳遞一個(gè)函數(shù)給$()函數(shù):

$(function() {
  // run this when the HTML is done downloading
});

到現(xiàn)在位置,我已經(jīng)向你展示了三種不同的使用$()函數(shù)的方法.第四種方式, 你可以使用一個(gè)字符串創(chuàng)建一個(gè)元素. 結(jié)果是一個(gè)包含此元素的jQuery對象. Listing3展示了一個(gè)增加一段到頁面上的例子:

Listing 3. Creating and appending a simple paragraph

	
$('<p></p>')
  .html('Hey World!')
  .css('background', 'yellow')
  .appendTo("body");

正如你從上面的例子中看到的一樣,jQuery還有一個(gè)很強(qiáng)大的功能就是方法鏈(method chaining), 每次你對一個(gè)jQuery對象調(diào)用一個(gè)方法,這個(gè)方法將同樣返回一個(gè)jQuery對象. 這就是說如果你需要對一個(gè)jQuery對象調(diào)用多個(gè)方法的話, 你可以不必重復(fù)寫css選擇符,可以像這樣:

$('#message').css('background', 'yellow').html('Hello!').show();

3.jQuery讓Ajax變得異常簡單

使用jQuery,Ajax恐怕不能變得再簡單了. jQuery有一系列的函數(shù),可以使簡單的事情變得真正簡單,讓復(fù)雜的事情也能變得盡可能
的簡單.

Ajax的一個(gè)一般用法就是加載一段html代碼到頁面上的某一區(qū)域. 要實(shí)現(xiàn)這個(gè),你只要簡單的選中這個(gè)元素,然后使用load()函數(shù).
下面是個(gè)例子,用來更新一些統(tǒng)計(jì)信息.

$('#stats').load('stats.html');

通 常,你可能需要向服務(wù)器端的頁面?zhèn)鬟f一些參數(shù). 你可能猜到了, 使用jQuery來實(shí)現(xiàn)的話會(huì)十分簡單. 你可以選擇使用$.post()或者$.get(), 當(dāng)然要根據(jù)你的具體需要. 如果需要, 你可以傳遞一個(gè)可選的數(shù)據(jù)對象和一個(gè)回調(diào)函數(shù). Listing4是一個(gè)發(fā)送數(shù)據(jù)以及使用回調(diào)函數(shù)的簡單例子:

Listing 4. Sending data to a page with Ajax

	
$.post('save.cgi', {
  text: 'my string',
  number: 23
}, function() {
  alert('Your data has been saved.');
});

如果你真的想要一些復(fù)雜的Ajax代碼,那就是用$.ajax()函數(shù). 你可以指定數(shù)據(jù)類型為xml, html, script或者json, jQuery 會(huì)為你自動(dòng)準(zhǔn)備好結(jié)果一遍你的回調(diào)函數(shù)能夠立即使用這些數(shù)據(jù). 你還可以設(shè)定 beforeSend, error, success, 以及 complete 回調(diào)函數(shù)來給用戶一些ajax體驗(yàn)的更多提示信息. 另外,還有一些參數(shù),可以讓你設(shè)置ajax請求的超時(shí)時(shí)間,或者一個(gè)頁面的"最后更改"狀態(tài). Listing5展示了一個(gè)獲取xml文檔并使用我上面提到的一些參數(shù)的簡單例子:

Listing 5. Complex Ajax made simple with $.ajax()

	
$.ajax({
  url: 'document.xml',
  type: 'GET',
  dataType: 'xml',
  timeout: 1000,
  error: function(){
    alert('Error loading XML document');
  },
  success: function(xml){
    // do something with xml
  }
});

當(dāng) 你成功的獲得xml反饋的時(shí)候, 你可以使用jQuery來遍歷xml文檔,就像你操作html的方式一樣. 這使操作一個(gè)xml文件以及整合內(nèi)容到頁面上變得十分的簡單. Listing6 擴(kuò)展了success函數(shù), 根據(jù)xml文檔里的每個(gè)<item>在頁面上增加一個(gè)了list(列表)條目.

Listing 6. Working with XML using jQuery

	
success: function(xml){
  $(xml).find('item').each(function(){
    var item_text = $(this).text();

    $('<li></li>')
      .html(item_text)
      .appendTo('ol');
  });
}

JavaScript技術(shù)：使用jQuery簡化Ajax開發(fā) Ajax開發(fā)入門，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。