zoukankan      html  css  js  c++  java
  • 全面认识jQuery.fn,菜鸟总结

          今天想做树形导航栏,查找了资料,找到了一个框架,比较小所以研究其中的代码,发现第一句话就把我难住了,主角是——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,继续那小插件去鸟。 
          我是菜鸟,请拍砖。

  • 相关阅读:
    剑指offer---第一个只出现一次的字符
    剑指offer---两个链表的第一个公共结点
    剑指offer---丑数
    剑指offer---旋转数组的最小数字
    剑指offer---滑动窗口的最大值
    剑指offer---重建二叉树
    剑指offer---数据流中的中位数
    剑指offer---二叉搜索树的第K个节点
    剑指offer--对称二叉树
    剑指offer---把二叉树打印成多行
  • 原文地址:https://www.cnblogs.com/ranzige/p/3810463.html
Copyright © 2011-2022 走看看