使用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 相关文章推荐
跨浏览器的事件对象介绍
Jun 27 Javascript
Backbone.js中的集合详解
Jan 14 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
Mar 14 Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 Javascript
深入理解JavaScript的React框架的原理
Jul 02 Javascript
jQuery中prepend()方法使用详解
Aug 11 Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 Javascript
深入学习js瀑布流布局
Oct 14 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
Jan 13 Javascript
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
vue中用 async/await 来处理异步操作
Jul 18 Javascript
详解JavaScript 事件流
Sep 02 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
基于mysql的论坛(2)
2006/10/09 PHP
php文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
基于php伪静态的实现详细介绍
2013/04/28 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
详解php魔术方法(Magic methods)的使用方法
2016/02/14 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
jQuery技巧总结
2011/01/01 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
ES2015 Symbol 一种绝不重复的值
2016/12/25 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
Python实现把xml或xsl转换为html格式
2015/04/08 Python
python安装教程
2018/02/28 Python
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
Python for循环搭配else常见问题解决
2020/02/11 Python
python装饰器实现对异常代码出现进行自动监控的实现方法
2020/09/15 Python
python元组拆包实现方法
2021/02/28 Python
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
春季运动会广播稿大全
2014/02/19 职场文书
文化活动实施方案
2014/03/28 职场文书
关于环保的建议书
2014/05/12 职场文书
电教室标语
2014/06/20 职场文书
学习雷锋标语
2014/06/25 职场文书
教育实习指导教师评语
2014/12/31 职场文书
财务个人年度总结范文
2015/02/26 职场文书
人民调解协议书
2016/03/21 职场文书
未来,这5大方向都很适合创业
2019/07/22 职场文书