首先我們來搞清楚一些關于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);

總結

以上是生活随笔為你收集整理的如何编写一个Jquery插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。