JavaScript开发教程之手写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" });  
});