自己动手手写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 get和post 方法传值注意事项
Nov 03 Javascript
jquery select下拉框操作的一些说明
Apr 02 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
Mar 26 Javascript
JavaScript中的数值范围介绍
Dec 29 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
Mar 31 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
Apr 23 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
Sep 18 Javascript
koa+mongoose实现简单增删改查接口的示例代码
May 13 Javascript
vue实现按需加载组件及异步组件功能
May 27 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 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维护文件系统
2006/10/09 PHP
php桌面中心(四) 数据显示
2007/03/11 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
javascript中caller和callee详解
2015/08/10 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
深入解析JavaScript中的arguments对象
2016/06/12 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
详解在React项目中安装并使用Less(用法总结)
2019/03/18 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
2019/11/21 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
Python列表切片常用操作实例解析
2020/03/10 Python
python爬取抖音视频的实例分析
2021/01/19 Python
python 对xml解析的示例
2021/02/27 Python
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
电子商务应届生求职信
2013/11/16 职场文书
《白鹅》教学反思
2014/04/13 职场文书
小学班长竞选演讲稿
2014/04/24 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
小石潭记导游词
2015/02/03 职场文书
任命书格式模板
2015/09/22 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
Pytest中conftest.py的用法
2021/06/27 Python