一 jQuery的扩展方法原型是

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

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

<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>

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

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

<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>

二 省略dest参数

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

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

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

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

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

三 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函数详解的更多相关文章

  1. 【转载】jQuery.extend 函数详解

    转载自:http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html jQuery.extend 函数详解 JQuery的e ...

  2. jQuery.extend 函数详解

    JQuery的extend扩展方法:      Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解.      一.Jquery的扩展方 ...

  3. [转载]jQuery.extend 函数详解

    JQuery的extend扩展方法:      Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解.      一.Jquery的扩展方 ...

  4. (转)jQuery.extend 函数详解

    Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解       JQuery的extend扩展方法: Jquery的扩展方法extend ...

  5. 【转】jQuery.extend 函数详解

    原文地址:http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html JQuery的extend扩展方法:      Jq ...

  6. [转]jQuery.extend 函数详解

    JQuery的extend扩展方法:      Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解.      一.Jquery的扩展方 ...

  7. jQuery extend方法详解

    先说个概念的东西: jQuery为开发插件提拱了两个方法,分别是: $.fn.extend(item):为每一个实例添加一个实例方法item.($("#btn1") 会生成一个 j ...

  8. jQuery.attr() 函数详解

    一,jQuery.attr()  函数详解: http://www.365mini.com/page/jquery-attr.htm 二,jQuery函数attr()和prop()的区别: http: ...

  9. jQuery.ready() 函数详解

    jQuery.ready() 函数详解 ready()函数用于在当前文档结构载入完毕后立即执行指定的函数. 该函数的作用相当于window.onload事件. 你可以多次调用该函数,从而绑定多个函数, ...

随机推荐

  1. 关于启动调试时,总是启动多个web端口的问题

    在一个解决方案中,经常包含多个web项目,当设置某一个web项目为起始项目后,启动调试,会发现其他的web项目的端口也会一起打开,显示在电脑的右下方,其实开启其他端口有时是没必要的,只是多占用了系统内 ...

  2. java_linux_shell_定时kill 启动java程序

    #!/bin/bash #while truedo Process_ID=`ps -ef |grep 'LoginSinaWeiboCookie.jar' |grep -v grep |awk '{p ...

  3. [ 流行的网络框架 ] AFN & ASI

    1.AFN & ASI(早已经停止更新,但现在许多公司也在使用.) AFNetWorking地址:https://github.com/AFNetworking/AFNetworking AS ...

  4. dojo/request

    dojo/request模块整体架构解析   总体说明 做前端当然少不了ajax的使用,使用dojo的童鞋都知道dojo是基于模块化管理的前端框架,其中对ajax的处理位于dojo/request模块 ...

  5. div中显示某个网页

    原文:div中显示某个网页 1.<iframe>方法 2.ajax方法 ajax+流实现无框架限制块刷新: 主框架index页面: js: $(function(){ $("#d ...

  6. SVN & Git (二)

    Git:是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的项目版本管理.Git 是 Linus T ...

  7. Redis源代码分析(二十七)--- rio制I/O包裹

    I/O每个操作系统,它的一个组成部分.和I/O业务质量,在一定程度上也影响了系统的效率. 今天,我在了解了Redis中间I/O的,相同的,Redis在他自己的系统中.也封装了一个I/O层.简称RIO. ...

  8. windows+php5.5+apache2.4+tomcat+mod_jk配置

    原因: 通常情况下apache执行的是80port,比方apache启动后执行localhost:80就能够出现It works页面,这里的80也能够不写,会默认的.而tomcat启动时默认的port ...

  9. easyui datagrid 单元格编辑 自动聚焦 、全选

    $.extend($.fn.datagrid.methods, { editCell: function (jq, param) { return jq.each(function () { var ...

  10. 【转】height,posHeight和pixelHeight区别

    height 返回高度    带单位 posHeight    不带单位的数字 pixelHeight 转换成像素后的数字    不带单位 更多资料 http://www.1fan.com.cn