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语言本身谈项目实战
Dec 27 Javascript
15 个 JavaScript Web UI 库
May 19 Javascript
js修改table中Td的值(定义td的单击事件)
Jan 10 Javascript
JavaScript—window对象使用示例
Dec 09 Javascript
Javascript中封装window.open解决不兼容问题
Sep 28 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
Apr 24 Javascript
jQuery组件easyui基本布局实现代码
Aug 25 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
Sep 12 Javascript
javascript中可能用得到的全部的排序算法
Mar 05 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
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
易被忽视的js事件问题总结
2016/05/14 Javascript
微信小程序 开发指南详解
2016/09/27 Javascript
js实现五星评价功能
2017/03/08 Javascript
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
2019/03/02 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
在Uni中使用Vue的EventBus总线机制操作
2020/07/31 Javascript
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
Python语言快速上手学习方法
2018/12/14 Python
python xpath获取页面注释的方法
2019/01/14 Python
python的几种矩阵相乘的公式详解
2019/07/10 Python
pytorch下大型数据集(大型图片)的导入方式
2020/01/08 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
如何基于windows实现python定时爬虫
2020/05/01 Python
Python读取二进制文件代码方法解析
2020/06/22 Python
opencv 图像腐蚀和图像膨胀的实现
2020/07/07 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
教育专业个人求职信
2013/12/02 职场文书
国贸专业的职业规划书
2014/03/15 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
临床医学专业求职信
2014/08/08 职场文书
运动员代表致辞
2015/07/29 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书