使用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 相关文章推荐
js列举css中所有图标的实现代码
Jul 04 Javascript
js复制到剪切板的实例方法
Jun 28 Javascript
js浮动图片的动态效果
Jul 10 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 Javascript
浅谈Javascript的静态属性和原型属性
May 07 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 Javascript
JavaScript判断是否是微信浏览器
Jun 13 Javascript
bootstrapfileinput实现文件自动上传
Nov 08 Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 Javascript
微信小程序 生成携带参数的二维码
Oct 23 Javascript
js实现双色球效果
Aug 02 Javascript
微信小程序向Java后台传输参数的方法实现
Dec 10 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
php 三维饼图的实现代码
2008/09/28 PHP
解析smarty模板中类似for的功能实现
2013/06/18 PHP
PHP四大安全策略
2014/03/12 PHP
php网站被挂木马后的修复方法总结
2014/11/06 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
破解Session cookie的方法
2006/07/28 Javascript
用jQuery实现检测浏览器及版本的脚本代码
2008/01/22 Javascript
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
基于jquery的无刷新分页技术
2011/06/11 Javascript
图片上传判断及预览脚本的效果实例
2013/08/07 Javascript
js闭包实例汇总
2014/11/09 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
canvas绘制七巧板
2017/02/03 Javascript
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
2017/12/24 jQuery
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
[49:08]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
python制作一个桌面便签软件
2015/08/09 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
python实现俄罗斯方块
2018/06/26 Python
python处理“
2019/06/10 Python
django框架使用orm实现批量更新数据的方法
2019/06/21 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
财务会计专业自荐书
2014/06/30 职场文书
年度安全生产目标责任书
2014/07/23 职场文书
电力培训心得体会
2014/09/02 职场文书
求职信如何撰写?
2019/05/22 职场文书
浅谈redis五大数据结构和使用场景
2021/04/12 Redis
Matplotlib绘制条形图的方法你知道吗
2022/03/21 Python