jQuery是一款很優(yōu)秀的輕量級(jí)JavaScript框架，有其獨(dú)特的優(yōu)點(diǎn)。很多Web開發(fā)者都卻對(duì)其樂此不疲。因?yàn)樵谶@個(gè)框架中，除了擁有豐富的客戶端處理功能、動(dòng)畫功能外，更是提供了很自定義擴(kuò)展接口，方便更多的開發(fā)者來擴(kuò)展jQuery。

51CTO推薦專題： jQuery從入門到精通

$.extend({  
      max: function(a, b) {  
          return a > b ? a : b;  
      },  
      min: function(a, b) {  
          return a > b ? b : a;  
      },  
      avg: function(a, b) {  
          return a / b;  
      }  
});  

該示例用以在jQuery中增加新函數(shù)，該函數(shù)是靜態(tài)函數(shù)。調(diào)用如下：

jQuery.min(2,3); // => 2  
jQuery.max(4,5); // => 5 

如果針對(duì)組件的功能擴(kuò)展函數(shù)，同樣也是很簡單。比如，你想要擴(kuò)展TextBox的功能，使到它在獲取焦點(diǎn)時(shí)，高亮顯示；失去焦點(diǎn)時(shí)，則取消高亮。當(dāng)然，高亮的效果可以使用CSS來實(shí)現(xiàn)，因此，你可以用一個(gè)顏色的名稱作為參數(shù)進(jìn)行調(diào)用。代碼如下：

$.fn.hightlight = function(colorName) {  
    this.mouseover(function() {  
        $(this).css('background-color', colorName);   //this對(duì)是對(duì)組件自身的引用  
    });  
    this.mouseout(function() {  
        $(this).css('background-color', '');  
    });  
} 

調(diào)用如下：

$(function() {  
    $('#test').hightlight('red');  
});  

擴(kuò)展jQuery的Json技巧

下面我們將分析在jQuery基礎(chǔ)上擴(kuò)展了其處理Json字符串能力，偉大的jQuery將會(huì)更偉大用jQuery寫JavaScript非常高效，jQuery對(duì)Ajax的封裝也非常到位；使用jQuery一段時(shí)間后發(fā)現(xiàn)，jQuery在處理Json字符串方面功能不是很強(qiáng)，至少比prototype.js差遠(yuǎn)了。

以前用習(xí)慣了擴(kuò)展Jquery的Json，在進(jìn)行Ajax開發(fā)時(shí)，處理json數(shù)據(jù)非常方便；而在jQuery中，只提供了一個(gè)簡單的jQuery.getJSON()方法，并未提供jQuery本身對(duì)json數(shù)據(jù)的轉(zhuǎn)換處理，將json字符串轉(zhuǎn)換為Javascript數(shù)據(jù)對(duì)象還比較容易利用eval()函數(shù)即可，但要將Javascript的數(shù)據(jù)類型轉(zhuǎn)換成json字符串就比較難了；剛開始不得同時(shí)使用prototype.js和jQuery。擴(kuò)展Jquery的Json代碼：

#p#

//擴(kuò)展jQuery對(duì)json字符串的轉(zhuǎn)換    
jQuery.extend({     
 /** * @see 將json字符串轉(zhuǎn)換為對(duì)象   
     * @param json字符串   
     * @return 返回object,array,string等對(duì)象 */      
 evalJSON: function(strJson)   
{      return eval("(" + strJson + ")");      
}    
}); 

jQuery.extend({      
/** * @see 將javascript數(shù)據(jù)類型轉(zhuǎn)換為json字符串   
* @param 待轉(zhuǎn)換對(duì)象,支持  
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]+) \1\b/gi,      
child: {      name: "none",      age: -1    }  };   
 var json = $.toJSON(obj);    
var objx = $.evalJSON(json);  

【編輯推薦】

1. 改變獲取對(duì)象方式 ***的jQuery選擇器
2. 5種方法教你用jQuery重寫表單驗(yàn)證
3. 你應(yīng)該學(xué)習(xí)jQuery的七大理由
4. 即刻提升jQuery性能的十個(gè)技巧
5. 12種jQuery性能優(yōu)化方法解析