首先我們來搞清楚一些關於Jquery外掛的知識:
一、外掛的種類：
-
封裝物件方法的外掛
這種外掛是將物件方法封裝起來，用於對通過選擇器獲取的jQuery物件進行操作，是最常見的一種外掛 -
封裝全域性函式的外掛
將獨立的函式加到jQuery的名稱空間之下 -
選擇器外掛
雖然jQuery的選擇器已經十分的強大了，但還是會需要擴充一些自己喜歡的選擇器
二、外掛的基本要點
- 外掛的檔名推薦為 jquery.[外掛名].js，例如jquery.color.js
- 所有的物件方法都應當附加到jQuery.fn物件上，而所有的全域性函式都應當附加到jQuery物件本身上
- 在外掛內部，this指向的是當前通過選擇器獲取的jQuery物件，而不像一般的方法那樣，例如click()方法，內部的this指向的是DOM元素
- 可以通過this.each來遍歷所有元素
- 所有的方法或函式外掛，都應當以分號結尾，否則壓縮時可能出問題，有的為了更加穩妥些，在外掛的開始處加上一個分號
- 外掛應該返回一個jQuery物件，這樣可以保證外掛的可鏈式操作。除非外掛需要返回的是一些需要獲取的量，例如字串或者陣列等
- 儘量利用閉包技巧曆來避免變數名的衝突
三、外掛中的閉包
關於閉包：ECMAScript對其進行了簡單的描述：允許使用內部函式（即函式定義和函式表示式位於另一個函式的函式體內），而且這些內部函式可以訪問他們所在的外部函式中宣告的所有區域性變數、引數和宣告的其他內部函式，當其中一個這樣的內部函式在包含它們的外部函式之外被呼叫時，就會形成閉包。即內部函式會在外部函式返回後被執行。而當這個內部函式執行時，它仍然必須訪問其外部函式的區域性變數、引數以及其他內部函式。這些區域性變數、引數和函式宣告（最初時）的值是外部函式返回時的值，但也會受到內部函式的影響。
所以利用閉包的特性，既可以避免內部臨時變數影響全域性空間，又可以再外掛內部繼續使用$作為jQuery的別名。最常見的jQuery外掛的形式如下：
;(function($){//此處將$作為匿名函式的實參
/*這裡放置程式碼，可以使用$作為jQuery的縮寫別名*/
})(jQuery)//這裡就將jQuery作為實參傳遞給匿名函式了
四、編寫jQuery外掛
- 封裝jQuery物件方法的外掛
- 編寫設定和獲取顏色的外掛
首先介紹如何編寫一個color()外掛。此外掛用於實現以下兩個功能：
(1)設定匹配元素的顏色。
(2)獲取匹配的元素(元素集合中的第一個)的顏色
首先按照規範，將此外掛命名為jquery.color.js
由於是對jQuery物件的方法擴充套件，所以採用擴充套件第一類外掛的方法jQuery.fn.extend()來編寫，程式碼如下：
;(function($){
$.fn.extend({
“color”:function(value){
//這裡寫外掛程式碼
}
});
})(jQuery);
這裡給這個方法提供一個引數value，如果呼叫方法的時候傳遞了value這個引數，那麼就是用這個值來設定字型顏色；否則就是獲取匹配元素的字型顏色的值。
首先實現第一個功能，設定字型顏色。只需要簡單地呼叫jQuery提供的css()方法，直接寫成this.css(“color”,value)即可。需要注意的是外掛內部的this指向的是jQuery物件，而非普通的DOM物件。接下來要注意的是，外掛如果不需要返回字串之類的特定值，應當使其具有可連結性。為此，直接返回這個this物件，由於css()方法也會返回撥用它的物件，即此處的this，因此可以將程式碼寫成：
;(function($){
$.fn.extend({
"color":function(value){
return this.css("color",value);
}
});
})(jQuery);
接下來實現第二個功能。如果沒有給方法傳遞引數，那麼就是獲取集合物件中第一個物件的color的值。由於css()方法本身就具有返回第一個匹配元素的樣式值的功能，因此此處無須通過eq()來獲取第一個元素。只要將這兩個功能結合起來，判斷一下value是否是undefined即可。
jQuery程式碼如下：
;(function($){
$.fn.extend({
"color":function(value){
if (value ==undefined){
return this.css("color");
} else {
return this.css("color",value);
}
}
});
})(jQuery);
此時，color()外掛的功能已經全部實現了，通過該外掛可以獲取和設定元素的color值。實際上，css()方法內部已經有判斷value是否為undefined的機制，所以才可以根據傳遞引數的不同而返回不同的值，因此，可以藉助css()方法的這個特性來處理這個問題。刪除if()部分，最終剩餘的程式碼實際上與先前的那段一模一樣。程式碼如下：
;(function($){
$.fn.extend({
"color":function(value){
return this.css("color",value);
}
});
})(jQuery);