插件开发包括两种:1.类级别的插件开发,即$.extend()扩展jquery对象本身;2.对象级别的插件开发,即$.fn.extend()扩展jquery元素集来提供新的方法。
1.类级别的插件开发
1 2 3 4 5 6 |
(function($){ $.extend({ hello:function(){alert("hello world");}, world:function(){alert(hello world);} }) })(jQuery) |
调用:$.hello(),$.world()
2.采用命名空间
1 2 3 4 5 6 |
(function($){ $.myExtend({ hello:function(){alert("hello world");}, world:function(){alert(hello world);} }) })(jQuery) |
调用:$.myExtend.hello(),$.myExtend.world()
2.对象级别的插件开发
1 2 3 4 5 |
(function($){ $.fn.extend({ myAnimate:function(){} }) })(jQuery) |
调用:$(“#myAnimate”).myAnimate()
1 2 3 |
(function($){ $.fn.myAnimate=function(){} })(jQuery) |
调用:$(“#myAnimate”).myAnimate()
3.$.extend()有两种用法
一种是扩展方法,如上述所示。
另一种是合并对象获得一个新的对象,$([deep],target,options,defaluts,…),
例如:
1 2 3 |
var settings={validate:false,limit:5,name:"sm"}; var defaults={validate:true,limit:2} var settings=$.extend(settings,defaults); |
结果:settings={validate:true,limit:2,name:”sm”}
1 2 3 4 |
var empty={}; var options={validate:false,limit:5,name:"sm"}; var defaults={validate:true,limit:2} var settings=$.extend(empty,options,defaults); |
结果:settings={validate:true,limit:2,name:”sm”};
deep可以为ture或false
1 |
var result={true,{},name:"a",num:3,location:{city:"H",county:"A"},location:{state:"D",county:"CH"}} |
结果:result={name:”a”,num:3,location:{city:”H”,state:”D”,county:”CH”}}
1 |
var result={false,{},name:"a",num:3,location:{city:"H",county:"A"},location:{state:"D",county:"CH"}} |
结果:result={name:”a”,num:3,location:{state:”D”,county:”CH”}}
4.匿名函数(最大的用途是创建闭包)
例如:(function($){})(jQuery)等价于!function(){}(jQuery)<这个用在bootstrp框架中>
5.回到顶部的例子
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
(function($){ $.extend({ myScrollUp:function(options){ var defaults={ scrollName:"scrollUp", topDistance:"300", topSpeed:300, animation:"slide", animationInSpeed:200, animationOutSpeed:200, scrollText:"回到顶部", activeOverlay:false } var defaults=$.extend(defaults,options); var sn="#"+defaults.scrollName, td=defaults.topDistance, ts=defaults.topSpeed, an=defaults.animation, is=defaults.animationInSpeed, os=defaults.animationOutSpeed, st=defaults.scrollText, ao=defaults.activeOverlay; $("<a/>",{id:defaults.scrollName,title:st,text:st,herf:"#top"}).appendTo("body"); $(sn).css({"position":"fixed","display":"none","z-index":"123456789"}); if(ao) { $("body").append("<div id='"+defaults.scrollName+"-active'></div>"); $(sn+"-active").css({"position":"absolute","top":td+"px","width":"100%","border-top":"1px dotted "+ao,"z-index":"2147483647"}) } $(window).scroll(function(){ if(an==="fade") $($(window).scrollTop()>td?$(sn).fadeIn(is):$(sn).fadeOut(os)); else if(an==="slide") $($(window).scrollTop()>td?$(sn).slideDown(is):$(sn).slideUp(os)); else $($(window).scrollTop()>td?$(sn).show():$(sn).hide()); }); $(sn).click(function(event){ $("html, body").animate({scrollTop:0},ts); return false }) } }) })(jQuery); |