摘要：目前插件已超過幾千種，由來自世界各地的開發者共同編寫驗證和完善。而對于開發者而言，直接使用這些插件將快速穩定架構系統，節約項目成本。也就是說，插件也是代碼，通過文件引入的方式植入即可。現在我們就完成了一個下拉菜單的插件。

插件(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結構：

    
導航列表1
        

            
導航列表1
            
導航列表2
            
導航列表3
            
導航列表4
            
導航列表5
            
導航列表6
        
    
    
導航列表2
        

            
導航列表1
            
導航列表2
            
導航列表3
            
導航列表4
            
導航列表5
            
導航列表6
        
    

在這里，我們就對我們的插件實現效果有了第一個要求，必須在對于需要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");//調用局部方法
});

現在回過頭再把我們寫的插件代碼對應上面寫的插件編寫的要點，思考一下，我們還有哪些沒有做到？就會發現，基本已經能對應上了。現在我們就完成了一個下拉菜單的插件。

其實編寫插件并不難，最主要的是在我們編寫插件的時候，一定要時刻注意這樣的要點，每一個細節都遵循在大家實踐過程中總結出來的最佳實現，才能自定義實現一個良好的插件。

代碼首先是寫個人看的，再然后才是給機器看的。