JQUERY封装插件详解.pdf

《JQUERY封装插件详解.pdf》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、方法一：$.extend()向jquery中添加函数例：$.extend({sayHello:function(name){alert('hello'+(name?name:'Dude')+'!');}})$.sayHello();//调用$.sayHello('Wayou');//带参数调用$.extend(target,object1,[objectN])用一个或多个其他对象来扩展一个对象，返回被扩展的对象varsettings={validate:false,limit:5,name:'foo'};varopt

2、ions={validate:true,name:'bar'};$.extend(settings,options);结果：settings=={validate:true,limit:5,name:'bar'};方法二：$.fn上面添加一个方法。$.fn.pluginName=fucntion(){//yourcode}例子:将所有连接颜色转为红色$.fn.myPlugin=function(){this.css('color','red');}$('a').myPlugin();//将所有标签都变为红色形式

3、1：$.fn.extend({pluginName:function(){//yourcode}})(jQuery);形式2：;(function($){$.fn.pluginName=function(){//yourcode}})(jQuery);形式1与形式2一致方法三：将$.extend()和$.fn()合并$.fn.myPlugin=function(options){vardefaults={'color':'red','fontSize':'12px'};varsettings=$.extend(def

4、aults,options);//将options对象合并到defaults对象varsettings=$.extend({},defaults,options);//将options和defaults合并到{}空对象中，比上面的优势就是不会覆盖默认对象defaults//返回值returnthis.css({'color':settings.color,'fontSize':settings.fontSize});}JQuery插件开发步骤1、使用闭包;(function($)){}(jQuery);a)、避免全局

5、依赖b)、避免第三方破坏c)、兼容jquery操作符'$'和'jQuery'2、扩展JQuery提供了2个供用户扩展的“基类”--$.extend和$.fn.extend$.extend用于自身方法$.fn.extentd用户扩展jquery类3、选择器a)、尽量使用Id选择器b)、样式选择器应该尽量明确指定的tagName，例如className为jq的div，要写成$('div.jq')而不是$('.jq')