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

梦里梦外; 2022-08-06 02:15 167阅读 0赞

![Center][]

在上一篇笔记本中，讲解了如何利用jQuery扩展全局函数和对象：[DOM笔记（六）：怎么进行JQuery扩展？][DOM_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);

测试插件：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>插件测试</title>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="jquery.example-plugin.js"></script>
    </head>
    <body>
        <h2>自定义JQuery插件测试</h2>
        <div>
            <div style="border:1px solid red;width:200px;">JavaScript技术</div>
            <div style="border:1px solid red;width:200px;">DOM技术</div>
            <div style="border:1px solid red;width:200px;">CSS技术</div>
            <div style="border:1px solid red;width:200px;">JQuery技术</div>
        </div>
        <script type="text/javascript">
            $(document).ready(function()
            {
                $("div>div").dwqs({padding:35,time:500,color:"#ccc"});
            });
        </script>
    </body>
    </html>

效果演示：[http://jqplugin.sinaapp.com/test.html][http_jqplugin.sinaapp.com_test.html]

代码下载：[http://download.csdn.net/detail/u011043843/8235387][http_download.csdn.net_detail_u011043843_8235387]

原文首发： [http://www.ido321.com/1333.html][http_www.ido321.com_1333.html]

[Center]: /images/20220806/5cc02569ed3d4f8793c2f440a5b59dfb.png
[DOM_JQuery]: http://www.ido321.com/1330.html
[http_jqplugin.sinaapp.com_test.html]: http://jqplugin.sinaapp.com/test.html
[http_download.csdn.net_detail_u011043843_8235387]: http://download.csdn.net/detail/u011043843/8235387
[http_www.ido321.com_1333.html]: http://www.ido321.com/1333.html