NO IMAGE

總結:

jQuery編寫外掛的兩種方法

1.新增jQuery物件級的外掛,是給jQuery類新增方法

寫法:

;(function($){
$.fn.extend({
"函式名":function(自定義引數){
//這裡寫外掛程式碼
}
});
})(jQuery);
或者
;(function($){
$.fn.函式名=function(自定義引數){
//這裡寫外掛程式碼
}
})(jQuery);

呼叫方法:$(“#id”).函式名(引數);

2.jQuery類級別的外掛,相當於新增靜態方法

;(function($){
$.extend({
"函式名":function(自定義引數){
//這裡寫外掛程式碼
}
});
})(jQuery);
或者
;(function($){
$.函式名=function(自定義引數){
//這裡寫外掛程式碼
}
})(jQuery);

呼叫方法:$.函式名(引數);


jquery外掛的種類:

  1.物件級別的外掛開發,即給jQuery物件新增方法,封裝物件方法的外掛,如:parent()、appendTo()

  2.一種是類級別的外掛開發,即給jQuery新增新的全域性函式,相當於給jQuery類本身新增方法,jQuery的全域性函式就是屬於jQuery命        名空間的函式,封裝全域性函式的外掛

  3.選擇器外掛

jQuery外掛機制

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

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

     jQuery.extend(object); 為擴充套件jQuery類本身.為類新增新的方法,可以理解為新增靜態方法。

     這兩個方法都接受一個引數,型別為Object,Object對應的”名/值對”分別代表”函式或方法體/函式主體”。

 fn 是什麼東西呢?

 檢視jQuery程式碼,就不難發現:

jQuery.fn = jQuery.prototype = { init: function( selector, context ) {//....  //...... }; 

 原來 jQuery.fn = jQuery.prototype.對prototype肯定不會陌生啦。雖然javascript沒有明確的類的概念,但是用類來理解它,會更方便。jQuery便是一個封裝得非常好的類,比如  我們用 語句 $(“#btn1”) 會生成一個 jQuery類的例項。

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

 jQuery.extend()方法除了可以擴充套件jQuery物件外,還可以擴充套件已有的Object物件,經常被用於設定外掛方法的一系列預設引數,可以很方便的用傳入的引數來覆蓋預設值

 jQuery.extend(object1,object2)object1預設引數值,object2傳入的引數值;詳細說明,請點選這裡

var settions ={validate:false,limit:5,name="foo"};
var options ={validate:true,name="bar"};
var newOptions=jQuery.extend(settings,options);
結果為:
newOptions = {validate:true,limit:5,name="bar"};
function foo(options){
options = jQuery.extend({
name="bar",
length:5,
dataType="xml" /*預設引數*/
},options	 /*options 為傳遞的引數*/
);
}

 如果使用者呼叫foo()方法的時候,在傳遞的引數options物件中設定了相應的值,
 那麼就使用設定的值,否則使用預設值,呼叫方法:

foo({name:"a",length:4,dataType:"json"});
foo({name:"a"});
foo();

編寫jQuery外掛

 封裝jQuery對你方法的外掛,首先需要在javaScript檔案裡搭好框架,程式碼如下:

;(function($){
//這裡寫外掛程式碼
})(jQuery);

 1.物件級別的外掛開發,即給jQuery物件新增方法,封裝物件方法的外掛,如:parent()、appendTo()

  由於是對jQuery物件的方法擴充套件,因此採用擴充套件第1類(封裝物件方法)外掛的方法jQuery.fn.extend()來編寫

;(function($){
$.fn.extend({
"color":function(value){
//這裡寫外掛程式碼
}
});
})(jQuery);

  或者

;(function($){
$.fn.color=function(value){
//這裡寫外掛程式碼
}
})(jQuery);

  這裡的方法提供一個引數value,如果呼叫方法時傳入value,那麼就用這個值來設定字型顏色,否則就是獲取匹配無此的字型顏色的值

;(function($){
$.fn.extend({
"color":function(value){
return this.css("color",value);
}
});
})(jQuery);

  外掛內部的this指向的是jQuery物件,而非普通的DOM物件。接下來注意的是,外掛如果不需要返回字串之類的特定值,應當使其具有可連結性。

  為此,直接返回這個this這個物件,由於css()方法也會返回撥用它的物件,即此外的this,因此可以將程式碼寫成上面的形式;

  呼叫時可直接寫成:$(“div”).color(“red”);

  另外如果要定義一組外掛,可以使用如下所示寫法:

;(function($){
$.fn.extend({
"color":function(value){
//這裡寫外掛程式碼
},
"border":function(value){
//這裡寫外掛程式碼
},
"background":function(value){
//這裡寫外掛程式碼
}
});
})(jQuery);

2.封裝全域性函式的外掛

 這類外掛是在jQuery名稱空間內部新增一個函式。這類外掛很簡單,只是普通的函式,沒有特別需要注意的地方。

 例如新增兩個函式,用於去除左側和右側的空格。

 首先構建一個Object物件,把函式名和函式都放進去,其中的名/值對分別為函式名和函式主體
 然後利用jQuery.extend()方法直接對jQuery物件進行擴充套件

 jQuery程式碼如下:

;(function($){
$.extend({
ltrim:function(text){
return (text||"").replace(/^\s g,"");
},
rtrim:function(text){
return (text||"").replace(/\s $/g,"");
}
});
})(jQuery);
或者
;(function($){
$.ltrim=function(text){
return (text||"").replace(/^\s g,"");
},
$.rtrim=function(text){
return (text||"").replace(/\s $/g,"");
}
})(jQuery);

 *(text||””)部分是用於防止傳遞進來的text這個字串變數處於未定義的特殊狀態,如果text是undeined,則返回字串””,否則返回字串text。

  這個處理是為了保證接下來的字串替換方法replace()方法不會出錯

 *運用了正規表示式替換首末的空格

 呼叫函式:

$("trimTest").val(
jQuery.trim(" test ") "\n" 
jQuery.ltrim(" test ") "\n" 
jQuery.rtrim(" test ")
);

 執行程式碼後,文字框中第一行字串左右兩側的空格都被刪除。
 第二行的字串只有左側的空格被刪除。
 第三行的字串只有右側的空格被刪除。

3.自定義選擇器

待。。。。