jQuery.extend(object)和jQuery.fn.extend(object)区别和详解

最新推荐文章于 2023-06-26 10:43:42 发布

php coder

最新推荐文章于 2023-06-26 10:43:42 发布

阅读量648

点赞数

文章标签： jQuery.extend jQuery.fn.extend

1、认识jQuery extend()和jQuery.fn.extend()

jQuery的API手册中，extend方法挂载在jQuery和jQuery.fn两个不同对象上方法，但在jQuery内部代码实现的是相同的，只是功能却不太一样；

且看官方给出解释：
jQuery.extend(): Merge the contents of two or more objects together into the first object.(把两个或者更多的对象合并到第一个当中)；
jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.(把对象挂载到jQuery的prototype属性，来扩展一个新的jQuery实例方法)

2、理解jQuery.extend()
可以把jQuery看成了一个类，这个扩展也就是所谓的静态方法,只跟这个类本身有关。跟你具体的实例化对象是没关系的。

<!DOCTYPE html>
<html>
<head>
    <title>jQuery.extend()与jQuery.fn.extend()区别</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="./jquery-1.8.3.js"></script>
    <script type="text/javascript">
        (function($){//(function($){}) (jQuery)在形参使用$，是为了不与其他库冲突，实参用jQuery,这里其实也是匿名函数
               $.extend({
                   speak:function(){
                       alert("how are you!");
                   }
               });
        })(jQuery);
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            $.speak();//属于jQuery这个类本身的方法
        })
    </script>
</head>
<body>
 
</body>
</html>

3、理解 jQuery.fn.extend()

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

所以jQuery.fn.extend拓展的是jQuery对象（原型的）的方法啊！

对象是啥？就是类的实例化嘛，例如$("#abc") ，$(div)

<!DOCTYPE html>
<html>
<head>
    <title>jQuery.extend()与jQuery.fn.extend()区别</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="./jquery-1.8.3.js"></script>
    <script type="text/javascript">
        (function($){
               $.fn.extend({
                   speak:function(){
                       alert("how are you!");
                   }
               });
        })(jQuery);
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("div").speak();
        })
    </script>
</head>
<body>
 
</body>
</html>

4、两者区别总结：

4.1、两者调用方式不同：
jQuery.extend(),一般由传入的全局函数来调用，主要是用来拓展个全局函数，如$.ajax()，$.init();
jQuery.fn.extend(),一般由具体的实例对象来调用，可以用来拓展个选择器，例如$.fn.each();

4.2、两者的主要功能作用不同：
jQuery.extend(object); 为扩展jQuery类本身，为自身添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法

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

摘自：https://www.cnblogs.com/xuxiuyu/p/5989743.html

php coder

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
jQuery.extend(object)和jQuery.fn.extend(object)区别和详解

1、认识jQuery extend()和jQuery.fn.extend()jQuery的API手册中，extend方法挂载在jQuery和jQuery.fn两个不同对象上方法，但在jQuery内部代码实现的是相同的，只是功能却不太一样；且看官方给出解释：jQuery.extend(): Merge the contents of two or more objects together i...
复制链接

扫一扫