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 相关文章推荐
JS面向对象、prototype、call()、apply()
May 14 Javascript
Jquery中对数组的操作代码
Aug 12 Javascript
使用javascript为网页增加夜间模式
Jan 26 Javascript
js对象转json数组的简单实现案例
Feb 28 Javascript
不使用ajax实现无刷新提交表单
Dec 21 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
Aug 02 Javascript
微信小程序 闭包写法详细介绍
Dec 14 Javascript
浅析BootStrap中Modal(模态框)使用心得
Dec 24 Javascript
实例解析Vue.js下载方式及基本概念
May 11 Javascript
laypage+SpringMVC实现后端分页
Jul 27 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 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
php+dbfile开发小型留言本
2006/10/09 PHP
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
php中opendir函数用法实例
2014/11/15 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
js实现DIV的一些简单控制
2007/06/04 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
2012/03/08 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
js 三级关联菜单效果实例
2013/08/13 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
jquery+php实现滚动的数字特效
2015/11/29 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
初识 Vue.js 中的 *.Vue文件
2017/11/22 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
浅谈Python实现Apriori算法介绍
2017/12/20 Python
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
python实现支付宝转账接口
2019/05/07 Python
Django使用unittest模块进行单元测试过程解析
2019/08/02 Python
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
python线程join方法原理解析
2020/02/11 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
英文导游欢迎词
2014/01/11 职场文书
大学生通用个人的自我评价
2014/02/10 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
三关爱志愿服务活动方案
2014/08/17 职场文书
自主招生自荐信怎么写
2015/03/24 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书