jQuery.extend 函数及用法详细


Posted in Javascript onSeptember 06, 2015

jquery.extend函数详解

JQuery的extend扩展方法:

 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"}

也就是说后面的参数如果和前面的参数存在相同的名称,那么后面的会覆盖前面的参数值。

二、省略dest参数

上述的extend方法原型中的dest参数是可以省略的,如果省略了,则该方法就只能有一个src参数,而且是将该src合并到调用extend方法的对象中去,如:

1、$.extend(src)

该方法就是将src合并到jquery的全局对象中去,如:

$.extend({
 hello:function(){alert('hello');}
 });

就是将hello方法合并到jquery的全局对象中。

2、$.fn.extend(src)

该方法将src合并到jquery的实例对象中去,如:

$.fn.extend({
 hello:function(){alert('hello');}
 });

就是将hello方法合并到jquery的实例对象中。

下面例举几个常用的扩展实例:

$.extend({net:{}});

这是在jquery全局对象中扩展一个net命名空间。

$.extend($.net,{
  hello:function(){alert('hello');}
 })

这是将hello方法扩展到之前扩展的Jquery的net命名空间中去。

三、Jquery的extend方法还有一个重载原型:

extend(boolean,dest,src1,src2,src3...)

第一个参数boolean代表是否进行深度拷贝,其余参数和前面介绍的一致,什么叫深层拷贝,我们看一个例子:

var result=$.extend( true, {}, 
  { name: "John", location: {city: "Boston",county:"USA"} }, 
  { last: "Resig", location: {state: "MA",county:"China"} } );

我们可以看出src1中嵌套子对象location:{city:"Boston"},src2中也嵌套子对象location:{state:"MA"},第一个深度拷贝参数为true,那么合并后的结果就是:

result={name:"John",last:"Resig",
    location:{city:"Boston",state:"MA",county:"China"}}

也就是说它会将src中的嵌套子对象也进行合并,而如果第一个参数boolean为false,我们看看合并的结果是什么,如下:

var result=$.extend( false, {}, 
{ name: "John", location:{city: "Boston",county:"USA"} }, 
{ last: "Resig", location: {state: "MA",county:"China"} } 
          );

那么合并后的结果就是:

result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}

以上就是$.extend()在项目中经常会使用到的一些细节。

补充一下:我们也会经常用到extend()方法编写jquery插件,那么jquery插件的种类如下:

jQuery插件的种类

1、封装对象方法这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件。此类插件可以发挥出jQuery选择器的强大优势,有相当一部分的jQuery的方法,都是在jQuery脚本库内部通过这种形式“插”在内核上的,例如 parent() 方法, appendTo() 方法等。

2、封装全局函数可以将独立的函数加到jQuery命名空间下。如常用的jQuery.ajax()方法、去首尾空格的jQuery.trim()方法,都是jQuery内部作为全局函数的插件附加到内核上去的。

3、选择器插件虽然jQuery的选择器十分强大,但在少数情况下,还是会需要用到选择器插件来扩充一些自己喜欢的选择器。

jQuery.fn.extend()多用于扩展上面提到的3种类型中的第一种,jQuery.extend()用于扩展后两种插件。这两个方法都接受一个参数,类型为Object。Object对象的“名/值对”分别代表“函数或方法名/函数主体”。

jquery.extend函数用法详解

最近在研究jQuery。把jQuery.extend扩展函数的用法记录下来。

1、扩展jQuery静态方法.

$.extend({
test:function(){alert('test函数')}
})

用法: $.test()

2、合并多个对象

为jQuery.extend(css1,css2)为例,css1,css2个有一些属性(法照样会比处理,这里之讲属性).
extend函数会把css2有而css2没有的属性加到css1中,如果css2的某个属性与css1的某个属性名称享用,就会用css2的属性去覆盖css1的同名属性。css1就是最后的整和对象。或者也可以用 :

var newcss = jquery.extend(css1,css2) newcss就是合并的新对象。


var newcss = jquery.extend({},css1,css2) newcss就是合并的新对象.而且没有破坏css1的结构。

//用法: jQuery.extend(obj,obj,obj,..)
var Css={size: "px",style: "oblique"}
var Css={size: "px",style: "oblique",weight: "bolder"}
$.jQuery.extend(Css,Css)
//结果:Css的size属性被覆盖,而且继承了Css的weight属性
// Css = {size: "px",style: "oblique",weight: "bolder"}

3.深度镶套对象

新的extend()允许你更深度的合并镶套对象。下面的例子是一个很好的证明。

// 以前的 .extend()  
  jQuery.extend(  
   { name: “John”, location: { city: “Boston” } },  
   { last: “Resig”, location: { state: “MA” } }  
  );  
   // 结果:  
   // => { name: “John”, last: “Resig”, location: { state: “MA” } }
  // 新的更深入的 .extend()  
  jQuery.extend( true,  
  { name: “John”, location: { city: “Boston” } },  
   { last: “Resig”, location: { state: “MA” } }  
 );  
 // 结果  
  // => { name: “John”, last: “Resig”,  
 //   location: { city: “Boston”, state: “MA” } }
Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - Pagination分页
Sep 29 Javascript
JavaScript 5 新增 Array 方法实现介绍
Feb 06 Javascript
将光标定位于输入框最右侧实现代码
Dec 04 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 25 Javascript
三种检测iPhone/iPad设备方向的方法
Apr 23 Javascript
jQuery Migrate 1.1.0 Released 注意事项
Jun 14 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
Jul 19 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
js使用formData实现批量上传
Mar 27 Javascript
详解Vue router路由
Nov 20 Vue.js
jquery动态导航插件dynamicNav用法实例分析
Sep 06 #Javascript
jquery实现可自动收缩的TAB网页选项卡代码
Sep 06 #Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
Sep 06 #Javascript
js实现简洁的TAB滑动门效果代码
Sep 06 #Javascript
js实现左侧网页tab滑动门效果代码
Sep 06 #Javascript
浅谈javascript函数式编程
Sep 06 #Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 #Javascript
You might like
77A一级收信机修理记
2021/03/02 无线电
发挥语言的威力--融合PHP与ASP
2006/10/09 PHP
php+iframe实现隐藏无刷新上传文件
2012/02/10 PHP
初品cakephp 入门基础
2012/02/16 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
php文件缓存类汇总
2014/11/21 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
PHP实现的限制IP投票程序IP来源分析
2016/05/04 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
JavaScript判断变量是否为数组的方法(Array)
2016/02/24 Javascript
JS中常用的输出方式(五种)
2016/06/12 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
详解JavaScript 浮点数运算的精度问题
2019/07/23 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
web.py 十分钟创建简易博客实现代码
2016/04/22 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
python 常见的反爬虫策略
2020/09/27 Python
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
汽车维修专业个人求职信范文
2014/01/01 职场文书
导游实习生自荐书
2014/01/28 职场文书
寒假家长评语大全
2014/04/16 职场文书
初三毕业评语
2014/12/26 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers