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 Array对象入门分析
Oct 30 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
Jquery图形报表插件 jqplot简介及参数详解
Oct 10 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 Javascript
基于jQuery实现左侧菜单栏可折叠功能
Dec 27 Javascript
基于jQuery实现数字滚动效果
Jan 16 Javascript
jquery表单验证实例仿Toast提示效果
Mar 03 Javascript
jquery+css实现侧边导航栏效果
Jun 12 jQuery
JavaScript实现短暂提示框功能
Apr 04 Javascript
JavaScript实现简单轮播图效果
Dec 01 Javascript
一道JS算法面试题——冒泡、选择排序
Apr 21 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
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
大师制作的中短波矿石收音机
2020/04/02 无线电
php基于Fleaphp框架实现cvs数据导入MySQL的方法
2016/02/23 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
JavaScript 对象字面量讲解
2016/06/06 Javascript
Node.js学习入门
2017/01/03 Javascript
three.js实现围绕某物体旋转
2017/01/25 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
微信分享调用jssdk实例
2017/06/08 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
angularjs结合html5实现拖拽功能
2018/06/25 Javascript
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
vue-router 路由传参用法实例分析
2020/03/06 Javascript
kNN算法python实现和简单数字识别的方法
2014/11/18 Python
python正则表达式re之compile函数解析
2017/10/25 Python
Python实现图片滑动式验证识别方法
2017/11/09 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
python中 * 的用法详解
2019/07/10 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
长青弘远的面试题
2012/06/09 面试题
2019年最新证婚词精选集!
2019/06/28 职场文书
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python