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 相关文章推荐
在textarea中显示html页面的javascript代码
Apr 20 Javascript
Javascript 布尔型分析
Dec 22 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
Apr 01 Javascript
jquery 新手学习常见问题解决方法
Apr 18 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
自己写的Javascript计算时间差函数
Oct 28 Javascript
jQuery地图map悬停显示省市代码分享
Aug 20 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
May 17 Javascript
Vue 进阶教程之v-model详解
May 06 Javascript
解决layer弹层遮罩挡住窗体的问题
Aug 17 Javascript
js实现随机抽奖
Mar 19 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中文字符截取防乱码
2008/03/28 PHP
PHP 开源AJAX框架14种
2009/08/24 PHP
Laravel 5框架学习之Laravel入门和新建项目
2015/04/07 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
php源码的使用方法讲解
2019/09/26 PHP
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
CheckBoxList多选样式jquery、C#获取选择项
2013/09/06 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
2014/10/20 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
mac下的nodejs环境安装的步骤
2017/05/24 NodeJs
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
2020/12/14 Vue.js
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
[01:01:22]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python生成随机密码的方法
2017/06/16 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
Python Django 实现简单注册功能过程详解
2019/07/29 Python
python多线程实现TCP服务端
2019/09/03 Python
最小二乘法及其python实现详解
2020/02/24 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
浅析python 字典嵌套
2020/09/29 Python
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
聘用意向书范本
2014/04/01 职场文书
地道战观后感300字
2015/06/04 职场文书
婚宴新娘致辞
2015/07/28 职场文书
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python