Chinaunix首页 | 论坛 | 博客
  • 博客访问: 29315533
  • 博文数量: 2065
  • 博客积分: 10377
  • 博客等级: 上将
  • 技术积分: 21525
  • 用 户 组: 普通用户
  • 注册时间: 2008-11-04 17:50
文章分类

全部博文(2065)

文章存档

2012年(2)

2011年(19)

2010年(1160)

2009年(969)

2008年(153)

分类: 系统运维

2009-12-04 12:55:21

为了以后的快速使用我的JQuery。整理一下有关她操作XML的代码!
(发现了学什么东西一定要做东西。这样才能增强记忆。否则很容易就忘记了!)整理也是非常重要的!

DEMO1:
XML文件如下 :
 
 
     
        武汉 
           黄石 
           宜昌 
           天门 
      
 
       
          邵阳 
          长沙 
          岳阳 
     
 
 
客户端的代码如下:


 
    jqueryxml.html
   
   
   
   
   
   
   

 
 
 
   
 
       
 
             
             
       
 
   
 
 


实现的功能就是传统的AJAX 二级菜单一样的。是不是非常方便!

整理JQuery
success: function(xml){
              $(xml).find("province").each(function(){
                  var t = $(this).attr("name");//提取当前元素节点的属性值!
                 $('#DropProvince').append("");//追加HTML元素
            });      
  }
操作XML节点是非常简单的!

$(xml).find("province[name='"+pname+"']>city").each(function(){
这是一个选择器操作! 选择出来之后再each遍历一下!


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 +=" ";
htmlData +=" ";
htmlData +=" ";
htmlData +=" ";
htmlData +="";
});

//完成表格字符窜
htmlData +="
" + FullName + " " + Corporation + " " + Description + " " + Products + "
"
;
//将表格放到 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 标签中,最终效果图如下:




阅读(912) | 评论(1) | 转发(0) |
给主人留下些什么吧!~~

chinaunix网友2009-12-09 15:07:36

http://hi.baidu.com/hy0kl/blog/item/2f34f7bf5c1dcb0b18d81f6e.html 研究一下这个问题做个总结