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定义类和对象的几种方式
Nov 09 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
Nov 16 Javascript
基于jQuery的倒计时实现代码
May 30 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
Apr 08 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
Sep 09 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 Javascript
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
DWR内存兼容及无法调用问题解决方案
Oct 16 Javascript
vue项目实现减少app.js和vender.js的体积操作
Nov 12 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
Phpbean路由转发的php代码
2008/01/10 PHP
PHP随机生成随机个数的字母组合示例
2014/01/14 PHP
php模板引擎技术简单实现
2016/03/15 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
firefox中用javascript实现鼠标位置的定位
2007/06/17 Javascript
JavaScript 创建对象
2009/07/17 Javascript
基于jquery的不规则矩形的排列实现代码
2012/04/16 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
JavaScript操作 url 中 search 部分方法函数
2016/06/15 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
2017/08/11 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
Python将xml和xsl转换为html的方法
2015/03/10 Python
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
python re模块的高级用法详解
2018/06/06 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
使用python telnetlib批量备份交换机配置的方法
2019/07/25 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
python高级特性简介
2020/08/13 Python
物流专业毕业生推荐信范文
2013/11/18 职场文书
爱心捐书活动总结
2014/07/05 职场文书
在宿舍喝酒的检讨书
2014/09/28 职场文书
节水倡议书
2015/01/19 职场文书
通知书大全
2015/04/27 职场文书
初中信息技术教学反思
2016/02/16 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
python中的getter与setter你了解吗
2022/03/24 Python
mysql如何查询连续记录
2022/05/11 MySQL