$.fn.extend 这个代表扩展Jquery对象
$.extend 这个代表扩展Jquery类本身
以上这两个我都查到了,
但是我想问的是:
$.fn 和 $.fn.extend 是什么关系?
$.extend 和 $.方法名 是什么关系?
从我看到的代码中,我猜测前者是不是后者的简写?后者能一次性添加多个方法,而类型与$.fn.的这种智能添加一个方法?
比如$.fn.abc() 等于 $.fn.extend({
abc:function(){},
});
请大神给详细解释下,谢谢了
$.extend=function(name,fn){
this.prototype[name] = fn
}
$.fn.extend = function(name,fn){
$.extend.apply(this, arguments)
}
extend是$的一个方法,这个方法的作用是为$扩展其他方法。
我没有看过jq的源码,但是我猜这种扩展应该向上面的代码那样,是添加在原型上的。
第一个问题:
$.fn
是$.prototype
的缩写(图片来自jQuery
源码)$.fn.extend()
是jQuery
的一个方法,用于拓展jQuery
实例的方法,也就是说可以将方法写入参数(object
)中,每个jQuery
实例都将拥有方法,可以通过$(selector).yourMethod()
调用;
第二个问题:
$.extend()
是jQuery
的一个方法,在接受两个参数或以上参数时,会将第二个及以后的参数合并到第一个中,主要用来修改/拓展配置对象;在接受一个参数(object
)时,会将参数中的方法拓展为jQuery自身的方法;$.方法名
则是直接调用jQuery
自身的方法,如$.each()
;
说说我对$.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'
});
希望能有所帮助,啊哈~
这两个是一个方法
$.extend说白了就是给一个对象进行属性或者方法的扩展,看看源码很容易明白的