DOM笔记（七）：开发JQuery插件-白红宇

DOM笔记（七）：开发JQuery插件

阅读量：4286 次

发布时间：2019-05-27

本文共 2242 字，大约阅读时间需要 7 分钟。

在上一篇笔记本中，讲解了如何利用jQuery扩展全局函数和对象：

在这篇笔记本中，将开发一个简单的动画插件，名称是example-plugin，用其实现一个简单的功能：光标移动到目标标签，标签移动，改变背景色；光标离开时，标签恢复原来的样式。

因为是jQuery对象的扩展，采用jQuery.fn.extend()进行扩展，插件名是dwqs,并且使用闭包：

/**示例插件功能：*光标移动到目标标签，标签移动，改变背景色；光标离开时，标签恢复原来的样式*/(function($){    // $.fn.extend()进行对象扩展    $.fn.extend({        // 插件功能实现        dwqs:function(options)        {            //主体        }       });})(jQuery);

为插件定义默认参数，并用$.extend()扩展：

// 为插件参数设定默认值 var defaults =  {     padding:20,    //移动距离     time:300,        //移动时间     color:"red"     //背景颜色 }; // 使用$.extend()覆盖插件中的默认值 var options = $.extend(defaults,options);

添加功能代码

// 将this引用的DOM元素转为JQuery对象var obj = $(this);// 鼠标经过时添加动画obj.mouseover(function(){    obj.animate({paddingLeft:options.padding},options.time);    obj.css("backgroundColor",options.color);});// 鼠标离开时恢复obj.mouseout(function(){    obj.animate({paddingLeft:0},options.time);    obj.css("backgroundColor","");});

插件的文件名命名为example-plugin.js保存，完整代码如下：

/**示例插件功能：*光标移动到目标标签，标签移动，改变背景色；光标离开时，标签恢复原来的样式*/(function($){    // $.fn.extend()进行对象扩展    $.fn.extend({        // 插件功能实现        dwqs:function(options)        {            // 为插件参数设定默认值            var defaults =          {             padding:20,    //移动距离                time:300,        //移动时间                color:"red"     //背景颜色            };            // 使用$.extend()覆盖插件中的默认值            var options = $.extend(defaults,options);            return this.each(function()            {                // 将this引用的DOM元素转为JQuery对象                var obj = $(this);                // 鼠标经过时添加动画                obj.mouseover(function()                {                    obj.animate({paddingLeft:options.padding},options.time);                    obj.css("backgroundColor",options.color);                });                // 鼠标离开时恢复                obj.mouseout(function()                {                    obj.animate({paddingLeft:0},options.time);                    obj.css("backgroundColor","");                });            });        }    //不要有;号  否则出错    });})(jQuery);

测试插件：

    
        插件测试            自定义JQuery插件测试
    
            
     
      JavaScript技术
     
        
     
      DOM技术
     
        
     
      CSS技术
     
        
     
      JQuery技术