jquery解析XML文件

html代码

<!DOCTYPE html>
<html>
<head>
<title>解析XML</title>
<meta charset='utf-8' />
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="book">
</div> </body>

</html>

css代码

<style type="text/css">
#book{
position: relative;
border: 1px green solid;
width: 200px;
}
#book .book{
position: relative;
border: 2px #aaa solid;
}
#book .name{
position: relative;
background-color: #999;
color: #fff;
}
#book .title{
border-bottom: 1px #999 solid;

}

book .content{

position: relative;
word-break:break-all;
word-wrap:break-all;

}

</style>

js代码

<script type="text/javascript">
$.get('book.xml',function(xml){
var len = $(xml).find('book').length;
$(xml).find("book").each(function() {
var book = $(this);
for (var i = 0; i < book.length; i++) {
var name = book.attr("name");//读取节点属性
var title = book.find("title").text();//读取子节点的值
var content = book.find("content").text();
var html = '<div class="book">';
html += '<div class="name">'+name+'</div>';
html += '<div class="title">'+title+'</div>';
html += '<div class="content">'+content+'</div>';
var content = book.find("content").text();
$('#book').append(html);
};
});
});

</script>

XML文件 book.xml

    <?xml version="1.0" encoding="UTF-8"?>
<books>
<book name="MongoDB">
<title>MongoDB</title>
<content>MongoDBMongoDBMongoDBMongoDBMongoDBMongoDBMongoDBMongoDB</content>
</book>
<book name="Nodejs">
<title>Nodejs</title>
<content>MongoDBMongoDBMongoDBMongoDBMongoDBMongoDBMongoDBMongoDB</content>
</book>
<book name="Bootstrap">
<title>Bootstrap</title>
<content>MongoDBMongoDBMongoDBMongoDBMongoDBMongoDBMongoDBMongoDB</content>
</book>
<book name="JavaScript">
<title>JavaScript</title>
<content>JavaScriptJavaScriptJavaScriptJavaScriptJavaScript</content>
</book>
</books>

jquery解析XML(1)的更多相关文章

  1. 使用Jquery解析xml的两种方法

    第一种方案(最稳妥): 先将String格式的xml转换为xml对象,然后再用Jquery解析xml对象 var returnDataXml = parseXML(returnData); var p ...

  2. 160928、JQuery解析XML数据的demo

    用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做.下面我们来总结几个使用JQuery解析XML的例子. 方案1 当后台返回的数据类型是xml对象 ...

  3. 使用jQuery解析xml时command节点解析失败

    jQuery版本1.8.3 待解析的xml为: <message><user><command>Login</command></message& ...

  4. JQuery解析XML数据的几个例子

    用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做.下面我们来总结几个使用JQuery解析XML的例子. 第一种方案: <script ty ...

  5. JQuery 解析xml

    JQuery 可以通过 $.get() 或 $.post() 方法来加载 xml.     JQuery 解析 XML 与解析 DOM 一样, 可以使用 find(), children() 等函数来 ...

  6. 轻松使用jquery解析XML

    xml文件结构:books.xml <?xml version="1.0" encoding="UTF-8"?><root>    &l ...

  7. 160708、JQuery解析XML数据的demo

    用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做.下面我们来总结几个使用JQuery解析XML的例子. 方案1 当后台返回的数据类型是xml对象 ...

  8. JQuery -- Jquery 中的Ajax, Jquery解析xml文件

    1. JQuery 对 Ajax 操作进行了封装,在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(),第三层是$.getScript ...

  9. 几个JQuery解析XML的程序例子

    用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做.下面我们来总结几个使用JQuery解析XML的例子. 第一种方案: <script ty ...

随机推荐

  1. 视频播放(iOS开发)

    视频播放 一.视频播放介绍(5种实现方案) AVPlayer 优点 可以自定义UI,进行控制 缺点 单纯的播放,没有控制UI,而且如果要显示播放界面,需要借助AVPlayerLayer,添加图层到需要 ...

  2. POJ 2728 Desert King

    Description David the Great has just become the king of a desert country. To win the respect of his ...

  3. 谷歌Flash不是最新版

     http://www.adobe.com/support/flashplayer/debug_downloads.html

  4. 使用webview如何做超时判断

    在加载网页时给一个timer定时器,规定超时时间,然后再超时时间的方法中提示超时 如果没有超时,则在webview协议中的“加载完成”方法中 取消timer定时器 - (void)openWebVie ...

  5. javascript Deferred和递归次数限制

    function runAsyncTTS(text,speecher,audiopath) { var def = jQuery.Deferred(); var args = {"Synth ...

  6. mongodb的地理位置索引

    mongoDB支持二维空间索引,使用空间索引,mongoDB支持一种特殊查询,如某地图网站上可以查找离你最近的咖啡厅,银行等信息.这个使用mongoDB的空间索引结合特殊的查询方法很容易实现.前提条件 ...

  7. 自定义HttpHandler配置iis8.0

    配置环境,window8 ,iis8.0,.net Framework4.0,托管管道模式“经典” 步骤 (1)进入iis管理器,选中要设置的网站-->功能视图-->MIME类型--> ...

  8. python 2016 大会 pyconsk ppt ---python dtrace

    https://github.com/pyconsk/2016-slides PyCon SK 2016 - March 2016 1DTrace and PythonJesús Cea Aviónj ...

  9. hdu1047(Java)大数相加

    题目大意:输入n组数据,每组数据中又有若干长度不大于100的整数,以0结束每组数据的输入,求每组中数据之和.每两组数据输入之间有一行空格,输出也是如此. Integer Inquiry Time Li ...

  10. dateTimePicker日期时间插件-----限定节假日调休的可选择性

    需求:在项目中需要一款这样的日期插件,可以选择年月日,时分秒,对法定节假日不能选择,因法定节假日进行的调休可以选择: 现在使用的比较多的日期插件比如:Wdatepicker,jqueryUI的date ...