最近在看一些jQuery的插件源码,发现了jQuery.extend()和jQuery.fn.extend()两个方法在插件中用到的频率非常高,在网上查询了下,说的要么是不清楚,要么就是不好理解。基于此,我写下自己的一些看些,希望大家指正。在JS中并没有类的概念,不过为了好解释或者是思想上的统一。我姑且把jQuery看成了一个类,方便理解。
找资源就上:去转盘(http://www.quzhuanpan.com)
jQuery.extend(),是扩展的jQuery这个类。
假设我们把jQuery这个类看成是人类,能吃饭能喝水能跑能跳,现在我们用jQuery.extend这个方法给这个类拓展一个能唱歌的技能。这样的话,不论是男人,女人,xx人…..等能继承这个技能(方法)了。
jQuery.extend({
test:function(){
alert("我是测试~");
}
});
$.test(); //弹出alert。test表明是jQuery的一个静态方法了
这个扩展也就是所谓的静态方法。只跟这个类(jQuery)本身有关。跟你具体的实例化对象$(“#ID”)是没关系滴。
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的全局对象中。
jQuery.fn.extend(),是扩展的jQuery这个类的对象。
说白了就是得这么用(假设xyz()是拓展的方法):
(‘selector′).xyz();你要是这么用.xyz();是会出错误滴。
(function($){
$.fn.extend({
xyz:function(){
alert("我是测试对象的~~~");
}
});
})(jQuery);
$("#ID").xyz(); //弹出alert,内容“我是测试对象的~~~”
总结,jQuery.extend()这个方法,主要是用来拓展个全局函数啦,例如.ajax()这种,要不就是拓展个选择器啦,例如.fn.each(),当选择器用。
大部分插件都是用jQuery.fn.extend()。
附: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()在项目中经常会使用到的一些细节
相关推荐
在jQuery的API中,`jQuery.extend`和`jQuery.fn.extend`是两个重要的方法,它们用于合并对象属性,但作用范围和用途有所不同。本文将深入探讨这两个方法的差异,并通过实例解析它们的工作原理。 首先,`jQuery....
jquery.fn.extend(object);给jQuery对象添加方法。 $.extend({ add:function(a,b){return a+b;} }); //$.add(3,4); //return 7 jQuery添加一个为 add的“静态方法”,之后便可以在引入 jQuery 的地方,使用这...
`$.extend`可以用于浅复制或深复制对象,而`$.fn.extend`则是用来扩展jQuery的功能。两者在用途上有明显的区别,但它们的实现原理是相似的。 ### `$.fn.extend`的深度扩展 `$.fn.extend`也可以接受多个对象作为...
在JavaScript中,jQuery库提供了两种扩展对象的方法,即`$.fn.extend`和`$.extend`。它们都用于增加或修改现有对象的功能,但应用场景不同。本文将深入解析这两种方法的实现原理和用途。 首先,`$.fn.extend`是用于...
通过本文的介绍,我们可以看到`jQuery.extend`是一个非常强大的工具,它不仅可以用来扩展jQuery的核心功能,还可以帮助开发者方便地管理和扩展自定义插件。理解它的不同用法和特性,对于提高前端开发效率和代码质量...
主要介绍了jQuery.extend 与 jQuery.fn.extend的用法及区别,结合实例形式分析了jQuery.extend与jQuery.fn.extend的功能、使用方法及区别,需要的朋友可以参考下
jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方法能够创建jQuery对象方法. 例如: 代码如下: jQuery.extend({ showName : ...
在jQuery中,`$.extend()`、`.fn`(即`jQuery.fn`)和`.fn.extend()`是开发者用于增强其功能和创建插件的关键部分。下面我们将详细探讨这三个概念。 1. `$.extend()` `$.extend()`方法用于合并一个或多个对象的属性...
`jQuery.extend`不仅可以用于简单的对象合并,还可以用来扩展jQuery的静态方法和实例方法。 ##### 1. 扩展静态方法 通过使用`$.extend`,可以直接向jQuery全局对象中添加新的方法: ```javascript $.extend({ ...
jquery.json-2.3.min.js和jquery.json-2.3.js jQuery为开发插件提拱了两个方法,分别是:jQuery.extend(object); 为扩展jQuery类本身 jQuery.fn.extend(object);给jQuery对象添加方法。
jQuery为开发插件提拱了两个方法,分别是: JavaScript代码 代码如下: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(object)...
`jQuery.fn`是jQuery对象的原型,因此`jQuery.fn.extend()`会将方法扩展到jQuery对象的实例上,使得实例可以直接调用这些方法。而`jQuery.extend()`则不会将方法扩展到实例上,这些方法通常需要通过jQuery类本身来...
在JavaScript和jQuery的世界里,`jQuery.fn...`jQuery.extend` 和 `jQuery.fn.extend` 分别用于扩展jQuery静态方法和实例方法。理解这些概念有助于更好地掌握jQuery的内部工作原理,以及如何有效地扩展和定制jQuery库。
jQuery为开发插件提拱了两个方法,分别是: 代码如下: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(object);给jQuery对象...
在jQuery库中,`jQuery.extend()` 和 `jQuery.fn.extend()` 是两种非常重要的方法,它们用于扩展和合并对象的属性。这两个方法在开发自定义插件或进行jQuery对象的定制时非常常见。 `jQuery.extend()` 用于合并一个...
在jQuery库中,`$.fn.extend` 和 `$.extend` 是两个非常重要的功能,它们用于扩展jQuery的功能和对象。这两个函数虽然名字相似,但作用却截然不同。 首先,`$.fn.extend` 是用于扩展jQuery选择器对象的方法。当你...