由于這篇文章比較長啄枕，所以分了四個階段講浮创，從簡單的入門級到最后到綜合級油额，有些列子和圖片都是轉載其他博主的，希望對想寫插件對同學會有幫助稀拐。這里分享個好久之前寫的一個jquery插件（網(wǎng)站的功能引導插件汰聋，思路應該有些落伍了桑逝，僅供參考）：
https://github.com/BothEyes1993/pageWalk
（入門級）
一弧圆、插件的幾種寫法
首先，在具體說明編寫插件之前拢蛋，我們先假定一個使用場景：有一個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>
要實現(xiàn)的功能是：鼠標移到表格的某一行時谆棱，當前行高亮顯示快压，其他行正常圆仔。
利用JQuery插件實現(xiàn)上述功能蔫劣。常用的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();的形式進行開發(fā)嫌松，JQuery的extend()方法為我們提供了擴展
JQuery自身的方式，在extend()方法中萎羔，我們采用{...}的形式編寫具體的方法體液走。其中贾陷，最重要的是要定義我們自己的擴展方法缘眶，如示例中的
handleTableUI。定義的方式是：方法名 : function(參數(shù)){ 方法體
}昵宇。通過此種方式我們就可以定義JQuery自己的擴展方法磅崭，而且這個方法可以在web頁面通過智能提示顯示出來儿子。
頁面中調(diào)用的代碼如下：
<script type="text/javascript">
$(document).ready(function () {
$.handleTableUI("newTable");
});
</script>
2瓦哎、 對JQuery對象的插件開發(fā)
形式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);的方式進行開發(fā)柔逼。在“...”處蒋譬，定義我們自己的方法，定義方式是：$.fn.自定義方法名 = function(參數(shù)){...};的形式定義擴展方法的具體內(nèi)容愉适。在頁面調(diào)用的時候不同于對JQuery自身的擴展犯助。
具體調(diào)用代碼如下：
<script type="text/javascript">
$(document).ready(function () {
$("#newTable").setTableUI();
});
</script>
二、編寫jQuery插件時维咸，一定要注意以下列出的地方
1剂买、插件的推薦命名方法為：jquery.[插件名].js
2、所有的對象方法都應當附加到JQuery.fn對象上面癌蓖，而所有的全局函數(shù)都應當附加到JQuery對象本身上瞬哼。
3、在插件內(nèi)部租副，this指向的是當前通過選擇器獲取的JQuery對象坐慰，而不像一般方法那樣，內(nèi)部的this指向的是DOM元素用僧。
4结胀、可以通過this.each 來遍歷所有的元素
5赞咙、所有方法或函數(shù)插件，都應當以分號結尾糟港，否則壓縮的時候可能會出現(xiàn)問題攀操。為了更加保險寫，可以在插件頭部添加一個分號（着逐；）崔赌，以免他們的不規(guī)范代碼給插件帶來 影響。
6耸别、插件應該返回一個JQuery對象健芭，以便保證插件的可鏈式操作。
7秀姐、避免在插件內(nèi)部使用$作為JQuery對象的別名慈迈，而應當使用完整的JQuery來表示。這樣可以避免沖突省有。
8痒留、在JQuery命名空間下聲明只聲明一個單獨的名稱
9、接受options參數(shù)蠢沿，以便控制插件的行為
例如
// 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.
};
我們的插件可以這樣被調(diào)用
$('#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舷蟀、適當?shù)貙⒆雍瘮?shù)提供給外部訪問調(diào)用
12、保持私有函數(shù)
13扫步、支持元數(shù)據(jù)插件
