自己动手手写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点击页面任何区域实现鼠标焦点十字效果
Jun 21 Javascript
Javascript 遍历页面text控件详解
Jan 06 Javascript
jquery统计用户选中的复选框的个数
Jun 06 Javascript
jQuery中extend函数详解
Feb 13 Javascript
使用AngularJS实现表单向导的方法
Jun 19 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 Javascript
轻松搞定js表单验证
Oct 13 Javascript
JS实现上传图片的三种方法并实现预览图片功能
Jul 14 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
Oct 30 Javascript
el-form 多层级表单的实现示例
Sep 10 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
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
JSON 学习之JSON in JavaScript详细使用说明
2010/02/23 Javascript
js函数调用常用方法详解
2012/12/03 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
2014/05/19 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
JavaScript之Vue.js【入门基础】
2016/12/06 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
原生js轮播(仿慕课网)
2017/02/15 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
js实现日历与定时器
2017/02/22 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
React 使用recharts实现散点地图的示例代码
2018/12/07 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
python基础教程之lambda表达式使用方法
2014/02/12 Python
Python验证企业工商注册码
2015/10/25 Python
python 全文检索引擎详解
2017/04/25 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
Python从使用线程到使用async/await的深入讲解
2018/09/16 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
python logging.info在终端没输出的解决
2020/05/12 Python
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
英国游戏机和游戏购物网站:365games.co.uk
2018/06/18 全球购物
链表面试题-一个链表的结点结构
2015/05/04 面试题
幼儿园家长会欢迎词
2014/01/09 职场文书
中层干部培训方案
2014/06/16 职场文书
煤矿安全生产工作总结
2015/08/13 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书
导游词之张家口
2019/12/13 职场文书
Pygame Rect区域位置的使用(图文)
2021/11/17 Python
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL