快速提示：利用 jQuery 的強大功能從 XML 檔案中提取數據

在本快速提示中，我將向您展示如何將 XML 檔案中的資料載入到空白頁上。我們將使用 $.get 函數，並在檢索資訊時實作載入 gif。我們將展示一個簡單的推薦網頁開發書籍清單。讓我們開始吧。

第一步：檢查腳本

首先，讓我們來看看簡單的 XML 檔案。它只包含幾本書及其標題、圖像和說明。

<?xml version="1.0" encoding="utf-8" ?>
<books>
    <book title="CSS Mastery" imageurl="images/css.jpg">
    <description>
    info goes here.
    </description>
    </book>

    <book title="Professional ASP.NET" imageurl="images/asp.jpg">
    <description>
    info goes here.
    </description>
    </book>

    <book title="Learning jQuery" imageurl="images/lj.jpg">
    <description>
    info goes here.
    </description>
    </book>
</books>

接下來，我們來看看實際的 jQuery。

    $(document).ready(function()
      {
        $.get('myData.xml', function(d){
        $('body').append('<h1> Recommended Web Development Books </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="快速提示：利用 jQuery 的強大功能從 XML 檔案中提取數據" />';
            html += '<p class="title">' + title + '</p>';
            html += '<p> ' + description + '</p>' ;
            html += '</dd>';

            $('dl').append($(html));
            
            $('.loadingPic').fadeOut(1400);
        });
    });
});

第二步：破解時間

因為這是一個快速提示，所以我會比平常更快地運行該腳本。當文件準備好進行操作時，我們將使用「$.get」函數來取得 XML 檔案。在括號中，我們將傳入檔案的位置，然後執行回呼函數。我將使用變數“d”來表示從 XML 檔案中提取的資訊。接下來，我們將建立一個標題標籤和一個定義清單。

繼續，我們將搜尋 XML 檔案 (d) 並找到標題為「book」的標籤。回頭看看我的文檔，一共有三本書。因此，我們需要運行“each”方法才能對每本書執行操作。 請記住，「each」就像「for」語句一樣。這是一種遍歷包裝集中每個元素的方法。

在下一個程式碼區塊中，我定義了一些變數。為了從 XML 檔案中取得“標題”和“描述”，我們使用“.attr(value)”——其中“值”等於標記內的屬性。

最後，我們建立一個名為「html」的變量，它將包含顯示 XML 檔案中資訊的 html。但是，僅將該資訊指派給變數不會將其顯示在頁面上。要將其新增至頁面，我們取得定義清單並附加變數。 - $('dl').append($(html));

還有一件事值得一提，當從 XML 文件中檢索資訊時，我們將顯示一個標準的載入 gif（透過背景圖像）。資料加載後，我們將抓取圖像並將其淡出。

你完成了

我知道我很快就經歷了這一切；因此，請隨意發表評論並提出您可能有的任何問題。 應該注意的是，這個腳本在為現實世界的網站做好準備之前需要做更多的工作。你必須補償那些關閉了 Javascript 的人。在這種情況下，如果他們確實將其關閉，他們將盯著一張空白頁。你必須補償這些事情。但是，我離題了。

以上是快速提示：利用 jQuery 的強大功能從 XML 檔案中提取數據的詳細內容。更多資訊請關注PHP中文網其他相關文章！