jQuery实现遍历XML节点和属性的方法示例

下面是jQuery实现遍历XML节点和属性的方法示例的详细攻略。

1. 准备XML数据

首先，需要准备一份XML格式的数据。如果手头没有可以使用的XML数据，可以自己创建一个XML文件。

<?xml version= "1.0" encoding= "UTF-8"?>
<bookstore>
  <book category="WEB">
    <title lang="en">Everyday Italian</title>
    <author>Giada De Laurentiis</author>
    <year>2005</year>
    <price>30.00</price>
  </book>
  <book category="WEB">
    <title lang="en">Harry Potter</title>
    <author>J K. Rowling</author>
    <year>2005</year>
    <price>29.99</price>
  </book>
  <book category="WEB">
    <title lang="en">XQuery Kick Start</title>
    <author>James McGovern</author>
    <author>Per Bothner</author>
    <author>Kurt Cagle</author>
    <author>James Linn</author>
    <author>Vaidyanathan Nagarajan</author>
    <year>2003</year>
    <price>49.99</price>
  </book>
  <book category="DATABASE">
    <title lang="en">Learning XML</title>
    <author>Erik T. Ray</author>
    <year>2003</year>
    <price>39.95</price>
  </book>
</bookstore>

2. 使用jQuery加载XML数据

在HTML文件中导入jQuery库文件，然后使用$.ajax()函数加载XML文件。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery遍历XML节点和属性</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $.ajax({
        type: "GET",
        url: "books.xml",
        dataType: "xml",
        success: function(xml){
          // 在这里编写遍历XML数据的代码
        },
        error: function(xhr, status, error){
          console.log(status);
        }
      });
    });
  </script>
</head>
<body>
</body>
</html>

3. 遍历节点

在ajax()函数的success回调函数中，使用$()函数获取XML数据中的节点，并使用.each()函数遍历节点，示例如下：

$(xml).find("book").each(function(){
  var category = $(this).attr("category");
  var title = $(this).find("title").text();
  var author = $(this).find("author").eq(0).text();
  var year = $(this).find("year").text();
  var price = $(this).find("price").text();

  console.log(category, title, author, year, price);
});

该代码会遍历XML数据中所有的book节点，并输出每个节点的category、title、author、year、price属性值。其中，$(this).attr("category")用于获取节点的category属性，$(this).find("title").text()用于获取节点中的title节点的文本值，$(this).find("author").eq(0).text()用于获取第一个author节点的文本值，$(this).find("year").text()用于获取year节点的文本值，$(this).find("price").text()用于获取price节点的文本值。

4. 遍历属性

有时候需要遍历XML数据中的节点属性。可以使用$.each()函数遍历。

$(xml).find("book").each(function(){
  // 遍历节点属性
  $.each(this.attributes, function(i, attr){
    console.log(attr.name + ": " + attr.value);
  });
});

该代码会遍历XML数据中所有的book节点的属性，并输出每个属性的名称和值。

5. 完整的示例代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery遍历XML节点和属性</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $.ajax({
        type: "GET",
        url: "books.xml",
        dataType: "xml",
        success: function(xml){
          $(xml).find("book").each(function(){
            // 遍历节点
            var category = $(this).attr("category");
            var title = $(this).find("title").text();
            var author = $(this).find("author").eq(0).text();
            var year = $(this).find("year").text();
            var price = $(this).find("price").text();

            console.log(category, title, author, year, price);

            // 遍历属性
            $.each(this.attributes, function(i, attr){
              console.log(attr.name + ": " + attr.value);
            });
          });
        },
        error: function(xhr, status, error){
          console.log(status);
        }
      });
    });
  </script>
</head>
<body>
</body>
</html>

以上就是使用jQuery遍历XML节点和属性的完整攻略，包含2个示例代码。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery实现遍历XML节点和属性的方法示例 - Python技术站