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. JBPM学习(一)：实现一个简单的工作流例子全过程

    test.png test.jpdl.xml <?xml version="1.0" encoding="UTF-8"?> <process ...

  2. Discuz建站教程：本地安装discuz网站

    网站建目前都很简单,建站容易,管理难,网站做大优化更难.本人有建站经验,目前给大家分享一下如何建站,当然,目前使用的是本地建站,因为非本地建站需要购买域名和网站空间,当然,朋友们想真正建站的,对于一些 ...

  3. node.js在windows下的学习笔记(1)---安装node.js

    1.首先打开http://www.nodejs.org/ 2.选择DOWNLOADS,跳转到下面的画面,我的系统是windows7的32位.所以选择.msi的32bit版本. 3.下载后,得到一个5. ...

  4. G++ 教程（转）

    简介      gcc and g++分别是GNU的c & c++编译器 gcc/g++在执行编译工作的时候,总共需要4步  1.预处理,生成.i的文件[预处理器cpp]  2.将预处理后的文 ...

  5. Android记录6--ViewPage+Fragment的使用例子

    Android记录6--ViewPage+Fragment的使用例子 2013年9月6日Fragment学习 Fragment这个东西,我到现在才接触到,之前没有用到过,关于Fragment这个东西在 ...

  6. hysdk代码解析

    navigator 1. navigator.userAgent 浏览器的用户代理字符串 2. navigator.platform 浏览器所在的系统平台 window 1. window.devic ...

  7. 【转】MyEclipse第一个Servlet程序

    转自:http://blog.csdn.net/wangdingqiaoit/article/details/7674367 前言 本文旨在帮助学习java web开发的人员,熟悉环境,在Win7系统 ...

  8. ognl表达式和s标签

    1.ognl表达式: Ognl上下文对象:(他是一个可以存储数据的空间结构,而且在这个结构中包含之前 jsp中的作用域对象) (放在 value stack控件),当前访问的Action这个上下文对象 ...

  9. 编译inotify报错

    错误如下: configure: error: no acceptable C compiler found in $PATH 这是因为没有找到编译器的原因造成的 解决方法: 安装gcc [root@ ...

  10. java Spring 生命周期

    1.初始化回调 <bean name="userService" class="com.sun.service.UserService" init-met ...