jQuery定义插件的方法.docx

jQuery定义插件的方法jQuery定义插件的方法有些WEB开发者，会引用一个JQuery类库，然后在网页上写一写$("#")，$(".")，写了几年就对别人说非常熟悉JQuery。我曾经也是这样的人，直到有一次公司里的技术交流，我才改变了自己对自己的看法。扩展jquery的时候。最核心的方法是以下两种：$.extend(object)可以理解为jquery添加一个静态方法$.fn.extend(object)可以理解为jquery实例添加一个方法$.extend(object)例子：/*$.extend定义与调用*****************************************/$.extend({fun:function(){alert("执行方法一");}});//定义$.fun();//调用$.fn.extentd(object)/*$.fn.extend定义与调用*****************************************/$.fn.extend({fun:function(){alert("执行方法");}});$(this).fun();//等同于$.fn.fun=function(){alert("执行方法三");}$(this).fun();定义jquery插件的基本结构1．定义作用域：为插件定义一个私有作用域。外界代码不能直接访问插件内部。插件内部代码不受外界干扰，也不会污染到全局变量。//step定义JQuery的作用域(function($){})(jQuery);2.为插件添加扩展方法：//step01定义JQuery的作用域(function($){//step02插件的扩展方法名称$.fn.easySlider=function(options){}})(jQuery);3.设置默认值：//step定义JQuery的作用域(function($){//step-a插件的默认值属性vardefaults={prevId:‘prevBtn‘,prevText:‘Previous‘,nextId:‘nextBtn‘,nextText:‘Next‘//……};//step插件的扩展方法名称$.fn.easySlider=function(options){//step-b合并用户自定义属性，默认属性varoptions=$.extend(defaults,options);}})(jQuery);其中：varoptions=$.extend(defaults,options)的含义了。表示options去覆盖了defaults的'值，并把值赋给了options。在插件环境中，就表示用户设置的值，覆盖了插件的默认值；如果用户没有设置默认值的属性，还是保留插件的默认值。4.支持jquery选择器：//step定义JQuery的作用域(function($){//step-a插件的默认值属性vardefaults={prevId:‘prevBtn‘,prevText:‘Previous‘,nextId:‘nextBtn‘,nextText:‘Next‘//……};//step插件的扩展方法名称$.fn.easySlider=function(options){//step-b合并用户自定义属性，默认属性varoptions=$.extend(defaults,options);//step支持JQuery选择器this.each(function(){});}})(jQuery);5．支持JQuery的链接调用：为了能达到链接调用的效果必须要把循环的每个元素return//step定义JQuery的作用域(function($){//step-a插件的默认值属性vardefaults={prevId:‘prevBtn‘,prevText:‘Previous‘,nextId:‘nextBtn‘,nextText:‘Next‘//……};//step插件的扩展方法名称$.fn.easySlider=function(options){//step-b合并用户自定义属性，默认属性varoptions=$.extend(defaults,options);//step支持JQuery选择器//step支持链式调用returnthis.each(function(){});}})(jQuery);6.插件里的方法：在插件里定义的方法，外界不能直接调用，我在插件里定义的方法也没有污染外界环境。//step01定义JQuery的作用域(function($){//step03-a插件的默