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

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

創(chuàng)新互聯(lián)專注于企業(yè)網(wǎng)絡(luò)營銷推廣、網(wǎng)站重做改版、五指山網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5高端網(wǎng)站建設(shè)、商城網(wǎng)站開發(fā)、集團公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為五指山等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

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

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

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

調(diào)用如下：

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

擴展jQuery的Json技巧

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

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

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

jQuery.extend({      /** * @see 將javascript數(shù)據(jù)類型轉(zhuǎn)換為json字符串   * @param 待轉(zhuǎn)換對象,支持  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)于怎么自定義一個jQuery擴展接口就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

文章標(biāo)題：怎么自定義一個jQuery擴展接口
文章出自：http://muchs.cn/article18/pidjdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、外貿(mào)建站、手機網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、、品牌網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)