jquery外掛開發方法

weixin_34377065發表於2009-05-07

jQuery為開發外掛提拱了兩個方法,分別是:

 

jQuery.fn.extend(object);

jQuery.extend(object);

 

jQuery.extend(object); 為擴充套件jQuery類本身.為類新增新的方法。

jQuery.fn.extend(object);給jQuery物件新增方法。

 

 

fn 是什麼東西呢。檢視jQuery程式碼,就不難發現。


jQuery.fn = jQuery.prototype = {

   init: function( selector, context ) {//.... 

   //......

};

 

原來 jQuery.fn = jQuery.prototype.對prototype肯定不會陌生啦。

 

雖然 javascript 沒有明確的類的概念,但是用類來理解它,會更方便。

jQuery便是一個封裝得非常好的類,比如我們用 語句 $("#btn1") 會生成一個 jQuery類的例項。

 

jQuery.extend(object); 為jQuery類新增新增類方法,可以理解為新增靜態方法。如:

 

$.extend({

  add:function(a,b){return a+b;}

});

 

便為 jQuery 新增一個為 add 的 “靜態方法”,之後便可以在引入 jQuery 的地方,使用這個方法了,

$.add(3,4);  //return 7

 

jQuery.fn.extend(object); 對jQuery.prototype進得擴充套件,就是為jQuery類新增“成員函式”。jQuery類的例項可以使用這個“成員函式”。

比如我們要開發一個外掛,做一個特殊的編輯框,當它被點選時,便alert 當前編輯框裡的內容。可以這麼做:

  1. $.fn.extend({    
  2.     
  3.    alertWhileClick:function(){    
  4.    
  5.        $(this).click(function(){    
  6.    
  7.             alert($(this).val());    
  8.         });    
  9.     
  10.     }    
  11.     
  12. });    
  13.     
  14. $("#input1").alertWhileClick(); //頁面上為:<input id="input1" type="text"/>

$("#input1") 為一個jQuery例項,當它呼叫成員方法 alertWhileClick後,便實現了擴充套件,每次被點選時它會先彈出目前編輯裡的內容。

 

真實的開發過程中,當然不會做這麼小白的外掛,事實上jQuery提拱了豐富的操作文件,事件,CSS ,Ajax、效果的方法,結合這些方法,便可以開發出更加 NB 的外掛。

相關文章