写了一个简单的jquery插件(初恋啊)

用了好久的jquery了,却没有写过插件,今天研究了一个别人的插件和一些文章,总算搞清楚了jquery插件一些写法,

代码写了一个div当鼠标事件发生时的宽高变化情况,基础,代码基础,基础好了,才能研究深入的东西.

(function(jQuery){
        /*
         *  插件应该返回一个JQuery对象，以便保证插件的可链式操作。 
         *  JQuery插件的机制:jQuery提供了2个用于扩展jQuery功能的方法
         *  jQuery.fn.extend()
         *  jQuery.extend()
         *  自定义插件的样式是必不可少的 (options 就是传入的参数集合)
　　　　　　　*  jQuery.fn.插件名=function(){...}   这个很重要  
         */
    
　　　　　　　/*
　　　　　　　　　　jQuery.fn.插件名解释: fn这个其实就是 var fn = jQuery.prototype(定义了prototype原型的别名)  可以参照书籍<< 基于MVC的JavaScript Web富应用开发 >>  
　　　　　　　 */　
　　　　
        jQuery.fn.color=function(options){
            /*-----------------  这里写功能需求-----------------------*/
        
            console.log(jQuery);
            
            
            //这里给插件的属性设置一些默认的值
            var defaults={
                width:400,
                height:400                
            };
        
            //使用extend()方法重构插件的属性
            
            var attributes=jQuery.extend(defaults,options);
        
            /*
             *
             * return this.each(...)   返回通过选择器获取的jQuery对象    this.each遍历所有的元素
             *
             */
             
             function changeWidth(target){
                    
                    //console.log(target);
                
                    target.animate({
                        width:defaults.width,
                        height:defaults.height
                    });
             }
             
             
             
             this.each(function(){
                
                    var target=jQuery(this);
                    
                    var oldW=target.width();
                    var oldH=target.height();
                    
                    //console.log(target);
            
                    target.mouseover(function(){
                        
                            target.css('backgroundColor','green');
                            changeWidth(target);
                            
                    });
                    
                    $(this).mouseout(function(){
                    
                        $(this).animate({
                            backgroundColor:'orange',
                            width:oldW,
                            height:oldH
                        });
                            
                    });
            });
        
        
        
        };    
            
    
 })(jQuery);

代码调用很简单:

<script src='./jquery.min.js'></script>
  <script src='./jquery.color.js'></script>
  <script>
    $(document).ready(function(){
            $('#div').color({width:1000,height:500});
    });
</script>

当有了基础,可以深入别人的代码去研究.