自己动手手写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 相关文章推荐
js 操作select相关方法函数
Dec 06 Javascript
求数组最大最小值方法适用于任何数组
Aug 16 Javascript
document.execCommand()的用法小结
Jan 08 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
删除条目时弹出的确认对话框
Jun 05 Javascript
js事件绑定快捷键以ctrl+k为例
Sep 30 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 Javascript
JS实现简单的二元方程计算器功能示例
Jan 03 Javascript
js select下拉联动 更具级联性!
Apr 17 Javascript
vue项目优化之通过keep-alive数据缓存的方法
Dec 11 Javascript
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
php基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
destoon各类调用汇总
2014/06/20 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
WordPress中&quot;无法将上传的文件移动至&quot;错误的解决方法
2015/07/01 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
PhpStorm配置Xdebug调试的方法步骤
2019/02/02 PHP
JavaScript中也使用$美元符号来代替document.getElementById
2010/06/19 Javascript
JQuery实现简单验证码提示解决方案
2012/12/20 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
AngularJS语法详解(续)
2015/01/23 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
js实现的彩色方块飞舞奇幻效果
2016/01/27 Javascript
JS调用Android、Ios原生控件
2017/01/06 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
js 判断当前时间是否处于某个一个时间段内
2019/09/19 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
el-form 多层级表单的实现示例
2020/09/10 Javascript
javascript实现电商放大镜效果
2020/11/23 Javascript
在linux下实现 python 监控usb设备信号
2019/07/03 Python
Python 读取位于包中的数据文件
2020/08/07 Python
MIS软件工程师的面试题
2016/04/22 面试题
十佳党员事迹材料
2014/08/28 职场文书
网络营销计划
2015/01/17 职场文书
让世界充满爱观后感
2015/06/10 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书
2016教师暑期培训学习心得体会
2016/01/09 职场文书
导游词之上海豫园
2019/10/24 职场文书
vue前端工程的搭建
2021/03/31 Vue.js
python如何查找列表中元素的位置
2022/05/30 Python
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python