自己动手手写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 相关文章推荐
ExtJs3.0中Store添加 baseParams 的Bug
Mar 10 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
Node.js中看JavaScript的引用
Apr 22 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
angular中两种表单的区别(响应式和模板驱动表单)
Dec 06 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 Javascript
Vue指令指令大全
Feb 09 Javascript
js尾调用优化的实现
May 23 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
Jun 29 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
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
PHP根据两点间的经纬度计算距离
2014/10/31 PHP
php把数组值转换成键的方法
2015/07/13 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
thinkPHP框架中layer.js的封装与使用方法示例
2019/01/18 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
jquery1.9 下检测浏览器类型和版本的方法
2013/12/26 Javascript
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
解决js下referer兼容各大浏览器的方法
2014/11/03 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
vue快捷键与基础指令详解
2017/06/01 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
json2.js 入门教程之使用方法与实例分析
2017/09/14 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
2019/03/12 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
Vue项目环境搭建详细总结
2019/09/26 Javascript
jQuery实现弹出层效果
2019/12/10 jQuery
angular共享依赖的解决方案分享
2020/10/15 Javascript
Python subprocess模块常见用法分析
2018/06/12 Python
python之django母板页面的使用
2018/07/03 Python
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
经典C++面试题一
2016/11/06 面试题
中学生差生评语
2014/01/30 职场文书
小学校园之星事迹材料
2014/05/16 职场文书
应届生求职信范文
2014/05/26 职场文书
文员岗位职责
2015/02/04 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
《检阅》教学反思
2016/02/22 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
Oracle创建只读账号的详细步骤
2021/06/07 Oracle