打包下載
准備工作
在開始之前我們需要做如下准備工作：
1.創建一個名為DEMO.html空白html文件；（推薦使用Editplus創建）
2.熟悉JQuery框架的基本語法；（不熟悉沒關系，後面我會注釋得很詳細）
3.創建一個名為data.xml的XML文件用來存儲數據，XML的結構下面會涉及到，你也可以下載我打包好的文件查看；
4.一個loading.gif圖片，這個圖片用於在將XML讀取出來的等待時間裡面顯示在空白html文檔中
正式開始
Step 1:首先讓我們看看這個data.xml的簡單結構，我這裡演示的數據是"Saturn為您推薦的幾本書"，故為書籍信息，那麼xml就包括書籍的名稱，縮略圖和書籍描述信息；
以下為XML文件代碼：
代碼如下:
<?xml version="1.0" encoding="utf-8" ?>
<books>
<book title="藏地密碼" imageurl="images/Tibet_Code.jpg">
<description>
這裡是概況(www.poluoluo.com)
</description>
</book>
<book title="劍橋雅思6" imageurl="images/ielts.jpg">
<description>
這裡是概況(www.poluoluo.com)
</description>
</book>
<book title="Professional ASP.NET" imageurl="images/asp.jpg">
<description>
這裡是概況(www.poluoluo.com)
</description>
</book>
</books>
其次，讓我們看看加載在空白HTML文檔裡面的JavaScript代碼：
代碼如下:
$(document).ready(function()
{
$.get('myData.xml', function(d){
$('body').append('<h1> Saturn給你推薦幾本書： </h1>');
$('body').append('<dl />');
$(d).find('book').each(function(){
var $book = $(this);
var title = $book.attr("title");
var description = $book.find('description').text();
var imageurl = $book.attr('imageurl');
var html = '<dt> <img class="bookImage" alt="" src="' + imageurl + '" /> </dt>';
html += '<dd> <span class="loadingPic" alt="Loading" />';
html += '<p class="title">' + title + '</p>';
html += '<p> ' + description + '</p>' ;
html += '</dd>';
$('dl').append($(html));
$('.loadingPic').fadeOut(2000);
});
});
});
Step 2:這裡，我只講下JavaScript代碼原理與運行流程，不過分討論語法，如果你對語法有任何疑問，請給我留言或者查看JQuery相關文檔。
行1：當HTML文檔准備完畢之後（即html和JavaScript都下載完畢），會自動觸發JQuery的 $(document).ready方法及裡面的過程。顯然，這裡首先執行的是$.get方法。
行3：$.get的第一個參數是XML文件的相對路徑（注意路徑要填寫正確，這裡我們把XML和網頁文件放在同一文件夾）。第二個參數是一個Callback函數，即回調函數。就是說通過get方法來請求這個XML文件的內容，然後通過這個callback回調函數來操作裡面的數據。而callback的參數d表示從XML回調過來的所有數據，有了這個參數d，我們就好進行下面的內容了。
行4：通過JavaScript在文檔的BODY中動態添加一個標簽<h1>，這個是頁面的總標題，無關緊要；
行5：同樣在BODY中動態添加一個標簽<dl>,用來作為包含循環下面的內容容器。（行20會用到）
行7：這一行很重要，因為我們已經說過，回調函數的參數d表示從XML回調的所有數據，現在我們就需要對這些數據進行處理（篩選）和格式化；請注意：這裡通過搜尋book標簽（tag），然後循環執行each後面的函數，直到xml裡面數據的條目完全循環完畢；（有點像PHP裡面的foreach函數的功能）
行9：$(this)實際上就創建一個對象，目的是將d的當前一條書籍信息對象實例化，方便進行操作，這就是$book；
行10--行12：分別獲取當前對象$book的書籍名稱，描述和縮略圖；（注意取屬性值和取節點值的語法不同）
行14-行18：格式化書籍信息，以便輸出；
行20：將格式化後的信息以HTML輸出方式輸出到文檔中。
行22：為了告訴用戶我們當前的信息正在從XML中讀取，2000毫秒（2秒）後，圖片逐漸消失。
Step 3:至此，大功告成。歡迎大家給我留言，共同討論JQuery的開發和你所碰到的問題，請不吝賜教。另外，請將下載後的文件夾放在WEB環境下運行（IIS或虛擬主機），請不要直接點開運行。