怎么自定義一個(gè)jQuery擴(kuò)展接口

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

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

//擴(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);

關(guān)于怎么自定義一個(gè)jQuery擴(kuò)展接口就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。