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>
$(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" }); });