jQuery.extend和jQuery.fn.extend的区别

阅读更多

当今web开发往往离不开Jquery的使用，Jquery以其简洁的使用方式、良好的浏览器兼容性赢得了软件研发同行的青睐，作为其中的一员，自然也不例外，尽管刚开始时很排斥Jquery，今天我谈一下对Jquery中$与$.fn的认识和理解，不对地方深望指正：

       1、什么是$?

         答：jquery的另一种表现形式；

        2、看下面的例子：

              例子01：

                          
                                 
                                              
                                              
                                              
                                              
                                
                                
                                
                       
          例子02：

                       
                             
                                        
                                        
                                        
                                        
                            
                            
                           
                    

            上面两个例子中的黄色背景出的代码有什么不同和相同？

         答：除了功能相同以外最大的相同点在于调用函数（或方法）的方式相同；上面两个例子最大的不同点在于声明创建test方法的方式不同。

    3、看下面的例子：

        例子03：

                  
                           
                                 
                                 
                                 
                                 
                         
                         
                               
                         
                   

         例子04：

                  
                        
                               
                               
                              
                              
                     
                     
                             
                     
                

         上面两个例子中的绿色背景出的代码有什么不同和相同？

         答：除了功能相同以外最大的相同点在于调用函数（或方法）的方式相同；上面两个例子最大的不同点在于声明创建test方法的方式不同。

      4、Jquery中$与$.fn的区别是什么？

         答：在回答这个问题以前，需要明白一个事实：Jquery的方法是可以拓展的，上面这4个例子都是对Jquery方法的拓展，从调用声明创建方法的方式来看，可以归结为两类：一类直接由$符调用；另一类由$("")来调用，说到这里你是不是想到了Java语言中的静态方法和实例方法，是的，如果从java类的角度认识调用创建的Jquery方法可能更好理解些，尽管Javascript没有明确的类的概念。好了现在可以回答问题了：$拓展的方法是静态方法，可以使用$直接调用，其拓展的方式有两种，一般使用$.extend({});；而$.fn拓展的方法是实例方法，必须由“对象”$("")来调用，其拓展的方式同样有两种，一般使用$.fn.extend({ })。

   5、知识延展，究竟什么是fn?

    答：同样在回答这样一个问题以前请打开一个Jquery文件（0分下载） 搜索这样一个字符“jQuery.prototype”，告诉我你看到了什么：jQuery.fn = jQuery.prototype = {......},嗯嗯，或许你已经猜到了——fn就是prototype，是这样吗？请看下面的两个例子：

    例子05：

        
           
              
              
              
              
         
         
             
         
      

   例子06：

      
         
             
             
             
             
       
       
             
       
    

     上面两个例子通过将fn改为prototype以后可以运行，呵呵呵，你猜对了。