JQuery插件，傻傻分不清！

不多说，直接上代码！

第一种 extend

<!-- extend 扩展jQuery,其实就是增加一个静态方法 -->
         $.extend({
            sayHello:function(name)
              {
                   alert('Hello, '+(name?name:'XXXX')+' !')
              }
          });
         
         $(function(){
               $.sayHello();
               $.sayHello('Zhangsan');
         });

第二种 $.fn 
<!-- $.fn  给JQuery对象，增加方法 -->
        $.fn.Red=function(){
           
            this.each(function(){
               $(this).append(' '+$(this).attr('href'));
            });
           
            return    this.css('color','red');
        }
       
       
       
        $(function(){
              $("a").Red().css('color','gray');
        });

第三种：综合利用

<!-- 综合利用 -->
        $.fn.MyDesign=function(options){
            var defaults={
               'color':'red',
               'fontSize':'12pt'
            }
            var settings=$.extend({},defaults,options)
           
            this.each(function(){
               $(this).append(' '+$(this).attr('href'));
            });
           
            return    this.css({'color':settings.color,'fontSize':settings.fontSize});
        }

 

第四种 优化（面向对象等细节方面）

;(function($,window,document,undefined){
    var Beautifier= function(ele,options){
        this.defaults={
          'color':'yellow',
          'fontSize':'20pt'
       }
       this.ele=ele,
       this.options=options,
       this.setting=$.extend({},this.defaults,this.options)
    }
   
    Beautifier.prototype={
        beautify:function(){
            return this.ele.css({
            'color': this.setting.color,
            'fontSize': this.setting.fontSize
            })
        }
    }
   
         $.fn.MyDesgin=function(options){
           var beautifier=new Beautifier(this,options);
         beautifier.beautify();
         }
})(jQuery,window,document)