自己动手手写jQuery插件总结


Posted in Javascript onJanuary 20, 2015

jQuery是继Prototype之后的又一款优秀的JavaScript框架,深受广大开发者热爱,用户甚广。而jQuery一个很好的地方在 于用户的自定义,即我们可以书写自己的插件来完善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" });   

});
Javascript 相关文章推荐
JQuery-tableDnD 拖拽的基本使用介绍
Jul 04 Javascript
jquery制作居中遮罩层效果分享
Feb 21 Javascript
JavaScript中的函数声明和函数表达式区别浅析
Mar 27 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
EditPlus中的正则表达式 实战(4)
Dec 15 Javascript
原生js实现旋转木马轮播图效果
Feb 27 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
vue组件生命周期详解
Nov 07 Javascript
浅析vue-router实现原理及两种模式
Feb 11 Javascript
vue使用echarts实现水平柱形图实例
Sep 09 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
JavaScript学习心得之概述
Jan 20 #Javascript
DOM基础教程之使用DOM
Jan 19 #Javascript
DOM基础教程之模型中的模型节点
Jan 19 #Javascript
javascript正则表达式使用replace()替换手机号的方法
Jan 19 #Javascript
javascript正则表达式之search()用法实例
Jan 19 #Javascript
jQuery中delegate()方法用法实例
Jan 19 #Javascript
jQuery中die()方法用法实例
Jan 19 #Javascript
You might like
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
Js的MessageBox
2006/12/03 Javascript
List Installed Hot Fixes
2007/06/12 Javascript
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
2013/11/06 Javascript
document.execCommand()的用法小结
2014/01/08 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
js去除浏览器默认底图的方法
2015/06/08 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
JS使用parseInt解析数字实现求和的方法
2015/08/05 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
js自定义select下拉框美化特效
2016/05/12 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
2018/11/29 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
详解Python中的array数组模块相关使用
2016/07/05 Python
python数据结构之链表详解
2017/09/12 Python
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
python利用tkinter实现屏保
2019/07/30 Python
Python中使用socks5设置全局代理的方法示例
2020/04/15 Python
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
电大毕业个人生自我鉴定
2014/03/26 职场文书
保护母亲河倡议书
2014/04/14 职场文书
应聘护士求职信
2014/07/21 职场文书
民主生活会发言材料
2014/10/20 职场文书
公司会议开幕词
2015/01/29 职场文书
英文版辞职信
2015/02/28 职场文书
第一军规观后感
2015/06/12 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书
Python机器学习之基础概述
2021/05/19 Python
python 命令行传参方法总结
2021/05/25 Python
MySQL 如何限制一张表的记录数
2021/09/14 MySQL