自己动手手写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 相关文章推荐
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
JS的location.href跳出框架打开新页面的方法
Sep 04 Javascript
JavaScript 学习笔记之操作符
Jan 14 Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 Javascript
vue使用axios时关于this的指向问题详解
Dec 22 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 Javascript
微信小程序实现消息框弹出动画
Apr 18 Javascript
Vue中常用rules校验规则(实例代码)
Nov 14 Javascript
webpack打包优化的几个方法总结
Feb 10 Javascript
微信小程序实现可长按移动控件
Nov 01 Javascript
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
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
截获网站title标签之家内容的例子
2006/10/09 PHP
利用static实现表格的颜色隔行显示的代码
2007/09/02 PHP
yii框架中的Url生产问题小结
2012/01/16 PHP
php批量删除超链接的实现方法
2015/10/19 PHP
php array_slice 取出数组中的一段序列实例
2016/11/04 PHP
jquery实现居中弹出层代码
2010/08/25 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
javascript写的一个模拟阅读小说的程序
2014/04/04 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
2015/08/26 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
2016/04/13 Javascript
ES6生成器用法实例分析
2017/04/10 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
iview Upload组件多个文件上传的示例代码
2018/09/30 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
2019/04/10 Javascript
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
Python IDLE入门简介
2017/12/08 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
自动化专业毕业生自荐信
2013/11/01 职场文书
致跳高运动员广播稿
2014/01/13 职场文书
ktv总经理岗位职责
2014/02/17 职场文书
创业融资计划书
2014/04/25 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
办理护照工作证明
2014/10/10 职场文书
幼师求职自荐信
2015/03/26 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
男方家长婚礼答谢词
2015/09/29 职场文书
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技