使用jquery解析XML的方法
更新时间：2014年09月05日 12:02:58 投稿：shichen2014
这篇文章主要介绍了使用jquery解析XML的方法,代码简洁实用,需要的朋友可以参考下
本文实例讲述了使用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操作相关内容感兴趣的读者可查看本站专题：《jQuery操作xml技巧总结》
相关文章
这篇文章主要介绍了JS弹出层的绝对定位居中是如何实现的,需要的朋友可以参考下2014-02-02
如何获取select下拉框的值(option没有及有value属性)
获取select下拉框的值分为option没有value属性及有value属性时的两种情况，下面分别给出具体的实现代码，需要的朋友可以参考下2013-11-11
这篇文章主要为大家详细介绍了原生js滑动轮播封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-07-07
这篇文章主要为大家详细介绍了javascript实现弹幕墙效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
JavaScript+html5 canvas绘制渐变区域完整实例
这篇文章主要介绍了JavaScript+html5 canvas绘制渐变区域的方法,结合完整实例形式分析了canvas颜色调用与图形绘制的相关技巧,需要的朋友可以参考下2016-01-01
这篇文章主要为大家详细介绍了JavaScript探测CSS动画是否已经完成的方法，感兴趣的小伙伴们可以参考一下2016-08-08
下面小编就为大家带来一篇将JSON字符串转换成Map对象的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
这篇文章主要为大家详细介绍了两个版本的js+canvas实现转盘效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
这篇文章主要介绍了JavaScript数据结构与算法之二叉树遍历算法,结合实例形式详细分析了javascript二叉树的定义及先序遍历、中序遍历、后序遍历等相关遍历操作实现技巧,需要的朋友可以参考下2019-02-02
浏览器兼容的JS写法总结，涵盖的内容很全面，感兴趣的小伙伴们可以参考一下2016-04-04
最新评论