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 强制类型转换函数
May 17 Javascript
setInterval,setTimeout与jquery混用的问题
Apr 08 Javascript
js截取字符串的两种方法及区别详解
Nov 05 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 Javascript
JavaScript中将数组进行合并的基本方法讲解
Mar 07 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
May 05 Javascript
又一枚精彩的弹幕效果jQuery实现
Jul 25 Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 Javascript
js中数组常用方法总结(推荐)
Apr 09 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
js实现小星星游戏
Mar 23 Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 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
PL-880隐藏功能
2021/03/01 无线电
php对接java现实加签验签的实例
2016/11/25 PHP
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
风吟的小型JavaScirpt库 (FY.JS).
2010/03/09 Javascript
js截取字符串的两种方法及区别详解
2013/11/05 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
2013/11/21 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
jquery实现表单验证并阻止非法提交
2015/07/09 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
2016/06/22 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
vue组件之Alert的实现代码
2017/10/17 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
在vue项目中安装使用Mint-UI的方法
2017/12/27 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
从零学Python之入门(四)运算
2014/05/27 Python
python目录与文件名操作例子
2016/08/28 Python
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
python的json包位置及用法总结
2020/06/21 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
Python self用法详解
2020/11/28 Python
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
宿舍卫生检讨书
2014/01/16 职场文书
八年级语文教学反思
2014/02/11 职场文书
青春演讲稿范文
2014/05/08 职场文书
市级优秀班主任事迹材料
2014/05/13 职场文书
大学新闻系应届生求职信
2014/06/02 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
大学生暑期实践报告
2015/07/13 职场文书
如何拟写通知正文?
2019/04/02 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书
Win11任务栏太宽了怎么办?一招解决Win11任务栏太宽问题
2021/11/21 数码科技
vue elementUI批量上传文件
2022/04/26 Vue.js
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript