JQuery版本：jquery-1.4.2.min.js
需要通过IIS才能正确运行
DEMO.html
代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>StripingTable</title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$.get('myData.xml', function (d) {
$('body').append('<h1> Saturn给你推荐几本书： </h1>');
$('body').append('<dl />');
$(d).find('book').each(function () {
var $book = $(this);
var title = $book.attr("title");
var description = $book.find('description').text(); //这里是读取字段内容
var imageurl = $book.attr('imageurl'); //这里是读取字段属性值
var html = '<dt> <img class="bookImage" alt="" src="' + imageurl + '" /> </dt>';
html += '<dd> <span class="loadingPic" alt="Loading" />';
html += '<p class="title">' + title + '</p>';
html += '<p> ' + description + '</p>';
html += '</dd>';
$('dl').append($(html));
$('.loadingPic').fadeOut(2000);
});
});
});
</script>
</head>
<body>
<div>
<div id="info"></div>
</bdoy>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>StripingTable</title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$.get('myData.xml', function (d) {
$('body').append('<h1> Saturn给你推荐几本书： </h1>');
$('body').append('<dl />');
$(d).find('book').each(function () {
var $book = $(this);
var title = $book.attr("title");
var description = $book.find('description').text(); //这里是读取字段内容
var imageurl = $book.attr('imageurl'); //这里是读取字段属性值
var html = '<dt> <img class="bookImage" alt="" src="' + imageurl + '" /> </dt>';
html += '<dd> <span class="loadingPic" alt="Loading" />';
html += '<p class="title">' + title + '</p>';
html += '<p> ' + description + '</p>';
html += '</dd>';
$('dl').append($(html));
$('.loadingPic').fadeOut(2000);
});
});
});
</script>
</head>
<body>
<div>
<div id="info"></div>
</bdoy>
</html>
myData.xml
代码
<?xml version="1.0" encoding="utf-8" ?>
<book>
<book title="藏地密码" imageurl="images/Tibet_Code.jpg">
<description>
这里是书本的介绍
</description>
</book>
<book title="剑桥雅思6" imageurl="images/ielts.jpg">
<description>
这里是书本的介绍
</description>
</book>
<book title="Professional ASP.NET" imageurl="images/asp.jpg">
<description>
这里是书本的介绍
</description>
</book>
</book>
<book>
<book title="藏地密码" imageurl="images/Tibet_Code.jpg">
<description>
这里是书本的介绍
</description>
</book>
<book title="剑桥雅思6" imageurl="images/ielts.jpg">
<description>
这里是书本的介绍
</description>
</book>
<book title="Professional ASP.NET" imageurl="images/asp.jpg">
<description>
这里是书本的介绍
</description>
</book>
</book>