DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> XML學習教程 >> XML詳解 >> 幾分鐘教您擴展jQuery的Json技巧說明
幾分鐘教您擴展jQuery的Json技巧說明
編輯:XML詳解     

接下來給大伙介紹幾個例子,相信做網頁的朋友都遇到n級菜單的情景,但點擊某菜單按鈕時,如果它的子菜單是顯示的,則隱藏子菜單,如果子菜單隱藏,則顯示出來,傳統的Javascript做法是先用getElementById取出子菜單所在容器的id,在判斷該容器的擴展Jquery的JSon

如果等於則設為block,如果不等於這設為none,如果在將效果設置復雜一點,當點擊按鈕時,不是忽然隱藏和顯示子菜單,而是高度平滑的轉變,這時就要通過setTimeout來設置子菜單的height了。

再復雜一點透明度也平滑的消失和顯現,這時顯現下來需要編寫很多代碼,如果 JS 基礎不好的朋友可能只能從別人寫好的代碼拿過來修改了!jQuery實現上面效果只需要1句話就行,$("#a").toggle("slow"),,學完jQuery後還需要抄襲修改別人的代碼嗎?下面我們逐個介紹jQuery用於效果處理的方法。

  • 詳解幾種JSON建構的結構進行說明
  • 漫談JSON類的相關問題和及其使用方法
  • 闡述基於的JSON數組特殊交互說明
  • 大體進行對JSon_Decode()實例舉例說明
  • 深度剖析JSON協議對與PHP產生的種種問題

本文在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); 
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved