码迷,mamicode.com
首页 > Web开发 > 详细

jQuery extend函数详解

时间:2014-05-07 14:26:24      阅读:358      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   class   code   java   

一 jQuery的扩展方法原型是

$.extend(dest,src1,src2,src3);

含义是将src1,src2,src3合并到dest中,返回值为合并后的dest,该方法合并后,dest的结构被修改.

bubuko.com,布布扣
<script>
var dest = {type:person}
var src1 = {name:lisi,age:12}
var src2 = {sex:male}
var src3 = {class:class 1}
var result = $.extend(dest,src1,src2,src3);
console.log(result);
</script>
bubuko.com,布布扣

结果:Object { type="person", name="lisi", age=12, sex=‘male‘,class="class1"}

如果不想修改dest的结构,可以使用一个空对象({})代替

bubuko.com,布布扣
<script>
var dest = {type:person}
var src1 = {name:lisi,age:12}
var src2 = {sex:male}
var src3 = {class:class 1}
var result = $.extend({},src1,src2,src3);
console.log(result);
</script>
bubuko.com,布布扣

二 省略dest参数

$.extend()方法原型中的dest参数是可以忽略的,如果忽略,则该方法只有一个src参数,而且是将src合并到调用extend方法的对象中去。

1 $.extend()方法将src合并到jquery的全局对象中去。

bubuko.com,布布扣
<script>
$.extend({
    hello:function(){
            alert(将src合并到jquery的全局对象中,调用方式为$.hello());    
         }
})
$.hello();
</script>
bubuko.com,布布扣

2 $.fn.extend()该方法将src合并到jquery的实例对象中去.

bubuko.com,布布扣
<div id="div">test demo</div>
<script>
$.fn.extend({
    hello:function(){
            alert(将src合并到jquery的实例对象中,调用方式为$("#div").hello());    
         }
})
$("#div").hello();
</script>
bubuko.com,布布扣

三 jquery的extend方法还有一个重载原型

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

第一个参数boolean代表是否进行深度拷贝,其余参数如上所述

var src1 = {name:‘John‘,location:{city:‘Bj‘,country:‘China‘,sex:‘Male‘}};
var src2 = {name:‘Lucy‘,location:{city:‘NewYork‘,country:"USA"}};    
var result = $.extend(true,{},src1,src2);
var result2 = $.extend(false,{},src1,src2);

result1 :

location   Object { city="NewYork", country="USA", sex="Male"}

name"Lucy"

retuslt2:

locationObject { city="NewYork", country="USA"}

name"Lucy"

可以看到当bool值为true的时候,子对象也会合并,而当bool值为false的时候,子对象不会合并,只是进行了替换。

 

 

jQuery extend函数详解,布布扣,bubuko.com

jQuery extend函数详解

标签:des   style   blog   class   code   java   

原文地址:http://www.cnblogs.com/kongxs/p/3713566.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!