jQuery.fn.extend與jQuery.extend到底區別在哪？

時間 2019-11-14

標籤 jquery.fn.extend jquery extend jquery.extend 到底區別在哪欄目 JQuery 简体版

原文原文鏈接

聲明：此文是寫給剛接觸的人或者是對這一方法概念比較模糊的人。如果您jQuery基礎很好，此文就不值得你浪費時間了。javascript

仍是先吐個槽，網上都都是轉載抄襲，基本上就那麼一兩篇文章，說的還不清楚....html

正文：

其實說白了，從兩個方法自己就能看出來端倪。java

咱們先把jQuery當作了一個類，這樣好理解一些。jquery

jQuery.extend()，是擴展的jQuery這個類。ajax

假設咱們把jQuery這個類當作是人類，能吃飯能喝水能跑能跳，如今咱們用jQuery.extend這個方法給這個類拓展一個能唱歌的技能。這樣的話，不管是男人，女人，xx人.....等能繼承這個技能（方法）了。函數

咱們這樣寫：測試

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

而後：$.liu();這樣就能打印出來」liu「這個字符串spa

測試代碼以下：prototype

<!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 這個類自己，才能用啊。你我的想用，你張三李四王五麻六，你個小草民能表明全人類嘛？

因此啊，這個擴展也就是所謂的靜態方法。只跟這個類自己有關。跟你具體的實例化對象是不要緊滴。

咱們再看看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>