使用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 相关文章推荐
checkbox设置复选框的只读效果不让用户勾选
Aug 12 Javascript
JS获取当前网址、主机地址项目根路径
Nov 19 Javascript
网页右侧悬浮滚动在线qq客服代码示例
Apr 28 Javascript
JavaScript Function函数类型介绍
Apr 08 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
jquery点击展示与隐藏更多内容
Dec 03 Javascript
微信小程序开发图片拖拽实例详解
May 05 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
Sep 18 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
May 14 Javascript
js简单遍历获取对象中的属性值的方法示例
Jun 19 Javascript
jQuery带控制按钮轮播图插件
Jul 31 jQuery
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 之 没有mysql支持时的替代方案
2006/10/09 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
自动最大化窗口的Javascript代码
2013/05/22 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
jQuery插件实现大图全屏图片相册
2015/03/14 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
jQuery实现HTML表格单元格的合并功能
2016/04/06 Javascript
JS中的数组方法笔记整理
2016/07/26 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
jquery中为什么能用$操作
2019/06/18 jQuery
antd配置config-overrides.js文件的操作
2020/10/31 Javascript
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
python sort、sorted高级排序技巧
2014/11/21 Python
Python图像处理之颜色的定义与使用分析
2019/01/03 Python
如何基于python实现归一化处理
2020/01/20 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
路政管理专业个人自荐信范文
2013/11/30 职场文书
英文求职信写作小建议
2014/02/16 职场文书
作风大整顿心得体会
2014/09/10 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
党的群众路线调研报告
2014/11/03 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js
gateway网关接口请求的校验方式
2021/07/15 Java/Android
SQL SERVER中的流程控制语句
2022/05/25 SQL Server