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中动态添加事件(绑定事件)的代码
Jan 09 Javascript
js完美的div拖拽实例代码
Jan 22 Javascript
详解JavaScript ES6中的模板字符串
Jul 28 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
Aug 09 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 Javascript
Javascript实现倒计时(防页面刷新)实例
Dec 13 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 Javascript
js实现图片懒加载效果
Jul 17 Javascript
uni-app 组件里面获取元素宽高的实现
Dec 27 Javascript
vue.js this.$router.push获取不到params参数问题
Mar 03 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的dl函数用法实例
2014/11/06 PHP
PHP如何实现跨域
2016/05/30 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
为数据添加append,remove功能
2006/10/03 Javascript
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
javascript 验证日期的函数
2010/03/18 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
2013/06/25 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
js返回顶部实例分享
2016/12/21 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
实现一个 Vue 吸顶锚点组件方法
2019/07/10 Javascript
Bootstrap实现省市区三级联动(亲测可用)
2019/07/26 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
Python的条件语句与运算符优先级详解
2015/10/13 Python
python多进程共享变量
2016/04/06 Python
怎样使用Python脚本日志功能
2016/08/14 Python
Python使用win32com实现的模拟浏览器功能示例
2017/07/13 Python
Flask框架web开发之零基础入门
2018/12/10 Python
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
匈牙利墨盒和碳粉购买网站:CDRmarket
2018/04/14 全球购物
adidas瑞典官方网站:购买阿迪达斯鞋子和运动服
2019/12/11 全球购物
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
药学专业个人自我评价
2013/11/11 职场文书
银行柜员应聘推荐信范文
2013/11/24 职场文书
电脑租赁公司创业计划书
2014/01/08 职场文书
大专生自我评价
2014/01/28 职场文书
看看如何用Python绘制小米新版天价logo
2021/04/20 Python