jQuery插件開發(fā)的兩種方法及$.fn.extend的詳解

本貼純屬借鑒大神之作,請(qǐng)各位勿噴,嘿嘿

jQuery開發(fā)分為兩種:1、類級(jí)別,2、對(duì)象級(jí)別

一、類級(jí)別
???????類級(jí)別你可以理解為擴(kuò)展的jQuery類,最明顯是$.ajax(...),相當(dāng)于靜態(tài)方法。開發(fā)其擴(kuò)展方法時(shí)使用$.extend()方法,即jQuery.extend(object);

$.extend({
  add:function(a,b){
    return a+b;
  },
  minus:function(a,b){
    return a-b;
  }
})

頁(yè)面中調(diào)用代碼如下:

var a = $.add(2,1);
var m = $.minus(2,1);

二、對(duì)象級(jí)別
???????對(duì)象級(jí)別則可以理解為基于對(duì)象的擴(kuò)展,如$("#table").changeColor(...),這里的changeColor就是基于對(duì)象的擴(kuò)展,也就是自己給$("#table")寫的一個(gè)方法。開發(fā)其擴(kuò)展方法時(shí)使用$.fn.extend(...),即jQuery.fn.extend(object);

$.fn.extend({
  add:function(a,b){
    return a+b;
  },
  minus:function(a,b){
    return a-b;
  }
})

頁(yè)面調(diào)用代碼如下:

$("#div1").add(2,1);
$("#div2").minus(2,1);

稍微擴(kuò)展一下再寫另一個(gè)例子便于咱們學(xué)習(xí)理解:

$.xy = { 
  add:function(a,b){
    return a+b;
  }, 
  minus:function(a,b){
    return a-b;
  }, 
  voidMethod:function(){
    alert("void"); 
  } 
}; 
var i = $.xy.add(3,2); 
var m = $.xy.minus(3,2); 
$.xy.voidMethod(); 
如果到這里大家還不是很理解$.extend()和$.fn.extend()的話,下面會(huì)再直白的解釋一下。

???????$.fn是指jquery的命名空間,加上fn上的方法及屬性,會(huì)對(duì)jquery實(shí)例每一個(gè)有效。如擴(kuò)展$.fn.abc()那么你可以這樣子調(diào)用:$("#div").abc();
另外$.fx是指jquery的特效。如果使用顯示、滑動(dòng)、淡入淡出、動(dòng)畫等。$.fx.off可以關(guān)閉動(dòng)畫,其實(shí)是直接顯示結(jié)果。
???????原來(lái) jQuery.fn = jQuery.prototype.,對(duì)prototype相信咱們已經(jīng)可以很好的理解啦。
???????雖然 javascript沒(méi)有明確的類的概念,但是用類來(lái)理解它,會(huì)更方便。 jQuery便是一個(gè)封裝得非常好的類,比如我們用語(yǔ)句$("#btn1")會(huì)生成一個(gè) jQuery類的實(shí)例。
???????jQuery.extend(object)為jQuery類添加添加類方法,可以理解為添加靜態(tài)方法。如: $.extend({ add:function(a,b){return a+b;} }); 便為 jQuery 添加一個(gè)為 add的“靜態(tài)方法”,之后便可以在引入 jQuery的地方,使用這個(gè)方法了,$.add(3,4); //return 7 jQuery.fn.extend(object)對(duì)jQuery.prototype進(jìn)得擴(kuò)展,就是為jQuery類添加“成員函數(shù)”。jQuery類的實(shí)例可以使用這個(gè)“成員函數(shù)”。 比如我們要開發(fā)一個(gè)插件,做一個(gè)特殊的編輯框,當(dāng)它被點(diǎn)擊時(shí),便alert 當(dāng)前編輯框里的內(nèi)容。

      alertWhileClick:function() { 
        $(this).click(function(){
          alert($(this).val()); 
        }); 
   } }); 
  $("#input1").alertWhileClick(); 

頁(yè)面上為:<input id="input1" type="text"/> $("#input1") 為一個(gè)jQuery實(shí)例,當(dāng)它調(diào)用成員方法alertWhileClick后,便實(shí)現(xiàn)了擴(kuò)展,每次被點(diǎn)擊時(shí)它會(huì)先彈出目前編輯里的內(nèi)容。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容