jquery解析XML(1)

最新推荐文章于 2025-08-23 02:53:08 发布

转载最新推荐文章于 2025-08-23 02:53:08 发布 · 52 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yunqianduan/p/3929211.html

文章标签：

#javascript #数据库 #ViewUI

本文演示如何利用jQuery解析XML文件，通过HTML、CSS和JavaScript实现数据展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

转载于:https://www.cnblogs.com/yunqianduan/p/3929211.html