jQuery extend()和jQuery.fn.extend()

jQuery提供两个用于封装扩展的方法:

1.$.extend(); 扩展jQuery类方法,即jQuery全局方法 (在全局可直接调用,如$.myFun(); myFun为自定义的方法)

2.$.fn.extend();扩展jQuery实例的成员方法 (如用来扩展一个input框的方法,$.fn = $.prototype,原型)

认识$.extend

$.extend 用法:jQuery.extend( target [, object1 ] [, objectN ] )

它的含义是将object1,object2,object3...合并到target中,生成新的target并返回

如果只想获取到object1,object2,object3...合并后的集合,那么target直接给一个空的对象即可

如:$.extend({},object1,object2,object3...)

使用技巧:

1.如果合并的集合中存在重复的参数名称,那么后面的会覆盖前面的

var obj1 = {
name : 'Mary',
age : '18'
}; var obj2 = {
name : 'Lily',
sex : 'Female'
}; var newObj = $.extend({},obj1,obj2); //newObj最终结果
{
name : 'Lily',
age : '18' ,
sex : 'Female'
}     

2.省略dest参数

extend方法中的target是可以省略的,如果省略了,则该方法就只能有一个object参数,而且是将该object合并到调用extend方法的对象中去。有点绕,上例子更明白些。

$.extend(src)

该方法就是将obj合并到jQuery的全局对象中去,如

$.extend({
hello:function(){
alert('hello!');
}
} //全局可调用
$.hello();  

3.重载原型

$.extend(boolean,target,obj1,obj2,obj3...)

与前面用法不同的是多了一个boolean参数,boolean 代表是否进行深度拷贝

例子:

var obj1 = {
name : 'John',
score : {
    math :'100',
   englisth':'99'
   }
}; var obj2 = {
  age : '18',
  score : {
    music : '66',
    history : '88'
  }
}; var result = $.extend(true,{},obj1,obj2); //boolean为true时result最终结果(深度拷贝)
result = {
name : 'John',
age : '18',
score : {
math : '100',
english : '99',
music : '66',
history : '88'
  }
} //boolean为false时result最终结果(非深度拷贝)
result = {
name : 'John',
age : '18',
score : {
music : '66',
history : '88'
}
}
//因为obj1,obj2都有score参数,所以obj2会覆盖掉前面obj1的score值

  

认识$.fn.extend

$.fn.extend 用法:$.fn.extend(object)

含义:把对象挂载到jQuery的prototype属性,来扩展一个新的jQuery实例方法,为jQuery实例添加"成员方法", jQuery实例可以直接使用该函数方法。

jQuery.fn.extend = jQuery.prototype.extend

你可以拓展一个对象到jQuery的prototype里去

(function( $ ){
$.fn.tooltip = function( options ) {
};
//等价于
var tooltip = {
function(options){
}
};
$.fn.extend(tooltip) = $.prototype.extend(tooltip) = $.fn.tooltip
})(jQuery);

  

$.extend() 与 $.fn.extend()两者的区别

1.两者调用方式不同:

jQuery.extend()      一般由传入的全局函数来调用,主要是用来拓展个全局函数,如$.init(),$.ajax();

jQuery.fn.extend()  一般由具体的实例对象来调用,可以用来拓展选择器,例如$.fn.each();

2.两者的主要功能作用不同:

jQuery.extend(object); 为扩展jQuery类本身,为自身添加新的方法。

jQuery.fn.extend(object);给jQuery实例对象添加方法

3.大部分插件都是用jQuery.fn.extend()

jQuery开发自定义插件 $.extend()与$.fn.extend()的更多相关文章

  1. [转]jquery开发自定义的插件总结

    本文转自:http://www.cnblogs.com/Jimmy009/archive/2013/01/17/jquery%E6%8F%92%E4%BB%B6.html 前几天在玩jquery,今天 ...

  2. jQuery中,$.extend,$obj.extend和$.fn.extend三者的区别

    jQuery中,$.extend,$obj.extend和$.fn.extend三者的区别 现在做的一个项目,所使用的框架是基于jQuery扩展的,于是平时学了一下jQuery,了解到了它的扩展函数: ...

  3. jQuery插件开发中$.extend和$.fn.extend辨析

    jQuery插件开发分为两种:   1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery. ...

  4. $.fn与$.fx什么意思; $.extend与$.fn.extend用法区别; $(function(){})和(function(){})(jQuery)

    $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc() 那么你可以这样子:$("#div").abc(); 通常使 ...

  5. 理解jQuery的$.extend与$.fn.extend

    https://www.cnblogs.com/xuxiuyu/p/5989743.html 上面这篇博客总结的很棒!!,以下对自己的认识做一个总结 <!DOCTYPE html> < ...

  6. $.extend()和$.fn.extend()用法和区别

    $.extend()和$.fn.extend()用法和区别: 在自己制作插件的时候会经常用到$.extend()和$.fn.extend()两个函数,无论从外观还是作用都非常的类似,但是实际上它们的区 ...

  7. $.extend(),与$.fn.extend() 讲解

    $.extend(),与$.fn.extend() 讲解(一) (2013-07-11 10:24:31) 转载▼ 转自:http://blog.sina.com.cn/s/blog_a3bd3bd0 ...

  8. $.extend()与$.fn.extend()

    jQuery.extend(object) 扩展jQuery对象本身.用来在jQuery命名空间上增加新函数.jQuery.fn.extend(object) 扩展 jQuery 元素集来提供新的方法 ...

  9. jquery开发js插件

    1.需要掌握的知识点 1)(function($){...}(jQuery)):实际上就是匿名函数并且函数用()阔起来,形成闭包,外界对其内部函数没有影响 $(function(){…});   jQ ...

随机推荐

  1. Windows下Mysql常用操作命令

    以下命令中的服务启动及停止需要使用以管理员身份运行cmd.exe. 1.启动Mysql服务:net start [mysql服务名].示例: net start mysql57 结果: 2.停止Mys ...

  2. jstl 中 <c:foreach> 多级循环

  3. LeetCode 101. Symmetric Tree (对称树)

    Given a binary tree, check whether it is a mirror of itself (ie, symmetric around its center). For e ...

  4. 聊聊java基础,int值强制类型转换成byte

    聊聊java基础,int值强制类型转换成byte 知识点:byte.short.char在表达式中会自动提升为int 之前做一个应用时,打印IP地址,因为是用4个byte存储的,所以打印的时候值范围是 ...

  5. Lua如何管理”package”

    Lua如何管理"package" 方式一: 私有方法和变量都需要显式定义为local类型的,这很容易造成错误.一旦不小心漏写,就又将方法定义为全局的了. "package ...

  6. 2017上海QCon之旅总结(下)

    本来这个公众号的交流消息中间件相关的技术的.十月去上海参加了QCon,第一次参加这样的技术会议,感受挺多的,所以整理一下自己的一些想法接公众号和大家交流一下. 三天的内容还挺多的,之前已经有上篇和中篇 ...

  7. AngularJS学习篇(十)

    AngularJS Select(选择框) 使用 ng-options 创建选择框 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,如 ...

  8. css响应式布局

    以设计稿为准,假设设计稿竖屏宽度为750px,取根元素的font-size为50px 在iphone6(375px)下,deviceWidth=7.5rem, 这个就是viewPort中的device ...

  9. Problem B: 大整数的加法运算

    Problem B: 大整数的加法运算 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 112  Solved: 57[Submit][Status][W ...

  10. Could not load type 'System.ServiceModel.Activation.HttpModule' from assembly 'System.ServiceModel, Version=3.0.0.0,"解决办法

    这是因为先安装了 .NET Framework 4,随后启用了 .NET Framework 3.5 WCF HTTP 激活,则会发生此错误. 只需要已管理员用户在cmd中运行aspnet_regii ...