使用jquery解析XML的方法


Posted in Javascript onSeptember 05, 2014

本文实例讲述了使用jquery解析XML的方法,分享给大家供大家参考之用。具体方法如下:

一、xml文件结构:books.xml

<?xml version="1.0" encoding="UTF-8"?>
<root>
 <book id="1">
  <name>深入浅出extjs</name>
  <author>张三</author>
  <price>88</price>
 </book>
 <book id="2">
  <name>锋利的jQuery</name>
  <author>李四</author>
  <price>99</price>
 </book>
 <book id="3">
  <name>深入浅出flex</name>
  <author>王五</author>
  <price>108</price>
 </book>
 <book id="4">
  <name>java编程思想</name>
  <author>钱七</author>
  <price>128</price>
 </book>
</root>

二、页面代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery解析xml</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
 $(function(){
  $.post('books.xml',function(data){
   //查找所有的book节点
   var s="";
   $(data).find('book').each(function(i){
    var id=$(this).attr('id');
    var name=$(this).children('name').text();
    var author=$(this).children('author').text();
    var price=$(this).children('price').text();
    s+=id+"    "+name+"    "+author+"    "+price+"<br>";
   });
   $('#mydiv').html(s);
  });
 });
</script>
</head>
<body>
 <div id='mydiv'></div>
</body>
</html>

运行效果图如下:

使用jquery解析XML的方法

感兴趣的读者可以点此本站下载完整代码。

Javascript 相关文章推荐
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 Javascript
jsTree 基于JQuery的排序节点 Bug
Jul 26 Javascript
jQuery阻止同类型事件小结
Apr 19 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
Sep 04 Javascript
Fullpage.js固定导航栏-实现定位导航栏
Mar 17 Javascript
深入分析javascript中console命令
Aug 14 Javascript
vue.js实现刷新当前页面的方法教程
Jul 05 Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
9102年webpack4搭建vue项目的方法步骤
Feb 20 Javascript
微信小程序实现锚点功能
Nov 20 Javascript
JS写滑稽笑脸运动效果
May 28 Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 #Javascript
javascript获取dom的下一个节点方法
Sep 05 #Javascript
原生JavaScript生成GUID的实现示例
Sep 05 #Javascript
javascript动态控制服务器控件实例
Sep 05 #Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 #Javascript
jQuery动态创建html元素的常用方法汇总
Sep 05 #Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 #Javascript
You might like
预告映像公开!第1章续篇剧场版动画《Princess Principal Crown Handler》4月10日上映!
2020/03/06 日漫
PHP中实现图片的锐化
2006/10/09 PHP
PHP新手上路(十四)
2006/10/09 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
JS 无法通过W3C验证的处理方法
2010/03/09 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
2020/02/24 Javascript
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
在漏洞利用Python代码真的很爽
2007/08/26 Python
python字符串常用方法
2018/06/14 Python
python对常见数据类型的遍历解析
2019/08/27 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
Python3 读取Word文件方式
2020/02/13 Python
python如何构建mock接口服务
2021/01/28 Python
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
新闻网站实习自我鉴定
2013/09/25 职场文书
公司综合部的成员自我评价分享
2013/11/05 职场文书
教师简历自我评价
2014/02/03 职场文书
医学专业职业生涯规划范文
2014/02/05 职场文书
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
2015年清明节演讲稿范文
2015/03/17 职场文书
道歉情书大全
2015/05/12 职场文书
中秋节随笔
2015/08/15 职场文书
ant design charts 获取后端接口数据展示
2022/05/25 Javascript