自己动手手写jQuery插件总结
时间：2020-10-15 23:18:04|栏目：jquery|点击： 次
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" });
});
