外掛(Plugin)也成為 jQuery 擴充套件(Extension)，是一種遵循一定規範的應用程式介面編寫出來的程式。目前 jQuery 外掛已超過幾千種，由來自世界各地的開發者共同編寫、驗證和完善。而對於jQuery開發者而言，直接使用這些外掛將快速穩定架構系統，節約專案成本。
一． 外掛概述
外掛是以 jQuery 的核心程式碼為基礎，編寫出複合一定規範的應用程式。也就是說，外掛也是 jQuery 程式碼，通過 js 檔案引入的方式植入即可。
外掛的種類很多，主要大致可以分為：UI 類、表單及驗證類、輸入類、特效類、Ajax類、滑動類、圖形影像類、導航類、綜合工具類、動畫類等等。
引入外掛是需要一定步驟的，基本如下：
-
必須先引入 jquery.js 檔案，而且在所有外掛之前引入；
-
引入外掛；
-
引入外掛的周邊，比如皮膚、中文包等。
比如最常用到的表單驗證外掛：validate，除了最基本的外掛檔案jquery.validate.min.js之外，還有著messages_zh.js等等各國的語言包可以供你使用。
如何使用該外掛在這裡就不進行描述了，可以去看看慕課網上的視訊jQuery外掛——Validation Plugin，裡面詳細的描述了這個外掛的各種配置項，以及擴充套件。
觸類旁通，一個優秀的外掛，詳細的說明文件必不可少，詳細的看說明文件能，並且在本地進行測試能讓你快速的入門各種外掛的使用。
還有各種各樣的別人編寫好的外掛可以供你使用：比如管理cookie的外掛–cookie等等。
外掛可以去jQuery官網的外掛模組進行查詢The jQuery Plugin Registry
二. 自定義外掛
前面我們使用了別人提供好的外掛，使用起來非常的方便。如果市面上找不到自己滿意的外掛，並且想自己封裝一個外掛提供給別人使用。那麼就需要自己編寫一個 jQuery 外掛了。
外掛種類
按照功能分類，外掛的形式可以分為一下三類：
-
封裝物件方法的外掛；（也就是基於某個 DOM 元素的 jQuery 物件，區域性性，使用最多）
-
封裝全域性函式的外掛；（全域性性的封裝）
-
選擇器外掛。(類似與.find()，例如：
color(red)來選擇所有的紅色元素之類)
外掛的基本要點
主要用以以解決各種因為外掛導致的衝突、錯誤等問題，包括如下：
-
外掛名推薦使用 jQuery.[外掛名].js，以免和其他 js 檔案或者其他庫相沖突（可以使用alert(
$.[外掛名])驗證是否存在該全域性方法）； -
區域性物件附加 jQuery.fn 物件上，全域性函式附加在 jQuery物件本身上（可以使用alert(
$(selector).[外掛名])驗證是否存在該區域性方法）； -
外掛內部，this 指向是當前的區域性物件（通過選擇器獲取的jQuery物件）；
-
可以通過 this.each 來遍歷所有元素；
-
所有的方法或外掛，必須用分號結尾，避免出現問題（為了更穩妥，可在外掛頭部先加上一個分號）；
-
外掛應該返回的是 jQuery 物件，以保證可鏈式操作；
-
避免外掛內部使用$，如果要使用，使用閉包把傳遞 jQuery 進去，使外掛內部繼續使用$作為jQuery的別名。
;(function($){//這裡將$符作為匿名函式的形參
/*在此處編寫程式碼，可使用$作為jQuery的縮寫別名*/
})(jQuery);//這裡將jQuery作為實參傳遞給匿名函式了編寫一個外掛
假設我們的外掛需求是：實現一個下拉選單，在移入該元素時，把對應的下拉選單展現出來，移出時收回。並且可以設定其展開時的文字顏色。
根據慣例，我們在編寫外掛時，可以對於html結構有所約束。現在假設我們的頁面上有如下HTML結構：
<ul class="list">
<li>導航列表1
<ul class="nav">
<li>導航列表1</li>
<li>導航列表2</li>
<li>導航列表3</li>
<li>導航列表4</li>
<li>導航列表5</li>
<li>導航列表6</li>
</ul>
</li>
<li>導航列表2
<ul class="nav">
<li>導航列表1</li>
<li>導航列表2</li>
<li>導航列表3</li>
<li>導航列表4</li>
<li>導航列表5</li>
<li>導航列表6</li>
</ul>
</li>
</ul>
<!-- 預設已經引入jquery -->在這裡，我們就對我們的外掛實現效果有了第一個要求，必須在對於需要hover展現的元素內部下面建立ul列表，且className必須為nav。（外掛內部都是根據該條件來做文章）
下面就可以開始編寫我們的外掛了。儲存為jQuery.nav.js，（符合上面所說的要求，預設已經匯入）
;(function($){
$.extend({ //外掛定義在全域性方法上
"nav" : function (color){//傳參，這裡只是拋磚引玉，在您編寫的時候，引數選項可以更加豐富，例如傳入json物件等等
$(`.nav`).css({//對展開的下拉選單設定樣式，此處在下面進行詳細說明
"list-style" : "none",
"margin" : 0,
"padding" : 0,
"display" : "none",
"color":color//由使用者控制hover時，展現出來列表的文字顏色
});
$(`.nav`).parent().hover(//這裡用到了.nav的父節點（就是hover到的元素）
//因為我們只能在外掛要求的範圍內進行設定，若是使用了外部的選擇器，就違背了這個原則
function (){
$(this).find(".nav").stop().slideDown("normal");//注意我們在這裡使用了jquery的動畫方法
},function (){
$(this).find(".nav").stop().slideUp("normal");//注意stop()的使用，不然會有類似手風琴效果的出現，但那並不是我們需要的
});
}
});
})(jQuery);注意：這裡使用css方法只是為了方便，在真實外掛編寫過程中，若存在如此大量的css樣式編寫時，推薦在外部定義css樣式，例如可改寫為：
外掛依賴的css，需和外掛一起匯入html中
.hover{/*外掛必須樣式*/
list-style: none;
margin:0;
padding: 0;
display: none;
}在外掛內部修改。
$(`.nav`).addClass("hover");//將CSS與jQuery分離開來
$(`.nav`).css("color",color);//存在使用者設定時啟用，不存在就不用了（進行判斷）剛剛說的都是外掛的js檔案，最後要起到效果，別忘了頁面的js中加上那麼一句話（當前外掛定義在全域性方法上）
$(function (){
$.nav("#999");//呼叫外掛實現的全域性方法，並且設定其展現背景顏色為#999。
});就這樣，我們的全域性外掛就編寫，而且呼叫完成了，在你的頁面重新整理看看，是不是已經有了效果呢？
但是，因為我們的方法定義在全域性上，現在只要頁面中出現了我們外掛所規定的結構，就會存在hover展現效果，但是有時我們往往想要的不是這樣，我們希望它在區域性，在我指定的元素呼叫。所以我們需要對其進行一些改造，讓其變成區域性方法，其實也很簡單：
;(function($){
$.fn.extend({//定義為區域性方法
"nav" : function (color){
$(this).find(`.nav`).addClass(`hover`);//上面已經說過了,此時this指向呼叫該方法的元素
$(this).find(`.nav`).css("color",color);//在當前元素下，增加了一次find篩選，實現在對應的元素中執行。
$(this).find(`.nav`).parent().hover(
function (){
$(this).find(".nav").stop().slideDown("normal");
},function (){
$(this).find(".nav").stop().slideUp("normal");
});
return this;//返回當前的物件
}
});
})(jQuery);我們去重新整理一下瀏覽器。
你會發現，咦，怎麼沒效果？ 當然因為原來的程式碼是直接在全域性呼叫的，現在變成區域性方法了，顯然就不能這樣做了，需要做一點改變：
我這裡就不貼html程式碼了，但是希望您在實踐時能把上面的html程式碼在其下複製幾份，以達到思考其實現的效果
$(function (){//這裡的eq(0)代表只對第一份起到效果，複製後的沒有效果。
//（你可以把上面的find篩選刪除之後再試試，您會發現，他又對餘下的幾份起效果了）
$(".list").eq(0).nav("red");//呼叫區域性方法
});現在回過頭再把我們寫的外掛程式碼對應上面寫的外掛編寫的要點，思考一下，我們還有哪些沒有做到？就會發現，基本已經能對應上了。現在我們就完成了一個下拉選單的外掛。
其實編寫外掛並不難，最主要的是在我們編寫外掛的時候，一定要時刻注意這樣的要點，每一個細節都遵循在大家實踐過程中總結出來的最佳實現，才能自定義實現一個良好的外掛。
程式碼首先是寫個人看的，再然後才是給機器看的。