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

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对象的自定义扩展.

在使用Jquery开发的过程中，extend是常用的参数处理函数，特别是对默认值的使用。

Jquery的扩展方法原型是:

?

1	var v=$.extend(dest,src1,src2,[,src3...]);

作用是把src1,src2,src3合并到到dest中并返回合并后的dest.

但是在使用过程中，默认值往往是不能被改变的，

如下：

?

1 2 3

var defaut={'selector':'select','default':'默认值','backcolor':'#85e137','forecolor':'#000'};   var src={'selector':'ss','default':'笑话','backcolor':'#fff','forecolor':'red'};

如果我们使用

?

1	var v=$.extend(dfault,src);

来进行参数的处理，那么下一次处理的时候默认值就是这次处理之后的值而不是真实的默认值了。

我们可以用下面的代码：

?

1	var v=$.extend({},dfault,src);

即我们使用一个空的对象作为目标参数(default)，将默认参数作为第一次源参数(src),这样同样是返回了合并后的参数，但是我们的default没有被改变，还可以再次使用！

这样就实现了默认值保持不变的效果了!