标签:
一、类级别($.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);
二、对象级别
对象级别可以理解为基于对象的拓展,如$(‘#..‘).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插件开发过程
1.定义作用域:为插件定义私有作用域,外部代码不能直接访问插件内部的代码,插件内部的代码不污染全局变量
(function($){ //内部插件代码实现 })(jQuery)
2.为jQuery扩展一个插件:为jQuery的实例添加一个扩展方法,该扩展方法可以接收一些参数
(function($){ $.fn.myTable=function(options){ //具体实现代码 } })(jQuery)
3.设置默认值:为扩展方法设置默认值,一般会将默认属性对象定义为defaults。使用$.extend(defaults.options)将默认值和传入的参数进行合并
(function($){ var defaults={ name:‘插件‘, versions:‘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方法执行回调函数
(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‘); } });
标签:
原文地址:http://www.cnblogs.com/ecosu/p/4788392.html