全面认识jQuery.fn，菜鸟总结

标签：class   java   http   tar   ext   com   

      今天想做树形导航栏，查找了资料，找到了一个框架，比较小所以研究其中的代码，发现第一句话就把我难住了，主角是——jQuery.fn。 

      在此，再次停住，只好继续找资料，现在整理下自己所理解到的知识。 

      一，jQuery.fn是什么 
      答：从jqurey源代码，如下小段： 
     

Java代码  

1.      jQuery.fn = jQuery.prototype = {  
2. constructor: jQuery,  
3. init: function( selector, context, rootjQuery ) {  
4.     ............  
5.     }  
6.      }  
7.        

      可以看出，jQuery.fn == jQuery.prototype， 即jQuery.fn是 jQuery.prototype别称。 

      在这里我们停一下，说说让我还一直头疼的prototype属性或对象，怎么说呢，prototype属性或对象就相当于一个指针，指向某个object，这个object就可以称为子类对象的原型，那么我们可以间接地访问指向object的属性跟方法，也就差不多当前对象继承的指向的某个object。这里有个问题，就是如果指向的某个object有属性跟当前对象的属性相同的话怎么办，很简单，一句话——就近原则，从当前对象找，找到返回，没有去prototype指向的object里面找，没有在去prototype指向的object的prototype指向的object找，一层一层地找下去，知道找到为此。例子如下 

Java代码  

1. <script type="text/javascript">  
2.             var animal = function(){  
3.                 this.name= "dfsdfsdf";  
4.                 this.sex= ‘male‘;  
5.             };  
6.               
7.             var a = new animal();  
8.             alert(a.name);  
9.               
10.             var cat =  function(){      
11.                 this.play =  function (){       
12.                     alert(‘cat play‘)      
13.                  };      
14.             };    
15.             cat.prototype = new animal();   
16.               
17.             cat = new cat();  
18.                         alert(cat.name);  
19.             cat.name = "ddd";  
20.             alert(cat.name);  
21.               
22.         </script>  

       头疼到此，接回，继续jQuery.fn 
       从上面里面也可以看出prototype就相当于给某个类添加属性或者方法，那么，这样的话，我们就可以逆推一下下， jQuery.prototype——》jQuery.fn就是给jQuery类添加新的属性或者方法，来，我们来看下，材料如下： 

Java代码  

1. //给jQuery打洞，新添的方法  
2. $.fn.extend({  
3.     sayHello: function(){  
4.         $(this).click(function(){  
5.             alert("hello jquery!");  
6.         });  
7.     }  
8. });  
9.   
10. //html代码  
11. <input type="button" value="sayHello" id="sayHello"/>  
12.   
13.   
14. //使用我们给jQuery新添的方法  
15. $(function(){  
16.     $(‘#sayHello‘).sayHello();//这个我们可以弹出hello jquery！  
17. });  

     到此，可以认识Query.fn了 
     接下来，脑补一下，类似的知识jQuery.extend(object);这个方法 
     不错，它扩展的方法就是米饭，可以直接用，是jQuery类的静态方法。 

Java代码  

1. $.extend({  
2.     add: function(a,b){  
3.         return a + b ;  
4.     }  
5. });  
6.   
7. alert($.add(3,4));//piapia出来个7  

      意想得到吧，OK，到此over，继续那小插件去鸟。 
      我是菜鸟，请拍砖。

全面认识jQuery.fn，菜鸟总结,布布扣,bubuko.com

全面认识jQuery.fn，菜鸟总结

标签：class   java   http   tar   ext   com   

原文地址：http://www.cnblogs.com/ranzige/p/3810463.html