由於這篇文章比較長，所以分了四個階段講，從簡單的入門級到最後到綜合級，有些列子和圖片都是轉載其他博主的，希望對想寫外掛對同學會有幫助。這裡分享個好久之前寫的一個jquery外掛（網站的功能引導外掛，思路應該有些落伍了，僅供參考）：
（入門級）
一、外掛的幾種寫法
首先，在具體說明編寫外掛之前，我們先假定一個使用場景：有一個HTML頁面，頁面上放置了一個5行3列的表格。
<table id="newTable">
<tr>
<td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td>
</tr>
</table>
複製程式碼要實現的功能是：滑鼠移到表格的某一行時，當前行高亮顯示，其他行正常。
利用JQuery外掛實現上述功能。常用的JQuery外掛有如下幾種寫法：
1.對JQuery自身的擴充套件外掛
這種外掛是對JQuery自身的方法庫進行擴充套件的。在使用的時候通過$.MethodName()的方式直接使用。
$.extend({
handleTableUI : function(table){
var thisTable = $("#" + table);
$(thisTable).find("tr").bind("mouseover", function () {
$(this).css({ color: "#ff0011", background: "blue" });
});
$(thisTable).find("tr").bind("mouseout", function () {
$(this).css({ color: "#000000", background: "white" });
});
}
});
複製程式碼說明： 當要對JQuery自身進行擴充套件的時候，需要採用$.extend();的形式進行開發，JQuery的extend()方法為我們提供了擴充套件 JQuery自身的方式，在extend()方法中，我們採用{...}的形式編寫具體的方法體。其中，最重要的是要定義我們自己的擴充套件方法，如示例中的 handleTableUI。定義的方式是：方法名 : function(引數){ 方法體 }。通過此種方式我們就可以定義JQuery自己的擴充套件方法，而且這個方法可以在web頁面通過智慧提示顯示出來。
頁面中呼叫的程式碼如下：
<script type="text/javascript">
$(document).ready(function () {
$.handleTableUI("newTable");
});
</script>
複製程式碼2、 對JQuery物件的外掛開發
形式1：
(function($){
$.fn.extend({
pluginName:function(opt,callback){
// Our plugin implementation code goes here.
}
})
})(jQuery);
複製程式碼形式2：
(function($) {
$.fn.pluginName = function() {
// Our plugin implementation code goes here.
};
})(jQuery);
複製程式碼使用這種外掛的擴充套件上面的例項
(function ($) {
$.fn.setTableUI = function(options){
var defaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow"
}
var options = $.extend(defaults, options);
this.each(function(){
var thisTable=$(this);
$(thisTable).find("tr").bind("mouseover", function () {
$(this).css({ color: "#ff0011", background: "blue" });
});
$(thisTable).find("tr").bind("mouseout", function () {
$(this).css({ color: "#000000", background: "white" });
});
});
};
})(jQuery);
複製程式碼說明： 當要對頁面元素進行JQuery擴充套件時，需要採用
(function($){...})(JQuery);的方式進行開發。在“...”處，定義我們自己的方法，定義方式是：$.fn.自定義方法名 = function(引數){...};的形式定義擴充套件方法的具體內容。在頁面呼叫的時候不同於對JQuery自身的擴充套件。
具體呼叫程式碼如下：
<script type="text/javascript">
$(document).ready(function () {
$("#newTable").setTableUI();
});
</script>
複製程式碼二、編寫jQuery外掛時，一定要注意以下列出的地方
1、外掛的推薦命名方法為：jquery.[外掛名].js
2、所有的物件方法都應當附加到JQuery.fn物件上面，而所有的全域性函式都應當附加到JQuery物件本身上。
3、在外掛內部，this指向的是當前通過選擇器獲取的JQuery物件，而不像一般方法那樣，內部的this指向的是DOM元素。
4、可以通過this.each 來遍歷所有的元素
5、所有方法或函式外掛，都應當以分號結尾，否則壓縮的時候可能會出現問題。為了更加保險寫，可以在外掛頭部新增一個分號（；），以免他們的不規範程式碼給外掛帶來 影響。 6、外掛應該返回一個JQuery物件，以便保證外掛的可鏈式操作。 7、避免在外掛內部使用$作為JQuery物件的別名，而應當使用完整的JQuery來表示。這樣可以避免衝突。
8、在JQuery名稱空間下宣告只宣告一個單獨的名稱 9、接受options引數，以便控制外掛的行為 例如
// plugin definition
$.fn.hilight = function(options) {
var defaults = {
foreground: 'red',
background: 'yellow'
};
// Extend our default options with those provided.
var opts = $.extend(defaults, options);
// Our plugin implementation code goes here.
};
複製程式碼我們的外掛可以這樣被呼叫
$('#myDiv').hilight({
foreground: 'blue'
});
複製程式碼10、暴露外掛的預設設定 ，以便外面可以訪問 例如
.fn.hilight = function(options) {
// Extend our default options with those provided.
// Note that the first arg to extend is an empty object -
// this is to keep from overriding our "defaults" object.
var opts = $.extend({}, $.fn.hilight.defaults, options);
// Our plugin implementation code goes here.
};
// plugin defaults - added as a property on our plugin function
$.fn.hilight.defaults = {
foreground: 'red',
background: 'yellow'
};
複製程式碼11、適當地將子函式提供給外部訪問呼叫 12、保持私有函式 13、支援後設資料外掛