首页 > PHP资讯 > HTML5培训技术 > jQuery中的Json使用技巧介绍

jQuery中的Json使用技巧介绍

HTML5培训技术

接下来给大伙介绍几个例子,相信做网页的朋友都遇到n级菜单的情景,但点击某菜单按钮时,如果它的子菜单是显示的,则隐藏子菜单,如果子菜单隐藏,则显示出来,传统的javascript做法是先用getElementById取出子菜单所在容器的id,在判断该容器的扩展Jquery的Json

如果等于则设为block,如果不等于这设为none,如果在将效果设置复杂一点,当点击按钮时,不是忽然隐藏和显示子菜单,而是高度平滑的转变,这时就要通过setTimeout来设置子菜单的height了。

再复杂一点透明度也平滑的消失和显现,这时显现下来需要编写很多代码,如果 js基础不好的朋友可能只能从别人写好的代码拿过来修改了!jQuery实现上面效果只需要1句话就行,$("#a").toggle("slow"),,学完jQuery后还需要抄袭修改别人的代码吗?下面我们逐个介绍jQuery用于效果处理的方法。

本文在jQuery基础上扩展了其处理json字符串能力,伟大的jQuery将会更伟大用jQuery写javascript非常高效,jQuery对ajax的封装也非常到位;使用jQuery一段时间后发现,jQuery在处理json字符串方面功能不是很强,至少比prototype.js差远了。

以前用习惯了扩展Jquery的Json,在进行ajax开发时,处理json数据非常方便;而在jQuery中,只提供了一个简单的jQuery.getJSON()方法,并未提供jQuery本身对json数据的转换处理,将json字符串转换为javascript数据对象还比较容易利用eval()函数即可,但要将javascript的数据类型转换成json字符串就比较难了;刚开始不得同
时使用prototype.js和jQuery。

扩展Jquery的Json

//扩展jQuery对json字符串的转换  

jQuery.extend({  

  /** * @see 将json字符串转换为对象 * @param json字符串 * @return 返回object,array,string等对象 */ 

  evalJSON: function(strJson) {  

    return eval("(" + strJson + ")"); 

  }  

});  

jQuery.extend({  

  /** * @see 将javascript数据类型转换为json字符串 * @param 待转换对象,支持object,array,string,function,number,boolean,regexp * @return 返回json字符串 */ 

  toJSON: function(object) {  

    var type = typeof object; 

    if ('object' == type) { 

      if (Array == object.constructor) type = 'array'; 

      else if (RegExp == object.constructor) type = 'regexp'; 

      else type = 'object'; 

    }  

    switch (type) {  

    case 'undefined':  

    case 'unknown':  

      return;  

      break;  

    case 'function':  

    case 'boolean':  

    case 'regexp':  

      return object.toString(); 

      break;  

    case 'number':  

      return isFinite(object) ? object.toString() : 'null'; 

      break;  

    case 'string':  

      return '"' + object.replace(/(\|")/g, "\$1").replace(/n|r|t/g, function() { 

        var a = arguments[0]; 

        return (a == 'n') ? '\n': (a == 'r') ? '\r': (a == 't') ? '\t': "" 

      }) + '"'; 

      break;  

    case 'object':  

      if (object === null) return 'null'; 

      var results = []; 

      for (var property in object) { 

        var value = jQuery.toJSON(object[property]); 

        if (value !== undefined) results.push(jQuery.toJSON(property) + ':' + value); 

      }  

      return '{' + results.join(',') + '}'; 

      break;  

    case 'array':  

      var results = []; 

      for (var i = 0; i < object.length; i++) { 

        var value = jQuery.toJSON(object[i]); 

        if (value !== undefined) results.push(value); 

      }  

      return '[' + results.join(',') + ']'; 

      break;  

    }  

  }  

});示例:  

var obj = {  

  name: "sean",  

  friend: ["fans", "bruce", "wawa"], 

  action: function() {  

    alert("gogogog")  

  },  

  boy: true,  

  age: 26,  

  reg: /b([a-z]+) 1b/gi,  

  child: {  

    name: "none",  

    age: -1  

  }  

};  

var json = $.toJSON(obj);  

var objx = $.evalJSON(json); 

HTML5培训技术

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持3不支持0