自己动手手写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 相关文章推荐
JavaScript 解析Json字符串的性能比较分析代码
Dec 16 Javascript
浅析JavaScript中的常用算法与函数
Nov 21 Javascript
不使用jquery实现js打字效果示例分享
Jan 19 Javascript
jQuery is()函数用法3例
May 06 Javascript
一个JavaScript用逗号分割字符串实例
Sep 22 Javascript
Node.js中调用mysql存储过程示例
Dec 20 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
May 29 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 Javascript
Javascript var变量删除原理及实现
Aug 26 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生成指定随机字符串的简单实现方法
2015/04/01 PHP
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
Swoole-1.7.22 版本已发布,修复PHP7相关问题
2015/12/31 PHP
php观察者模式应用场景实例详解
2017/02/03 PHP
JavaScript 程序编码规范
2010/11/23 Javascript
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
极力推荐10个短小实用的JavaScript代码段
2016/08/03 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
js+canvas实现验证码功能
2020/09/21 Javascript
jQuery操作元素追加内容示例
2020/01/10 jQuery
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
git进行版本控制心得详谈
2017/12/10 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
Expected conditions模块使用方法汇总代码解析
2020/08/13 Python
详解Python调用系统命令的六种方法
2021/01/28 Python
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
全球采购的街头服饰和帽子:Urban Excess
2020/10/28 全球购物
实习护士自我鉴定
2013/10/13 职场文书
高二英语教学反思
2014/01/19 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书
2015中学教学工作总结
2015/07/22 职场文书
2019财务毕业实习报告
2019/06/27 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
Go各时间字符串使用解析
2021/04/02 Golang
python - asyncio异步编程
2021/04/06 Python
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android