使用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 相关文章推荐
JQuery 浮动导航栏实现代码
Aug 27 Javascript
jQuery创建DOM元素实例解析
Jan 19 Javascript
JavaScript接口的实现三种方式(推荐)
Jun 14 Javascript
Jquery获取radio选中的值
May 05 jQuery
解决VUEX兼容IE上的报错问题
Mar 01 Javascript
vue 自定义 select内置组件
Apr 10 Javascript
详解webpack的proxyTable无效的解决方案
Jun 15 Javascript
微信小程序实现日历功能
Nov 27 Javascript
js的新生代垃圾回收知识点总结
Aug 22 Javascript
JavaScript实现轮播图效果代码实例
Sep 28 Javascript
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 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异步执行的详解
2013/06/03 PHP
遭遇php的in_array低性能问题
2013/09/17 PHP
php判断文件上传类型及过滤不安全数据的方法
2014/12/17 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
2015/03/03 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
深入理解AngularJs-scope的脏检查(一)
2017/06/19 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
python基于ID3思想的决策树
2018/01/03 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
python 动态调用函数实例解析
2019/10/21 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
在pycharm中文件取消用 pytest模式打开的操作
2020/09/01 Python
python中如何使用虚拟环境
2020/10/14 Python
python 基于opencv去除图片阴影
2021/01/26 Python
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
美国在线家具网站:GDFStudio
2021/03/13 全球购物
环境工程大学生自荐信
2013/10/21 职场文书
新闻学毕业生自荐信
2013/11/15 职场文书
先进工作者获奖感言
2014/02/08 职场文书
党员创先争优公开承诺书
2014/03/28 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
2014财务年终工作总结
2014/12/08 职场文书
大学生个人总结范文
2015/02/15 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书