几分钟教您扩展jQuery的Json技巧说明
创始人
2024-06-19 14:01:40
0

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

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

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

本文在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代码:

  1. //扩展jQuery对json字符串的转换  
  2. jQuery.extend({  
  3.   /** * @see 将json字符串转换为对象 * @param json字符串 * @return 返回object,array,string等对象 */  
  4.   evalJSON: function(strJson) {  
  5.     return eval("(" + strJson + ")");  
  6.   }  
  7. });  
  8. jQuery.extend({  
  9.   /** * @see 将javascript数据类型转换为json字符串 * @param 待转换对象,支持object,array,string,function,number,boolean,regexp * @return 返回json字符串 */  
  10.   toJSON: function(object) {  
  11.     var type = typeof object;  
  12.     if ('object' == type) {  
  13.       if (Array == object.constructor) type = 'array';  
  14.       else if (RegExp == object.constructor) type = 'regexp';  
  15.       else type = 'object';  
  16.     }  
  17.     switch (type) {  
  18.     case 'undefined':  
  19.     case 'unknown':  
  20.       return;  
  21.       break;  
  22.     case 'function':  
  23.     case 'boolean':  
  24.     case 'regexp':  
  25.       return object.toString();  
  26.       break;  
  27.     case 'number':  
  28.       return isFinite(object) ? object.toString() : 'null';  
  29.       break;  
  30.     case 'string':  
  31.       return '"' + object.replace(/(\\|\")/g, "\\$1").replace(/\n|\r|\t/g, function() {  
  32.         var a = arguments[0];  
  33.         return (a == '\n') ? '\\n': (a == '\r') ? '\\r': (a == '\t') ? '\\t': ""  
  34.       }) + '"';  
  35.       break;  
  36.     case 'object':  
  37.       if (object === null) return 'null';  
  38.       var results = [];  
  39.       for (var property in object) {  
  40.         var value = jQuery.toJSON(object[property]);  
  41.         if (value !== undefined) results.push(jQuery.toJSON(property) + ':' + value);  
  42.       }  
  43.       return '{' + results.join(',') + '}';  
  44.       break;  
  45.     case 'array':  
  46.       var results = [];  
  47.       for (var i = 0; i < object.length; i++) {  
  48.         var value = jQuery.toJSON(object[i]);  
  49.         if (value !== undefined) results.push(value);  
  50.       }  
  51.       return '[' + results.join(',') + ']';  
  52.       break;  
  53.     }  
  54.   }  
  55. });示例:  
  56. var obj = {  
  57.   name: "sean",  
  58.   friend: ["fans", "bruce", "wawa"],  
  59.   action: function() {  
  60.     alert("gogogog")  
  61.   },  
  62.   boy: true,  
  63.   age: 26,  
  64.   reg: /\b([a-z]+) \1\b/gi,  
  65.   child: {  
  66.     name: "none",  
  67.     age: -1  
  68.   }  
  69. };  
  70. var json = $.toJSON(obj);  
  71. var objx = $.evalJSON(json); 

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
Windows恶意软件20年“... 在Windows的早期年代,病毒游走于系统之间,偶尔删除文件(但被删除的文件几乎都是可恢复的),并弹...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
着眼MAC地址,解救无法享受D... 在安装了DHCP服务器的局域网环境中,每一台工作站在上网之前,都要先从DHCP服务器那里享受到地址动...
为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...