jquery的.fn.extend使用方法

来源：互联网发布：hbuilder下载 mac 编辑：程序博客网时间：2024/04/30 14:52

jQuery为开发插件提拱了两个方法，分别是：

$.fn.extend()和$.extend();

下面来看下两个方法的具体使用：

1) $.extend()

extend(data,src1,src2,src3…);该方法是将src1,src2,src3…合并到data中,返回值为合并后的data。
var newObj=$.extend({},src1,src2,src3…) //将合并后的结果返回给newObj。

var result=$.extend({},{sex:”男”,age:40},{name:”MEi”,sex:”女”})
那么合并后的结果:
result={name:”MEi”,age:40,sex:”女”}
如果后面的参数和前面的参数存在相同的名称，那么后面的会覆盖前面的参数值。

如果只传递一个参数：$.extend(src)；

该方法就是将src合并到jquery的全局对象中去，该方法只能传递一个参数,例子：

  $.extend({
    hello:function(){alert('hello');}
   });
   $.hello();

2) $.fn.extend(src)

该方法将src合并到jquery的实例对象中去。
jQuery.fn=jQuery.prototype。
jQuery.fn.extend拓展的是jQuery对象（原型的）的方法！
其实就是实例化的jQuery对象，实例化后的对象就可以调用拓展的方法了

代码块

  $.fn.extend({
    hello:function(){alert('hello');}
   });
   $("div").hello()

3）Jquery的extend方法还有一个重载原型：

extend(boolean,dest,src1,src2,src3...)

第一个参数boolean代表是否进行深度拷贝，其余参数和前面介绍的一致，什么叫深层拷贝，我们看一个例子：

var result=$.extend( true,  {},  
    { name: "John", location: {city: "Boston",county:"USA"} },  
    { last: "Resig", location: {state: "MA",county:"China"} } );

我们可以看出src1中嵌套子对象location:{city:"Boston"},src2中也嵌套子对象location:{state:"MA"},第一个深度拷贝参数为true，那么合并后的结果就是：

result={name:"John",last:"Resig",
        location:{city:"Boston",state:"MA",county:"China"}}

也就是说它会将src中的嵌套子对象也进行合并，而如果第一个参数boolean为false，我们看看合并的结果是什么，如下：

var result=$.extend( false, {},  
{ name: "John", location:{city: "Boston",county:"USA"} },  
{ last: "Resig", location: {state: "MA",county:"China"} }  
);

那么合并后的结果就是:

  result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}