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

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

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

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

引入插件；

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

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

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

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

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

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

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

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

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

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

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

主要用以以解決各種因?yàn)椴寮?dǎo)致的沖突、錯(cuò)誤等問題，包括如下：

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

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

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

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

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

插件應(yīng)該返回的是 jQuery 對象，以保證可鏈?zhǔn)讲僮鳎?/p>

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

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

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

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

    
導(dǎo)航列表1
        

            
導(dǎo)航列表1
            
導(dǎo)航列表2
            
導(dǎo)航列表3
            
導(dǎo)航列表4
            
導(dǎo)航列表5
            
導(dǎo)航列表6
        
    
    
導(dǎo)航列表2
        

            
導(dǎo)航列表1
            
導(dǎo)航列表2
            
導(dǎo)航列表3
            
導(dǎo)航列表4
            
導(dǎo)航列表5
            
導(dǎo)航列表6
        
    

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

代碼首先是寫個(gè)人看的，再然后才是給機(jī)器看的。