javascript - $.fn $.fn.extend $.extend 的区别?
本文介绍了javascript - $.fn $.fn.extend $.extend 的区别?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
$.fn.extend 这个代表扩展Jquery对象
$.extend 这个代表扩展Jquery类本身
以上这两个我都查到了,
但是我想问的是:
$.fn 和 $.fn.extend 是什么关系?
$.extend 和 $.方法名 是什么关系?
从我看到的代码中,我猜测前者是不是后者的简写?后者能一次性添加多个方法,而类型与$.fn.的这种智能添加一个方法?
比如$.fn.abc() 等于 $.fn.extend({
abc:function(){},
});
请大神给详细解释下,谢谢了
解决方案
说说我对$.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'
});
希望能有所帮助,啊哈~
这篇关于javascript - $.fn $.fn.extend $.extend 的区别?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文