jQuery extend 与 fn.extend - 木子才的博客

1.1.jQuery.extend()

扩展 jQuery 类本身，为jQuery类添加类方法（静态方法）

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <script src="../../Library/jquery-3.3.1.min.js"></script>
        <script>
            jQuery.extend({
                add: function(a, b) {
                    alert(a + b)
                }
            })
            jQuery.add(10 , 20)
        </script>
    </head>
    <body>

    </body>
</html>

1.2.jQuery.extend(object, object1, [objectN])

用一个或多个其他对象来扩展一个对象，返回被扩展的对象

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <script src="../../Library/jquery-3.3.1.min.js"></script>
        <script>
            var obj = { name: 'Alice', age: 25, career: 'teacher'}
            var object = { name: 'Bruce', career: 'doctor' }
            var newObj = jQuery.extend(obj, object)
            console.log( newObj );
        </script>
    </head>
    <body>

    </body>
</html>

//newObj = { name: 'Bruce', age: 25, career: "doctor" }

2.jQuery.fn.extend()

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <script src="../../Library/jquery-3.3.1.min.js"></script>
        <script>
            jQuery.fn.extend({ 
                test : function(){ 
                    return this.each(function(){ 
                        alert(this.nodeName) 
                    })
                } 
            })
            $(function(){
                $("p").click(function(){ 
                    $(this).test()
                })
            })
        </script>
    </head>
    <body>
        <p>点击</p>
    </body>
</html>

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <script src="../../Library/jquery-3.3.1.min.js"></script>
        <script>
            jQuery.fn.extend({ 
                test : function(){ 
                    return this.each(function(){ 
                        alert($(this).text()) 
                    })
                } 
            })
            $(function(){
                $("p").click(function(){ 
                    $(this).test()
                })
            })
        </script>
    </head>
    <body>
        <p>点击</p>
    </body>
</html>

3.区别

jQuery.extend()是为jQuery类添加类方法（静态方法），需要通过jQuery类来调用（直接使用 $.xxx 调用）；

jQuery.fn.extend()是为jQuery类添加成员函数（实例方法），所有jQuery实例都可以直接调用（需要使用 $().xxx 调用）。