jquery解析xml

//live方法用来向未来添加的元素添加事件
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery.get()</title>
<style type="text/css">
ul{
     display:none;list-style:none;margin:0pt;padding:0pt;
    
}
h1{curosr:pointer;font-size:20px;}
</style>
</head>
<body><!--
<input type="button" value="SHow all books" id="all" />
<input type="button" value="SHow stories with quotes" id="total" />

<input type="button" value="Get last book" id="last" />

<input type="button" value="Books with year < 1900" id="year" />


--><p id="result"></p>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('h1').live('click',function(){
     $(this).next('ul').toggle('fast');
})     ;
$.ajax({
     url:'../common.xml',
     type:'GET',
     dataType:'xml',
     success:function(xml){
          var str='';
          $(xml).find('book').each(function(){
               var book=$(this);
               str+='<h1>'+book.find('name').text()+'</h1>';
               str+='<ul>';
               book.find('story').each(function(){
                    str+='<li>';
                    str+=$(this).find('title').text();
                    str+='</li>';
                   
               });
               str+='</ul>';
              
          });
          $('#result').html(str);
         
     }
    
    
});

}
);

</script>
</body>
</html>

 

posted @ 2014-04-04 17:26  wint  Views(126)  Comments(0)    收藏  举报