自己动手手写jQuery插件总结

 更新时间:2015年01月20日 08:58:26   投稿:junjie  
这篇文章主要介绍了自己动手手写jQuery插件总结,本文是个人学习jQuery插件的总结,实现了一个小功能的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" });  
});

相关文章

  • WordPress JQuery处理沙发头像

    WordPress JQuery处理沙发头像

    因为我的留言板是倒序,默认又只会展开最新的5条留言,对于较旧留言甚至是沙发的同学,很容易被忽略掉。
    2009-06-06
  • jQuery中$.ajax()方法参数解析

    jQuery中$.ajax()方法参数解析

    这篇文章主要为大家详细解析了jQuery中$.ajax()方法参数,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • jQuery实现三级联动效果

    jQuery实现三级联动效果

    这篇文章主要为大家详细介绍了jQuery实现三级联动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • Jquery获取第一个子元素简单实例

    Jquery获取第一个子元素简单实例

    下面小编就为大家带来一篇Jquery获取第一个子元素简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 使用jQuery实现WordPress中的Ctrl+Enter和@评论回复

    使用jQuery实现WordPress中的Ctrl+Enter和@评论回复

    相信大家对QQ中的Ctrl+Enter快捷回复和微博上的@指名回复功能都不陌生,在WordPress的评论栏方面我们同样可以添加这样的功能,一起来看使用jQuery实现WordPress中的Ctrl+Enter和@评论回复的方法:
    2016-05-05
  • jQuery配合coin-slider插件制作幻灯片效果的流程解析

    jQuery配合coin-slider插件制作幻灯片效果的流程解析

    coin-slider是GitHub上的一个人气JavaScript开源插件,用它来实现幻灯片效果只需要动手写很少的代码,下面我们就来看一下jQuery配合coin-slider插件制作幻灯片效果的流程解析.
    2016-05-05
  • jQuery自定义滚动条完整实例

    jQuery自定义滚动条完整实例

    这篇文章主要介绍了jQuery自定义滚动条,以完整实例形式分析了jQuery响应scroll事件及鼠标事件实现滚动条效果的相关技巧,需要的朋友可以参考下
    2016-01-01
  • 利用jquery获取select下拉框的值

    利用jquery获取select下拉框的值

    本篇文章主要介绍了利用jquery获取select下拉框的值,如果你jquery不是特别熟练,每次使用不常用的就要百度。那么这篇文章应该会有所帮助,需要的朋友可以过来参考下
    2016-11-11
  • JQuery 技巧和窍门整理(8个)

    JQuery 技巧和窍门整理(8个)

    JQuery 是一款快速、易于使用的 JavaScript 框架。芒果介绍几个实用的 JQuery 技巧和窍门。
    2010-04-04
  • jQuery版仿Path菜单效果

    jQuery版仿Path菜单效果

    昨日在一个前端网站上看见了一个老外写的纯用css3做的仿Path菜单,心里痒痒,于是也用jQuery写了一个,现在分享给大家
    2011-12-12

最新评论