JQuery解析HTML、JSON和XML实例详解

1. HTML解析

1.1. 使用.text()方法解析HTML

1.1.1. 代码示例

<!-- HTML文本 -->
<div id="content">
  <p>Hello, World!</p>
</div>

// JQuery代码
var htmlText = $('#content').text();

1.1.2. 解析结果

Hello, World!

1.1.3. 解析过程

使用JQuery中的.text()方法，可以获取指定元素的所有文本内容，包括所有的标签和属性，返回一个字符串。在上面的示例中，我们使用JQuery选择器获取了id为content的

元素，在调用.text()方法后返回了该元素中

标签中的文本"Hello, World!"。

1.2. 使用.html()方法解析HTML

1.2.1. 代码示例

<!-- HTML文本 -->
<div id="content">
  <p>Hello, <strong>World!</strong></p>
</div>

// JQuery代码
var htmlText = $('#content').html();

1.2.2. 解析结果

<p>Hello, <strong>World!</strong></p>

1.2.3. 解析过程

与.text()方法类似，使用JQuery中的.html()方法也可以获取指定元素的文本内容，但有所不同的是，它能够获取并返回该元素中所有的HTML标签和属性。在上面的示例中，我们使用JQuery选择器获取了id为content的

元素，在调用.html()方法后返回了整个

标签中的HTML代码，包含了其中的标签。

2. JSON解析

2.1. 解析简单的JSON数据

2.1.1. 代码示例

// JSON对象
{
  "name": "Tom",
  "age": 22,
  "birthday": "1999-01-01"
}

// JQuery代码
var jsonData = '{ "name": "Tom", "age": 22, "birthday": "1999-01-01" }';
var json = $.parseJSON(jsonData);

2.1.2. 解析结果

{
  "name": "Tom",
  "age": 22,
  "birthday": "1999-01-01"
}

2.1.3. 解析过程

使用JQuery中的$.parseJSON()方法，可以将JSON格式的字符串转换为JSON对象。在上面的示例中，我们定义了一个JSON格式的字符串，并将其传给$.parseJSON()方法，然后将返回的JSON对象存入变量json中，最终得到一个包含三个属性（name、age、birthday）的JSON对象。

2.2. 解析复杂的JSON数据

2.2.1. 代码示例

// JSON对象
{
  "name": "Tom",
  "age": 22,
  "contact": {
    "email": "[e-mail]",
    "phone": "123-456-7890"
  },
  "hobbies": [
    "reading",
    "travel"
  ]
}

// JQuery代码
var jsonData = '{ "name": "Tom", "age": 22, "contact": { "email": "[e-mail]", "phone": "123-456-7890" }, "hobbies": ["reading", "travel"] }';
var json = $.parseJSON(jsonData);

2.2.2. 解析结果

{
  "name": "Tom",
  "age": 22,
  "contact": {
    "email": "[e-mail]",
    "phone": "123-456-7890"
  },
  "hobbies": [
    "reading",
    "travel"
  ]
}

2.2.3. 解析过程

使用$.parseJSON()方法解析复杂的JSON数据时，需要确保JSON数据的格式符合JSON规范。在上面的示例中，我们定义了一个包含多个属性，其中contact属性是一个嵌套的JSON对象，hobbies属性是一个由多个字符串元素组成的JSON数组。将JSON格式的字符串传给$.parseJSON()方法后，它返回一个对应的JSON对象。

3. XML解析

3.1. 解析简单的XML数据

3.1.1. 代码示例

<!-- XML文本 -->
<bookstore>
  <book category="web">
    <title lang="en">Everyday JavaScript</title>
    <author>John Doe</author>
    <year>2019</year>
    <price>19.99</price>
  </book>
</bookstore>

// JQuery代码
var xml = $.parseXML(xmlText);
var $xml = $(xml);
var bookTitle = $xml.find('title').text();

3.1.2. 解析结果

Everyday JavaScript

3.1.3. 解析过程

使用JQuery中的$.parseXML()方法，可以将XML格式的字符串转换为XML文档对象。然后使用$(xml)将XML文档对象封装成JQuery对象，最后可以使用JQuery选择器获取XML文档中的元素。在上面的示例中，我们获取了XML文档中的