jquery解析XML(1)

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;
     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>

-----------------------------------------------------------------------
Simple is Beautiful，Less is More.
--FuGardenia