在上一篇笔记本中，讲解了如何利用jQuery扩展全局函数和对象：DOM笔记（六）：怎么进行JQuery扩展？

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

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

  1. /*
  2. *示例插件功能：
  3. *光标移动到目标标签，标签移动，改变背景色；光标离开时，标签恢复原来的样式
  4. */
  5. (function($)
  6. {
  7.     // $.fn.extend()进行对象扩展
  8.     $.fn.extend({
  9.         // 插件功能实现
  10.         dwqs:function(options)
  11.         {
  12.             //主体
  13.         }
  14.     });
  15. })(jQuery);

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

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

添加功能代码

  1. // 将this引用的DOM元素转为JQuery对象
  2. var obj = $(this);
  3. // 鼠标经过时添加动画
  4. obj.mouseover(function()
  5. {
  6.     obj.animate({paddingLeft:options.padding},options.time);
  7.     obj.css("backgroundColor",options.color);
  8. });
  9. // 鼠标离开时恢复
  10. obj.mouseout(function()
  11. {
  12.     obj.animate({paddingLeft:0},options.time);
  13.     obj.css("backgroundColor","");
  14. });

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

  1. /*
  2. *示例插件功能：
  3. *光标移动到目标标签，标签移动，改变背景色；光标离开时，标签恢复原来的样式
  4. */
  5. (function($)
  6. {
  7.     // $.fn.extend()进行对象扩展
  8.     $.fn.extend({
  9.         // 插件功能实现
  10.         dwqs:function(options)
  11.         {
  12.             // 为插件参数设定默认值
  13.             var defaults =
  14.          {
  15.              padding:20,    //移动距离
  16.                 time:300,        //移动时间
  17.                 color:"red"     //背景颜色
  18.             };
  19.             // 使用$.extend()覆盖插件中的默认值
  20.             var options = $.extend(defaults,options);
  21.             return this.each(function()
  22.             {
  23.                 // 将this引用的DOM元素转为JQuery对象
  24.                 var obj = $(this);
  25.                 // 鼠标经过时添加动画
  26.                 obj.mouseover(function()
  27.                 {
  28.                     obj.animate({paddingLeft:options.padding},options.time);
  29.                     obj.css("backgroundColor",options.color);
  30.                 });
  31.                 // 鼠标离开时恢复
  32.                 obj.mouseout(function()
  33.                 {
  34.                     obj.animate({paddingLeft:0},options.time);
  35.                     obj.css("backgroundColor","");
  36.                 });
  37.             });
  38.         }    //不要有;号  否则出错
  39.     });
  40. })(jQuery);

测试插件：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>插件测试</title>
  6.     <script type="text/javascript" src="jquery.js"></script>
  7.     <script type="text/javascript" src="jquery.example-plugin.js"></script>
  8. </head>
  9. <body>
  10.     <h2>自定义JQuery插件测试</h2>
  11.     <div>
  12.         <div style="border:1px solid red;width:200px;">JavaScript技术</div>
  13.         <div style="border:1px solid red;width:200px;">DOM技术</div>
  14.         <div style="border:1px solid red;width:200px;">CSS技术</div>
  15.         <div style="border:1px solid red;width:200px;">JQuery技术</div>
  16.     </div>
  17.     <script type="text/javascript">
  18.         $(document).ready(function()
  19.         {
  20.             $("div>div").dwqs({padding:35,time:500,color:"#ccc"});
  21.         });
  22.     </script>
  23. </body>
  24. </html>

效果演示：http://jqplugin.sinaapp.com/test.html

代码下载：http://download.csdn.net/detail/u011043843/8235387

原文首发：http://www.ido321.com/1333.html

DOM笔记（七）：开发JQuery插件的更多相关文章

  1. 教你开发jQuery插件（转）

    教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文: ...

  2. 开发JQuery插件(转)

    教你开发jQuery插件(转)   阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原 ...

  3. 开发jQuery插件的基本步骤

    在进行开发jQuery插件前,首先要了解一些知识: 1.闭包 1.1.闭包的作用: · 避免全局依赖 · 避免第三方破坏 · 兼容jQuery操作符'$'和jQuery 1.2.闭包的形式 (func ...

  4. 自己动手开发jQuery插件

    因为工作需要,所以这几天琢磨了一下关于jQuery插件开发的问题,经过一天鏖战,终于完成自己动手做的第一个jQuery插件,对于俺这种见了css就蛋疼菊紧的人来说,一天时间8小时,保守估计有5个小时在 ...

  5. 快速开发 jQuery 插件的 10 大技巧（转）

    转自:http://www.oschina.net/news/41776/jquery-10-tips 在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模 ...

  6. 快速开发 jQuery 插件的 10 大技巧

    在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式.这样我就可以 copy & paste 大部分的代码结构,只要专注最主要的逻辑代码就行了. ...

  7. 如何开发jQuery插件

    一:普及JQuery知识 知识1:用JQuery写插件时,最核心的方法有如下两个: $.extend(object) 可以理解为,为JQuery 类添加一个静态方法. $.fn.extend(obje ...

  8. 快速开发jQuery插件的10大技巧

    原文链接:http://wiki.itivy.com/?p=36 在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式.这样我就可以 copy & ...

  9. 快速开发 jQuery 插件的 10 大技巧(转)

    1. 把你的代码全部放在闭包里面 这是我用的最多的一条.但是有时候在闭包外面的方法会不能调用.不过你的插件的代码只为你自己的插件服务,所以不存在这个问题,你可以把所有的代码都放在闭包里面.而方法可能应 ...

随机推荐

  1. 【资料分享】 OpenCV精华收藏

    OpenCV精华收藏 SkySeraph Dec.29th 2010  HQU Email:zgzhaobo@gmail.com    QQ:452728574 Latest Modified Dat ...

  2. ftrace的使用【转】

    转自:http://blog.csdn.net/cybertan/article/details/8258394 This article explains how to set up ftrace ...

  3. [HDOJ3466]Proud Merchants（贪心+01背包）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3466 n个商人,每个商人有一个物品,物品有价格p.价值v还有一个交易限制q.q的意义是假如你现在拥有的 ...

  4. aptana studio 3支持jquery

    首先要说的一点是,如果你不使用PortableGit,就不要安装,否则New From Template中会缺失大部分模板．至于还有什么缺陷,暂时没测出来,本人也是刚玩aptana studio 3哈 ...

  5. maven3实战之设置HTTP代理

    maven3实战之设置HTTP代理 ---------- 有时候你所在的公司基于安全因素考虑,要求你使用通过安全认证的代理访问因特网.这种情况下,就需要为Maven配置HTTP代理,才能让它正常访问外 ...

  6. spring mvc 自定义转换器

    <!-- 注册转化器 --> <mvc:annotation-driven conversion-service="conversionService" /> ...

  7. 编写jquery插件的分享

    一.类级别($.extend) 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.extend(o ...

  8. HDU 1851 (巴什博奕 SG定理) A Simple Game

    这是由n个巴什博奕的游戏合成的组合游戏. 对于一个有m个石子,每次至多取l个的巴什博奕,这个状态的SG函数值为m % (l + 1). 然后根据SG定理,合成游戏的SG函数就是各个子游戏SG函数值的异 ...

  9. java基础:数据类型

    一:基本数据类型 (1):整数类型   byte,short,int,long (2):浮点类型   float , double (3):布尔类型 boolean 注意: long 类型的变量后面要 ...

  10. 【同行说技术】swift最全学习资料汇集（一）

    Swift,苹果于2014年WWDC(苹果开发者大会)发布的新开发语言,可与Objective-C*共同运行于Mac OS和iOS平台,用于搭建基于苹果平台的应用程序.2015年12月4日,苹果公司宣 ...