自己动手手写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 相关文章推荐
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
Jun 09 Javascript
javaScript面向对象继承方法经典实现
Aug 20 Javascript
javascript使用isNaN()函数判断变量是否为数字
Sep 21 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
如何实现星星评价(jquery.raty.js插件)
Dec 21 Javascript
JS 调试中常见的报错问题解决方法
May 20 Javascript
JavaScript之iterable_动力节点Java学院整理
Jun 29 Javascript
JS/CSS实现字符串单词首字母大写功能
Sep 03 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 Javascript
Vue实现动态查询规则生成组件
May 27 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
删除无限级目录与文件代码共享
2006/07/12 PHP
聊天室php&amp;mysql(六)
2006/10/09 PHP
php正则表达式获取内容所有链接
2015/07/24 PHP
JavaScript在XHTML中的用法详解
2013/04/11 Javascript
js获得参数的getParameter使用示例
2014/02/26 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
Python中使用PDB库调试程序
2015/04/05 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
Python实现脚本锁功能(同时只能执行一个脚本)
2017/05/10 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
诺思信科技(南京)有限公司.NET笔试题答案
2013/07/06 面试题
什么是Web Service?
2012/07/25 面试题
自荐书格式
2013/12/01 职场文书
英文简历中的自我评价用语
2013/12/09 职场文书
平安工地汇报材料
2014/08/19 职场文书
研修心得体会
2014/09/04 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
对领导班子的意见和建议
2015/06/08 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python
pytorch实现线性回归以及多元回归
2021/04/11 Python
你真的了解redis为什么要提供pipeline功能
2021/06/22 Redis
MYSQL 的10大经典优化案例场景实战
2021/09/14 MySQL
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL