JQuery与xml的组合谈

JQuery与xml的组合谈
今天谈的是XML,学java的一定很了解这个，如果你在学校学java过来的，也许这些知识，你根本接触不到，
作为自学Java的我，可以说java是我的第一语言了，学习时间最长，实际运用却很少，唯一的好处就是面向
对像的概念了解到了。了解到了面向对像与面向过程的关系。这里当然不讨论这个话题，人的学习过程，其
实就是自我的突破过程，别人给的知识，永远都是哪样容易忘记，留不下任何痕迹。悟性很重要，启发性思维
，举一反三，要达到这种境界，可不要小看了哦。如果你还不懂得XML是什么就去补一下功课吧，毕竟这些在学
校里是很难学习得到的。只要你一踏进计算机的世界，自学，孤独就成了分不开的伴了。黑暗和夜也继日的
调试，重写，永不停息的敲写代码。我在学校里学的并不是java，种种原因，迫使自己学了它。从JSP中学到了
XML，扩展标记语言。别人都说XML是web应用中的世界性语言，其实我理解的并不是很深刻，是因为自己出道
很浅，项目经验不足所致。理解一样东西，能不能按其本身正确理解，其实很多时候，我们理解不正确，都是
原因我们自己还没有达到理解这种东西的境界。有人说知音难求，我能理解说这话人的心境，因为很多人的境
界等同不到他，自然理解不了你，知音真的是很难找的。当你利用不上某项东西的时候，你就永远发现不了
它的好处，你们同意这个观点吗？至少我现在同意，呵呵……
XML从一开始，我以为它只是Html的扩展，这有什么用呢？还学了文档类型定义，很多很多关于这方面
知识。有的时候我们会不会发现，知识很多，要用得到却很少，但是如果你不了解有这些知识，似乎又搞不出
什么东东来，我们时间很有限，不可能遍及所有知识并把它学懂学透。讲解这些东西，可能一两天也讲不完，
算了，我还是跳过吧。XML的定义我记不起来了。我只知道：
形如以下形式的就内容就被称之为XML文档：
<?xml version="1.0" encoding="utf-8"?>
<books>
<book name="js大全"></book>
<book name="js大全"></book>
<book name="js大全"></book>
<book name="js大全"></book>
</books>
这就是一个XML，不知道在看你承不承，反正我是认同了。如果你的英语够强，以上只有一个？需要加以解析
<?是文档声时，声明什么呢,声明了这个XML版本为1.0，文档的编码为utf-8,我不知道在这里可不可以大写，但
是我还是劝大写保持小写的习惯。以免不必要的麻烦。
我要说的，如今调用XML方便多了，我以前调用的时候，还要自己返回XMLRequest对像，如果版本不同，我还要
区分不同的web代理的类型。现在因为我们有了jquery，因为它里面已经替我们封装好了一切想好的调用。
下面用代码展示一下：
$(document).ready(function(){
loadXML();
});
var XML={
xml:null
};
function loadXML(){
$.ajax({
    type: "GET",
    url: "nav.xml",
    dataType: "xml",
    success: function (d) {
    XML.xml=$(d);
    var html="";
   $(d).find("nav_1").each(function(i){
   html+="<a id='"+$(this).attr("id")+"' href='"+$(this).attr("url")+"' onclick='reWHtml(this)'>";
   html+=$(this).attr("title")+"</a>";
   });
   $("#ul_nav li").hide();
   $("#ul_nav li").eq(0).show().html(html);
   },
error:function(d){alert('err:'+d)}
})
}
function reWHtml(id){
var i=$(id).attr("id");
var p_i=eval($(id).parent().attr("name"));
var xml_o=XML.xml.find("[id="+i+"]");
var html="";
  xml_o.children().each(function(i){
   html+="<a id='"+$(this).attr("id")+"' href='"+$(this).attr("url")+"' onclick='reWHtml(this)'>";
   html+=$(this).attr("title")+"</a>";
   });
  $("#ul_nav li").eq(p_i).show().html(html);
  for(var j=3;j>p_i;j--){
  $("#ul_nav li").eq(j).hide();
  }
}
这是我写的一个XML的简单应用，做的一个四级导航。当然XML文档我会给大家：
XML文档内容：
<?xml version="1.0" encoding="utf-8" ?>
<nav>
<nav_1 title="吃喝56" url="javascript:;" id="1">
<nav_2 title="地方菜系1" url="javascript:;" id="11" >
<nav_3 title="家乡菜" url="javascript:;" id="111">
<nav_4 title="菜中菜" url="#" id="1111"></nav_4>
<nav_4 title="菜中菜" url="#" id="1111"></nav_4>
<nav_4 title="菜中菜" url="#" id="1111"></nav_4>
<nav_4 title="菜中菜" url="#" id="1111"></nav_4>
</nav_3>
<nav_3 title="家乡菜" url="javascript:;" id="112"></nav_3>
</nav_2>
<nav_2 title="地方菜系1" url="javascript:;" id="12" ></nav_2>
<nav_2 title="地方菜系1" url="javascript:;" id="13" ></nav_2>
<nav_2 title="地方菜系1" url="javascript:;" id="14" ></nav_2>
<nav_2 title="地方菜系1" url="javascript:;" id="15" ></nav_2>
</nav_1>
<nav_1 title="吃喝2" url="javascript:;" id="2">
<nav_2 title="地方菜系2" url="javascript:;" id="21">
<nav_3 title="湖南菜" url="javascript:;" id="211"></nav_3>
<nav_3 title="湖南菜" url="javascript:;" id="212"></nav_3>
<nav_3 title="湖南菜" url="javascript:;" id="213"></nav_3>
<nav_3 title="湖南菜" url="javascript:;" id="214"></nav_3>
</nav_2>
<nav_2 title="地方菜系2" url="javascript:;" id="22">
<nav_3 title="湖南菜2" url="javascript:;" id="221"></nav_3>
<nav_3 title="湖南菜2" url="javascript:;" id="222"></nav_3>
<nav_3 title="湖南菜2" url="javascript:;" id="223"></nav_3>
<nav_3 title="湖南菜2" url="javascript:;" id="224"></nav_3>
</nav_2>
<nav_2 title="地方菜系2" url="javascript:;" id="23"></nav_2>
<nav_2 title="地方菜系2" url="javascript:;" id="24"></nav_2>
<nav_2 title="地方菜系2" url="javascript:;" id="25"></nav_2>
<nav_2 title="地方菜系2" url="javascript:;" id="26"></nav_2>
</nav_1>
<nav_1 title="吃喝3" url="javascript:;" id="3">
<nav_2 title="地方菜系3" url="javascript:;" id="31"></nav_2>
<nav_2 title="地方菜系3" url="javascript:;" id="32"></nav_2>
<nav_2 title="地方菜系3" url="javascript:;" id="33"></nav_2>
<nav_2 title="地方菜系3" url="javascript:;" id="34"></nav_2>
</nav_1>
</nav>
形如这个内容一样，当点选nav_1,就会跳到nav_2,当点选nav_2,就会跳到nav_3,当你点选nav_1的时候，
刚才谈出的nav_3就会自动消失，因为你没点nav_2,当然我还要给出Html.
html:
<ul id="ul_nav">
<li name="1">

</li>
<li name="2">

</li>
<li name="3">

</li>
<li name="4">

</li>
</ul>
这个代码的意思就是一级菜单在name="1"里面，二级菜单会生成在２里面，依次类推，呵呵…………应该不
难理解吧。
就到这里了，余下的部分，自己去思考吧。如果你还实现不出来，可以QQ我:550703900
调用方法就不用再说了吧，祝各位顺顺利利，开开心心地学到东西。
交流平台：QQ：550703900;
欢迎加入我的论坛：http://dfutureworld.com/
我的专业博客地址：http://ideafuture.iteye.com/