自己动手手写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 动态添加表格行
Jun 22 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 Javascript
基于JavaScript实现轮播图代码
Jul 14 Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 Javascript
AngularJS ng-bind 指令简单实现
Jul 30 Javascript
解析javascript图片懒加载与预加载的分析总结
Oct 27 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
Vue 实用分页paging实例代码
Apr 12 Javascript
详解如何去除vue项目中的#——History模式
Oct 13 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 Javascript
vue-cli设置publicPath小记
Apr 14 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
codeigniter框架批量插入数据
2014/01/09 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
yii2.0之GridView自定义按钮和链接用法
2014/12/15 PHP
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
Javascript document.referrer判断访客来源网址
2020/05/15 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
JavaScript中获取样式的原生方法小结
2014/10/08 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
原生JS实现简单放大镜效果
2017/02/08 Javascript
JavaScript面向对象精要(上部)
2017/09/12 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
python实现报表自动化详解
2017/11/16 Python
python psutil库安装教程
2018/03/19 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
python使用yaml 管理selenium元素的示例
2020/12/01 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
工程师求职简历的自我评价分享
2013/10/10 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
教师师德承诺书
2014/03/26 职场文书
教师求职自荐书
2014/06/14 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
司机个人年终总结
2015/03/03 职场文书
党风廉政承诺书2016
2016/03/25 职场文书
JavaScript canvas实现流星特效
2021/05/20 Javascript
Python anaconda安装库命令详解
2021/10/16 Python
「睡美人」爱洛公主粘土人开订
2022/03/22 日漫
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers