XML:
<?xml version="1.0" encoding="utf-8"
?>
<books>
<book title="我的爱"
imageurl="pic/2.jpg">
<description>
bbbbbbbbbbbbbbbbbb
</description>
</book>
<book title="我的love"
imageurl="pic/1.jpg">
<description>
aaaaaaaaaaaaaaaaaaa
</description>
</book>
<book title="我的Jquery"
imageurl="pic/3.jpg">
<description>
ccccccccccccccccc
</description>
</book>
</books>
HTML:
<html>
<head>
<title>Jquery
加载XML</title>
<script src="Scripts/jquery-1.4.1-vsdoc.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$.post('XMLFile.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>
</body>
</html>