使用jquery解析XML示例代码


Posted in Javascript onSeptember 05, 2014

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>

效果图:

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 Javascript
更换select下拉菜单背景样式的实现代码
Dec 20 Javascript
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
Nov 16 Javascript
利用jQuery解析获取JSON数据
Apr 08 jQuery
bootstrap table单元格新增行并编辑
May 19 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
Nov 01 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
Nov 19 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 #Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 #Javascript
JS来动态的修改url实现对url的增删查改
Sep 05 #Javascript
jQuery表格插件datatables用法总结
Sep 05 #Javascript
jQuery中index()的用法分析
Sep 05 #Javascript
使用jquery解析XML的方法
Sep 05 #Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 #Javascript
You might like
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
php类
2006/11/27 PHP
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
深入浅出php socket编程
2015/05/13 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
阿里云的WindowsServer2016上部署php+apache
2018/07/17 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
Jquery升级新版本后选择器的语法问题
2010/06/02 Javascript
腾讯UED 漂亮的提示信息效果代码
2011/09/12 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
谈谈Jquery中的children find 的区别有哪些
2015/10/19 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
2016/12/14 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
2017/05/13 jQuery
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
JavaScript实现动态留言板
2020/03/16 Javascript
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
python常见数制转换实例分析
2015/05/09 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
分享8点超级有用的Python编程建议(推荐)
2019/10/13 Python
python迭代器常见用法实例分析
2019/11/22 Python
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
自我鉴定怎么写
2013/12/05 职场文书
弘扬职业精神演讲稿
2014/03/20 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
乡镇干部先进性教育活动个人整改措施
2014/09/16 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers