jQuery 插件编写
一、类级别（$.extend）
? ??类级别你可以理解为拓展jquery类，最明显的例子是$.ajax(...),相当于静态方法。? ? 开发扩展其方法时使用$.extend方法，即jQuery.extend(object);?
?
$.extend({ add:function(a,b){return a+b;} , minus:function(a,b){return a-b;} }); //页面中调用：var i = $.add(3,2);var j = $.minus(3,2);?
?
?
二、 对象级别
????对象级别则可以理解为基于对象的拓展，如$("#table").changeColor(...); 这里这个changeColor呢，就是基于对象的拓展了。
开发扩展其方法时使用$.fn.extend方法，即jQuery.fn.extend(object);?
?
$.fn.extend({ check:function(){ return this.each({ this.checked=true; }); }, uncheck:function(){ return this.each({ this.checked=false; }); }});页面中调用：$('input[type=checkbox]').check();$('input[type=checkbox]').uncheck();?
?
?
三、 jQuery插件开发过程
?(function ($){ //内部插件代码实现})(jQuery)
?
?
? ? 2、为jQuery扩展一个插件：为jQuery的实例添加一个宽展方法。该宽展方法可以接收一些参数。
? ? ? ? ? ??
(function ($){ $.fn.myTable = function (options){ //具体代码实现 } })(jQuery)?? ??????? ?
?
????3、设置默认值：为扩展方法设置默认值，一般会将默认属性对象定义为defaults。使用$.extend(defaults,options)将默认值和传入的参数进行合并
?
(function ($){ var defaults = { name:"我的插件", version:"1.0" } $.fn.myTable = function (options){ var options = $.extend(defaults,options); } })(jQuery) ?
?
? ? 4、支持jQuery的连接调用：循环把每个元素返回。
?
(function ($){ var defaults = { name:"我的插件", version:"1.0" } $.fn.myTable = function (options){ var options = $.extend(defaults,options||{}); return this.each(function(){ //对每个元素进行操作 }); } })(jQuery) ?
? ?
?
? ? 5、插件里的方法：为了使代码结构化可视化，需要用到function。在插件里的方法不能被外界调用。
?
(function ($){ var defaults = { name:"我的插件", version:"1.0" } var showName = function (obj){ $(obj).append(function(){ return "name"; }); } $.fn.myTable = function (options){ var options = $.extend(defaults,options); return this.each(function(){ showName(this); }); } })(jQuery) ?
?
? ? 6、自定义回调函数：使用call和apply方法执行回调函数，
?
<!DOCTYPE html><html lang="en"><body><div>Out And In Fade</div><div>Out And In Fade</div><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script>(function ($) { $.fn.outAndInFade = function (customOptions) { var options = $.extend({}, $.fn.outAndInFade.defaultOptions, customOptions || {}); return this.each(function () { $(this).on('click', function () { if ($.isFunction(options.complete)) { options.complete.apply(this); } }); }); }; $.fn.outAndInFade.defaultOptions = { complete: null };})(jQuery);jQuery('div').outAndInFade({ complete: function () { $(this).css('background', '#ff9'); }});</script></body></html> ?
?