jQuery是一款很優(yōu)秀的輕量級JavaScript框架，有其獨特的優(yōu)點。很多Web開發(fā)者都卻對其樂此不疲。因為在這個框架中，除了擁有豐富的客戶端處理功能、動畫功能外，更是提供了很自定義擴展接口，方便更多的開發(fā)者來擴展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ù)。調用如下：

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

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

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

調用如下：

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

擴展jQuery的Json技巧

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

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

#p#

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

jQuery.extend({      
/** * @see 將javascript數(shù)據(jù)類型轉換為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]+) \1\b/gi,      
child: {      name: "none",      age: -1    }  };   
 var json = $.toJSON(obj);    
var objx = $.evalJSON(json);  

【編輯推薦】

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