zoukankan      html  css  js  c++  java
  • 转:jQuery.fn.extend与jQuery.extend到底区别在哪?

    还是先吐个槽,网上都都是转载抄袭,基本上就那么一两篇文章,说的还不清楚....

    正文:

    其实说白了,从两个方法本身就能看出来端倪。

    我们先把jQuery看成了一个类,这样好理解一些。

    jQuery.extend(),是扩展的jQuery这个类。

    假设我们把jQuery这个类看成是人类,能吃饭能喝水能跑能跳,现在我们用jQuery.extend这个方法给这个类拓展一个能唱歌的技能。这样的话,不论是男人,女人,xx人.....等能继承这个技能(方法)了。

    我们这样写:

    jQuery.extend({
        liu: function(){
            alert('liu');
        }
    });

     然后:$.liu();这样就能打印出来”liu“这个字符串

    测试代码如下:

    <!doctype html>
    <html lang="zh-cmn-Hans-CN">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript" src="jquery-2.1.1.js"></script>
        <script type="text/javascript">
        ;(function($) {
            $.extend({
                liu: function(){
             alert('liu');
        }
    });
        })(jQuery);
        </script>
        <script type="text/javascript">
        $(document).ready(function() {
            $.liu();
        });
    
        </script>
    </head>
    <body></body>
    </html>

    这说明啥啊,这说明.liu()变成了jQuery这个类本身的方法(object)嘛。他现在能”唱歌“了。

    我们再看看jQuery.fn.extend()这个方法。

    从字面理解嘛,这个拓展的是jQuery.fn的方法。

    jQuery.fn是啥玩意呢?

    源码里是这么写的:

    jQuery.fn = jQuery.prototype = {      
          init: function( selector, context ) {//….    
          //……      
       };   

    哦,原来jQuery.fn=jQuery.prototype,就是原型啊。

    那就一目了然了,jQuery.fn.extend拓展的是jQuery对象(原型的)的方法啊!

    对象是啥?就是类的实例化嘛,例如

     $("#abc") 

     这个玩意就是一个实例化的jQuery对象嘛。

    那就是说,jQuery.fn.extend拓展的方法,你得用在jQuery对象上面才行啊!他得是张三李四王五痳六这些实例化的对象才能用啊。

    说白了就是得这么用(假设xyz()是拓展的方法):

    $('selector').xyz();

    你要是这么用$.xyz();是会出错误滴。

    例子源码如下:

    <!doctype html>
    <html lang="zh-cmn-Hans-CN">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript" src="jquery-2.1.1.js"></script>
        <script type="text/javascript">
        ;(function($) {
            $.fn.extend({
                liu: function(){
             alert('liu');
            }
        });
        })(jQuery);
        </script>
        <script type="text/javascript">
        $(document).ready(function() {
            $('div').liu();
        });
    
        </script>
    </head>
    <body>
        <div></div>
    </body>
    </html>

    和上边的区别区别一目了然吧?

    其实吧,jQuery.extend()这个方法,主要是用来拓展个全局函数啦,例如$.ajax()这种,要不就是拓展个选择器啦,例如$.fn.each(),当选择器用。

    大部分插件都是用jQuery.fn.extend()。

  • 相关阅读:
    84. Largest Rectangle in Histogram (Solution 2)
    84. Largest Rectangle in Histogram (Solution 1)
    73. Set Matrix Zeroes
    【JavaScript】Symbol 静态方法
    【JavaScript】Date
    【JavaScript】Math
    725. Split Linked List in Parts把链表分成长度不超过1的若干部分
    791. Custom Sort String字符串保持字母一样,位置可以变
    508. Most Frequent Subtree Sum 最频繁的子树和
    762. Prime Number of Set Bits in Binary Representation二进制中有质数个1的数量
  • 原文地址:https://www.cnblogs.com/holyson/p/3929002.html
Copyright © 2011-2022 走看看