$.fn $.fn.extend $.extend 的区别？

Question

$.fn.extend 这个代表扩展Jquery对象
$.extend 这个代表扩展Jquery类本身
以上这两个我都查到了，

但是我想问的是：

$.fn 和 $.fn.extend 是什么关系？
$.extend 和 $.方法名 是什么关系？

从我看到的代码中，我猜测前者是不是后者的简写？后者能一次性添加多个方法，而类型与$.fn.的这种智能添加一个方法？

比如$.fn.abc() 等于 $.fn.extend({

abc:function(){},

});

请大神给详细解释下，谢谢了

Answer 1

说说我对$.fn 和 $.extend理解，主要是在编写插件上用得比较多，通过$.extend()来扩展jQuery，或者通过$.fn 向jQuery添加新的方法，看例子：

$.extend({
    sayHello: function(name) {
        console.log('Hello,' + (name ? name : 'World') + '!');
    }
})
$.sayHello(); //直接调用，输出 Hellow,World!
$.sayHello('Panfen'); //带参调用输出 Hello,Panfen!

上面代码中，通过$.extend()向jQuery添加了一个sayHello函数，然后通过$直接调用。看一下$.fn的例子：

$.fn.myPlugin = function() {
    //在这里面,this指的是用jQuery选中的元素
    //example :$('a'),则this=$('a')
    this.css('color', 'red');
}
$('a').myPlugin();  //a 标签添加样式

在处理插件参数的接收上，通常使用jQuery的extend方法，给extend方法传递单个对象的情况下，这个对象会合并到jQuery身上，所以我们就可以在jQuery身上调用新合并对象里包含的方法了。当给extend方法传递一个以上的参数时，它会将所有参数对象合并到第一个里。同时，如果对象中有同名属性时，合并的时候后面的会覆盖前面的。
　　利用这一点，我们可以在插件里定义一个保存插件参数默认值的对象，同时将接收来的参数对象合并到默认对象上，最后就实现了用户指定了值的参数使用指定的值，未指定的参数使用插件默认值。看下面的例子：

$.fn.myPlugin = function(options) {
    var defaults = {
        'color': 'red',
        'fontSize': '12px'
    };
    var settings = $.extend(defaults, options);
    return this.css({
        'color': settings.color,
        'fontSize': settings.fontSize
    });
}

//使用
$('a').myPlugin({
    'color': '#2C9929'
});

希望能有所帮助，啊哈~

Answer 2

这两个是一个方法
$.extend说白了就是给一个对象进行属性或者方法的扩展，看看源码很容易明白的

Answer 3

$.extend=function(name，fn){
    this.prototype[name] = fn
}

$.fn.extend = function(name，fn){
    $.extend.apply(this, arguments)
}

extend是$的一个方法，这个方法的作用是为$扩展其他方法。
我没有看过jq的源码，但是我猜这种扩展应该向上面的代码那样，是添加在原型上的。

Answer 4

第一个问题：

1. $.fn是$.prototype的缩写（图片来自jQuery源码）
   

2. $.fn.extend()是jQuery的一个方法，用于拓展jQuery实例的方法，也就是说可以将方法写入参数（object）中，每个jQuery实例都将拥有方法，可以通过$(selector).yourMethod()调用；

第二个问题：

1. $.extend()是jQuery的一个方法，在接受两个参数或以上参数时，会将第二个及以后的参数合并到第一个中，主要用来修改/拓展配置对象；在接受一个参数(object)时，会将参数中的方法拓展为jQuery自身的方法；

2. $.方法名则是直接调用jQuery自身的方法，如$.each()；