jQuery.extend 函数的详细用法


Posted in Javascript onJune 27, 2012

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

Jquery的扩展方法原型是:

 

extend(dest,src1,src2,src3...);
它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构,可以如下使用:
var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。
这样就可以将src1,src2,src3...进行合并,然后将合并结果返回给newSrc了。如下例:
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})
那么合并后的结果
result={name:"Jerry",age:21,sex:"Boy"}
也就是说后面的参数如果和前面的参数存在相同的名称,那么后面的会覆盖前面的参数值。

也许你对该函数已经有一定的了解。我们再看一个jquery官方的例子(http://api.jquery.com/jQuery.extend/)
代码如下:

<!DOCTYPE html> 
<html> 
<head> 
<scriptsrc="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 
<divid="log"></div> 
<script> 
var defaults ={validate:false,limit:5,name:"foo"}; 
var options ={validate:true,name:"bar"}; 
/* merge defaults and options, without modifying defaults */ 
var settings =$.extend({},defaults,options); // 在插件开发中经常会用到 
varprintObj =typeofJSON !="undefined"?JSON.stringify :function(obj){ 
vararr =[]; 
$.each(obj,function(key,val){ 
varnext =key +": "; 
next +=$.isPlainObject(val)?printObj(val):val; 
arr.push(next ); 
}); 
return"{ "+ arr.join(", ")+" }"; 
}; $("#log").append("<div><b>defaults -- </b>"+printObj(defaults)+"</div>"); 
$("#log").append("<div><b>options -- </b>"+printObj(options)+"</div>"); 
$("#log").append("<div><b>settings -- </b>"+printObj(settings)+"</div>"); 
</script> 
</body> 
</html>

输出结果为:
defaults -- {"validate":false,"limit":5,"name":"foo"} //这里是原样输出defaults
options -- {"validate":true,"name":"bar"} //这里是原样输出options
settings -- {"validate":true,"limit":5,"name":"bar"} //合并defaults和options , 后面的参数如果和前面的参数存在相同的名称,那么后面的会覆盖前面的参数值。
Javascript 相关文章推荐
javascript 模式设计之工厂模式详细说明
May 10 Javascript
JS实现淘宝幻灯片效果的实现方法
Mar 22 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 Javascript
Javascript验证上传图片大小[前台处理]
Jul 18 Javascript
JQuery包裹DOM节点的方法
Jun 11 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 Javascript
基于jQuery封装的分页组件
Jun 26 jQuery
浅谈JavaScript find 方法不支持IE的问题
Sep 28 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
Sep 16 Javascript
JS二级菜单不同实现方法分析【4种方法】
Dec 21 Javascript
vue和better-scroll实现列表左右联动效果详解
Apr 29 Javascript
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
浅谈Javascript事件处理程序的几种方式
Jun 27 #Javascript
javascript 事件处理程序介绍
Jun 27 #Javascript
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 #Javascript
IE事件对象(The Internet Explorer Event Object)
Jun 27 #Javascript
跨浏览器的事件对象介绍
Jun 27 #Javascript
UI Events 用户界面事件
Jun 27 #Javascript
浅谈Javascript鼠标和滚轮事件
Jun 27 #Javascript
You might like
php下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
PHP中soap的用法实例
2014/10/24 PHP
Yii数据读取与跳转参数传递用法实例分析
2016/07/12 PHP
php模拟post提交请求调用接口示例解析
2020/08/07 PHP
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
javascript 继承实现方法
2009/08/26 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
node.js中的path.basename方法使用说明
2014/12/09 Javascript
JavaScript实现控制打开文件另存为对话框的方法
2015/04/17 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
微信小程序 video组件详解
2016/10/25 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
redux中间件之redux-thunk的具体使用
2018/04/17 Javascript
vue组件中的数据传递方法
2018/05/14 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
node-red File读取好保存实例讲解
2019/09/11 Javascript
angular异步验证防抖踩坑实录
2019/12/01 Javascript
Python中将字典转换为列表的方法
2016/09/21 Python
Python中字符串的修改及传参详解
2016/11/30 Python
linux下安装python3和对应的pip环境教程详解
2019/07/01 Python
Django Rest framework频率原理与限制
2019/07/26 Python
python中Lambda表达式详解
2019/11/20 Python
Python如何避免文件同名产生覆盖
2020/06/09 Python
适合各种场合的美食礼品:Harry & David
2016/08/03 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上?
2013/03/30 面试题
九年级家长会邀请函
2014/01/15 职场文书
测试工程师职业规划书
2014/02/06 职场文书
委托协议书范本
2014/04/22 职场文书
董事长岗位职责
2015/02/13 职场文书
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL
制作能在nginx和IIS中使用的ssl证书
2021/06/21 Servers