jQuery.extend()jQuery.fn.extend()扩展方法示例详解

Posted 2020-10-01

jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.

其中jQuery.extend()方法能够创建全局函数或者选择器,

而jQuery.fn.extend()方法能够创建jQuery对象方法. 

例如: 

复制代码代码如下:

jQuery.extend({ 
showName : function(name){ 
alert(name) 
} 
}); 
jQuery.showName("深蓝"); 

jQuery.extend()除了可以创建插件外,还可以用来扩展jQuery对象. 
例如: 

复制代码代码如下:

var a = { 
name : "blue", 
pass : 123 
} 
var b = { 
name : "red", 
pass : 456, 
age : 1 
} 
var c = jQuery.extend({},a,b); 

c拥有a,b对象的属性,由于,b对象在a对象之后,其name属性优先在c对象里. 

jQuery.extend()方法为插件传递系列选项,包括默认值. 

复制代码代码如下:

function fn(options){ 
var options = jQuery.extend({ //默认参数选项列表 
name1 : value1, 
name2 : value2, 
name3 : value3 
},options); //使用函数的参数覆盖或合并到默认参数选项列表中 
//函数体 
} 
fn({ name1 : value3, name2 : value2 , name3 : value1 });//使用新值 
fn({ name4 : value3, name5 : value2 });//在默认上添加新选项 
fn(); //保持默认选项值 

当在调用该方法时,传递新的参数值,就会覆盖掉默认的参数选项值,否则,使用默认参数值. 

使用JQuery.fn对象创建JQuery对象方法 

可以通过jQuery.fn对象来添加属性和方法,实际上jQuery.fn对象就是挂接在jQuery.prototype上的,jQuery把它简写了. 

fn 是什么东西呢。查看jQuery代码，就不难发现。 

复制代码代码如下:

jQuery.fn = jQuery.prototype = { 

　　　init: function( selector, context ) {//....　 

　　　//...... 

}; 

原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。 

例如: 

复制代码代码如下:

jQuery.fn.test = function(){ 
alert("这是jQuery对象方法!"); 
} 
jQuery("div").click(function(){ 
$(this).test(); //在当前的jQuery对象上调用test()方法 
}); 

我们可以调用jQuery.fn.extend()方法来创建jQuery对象方法. 

复制代码代码如下:

jQuery.fn.extend({ 
test : function(){ 
return this.each(function(){ 
alert(this.nodeName) 
}); 
} 
}); 
jQuery("body *").click(function(){ 
$(this).test(); //调用jQuery对象方法 
}); 

一句话:jQuery.extend是对JQuery类的自定义扩展,jQuery.fn.extend是对JQuery对象的自定义扩展.