jQuery的 $.fn.extend和 $.extend的区别和使用_$.fn和$.extend是设么意思???原理是什么?-CSDN博客

本文链接：https://blog.csdn.net/IT_10/article/details/94054542

jQuery为开发插件提拱了两个方法，分别是：jQuery.fn.extend(object)和jQuery.extend(object)
jQuery.extend(object)：用于扩展jQuery类本身，为jQuery类添加新的方法，即可以通过 $.functionName()调用的方法。还可以将两个或更多对象的内容合并到第一个对象。
jQuery.fn.extend(object)：用于给jQuery对象添加方法，即可以通过 $(选择器).functionName()调用的方法。

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

通过上面的一段代码可以知道 jQuery.fn = jQuery.prototype，prototype是函数的的属性，本质是函数的原型对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery插件</title>
    <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="plug.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#input1').alertWhileClick();
            $("#label1").text($.add(3,4));
            alert($("div").size());
        })
    </script>
</head>
<body>
<input id="input1" type="text"/>
<label id="label1"></label>
<div></div>
<div></div>
</body>
</html>

// plug.js

(function () {
    $.fn.extend({
        alertWhileClick:function(){
            $(this).click(function(){
                alert($(this).val());
            });
        }
    });

    $.extend({
        add:function(a,b){return a+b;}
    });

})(jQuery);

jQuery.extend()合并对象

jQuery.extend( target [, object1 ] [, objectN ] )

当提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）。

jQuery.extend( [deep ], target, object1 [, objectN ] )

deep
类型: Boolean
如果是true，合并成为递归（又叫做深拷贝）。

1.合并两个对象，并修改第一个对象

<!DOCTYPE html>
<html>
<head>
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<div id="log"></div>
<script>
    var object1 = {
        apple: 0,
        banana: {weight: 52, price: 100},
        cherry: 97
    };
    var object2 = {
        banana: {price: 200},
        durian: 100
    };
    /* merge object2 into object1 */
    $.extend(object1, object2);
    var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {
        var arr = [];
        $.each(obj, function(key, val) {
            var next = key + ": ";
            next += $.isPlainObject(val) ? printObj(val) : val;
            arr.push( next );
        });
        return "{ " + arr.join(", ") + " }";
    };
    $("#log").append( printObj(object1) );
</script>
</body>
</html>

结果
{“apple”:0,“banana”:{“price”:200},“cherry”:97,“durian”:100}
2.采用递归方式合并两个对象，并修改第一个对象

<!DOCTYPE html>
<html>
<head>
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<div id="log"></div>
<script>
    var object1 = {
        apple: 0,
        banana: {weight: 52, price: 100},
        cherry: 97
    };
    var object2 = {
        banana: {price: 200},
        durian: 100
    };
    /* merge object2 into object1, recursively */
    $.extend(true, object1, object2);
    var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {
        var arr = [];
        $.each(obj, function(key, val) {
            var next = key + ": ";
            next += $.isPlainObject(val) ? printObj(val) : val;
            arr.push( next );
        });
        return "{ " + arr.join(", ") + " }";
    };
    $("#log").append( printObj(object1) );
</script>
</body>
</html>

结果
{“apple”:0,“banana”:{“weight”:52,“price”:200},“cherry”:97,“durian”:100}
3.合并 defaults 和 options 对象，并且不修改 defaults 对象

<!DOCTYPE html>
<html>
<head>
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<div id="log"></div>
<script>
    var defaults = { validate: false, limit: 5, name: "foo" };
    var options = { validate: true, name: "bar" };
    /* merge defaults and options, without modifying defaults */
    var settings = $.extend({}, defaults, options);
    var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {
        var arr = [];
        $.each(obj, function(key, val) {
            var next = key + ": ";
            next += $.isPlainObject(val) ? printObj(val) : val;
            arr.push( next );
        });
        return "{ " + arr.join(", ") + " }";
    };
    $("#log").append( "<div><b>defaults -- </b>" + printObj(defaults) + "</div>" );
    $("#log").append( "<div><b>options -- </b>" + printObj(options) + "</div>" );
    $("#log").append( "<div><b>settings -- </b>" + printObj(settings) + "</div>" );
</script>
</body>
</html>

结果
defaults – {“validate”:false,“limit”:5,“name”:“foo”}
options – {“validate”:true,“name”:“bar”}
settings – {“validate”:true,“limit”:5,“name”:“bar”}