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

插件(Plugin)也成為 jQuery 擴展(Extension)，是一種遵循一定規(guī)范的應用程序接口編寫出來的程序。目前 jQuery 插件已超過幾千種，由來自世界各地的開發(fā)者共同編寫、驗證和完善。而對于jQuery開發(fā)者而言，直接使用這些插件將快速穩(wěn)定架構(gòu)系統(tǒng)，節(jié)約項目成本。

插件是以 jQuery 的核心代碼為基礎，編寫出復合一定規(guī)范的應用程序。也就是說，插件也是 jQuery 代碼，通過 js 文件引入的方式植入即可。
插件的種類很多，主要大致可以分為：UI 類、表單及驗證類、輸入類、特效類、Ajax類、滑動類、圖形圖像類、導航類、綜合工具類、動畫類等等。
引入插件是需要一定步驟的，基本如下：

必須先引入 jquery.js 文件，而且在所有插件之前引入；

引入插件；

引入插件的周邊，比如皮膚、中文包等。

比如最常用到的表單驗證插件：validate，除了最基本的插件文件jquery.validate.min.js之外，還有著messages_zh.js等等各國的語言包可以供你使用。

如何使用該插件在這里就不進行描述了，可以去看看慕課網(wǎng)上的視頻jQuery插件——Validation Plugin，里面詳細的描述了這個插件的各種配置項，以及擴展。

觸類旁通，一個優(yōu)秀的插件，詳細的說明文檔必不可少，詳細的看說明文檔能，并且在本地進行測試能讓你快速的入門各種插件的使用。

還有各種各樣的別人編寫好的插件可以供你使用：比如管理cookie的插件--cookie等等。

插件可以去jQuery官網(wǎng)的插件模塊進行查找The jQuery Plugin Registry

前面我們使用了別人提供好的插件，使用起來非常的方便。如果市面上找不到自己滿意的插件，并且想自己封裝一個插件提供給別人使用。那么就需要自己編寫一個 jQuery 插件了。

按照功能分類，插件的形式可以分為一下三類：

封裝對象方法的插件；（也就是基于某個 DOM 元素的 jQuery 對象，局部性，使用最多）

封裝全局函數(shù)的插件；（全局性的封裝）

選擇器插件。(類似與.find()，例如：color(red)來選擇所有的紅色元素之類)

主要用以以解決各種因為插件導致的沖突、錯誤等問題，包括如下：

插件名推薦使用 jQuery.[插件名].js，以免和其他 js 文件或者其他庫相沖突（可以使用alert($.[插件名])驗證是否存在該全局方法）；

局部對象附加 jQuery.fn 對象上，全局函數(shù)附加在 jQuery對象本身上（可以使用alert($(selector).[插件名])驗證是否存在該局部方法）；

插件內(nèi)部，this 指向是當前的局部對象（通過選擇器獲取的jQuery對象）；

可以通過 this.each 來遍歷所有元素；

所有的方法或插件，必須用分號結(jié)尾，避免出現(xiàn)問題（為了更穩(wěn)妥，可在插件頭部先加上一個分號）；

插件應該返回的是 jQuery 對象，以保證可鏈式操作；

避免插件內(nèi)部使用$，如果要使用，使用閉包把傳遞 jQuery 進去，使插件內(nèi)部繼續(xù)使用$作為jQuery的別名。

;(function($){//這里將$符作為匿名函數(shù)的形參
/*在此處編寫代碼，可使用$作為jQuery的縮寫別名*/
})(jQuery);//這里將jQuery作為實參傳遞給匿名函數(shù)了

假設我們的插件需求是：實現(xiàn)一個下拉菜單，在移入該元素時，把對應的下拉列表展現(xiàn)出來，移出時收回。并且可以設置其展開時的文字顏色。

根據(jù)慣例，我們在編寫插件時，可以對于html結(jié)構(gòu)有所約束。現(xiàn)在假設我們的頁面上有如下HTML結(jié)構(gòu)：

    
導航列表1
        

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

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

在這里，我們就對我們的插件實現(xiàn)效果有了第一個要求，必須在對于需要hover展現(xiàn)的元素內(nèi)部下面建立ul列表，且className必須為nav。（插件內(nèi)部都是根據(jù)該條件來做文章）

下面就可以開始編寫我們的插件了。保存為jQuery.nav.js，（符合上面所說的要求，默認已經(jīng)導入）

;(function($){
    $.extend({ //插件定義在全局方法上
        "nav" : function (color){//傳參，這里只是拋磚引玉，在您編寫的時候，參數(shù)選項可以更加豐富，例如傳入json對象等等
            $(".nav").css({//對展開的下拉列表設置樣式，此處在下面進行詳細說明
                "list-style" : "none",
                "margin" : 0,
                "padding" : 0,
                "display" : "none",
                "color":color//由用戶控制hover時，展現(xiàn)出來列表的文字顏色
            });
            $(".nav").parent().hover(//這里用到了.nav的父節(jié)點（就是hover到的元素）
                //因為我們只能在插件要求的范圍內(nèi)進行設定，若是使用了外部的選擇器，就違背了這個原則
                function (){
                    $(this).find(".nav").stop().slideDown("normal");//注意我們在這里使用了jquery的動畫方法
                },function (){
                    $(this).find(".nav").stop().slideUp("normal");//注意stop()的使用，不然會有類似手風琴效果的出現(xiàn)，但那并不是我們需要的
                });
        }
    });
})(jQuery);

注意：這里使用css方法只是為了方便，在真實插件編寫過程中，若存在如此大量的css樣式編寫時，推薦在外部定義css樣式，例如可改寫為：
插件依賴的css，需和插件一起導入html中

.hover{/*插件必須樣式*/
    list-style: none;
    margin:0;
    padding: 0;
    display: none;
}

在插件內(nèi)部修改。

$(".nav").addClass("hover");//將CSS與jQuery分離開來
$(".nav").css("color",color);//存在用戶設置時啟用，不存在就不用了（進行判斷）

剛剛說的都是插件的js文件，最后要起到效果，別忘了頁面的js中加上那么一句話（當前插件定義在全局方法上）

$(function  (){
    $.nav("#999");//調(diào)用插件實現(xiàn)的全局方法，并且設置其展現(xiàn)背景顏色為#999。
});

就這樣，我們的全局插件就編寫，而且調(diào)用完成了，在你的頁面刷新看看，是不是已經(jīng)有了效果呢？

但是，因為我們的方法定義在全局上，現(xiàn)在只要頁面中出現(xiàn)了我們插件所規(guī)定的結(jié)構(gòu)，就會存在hover展現(xiàn)效果，但是有時我們往往想要的不是這樣，我們希望它在局部，在我指定的元素調(diào)用。所以我們需要對其進行一些改造，讓其變成局部方法，其實也很簡單：

;(function($){
    $.fn.extend({//定義為局部方法
        "nav" : function (color){
            $(this).find(".nav").addClass("hover");//上面已經(jīng)說過了,此時this指向調(diào)用該方法的元素
            $(this).find(".nav").css("color",color);//在當前元素下，增加了一次find篩選，實現(xiàn)在對應的元素中執(zhí)行。
            $(this).find(".nav").parent().hover(
                function (){
                    $(this).find(".nav").stop().slideDown("normal");
                },function (){
                    $(this).find(".nav").stop().slideUp("normal");
                });
            return this;//返回當前的對象
        }
    });
})(jQuery);

我們?nèi)ニ⑿乱幌聻g覽器。
你會發(fā)現(xiàn)，咦，怎么沒效果？ 當然因為原來的代碼是直接在全局調(diào)用的，現(xiàn)在變成局部方法了，顯然就不能這樣做了，需要做一點改變：

我這里就不貼html代碼了，但是希望您在實踐時能把上面的html代碼在其下復制幾份，以達到思考其實現(xiàn)的效果

$(function  (){//這里的eq(0)代表只對第一份起到效果，復制后的沒有效果。
    //（你可以把上面的find篩選刪除之后再試試，您會發(fā)現(xiàn)，他又對余下的幾份起效果了）
    $(".list").eq(0).nav("red");//調(diào)用局部方法
});

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

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

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