DEMO2: version="1.0"encoding="utf-8"?> FullName="Bill Gates"> Microsoft The largest software company Windows series OS, SQL Server Database, XBox 360...
FullName="Jobs"> Apple The famous software company Macintosh, iPhone, iPod, iPad...
FullName="Larry Page"> Google the largest search engine Google search, Google Adsense, Gmail...
首先要用 $.get() 方法载入 XML 文件,然后用 find() 方法找到所有 Person 元素,再用 each() 方法进行遍历,代码如下: <script type="text/javascript"> jQuery(document).ready(function() { /* 先用 $.get 方法载入 XML 文件 */ $.get("EmployeesInformation.xml",function(xmlData) { /* 我们要讲得到的数据放入一个表格里面,这里定义一个表格字符窜 */ var htmlData ="
";
/* 找到 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 +="
"; htmlData +="
" + FullName +"
"; htmlData +="
" + Corporation +"
"; htmlData +="
" + Description +"
"; htmlData +="
" + Products +"
"; htmlData +="
"; });
//完成表格字符窜 htmlData +="
"; //将表格放到 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
标签中,最终效果图如下: