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 相关文章推荐
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 Javascript
读jQuery之九 一些瑕疵说明
Jun 21 Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 Javascript
jquery 中的each()跳出循环的语句
May 23 Javascript
JavaScript实现获取dom中class的方法
Feb 09 Javascript
JQuery中clone方法复制节点
May 18 Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
Jan 20 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
详解react服务端渲染(同构)的方法
Sep 21 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 Javascript
微信小程序页面上下滚动效果
Nov 18 Javascript
浅谈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
香妃
2021/03/03 冲泡冲煮
PHP 模拟登陆MSN并获得用户信息
2009/05/16 PHP
PHP 批量删除数据的方法分析
2009/10/30 PHP
初识Laravel
2014/10/30 PHP
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
jquery实现input框获取焦点的简单实例
2017/01/26 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
使用Angular CLI生成路由的方法
2018/03/24 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
jQuery滑动效果实现方法分析
2018/09/05 jQuery
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
用Python创建声明性迷你语言的教程
2015/04/13 Python
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
python之Socket网络编程详解
2016/09/29 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
Python selenium实现微博自动登录的示例代码
2018/05/16 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
TensorFlow通过文件名/文件夹名获取标签,并加入队列的实现
2020/02/17 Python
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
如何写一个自定义标签
2012/12/28 面试题
毕业生求职推荐信
2013/11/04 职场文书
少年闰土教学反思
2014/02/22 职场文书
解除合同协议书
2014/04/17 职场文书
入党函调证明材料
2014/12/24 职场文书
大学生年度个人总结
2015/02/15 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle