轻松使用jquery解析XML

xml文件结构:books.xml

<? xml version="1.0" encoding="UTF-8" ?>
< root >
     < book  id ="1" >
         < name > 深入浅出extjs </ name >
         < author > 张三 </ author >
         < price > 88 </ price >
     </ book >
     < book  id ="2" >
         < name > 锋利的jQuery </ name >
         < author > 李四 </ author >
         < price > 99 </ price >
     </ book >
     < book  id ="3" >
         < name > 深入浅出flex </ name >
         < author > 王五 </ author >
         < price > 108 </ price >
     </ book >
     < book  id ="4" >
         < name > java编程思想 </ name >
         < author > 钱七 </ author >
         < price > 128 </ price >
     </ book >
</ root >

页面代码:

<! 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解析xml </ title >
< script  type ="text/javascript"  src ="js/jquery-1.4.2.min.js" ></ script >
< script  type ="text/javascript" >
    $( function () {
        $.post('books.xml', function (data) {
             // 查找所有的book节点
             var  s = "" ;
            $(data).find('book').each( function (i) {
                 var  id = $( this ).attr('id');
                 var  name = $( this ).children('name').text();
                 var  author = $( this ).children('author').text();
                 var  price = $( this ).children('price').text();
                s += id + " &nbsp;&nbsp;&nbsp;&nbsp; " + name + " &nbsp;&nbsp;&nbsp;&nbsp; " + author + " &nbsp;&nbsp;&nbsp;&nbsp; " + price + " <br> " ;
            } );
            $('#mydiv').html(s);
        } );
    } );
</ script >
</ head >
< body >
     < div  id ='mydiv' ></ div >
</ body >
</ html >

效果图: