开发自己需要的jQuery插件,看个示例说明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title> new document </title> <meta name="generator" content="editplus"> <meta name="author" content=""> <meta name="keywords" content=""> <meta name="description" content=""> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type="text/javascript"> /* jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数, 另一种是对象级别的插件开发,即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。 1、类级别的插件开发 类级别的插件开发最直接的理解就是给jQuery类添加类方法,可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数,将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展: */ //1.1定义一个全局函数 jQuery.foo = function() { alert('添加一个新的全局函数'); } //定义多个全局函数 jQuery.bar = function() { alert('再增加一个全局函数'); } //1.2使用extend定义全局函数 jQuery.extend({ foo1:function() { alert('extend 定义全局函数1'); }, bar1:function() { alert('extend 定义全局函数2'); } }); //1.3 使用命名空间定义函数 jQuery.plugin = { foo2:function() { alert('使用namespace定义函数'); } } $(function(){ $.foo(); $.bar(); $.foo1(); $.bar1(); $.plugin.foo2(); }); /* 2、对象级别的插件开发 对象级别的插件开发需要如下的两种形式: */ //形式一 (function($){ $.fn.extend({ foo3:function() { alert('对象级别插件extend方式1'); }, bar3:function() { alert('对象级别插件extend方式2'); } }) })(jQuery); //形式二 (function($){ $.fn.foo4 = function() { alert('对象级别插件fn方式'); } })(jQuery); //接收参数来控制插件的行为 (function($){ $.fn.bar4 = function(options) { var defaults = {aaa:'1',bbb:'2'}; var opts = $.extend(defaults, options); alert('参数值:aaa:'+opts.aaa+';bbb:'+opts.bbb); } })(jQuery); //提供公有方法访问插件的配置项值 (function($){ $.fn.foo5 = function(options) { var opts = $.extend({}, $.fn.foo5.defaults, options); alert('参数值:aaa:'+opts.aaa+';bbb:'+opts.bbb); } $.fn.foo5.defaults = {aaa:'1',bbb:'2'}; })(jQuery); //提供公有方法来访问插件中其他的方法 (function($){ $.fn.bar5 = function(options) { $.fn.bar5.alert(options); } $.fn.bar5.alert = function(params) { alert(params); } })(jQuery); $(function(){ $('#test').foo3(); $('#test').bar3(); $('#test').foo4(); $('#test').bar4(); $('#test').bar4({aaa:'3'}); $('#test').bar4({aaa:'3',bbb:'4'}); $('#test').foo5(); $('#test').foo5({aaa:'5',bbb:'6'}); $('#test').bar5('aaaa'); }); </script> </head> <body> <div id="test"></div> </body> </html>更多可以参看:jQuery基础教程
来自javaeye的这篇文件介绍的不错: