jQuery是繼Prototype之后的又一款優秀的JavaScript框架，深受廣大開發者熱愛，用戶甚廣。而jQuery一個很好的地方在 于用戶的自定義，即我們可以書寫自己的插件來完善jQuery的各項功能，定制自己所需要的功能，剔除冗余的代碼，在頁面加載時候可以有一定程度上的提 升。
面試之后，觸動很大，就是你要做的是一個了解十項還是精通一項的開發者？于是花了幾天時間苦逼的研讀jQuery源碼，了解了jQuery的事件機制、選擇器以及瀏覽器兼容性是如何做到的等。之后就一直想要書寫一款jQuery插件，來簡單實現自己的一個小功能。
如上圖所示，插件實現的功能是當鼠標位于某個鏈接其上時候，鏈接移動，鼠標離開之后，鏈接歸位。
Html核心部分即
<ul id="catagory">
<li><a href="#">星期一</a></li>
<li><a href="#">星期二</a></li>
<li><a href="#">星期三</a></li>
<li><a href="#">星期四</a></li>
</ul>
上面開始時候的功能如果我們單純只是使用jQuery來實現的話是這樣實施：
$(document).ready(function() {
$("#catagory a").hover(function() {
$(this).animate({ paddingLeft: "20px" }, { queue: false, duration: 500 });
}, function() {
$(this).animate({ paddingLeft: "0" }, { queue: true, duration: 500 });
});
});
現在，我們將功能封裝起來，寫成插件plugin.js，然后在HTML文件中外鏈進來：
(function ($) {
$.fn.extend({
//插件名稱 - paddingList
paddingList: function (options) {
//參數和默認值
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);
當然，外鏈plugin之前還需要src最初的jquery庫文件。調用插件的方式如下：
$(document).ready(function() {
$("#catagory").paddingList({ animatePadding: 30, hoverColor: "Red" });
});
