手写jQuery插件总结

JQuery是继Prototype之后又一个优秀的JavaScript框架，深受开发者的喜爱，被用户广泛使用。jQuery的一个好地方在于用户的定制，也就是我们可以自己编写插件来完善jQuery的各种功能，定制我们需要的功能，剔除多余的代码，在页面加载的时候进行一定程度的改进。

面试后触动很大，就是你想做一个懂十项还是精通一项的开发者？于是我花了几天时间研究jQuery的源代码，了解了jQuery的事件机制、选择器和浏览器兼容性。之后，我一直想写一个jQuery插件来简单实现我的一个小功能。

如上图所示，插件的功能是当鼠标位于链接上时，链接移动，鼠标离开后，链接返回。

Html的核心部分是复制的代码如下：ul id='catagory' lia href='# '星期一/a/li lia href='# '星期二/a/li lia href='# '星期三/a/li lia href='# '星期四/a/li /ul如果我们一开始只使用jQuery实现上述功能。

副本代码如下： $(文档)。ready (function () {$ ('# catagory a '))。悬停(function () {$ (this))。动画({padding left:' 20px'}，{queue3360 false，持续时间3360 500}。}，function() { $(this)。animate({ paddingLeft: '0' }，{ queue: true，duration : 500 })；});});

现在，我们封装函数并将其编写为插件plugin.js，然后将其链接到HTML文件中：

复制代码如下：(函数($){ $ . fn . extend({//插件名称-填充列表：函数(选项){//参数和默认值vardefaults={ Animate Padding 3360 10，悬停颜色3360 ' black ' }；var选项=$。扩展(默认值、选项)；返回this . each(function(){ var o=options；//将元素集赋给变量。在这个例子中，它是ul对象var obj=$(this)；//获取ul中的对象变量=$('阿利'，obj)；//将hover()事件添加到aitems.hover()函数(){$ (this)。CSS ('color '，o . hover color)；//queue false表示不添加$ (this)。动画({左填充：o。animatepadding}、{queue3360 false，duration : 300})添加到动画队列；}，function () { $(this)。css('color '，' ')；$(这个)。animate({ paddingLeft: '0' }，{ queue: true，duration : 300 })；});});} });})(jQuery)；

当然，外部插件之前需要src的原始jquery库文件。调用插件的方法如下：复制代码如下： $(文档)。ready(function(){ $(' # catalog '))。填充列表({Animate Padding 3360 30，hover color 3360 ' red ' })；});