zoukankan      html  css  js  c++  java
  • json的应用 主要是如何解析一个json 和json 是怎么用的

    <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例子 不是简单的说明 而是应用到具体实践当中 希望你们能够看到我和其他人有不一样的地方,谢谢,

    另外我觉得学习也应该不是考转帖和知识例举出一些常识的概念 ,希望你们有所启发 也做一点东西出来 我们可以讨论交流

  • 相关阅读:
    点集拓扑的重要内容回顾
    Python(二):多进程与多线程
    动态规划(一):笨办法理解动态规划
    PyPI(一):pipreqs获取当前项目依赖包
    Effective python(五):内置模块
    Python(一):装饰器
    基础数学(十一):速算
    Effective python(四):元类及属性
    基础数学(十):计算与公式
    Effective python(三):类与继承
  • 原文地址:https://www.cnblogs.com/qylbg/p/3165939.html
Copyright © 2011-2022 走看看