使用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 相关文章推荐
js调用flash的效果代码
Apr 26 Javascript
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
JS获取父节点方法
Aug 20 Javascript
jQuery中:nth-child选择器用法实例
Dec 31 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
详解jQuery中的事件
Dec 14 Javascript
jQuery实现简易的输入框字数计数功能示例
Jan 16 Javascript
Js apply方法详解
Feb 16 Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
Javascript实现购物车功能的详细代码
May 08 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
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
PHP实现的MD5结合RSA签名算法实例
2017/10/07 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
2016/12/06 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
javascript设计模式之迭代器模式
2020/01/30 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
在vue项目中 实现定义全局变量 全局函数操作
2020/10/26 Javascript
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
python集合类型用法分析
2015/04/08 Python
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
浅述python2与python3的简单区别
2018/09/19 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
Django 创建新App及其常用命令的实现方法
2019/08/04 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
Python 序列化和反序列化库 MarshMallow 的用法实例代码
2020/02/25 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
Python3中小括号()、中括号[]、花括号{}的区别详解
2020/11/15 Python
Python创建自己的加密货币的示例
2021/03/01 Python
用C#语言写出与SQLSERVER访问时的具体过程
2013/04/16 面试题
经典演讲稿汇总
2014/05/19 职场文书
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
2021/03/31 jQuery
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python