自己动手手写jQuery插件总结_jquery-js教程-PHP中文网

自己动手手写jQuery插件总结_jquery

php中文网

发布： 2016-05-16 16:19:11

原创

1425人浏览过

jquery是继prototype之后的又一款优秀的javascript框架，深受广大开发者热爱，用户甚广。而jquery一个很好的地方在于用户的自定义，即我们可以书写自己的插件来完善jquery的各项功能，定制自己所需要的功能，剔除冗余的代码，在页面加载时候可以有一定程度上的提升。

面试之后，触动很大，就是你要做的是一个了解十项还是精通一项的开发者？于是花了几天时间苦逼的研读jQuery源码，了解了jQuery的事件机制、选择器以及浏览器兼容性是如何做到的等。之后就一直想要书写一款jQuery插件，来简单实现自己的一个小功能。

如上图所示，插件实现的功能是当鼠标位于某个链接其上时候，链接移动，鼠标离开之后，链接归位。

Html核心部分即

复制代码代码如下:

星期一

星期二

星期三

星期四

上面开始时候的功能如果我们单纯只是使用jQuery来实现的话是这样实施：

仿蘑菇街.美丽说.简单的源码

网站有三种风格： 1、蘑菇街模板 2、美丽说模板 3、简单的模板含插件，自动喜欢数，一键删除商品，自动采集淘宝商品，可发布文章做seo，还有其它很多，不一一介绍，程序结构清晰，1分钟就上手，功能非常强大！自己采集商品，自动采集文章，采集商品评论，设置随机喜欢数！第三方登录模板，微博，QQ，淘宝都可以登录！巨商网源码社区免费提供 bbs.viphe.net

查看详情

复制代码代码如下:

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

});

大家都在看：

Tailwind CSS Forms 插件样式定制：利用 CSS 进行深度覆盖在MVC应用中实现Chosen下拉列表的3字符触发自动完成搜索覆盖 Tailwind CSS Forms 插件的默认样式与焦点颜色 Tailwind CSS Forms插件：深度定制默认颜色与焦点样式 jQuery Mask插件：为电话号码输入框添加不可移除的前导零