XML 全称为 可扩展标记语言,其文件结构与 HTML 类似,但是区别也很明显,HTML 只能使用已经定义的标签,如 title, body, span 等,标签种类是有限的,但是 XML 除了可以使用 HTML 的所有标签,还可以自己随意定制标签,如 person, name, sex, age 等,而且 XML 中的标签属性名称,也可以随意定制。另外二者用途方面也有明显区别,HTML 主要用来展示数据,XML 则侧重于数据的存储和传输。例如下面这个简单的 XML 文档用以存储员工信息:
<员工> <姓名>麻花疼</姓名> <性别>男</性别> <年龄>40</年龄> <职位>疼逊CEO</职位> </员工>
下面本文简单介绍如何使用 jQuery 载入一个 XML 文件并从中获取自己想要的数据。
准备 XML 文档及测试数据
假设我们现在要构建一个包含人员信息的 XML 文档,该 XML 文档要能反映其姓名、所在公司、公司简介、公司产品简介几个信息,那么我们可以把 XML 设计成如下样式:
<"1.0" encoding="utf-8" "Bill Gates"> <Corporation>Microsoft</Corporation> <Description>The largest software company</Description> <Products>Windows series OS, SQL Server Database, XBox 360...</Products> </Person> <Person FullName="Jobs"> <Corporation>Apple</Corporation> <Description>The famous software company</Description> <Products>Macintosh, iPhone, iPod, iPad...</Products> </Person> <Person FullName="Larry Page"> <Corporation>Google</Corporation> <Description>the largest search engine</Description> <Products>Google search, Google Adsense, Gmail...</Products> </Person> </Persons>
简单分析一下这个 XML 文件,其中第一行 <"1.0" encoding="utf-8" "htmlcode">
<script type="text/javascript"> jQuery(document).ready(function() { /* 先用 $.get 方法载入 XML 文件 */ $.get("EmployeesInformation.xml", function(xmlData) { /* 我们要讲得到的数据放入一个表格里面,这里定义一个表格字符窜 */ var htmlData = "<table border='1'>"; /* 找到 Person 元素,然后用 each 方法进行遍历 */ $(xmlData).find("Person").each(function() { var Person = $(this); /* 将当前元素复制给 Person */ var FullName = Person.attr("FullName"); /* 获取 Person 的 FullName 属性 */ var Corporation = Person.find("Corporation").text(); /* 获取 Person 中子元素 Corporation 的值 */ var Description = Person.find("Description").text(); /* 获取 Person 中子元素 Description 的值 */ var Products = Person.find("Products").text(); /* 获取 Person 中子元素 Products 的值 */ /* 将得到的数据,放到表格的一行中 */ htmlData += "<tr>"; htmlData += " <td>" + FullName + "</td>"; htmlData += " <td>" + Corporation + "</td>"; htmlData += " <td>" + Description + "</td>"; htmlData += " <td>" + Products + "</td>"; htmlData += "</tr>"; }); //完成表格字符窜 htmlData += "</table>"; //将表格放到 body 中 $("body").append(htmlData); }); }); </script>
简单解释一下这段代码,由于此 XML 文档相对简单,所以这段代码也比较简短,代码中$.get()方法的第一个参数为 XML 文件地址,第二个参数是一个回调函数,回调函数中参数 xmlData 即为 XML 文件中的数据。在此示例中,我们打算 XML 中的数据以表格的形式显示在 HTML 中,所以先构建一个表格字符串 htmlData 先。
紧接着,用find()方法,找到所有名为 Person 的元素,因为每个 Person 元素即表示一个人,然后再用 each() 方法进行遍历,把遍历到的元素赋个一个变量 Person。用Person.attr()方法去除元素的 FullName 属性,也就是人员的姓名,再用find()方法找到其子元素 Corporation,Description 和 Products 并返回它们的文本内容,并用 tr 和 td 标签将它们包装在表格的一个行里面。最后完成表格字符串,并将表格添加到 body 标签中。
jQuery,XML
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。