jQuery插件学习(一)

       由于项目开发需要，经常会用到一些jquery插件，但网上已有的插件常常又不能100%满足业务需求，所以就想自己能看懂插件的代码，进行一些功能上的改动和补充，或者能自己自定义插件就更好了。所以这段时间会对插件进行一些研究，现将学习的一些重要内容记录下来，供那些像我一样的初学者借鉴下。嘻嘻。

       （一）jQuery为开发插件提拱了两个方法

               jQuery.extend(); 为扩展jQuery类本身.为类添加新的方法；

               jQuery.fn.extend();给jQuery对象添加方法；

               它们之间的区别是：jQuery是一个类，jQuery.extend()，是扩展的jQuery这个类，变成了jQuery这个类本身的方法，这个扩展也就是所谓的静态方法。

               只跟这个类本身有关。跟你具体的实例化对象是没关系滴。

        例如：

              (function($) {

                     $.extend({ 
                              minValue : function(a,b){ 
                              return a>b? b:a; 
                            }

                   }) 

              })(jQuery);

             要调用这个方法：$.minValue(2,3);

             

            jQuery.fn.extend拓展的是jQuery对象（原型的）的方法，原型的作用就是给这个类的每一个对象都添加一个统一的方法，对象是啥？就是类的实例化嘛，例如

            $("#abc") 就是一个实例化的jQuery对象。假设xyz()是拓展的方法：$('selector').xyz();要是这么用$.xyz()；是会出错滴。

            jQuery.extend()这个方法，主要是用来拓展个全局函数啦，例如$.ajax()，$.getScript(url,callback) 这些jQuery自带的方法这种，大部分插件都是用jQuery.fn.extend()。

            附插件框架:

               (function($){     

                        $.fn.yourPluginName = function(options){         

                                    //各种属性和参数        

                                     var defaults = { } ;        

                                     var options = $.extend(defaults, options);         

                                     return this.each(function(){           

                                     //插件的实现代码         

                                     });    

                            };

                })(jQuery);

        return this.each()中return的作用：each()方法返回jQuery对象，所以这样就可以继续链式操作了。

       (二)jQuery中的this和$(this)

             this其实是指向dom对象或当前元素，$(this)是jquery对象，当你用的方法是jquery时，就用$(this)，如果是JS方法，就用this。

       例如：

            var node = $('#id');

            node.click(function(){

　            　this.css('display','block');　    //报错   this是一个html元素，不是jquery对象，因此this不能调用jquery的css()方法

　　           $(this).css('display','block');　//正确　 $(this)是一个jquery对象，不是html元素，可以用css()方法

　　           this.style.display = 'block';　  //正确   this是一个html元素，不是jquery对象，因此this不能调用jquery的css()方法,但是可以用javascript来更改style属性

           });