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 发个判断字符串是否为符合标准的函数
Apr 27 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
Dec 22 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
May 30 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
简介JavaScript中的setDate()方法的使用
Jun 11 Javascript
Js apply方法详解
Feb 16 Javascript
Angularjs使用指令做表单校验的方法
Mar 31 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 Javascript
JavaScript生成随机验证码代码实例
Sep 28 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+oracle 分页类
2006/10/09 PHP
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
PHP 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
php数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
php实现文件预览功能
2017/05/23 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
Laravel 队列使用的实现
2019/01/08 PHP
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
JavaScript数据类型详解
2015/04/01 Javascript
js代码实现点击按钮出现60秒倒计时
2021/01/28 Javascript
轻松实现js图片预览功能
2016/01/18 Javascript
Javascript简写条件语句(推荐)
2016/06/12 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
使用axios实现上传图片进度条功能
2017/12/21 Javascript
vue-router重定向不刷新问题的解决
2018/06/25 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
好用的Python编辑器WingIDE的使用经验总结
2016/08/31 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
世界最大域名注册商:GoDaddy
2016/07/24 全球购物
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
大学新生军训个人的自我评价
2013/10/03 职场文书
新闻专业本科生的自我评价分享
2013/11/20 职场文书
生物制药专业自我鉴定
2014/02/19 职场文书
化工见习报告范文
2014/10/31 职场文书
平安建设汇报材料
2014/12/29 职场文书
民间借贷借条范本
2015/05/25 职场文书
环保建议书作文500字
2015/09/14 职场文书
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript
Python使用psutil库对系统数据进行采集监控的方法
2021/08/23 Python