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. 自定义Dictionary支持线程安全

    本文转载:http://www.cnblogs.com/kiddo/archive/2008/09/25/1299089.html 我们说一个数据结构是线程安全指的是同一时间只有一个线程可以改写它.这 ...

  2. 【转】C++的继承与多态：为什么需要虚函数

    转自:http://www.educity.cn/zk/gjyy/201306271108011682.htm 多态性是面向对象设计语言的基本特征.仅仅是将数据和函数捆绑在一起,进行类的封装,使用一些 ...

  3. Nginx/Apache图片缩略图技术

    1,目的 2,使用方式 3,Nginx + Linux 缩略图实现 3.1,原理 3.2,nginx配置实现 3.3,例子 4,Apache + Windows缩略图实现 4.1,环境 4.2,原理 ...

  4. careercup-树与图 4.4

    4.4 给定一棵二叉树,设计一个算法,创建含有某一深度上所有结点的链表(比如,若一棵树的深度为D,则会创建D个链表). 类似于leetcode:Populating Next Right Pointe ...

  5. iphone4s 关于大于400M的视频无法拷贝的问题

    方法有二: 1.可以用win7等高版本的系统拷出 2.可以用Itools工具导出

  6. redux学习笔记

    中文api:http://cn.redux.js.org/docs/react-redux/troubleshooting.html 3.6 Reducer Store 收到 Action 以后,必须 ...

  7. SQLSERVER一些公用DLL的作用解释

    如果你的SQLSERVER安装在C盘的话,下面的路径就是相应SQLSERVER版本的公用DLL的存放路径 SQL2005 C:\Program Files\Microsoft SQL Server\9 ...

  8. import com.sun.image.codec.jpeg.JPEGCodec不通过 Eclipse找不到包

    Eclipse默认把这些受访问限制的API设成了ERROR.只要把Windows-Preferences-Java-Complicer-Errors/Warnings里面的Deprecated and ...

  9. python 脚本查看微信把你删除的好友--win系统版

    PS:目测由于微信改动,该脚本目前不起作用 下面截图来自原作者0x5e 相信大家在微信上一定被上面的这段话刷过屏,群发消息应该算是微信上流传最广的找到删除好友的方法了.但群发消息不仅仅会把通讯录里面所 ...

  10. C# 类是怎么执行的？

    C# 类是怎么执行的? public class Person{ static person(){} //不写,默认也有个空的 public person(){}//不写,默认也有个空的 public ...