jQuery扩展插件方法 $.extend()和$.fn.extend()

最新推荐文章于 2021-05-17 10:32:26 发布

PTKGEM

最新推荐文章于 2021-05-17 10:32:26 发布

阅读量846

点赞数

分类专栏： jQuery 文章标签： jquery javascript 插件

本文链接：https://blog.csdn.net/Dong_PT/article/details/50932194

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1- $.extend()和$.fn.extend()区别

$$.extend()和\$.fn.extend()区别$
{ $.extend()=jquery.extend(); 同理 $.fn.extend()=jquery.fn.extend() }

原生javascript中尽管没有类这个概念，但是作为一门基于对象的语言，其实是有着类似于类的实际应用的，那么从标准面向对象的概念来说，可以把当成jQuery就是一个封装好了的js类，那么通过选择器获得的就是jQuery对象实例。现在我们先把jQuery看成了一个类，这样好理解一些。
$.extend()，是扩展的jQuery这个类。假设我们把jQuery这个类看成是人类，能吃饭能喝水能跑能跳，现在我们用$ .extend()这个方法给这个类拓展一个能唱歌的技能。这样的话，不论是男人，女人，xx人…..等能继承这个技能（方法）了。
可以这样写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>$.extend()</title>
    <script type="text/javascript" src="jQuery/jquery-1.11.3.js"></script>
</head>
<body>

    <script type="text/javascript">

        (function ($) {
            $.extend({
                sing: function () {
                    alert("唱歌");
                }
            });
        })(jQuery);

    </script>
    <script type="text/javascript">

        jQuery(document).ready(function($) {
            $.sing();
        });

    </script>
</body>
</html>

这说明啥啊，这说明.sing()变成了jQuery这个类本身的方法（object）嘛。jQuey类本身现在能”唱歌“了。
但是吧，这个能力啊，只有代表全人类的 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="en">
<head>
    <meta charset="UTF-8" />
    <title>$.extend()</title>
    <script type="text/javascript" src="jQuery/jquery-1.11.3.js"></script>
</head>
<body>

    <div id="div1"></div>

    <script type="text/javascript">

        (function ($) {
            $.fn.extend({
                sing: function () {
                    alert("唱歌");
                }
            });
        })(jQuery);

    </script>
    <script type="text/javascript">

        jQuery(document).ready(function($) {
            $("#div1").sing();
        });

    </script>
</body>
</html>

和上边的区别区别一目了然吧。
其实jQuery.extend()这个方法，主要是用来拓展个全局函数啦，例如$.ajax()这种，大部分插件都是用jQuery.fn.extend()。

(function($){…})(jQuery)的意思

(function($)(

        //....

)(jQuery);

这里实际上是匿名函数

function(arg){…}
这就定义了一个匿名函数，参数为arg 。

而调用函数时，是在函数后面写上括号和实参的，由于操作符的优先级，函数本身也需要用括号，即：
(function(arg){…})(param)
这就相当于定义了一个参数为arg的匿名函数，并且将param作为参数来调用这个匿名函数

而(function($){…})(jQuery)则是一样的，之所以只在形参使用$，是为了不与其他库冲突，所以实参用jQuery

var fn = function($){

        //...

}; 

fn(jQuery);

jQuery扩展插件方法 $.extend()和$.fn.extend()

1- $.extend()和$.fn.extend()区别

(function($){…})(jQuery)的意思

相关扩展

$.extend() 和 $.fn.extend()区别

$.extend()函数用法详解

jQuery扩展插件方法 $.extend()和$.fn.extend()

1- $.extend()和$.fn.extend()区别

(function($){…})(jQuery)的意思

相关扩展

$.extend() 和 $.fn.extend()区别

$.extend()函数用法详解

“相关推荐”对你有帮助么？