开发自己需要的jQuery插件,看个示例说明
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');});