有两种实现方法:扩展到对象层面--jQuery.extend(),扩展的是静态方法,可以直接使用$调用;扩展到选择器函数对象层面----jQuery.fn.extend(),扩展的方法是实例的方法,由$('#id名')或者$('.类名')调用
$.fn是指jquery的命名空间,在选择器函数对象层面上添加方法
jQuery.extend() = jQuery.fn.extend()实现对对象的扩展,可以给jQuery扩展属性方法,同时可以实现深复制的功能和浅复制的功能
extend()方法实现的功能
1)将两个或更多对象的内容合并到第一个对象(如果只有一个参数对象,则将其扩展到jQuery对象上)—实现默认字段的覆盖
浅拷贝
jQuery.extend( target [, object1 ] [, objectN ] )
function getOpt(target, obj1, obj2, obj3){
$.extend(target, obj1, obj2, obj3);
return target;
}
var _default = {
name : 'wenzi',
age : '25',
sex : 'male'
}
var obj1 = {
name : 'obj1'
}
var obj2 = {
name : 'obj2',
age : '36'
}
var obj3 = {
age : '67',
sex : {'error':'sorry, I dont\'t kown'}
}
getOpt(_default, obj1, obj2, obj3); // {name: "obj2", age: "67", sex: {error: "sorry, I dont't kown"}}
$.extend()其实是有返回值的,返回的就是修改后的第一个参数的值
2)为jQuery扩展方法或属性----如果extend()函数只传一个对象参数,jQuery对象本身被默认为目标对象,浅拷贝
$.extend({
_name : 'wenzi',
_getName : function(){
return this._name;
}
})
$._name; // wenzi
$._getName(); // wenzi
3)深度拷贝和浅度拷贝----若第一个参数是boolean类型,且值是true(深拷贝)或者false(浅拷贝),把第二个参数作为目标参数进行合并
jQuery.extend( [deep ], target, object1 [, objectN ] )
//深复制
var obj = {name:'wenzi', score:80};
var obj1 = {score:{english:80, math:90}}
$.extend(true, obj, obj1);
obj.score.english = 10;
console.log(obj.score.english); // 10
console.log(obj1.score.english); // 80
//浅复制
var obj = {name:'wenzi', score:80};
var obj1 = {score:{english:80, math:90}}
$.extend(false, obj, obj1);
obj.score.english = 10;
console.log(obj.score.english); // undefined
console.log(obj1.score.english); // 80
a) 扩展到jQuery对象层面:
jQuery.extend({
newFun: function(){
console.log('hello');
}
});//扩展到对象层面,$.newFun();这样调用
$.newFun(); //调用
b) 扩展到选择器函数对象层面:
jQuery.fn.extend({
newFun: function(){
console.log('hello');
}
});//选择器层面。通过$("选择器表达式").newFun();这样调用
$('div').newFun()