jQuery-How to Create a Basic Plugin

官方插件:http://learn.jquery.com/plugins/basic-plugin-creation/

$.extend方法和$.fn.extend方法都可以用来扩展jQuery功能。

本质区别:

$.extend方法是在jQuery全局对象上扩展方法 (类似C#中的静态方法)

$.fn.extend方法是在$选择符选择的jQuery对象上扩展方法  (类似C#中的实例方法)

故扩展jQuery的公共方法一般用$.extend方法,定义插件一般用$.fn.extend方法

1.$.fn.extend

(function($){

     $.fn.changeStyle = function(option){
          var defaultSetting = { colorStr:"green",fontSize:12};
          var setting = $.extend(defaultSetting,option);
          this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px");        
         return this;
     }
}(jQuery));

2.$.extend

(function($){
     $.fn.extend({         
         changeStyle:function(option){             
         var defaultSetting = { colorStr:"green",fontSize:12};
         var setting = $.extend(defaultSetting,option);
         this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px");        
         return this; 
          }
     });
}(jQuery));

 

posted @ 2017-01-19 14:21  Rain520  阅读(172)  评论(0编辑  收藏  举报