首页 > 代码库 > DOM笔记（七）：开发JQuery插件
DOM笔记（七）：开发JQuery插件
在上一篇笔记本中，讲解了如何利用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="http://www.mamicode.com/jquery.js"></script> <script type="text/javascript" src="http://www.mamicode.com/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://download.csdn.net/detail/u011043843/8235387
原文首发：http://www.ido321.com/1333.html
DOM笔记（七）：开发JQuery插件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。