<html>
<style type="text/css">
.leaf_div{
position :relative; left:10px;background-color:#00DB00;50px;
}
.leaf_e{50px;}
</style>
<script src="jquery-1.8.3.js"></script>
<script language="javascript">
function xs(obj){
if(document.getElementById('leaf_div').style.display=="none"){
//document.getElementById('leaf_div').style.display="block";
$("#leaf_div").fadeIn(1000);
}else{
//document.getElementById('leaf_div').style.display="none";
$("#leaf_div").fadeOut(1000);
}
//alert(obj.nextSibling.className);
//obj.nextSibling.className="leaf_div_hide";
}
$(document).ready(function(){
});
</script>
<script language="javascript">
var provinces =[{"北京":['通州','海淀']},{"河北":['廊坊','保定']},{"河南":['洛阳','郑州']}];
function getValue(){
alert(provinces[0]["北京"][0]); //通州 用 [0] 找到{"北京":['通州','海淀']} ,再用["北京"] 找到对应的市 注意用""
}
function getLeaf(obj){
//alert(obj.innerText);
//alert(provinces.length);
//for(var i=0 ;i<provinces.length;i++){
//alert(provinces[i]);
//}
for(var key in provinces){
//alert(key.length); 获得json数组元素个数 然后每一个元素 都是一个json对象 ,遍历这个json对象 ,每个json对象 里边放的都是 key:value 格式,遍历这个json对象
for(var j in provinces[key]){
// alert(j);
if(obj.innerText==j){
// alert(provinces[key][j][0]); // 通州
var leaf="";
for (var k in provinces[key][j] ){
// alert( provinces[key][j][k]); // 得到 海淀 通州
// document.getElementById('leaf_div').append
leaf+='<div class="leaf_e">'+ provinces[key][j][k]+'<div>';
// alert(leaf);
}
document.getElementById('leaf_div').innerHTML=leaf;
}// if 结束
}
//alert("对应的值是:" + provinces[key]);} alert(key);
}
if(document.getElementById('leaf_div').style.display=="none"){
document.getElementById('leaf_div').style.display="block";
}else{
document.getElementById('leaf_div').style.display="none";
}
}
</script>
<body>
<!--<span onclick="xs(this);">北京</span>-->
<span onclick="getLeaf(this);">北京</span>
<div class="leaf_div" id="leaf_div" style="display:none">
<!--<div class="leaf_e">通州 </div><div class="leaf_e" >海淀 </div>-->
</div>
<!--<button onclick="getValue();"></botton>-->
</body>
</html>
-------------------------------------------------------------
读者们可以把上边的代码赋值到html 文本上 然后运行一下,希望你能够有点体会,这棵树 还有许多不足 希望提出宝贵意见,
到最后应该是页面得到一个json数组之后 ,就能够完整的解析出来一棵树才对 我是这么设计的,
我的Json例子 不是简单的说明 而是应用到具体实践当中 希望你们能够看到我和其他人有不一样的地方,谢谢,
另外我觉得学习也应该不是考转帖和知识例举出一些常识的概念 ,希望你们有所启发 也做一点东西出来 我们可以讨论交流