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é)果拗盒。
???????原來 jQuery.fn = jQuery.prototype.怖竭,對(duì)prototype相信咱們已經(jīng)可以很好的理解啦。
???????雖然 javascript沒有明確的類的概念陡蝇,但是用類來理解它痊臭,會(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)系作者
  • 序言:七十年代末专酗,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子盗扇,更是在濱河造成了極大的恐慌祷肯,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,695評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件疗隶,死亡現(xiàn)場(chǎng)離奇詭異佑笋,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)斑鼻,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,569評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門蒋纬,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事蜀备」匾。” “怎么了?”我有些...
    開封第一講書人閱讀 168,130評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵碾阁,是天一觀的道長(zhǎng)输虱。 經(jīng)常有香客問我,道長(zhǎng)脂凶,這世上最難降的妖魔是什么宪睹? 我笑而不...
    開封第一講書人閱讀 59,648評(píng)論 1 297
  • 正文 為了忘掉前任,我火速辦了婚禮蚕钦,結(jié)果婚禮上横堡,老公的妹妹穿的比我還像新娘。我一直安慰自己冠桃,他們只是感情好命贴,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,655評(píng)論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著食听,像睡著了一般胸蛛。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上樱报,一...
    開封第一講書人閱讀 52,268評(píng)論 1 309
  • 那天葬项,我揣著相機(jī)與錄音,去河邊找鬼迹蛤。 笑死民珍,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的盗飒。 我是一名探鬼主播嚷量,決...
    沈念sama閱讀 40,835評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼逆趣!你這毒婦竟也來了蝶溶?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,740評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤宣渗,失蹤者是張志新(化名)和其女友劉穎抖所,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體痕囱,經(jīng)...
    沈念sama閱讀 46,286評(píng)論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡田轧,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,375評(píng)論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了鞍恢。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片傻粘。...
    茶點(diǎn)故事閱讀 40,505評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡巷查,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出抹腿,到底是詐尸還是另有隱情岛请,我是刑警寧澤,帶...
    沈念sama閱讀 36,185評(píng)論 5 350
  • 正文 年R本政府宣布警绩,位于F島的核電站崇败,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏肩祥。R本人自食惡果不足惜后室,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,873評(píng)論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望混狠。 院中可真熱鬧岸霹,春花似錦、人聲如沸将饺。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,357評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)予弧。三九已至刮吧,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間掖蛤,已是汗流浹背杀捻。 一陣腳步聲響...
    開封第一講書人閱讀 33,466評(píng)論 1 272
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蚓庭,地道東北人致讥。 一個(gè)月前我還...
    沈念sama閱讀 48,921評(píng)論 3 376
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像器赞,于是被迫代替她去往敵國(guó)和親垢袱。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,515評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容