怎么自定義一個jQuery擴展接口

這篇文章給大家介紹怎么自定義一個jQuery擴展接口，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

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

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

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

$.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一段時間后發現，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]+) \1\b/gi,      child: {      name: "none",      age: -1    }  };    var json = $.toJSON(obj);    var objx = $.evalJSON(json);

關于怎么自定義一個jQuery擴展接口就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。