這幾天在學(xué)習(xí)jQuery插件的寫法，搜索了一些資料，包括jQuery官方的示例，但發(fā)現(xiàn)描述的并不是很清晰。***，終于搜索到一篇講解比較清晰的文章，這里自己總結(jié)了一下，并以一個具體的示例來說明jQuery插件的寫法。

1、概述

先看看html代碼

<ul id="catagory"> 
    <li><a href="#">jQuery</a></li> 
    <li><a href="#">Asp.net</a></li> 
    <li><a href="#">Sql Server</a></li> 
    <li><a href="#">CSS</a></li> 
</ul> 

比如我們要實現(xiàn)當(dāng)光標(biāo)移動到a標(biāo)簽上時，a標(biāo)簽向右移動一段距離，離開時a位置恢復(fù)。實現(xiàn)方法如下：

$(document).ready(function() { 
    $("#catagory a").hover(function() { 
        $(this).animate({ paddingLeft: "20px" }, { queue: false, duration: 500 }); 
    }, function() { 
        $(this).animate({ paddingLeft: "0" }, { queue: true, duration: 500 }); 
    }); 
}); 

現(xiàn)在我們將這個方法進行擴展，寫成jQuery插件的形式，以后也能在別的項目中使用，并且可以方便的更改一些屬性值，現(xiàn)在我們來看看jQuery插件的寫法。

2、jQuery插件的結(jié)構(gòu)

下邊這個結(jié)構(gòu)應(yīng)該是編寫jQuery插件的一個比較好的結(jié)構(gòu)，我將原作者的一些注釋進行了相應(yīng)的翻譯。

//為避免沖突，將我們的方法用一個匿名方法包裹起來 
(function($) { 
 
    //擴展這個方法到j(luò)query 
    $.fn.extend({ 
 
        //插件名字 
        pluginname: function() { 
 
            //遍歷匹配元素的集合 
            return this.each(function() { 
 
                //在這里編寫相應(yīng)代碼進行處理  
 
            }); 
        } 
    }); 
 
 //傳遞jQuery到方法中，這樣我們可以使用任何javascript中的變量來代替"$"       
})(jQuery);  

接下來，我們給插件中加入一些可以改變的屬性，這樣用戶可以根據(jù)自己的需要來做一些更改。同時，我們應(yīng)提供相應(yīng)的默認值。

(function($){   
   
    $.fn.extend({    
           
    //將可選擇的變量傳遞給方法 
        pluginname: function(options) {   
   
   
            //設(shè)置默認值并用逗號隔開 
            var defaults = {   
                padding: 20,   
                mouseOverColor : '#000000',   
                mouseOutColor : '#ffffff'   
            }   
                   
            var options =  $.extend(defaults, options);   
   
            return this.each(function() {   
                var o = options;   
                   
                //這里編寫相應(yīng)代碼  
                //可以像下邊這樣獲取變量值  
                alert(o.padding);   
               
            });   
        }   
    });   
       
})(jQuery);   

3、實現(xiàn)jQuery插件

(function ($) { 
    $.fn.extend({ 
        //插件名稱 - paddingList 
        paddingList: function (options) { 
 
            //參數(shù)和默認值 
            var defaults = { 
                animatePadding: 10, 
                hoverColor: "Black" 
            }; 
 
            var options = $.extend(defaults, options); 
 
            return this.each(function () { 
                var o = options; 
 
                //將元素集合賦給變量 本例中是 ul對象  
                var obj = $(this); 
 
                //得到ul中的a對象 
                var items = $("li a", obj); 
 
                //添加hover()事件到a 
                items.hover(function () { 
                    $(this).css("color", o.hoverColor); 
                    //queue false表示不添加到動畫隊列中 
                    $(this).animate({ paddingLeft: o.animatePadding }, { queue: false, duration: 300 }); 
 
                }, function () { 
                    $(this).css("color", ""); 
                    $(this).animate({ paddingLeft: "0" }, { queue: true, duration: 300 }); 
                }); 
 
            }); 
        } 
    }); 
})(jQuery); 

***，使用插件的方法如下：

//使用插件 
$(document).ready(function() { 
    $("#catagory").paddingList({ animatePadding: 30, hoverColor: "Red" }); 
});