介绍

jQuery.extend([deep], target, object1, [objectN])
用一个或多个其他对象来扩展一个对象,返回被扩展的对象。如果不指定target,则给jQuery对象本身进行扩展。这有助于插件作者为jQuery增加新方法。

参数
[deep],target,object1,[objectN]
deep:如果设为true,则递归合并。
target:待修改对象。
object1:待合并到第一个对象的对象。
objectN:待合并到第一个对象的对象。

合并对象

如果存在相同的结构,后面的对象会覆盖前面的对象值;

如果参数deep为 true,则会递归合并对象;

deep为 true

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

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

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

反之省略第一个参数或者为false

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

无target  扩展对象到jq对象本身

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

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

完整代码:

 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style> </style>
</head>
<body> <script src="jquery-3.0.0.min.js"></script>
<script> //合并对象 false
var s= $.extend({},{name:'2',age:22},{name:'3',number:'232'},{limit:'23'})
console.log(s); // 合并对象 递归合并 true
var result=$.extend( true, {},
{ name: "John", location: {city: "Boston",county:"USA"} },
{ last: "Resig", location: {state: "MA",county:"China",age:'99'} } );
console.log(result) //扩展对象
$.extend({
age:20,area:'上海',
hello:function(){
console.log('20170817 hello')
}
}
);
console.log($.age,$.area);
$.hello(); </script>
</body>
</html>

jQuery.extend 使用函数的更多相关文章

  1. 图片放大功能插件及jquery.extend函数理解

    前端时间,产品提出社区评论中的图片需要有放大功能.感觉可以共用,所以就想整合一个插件,过程中也借鉴了一些例子. 分析下自己的代码思路: var scaleImg = function(opts) { ...

  2. jQuery.extend函数详细用法!

    最近在研究jQuery.把jQuery.extend扩展函数的用法记录下来. 1.扩展jQuery静态方法. }) 用法: $.test() 2.合并多个对象.为jQuery.extend(css1, ...

  3. jQuery源码分析-03扩展工具函数jQuery.extend

    // 扩展工具函数 jQuery.extend({ // http://www.w3school.com.cn/jquery/core_noconflict.asp // 释放$的 jQuery 控制 ...

  4. jQuery.extend 函数

    jQuery.extend 函数详解 JQuery的extend扩展方法: Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解. 一.J ...

  5. 【转载】jQuery.extend 函数详解

    转载自:http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html jQuery.extend 函数详解 JQuery的e ...

  6. jquery06 jQuery.extend 给jQuery函数添加、继承 静态方法

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  7. jQuery.extend函数

    http://www.cnblogs.com/luckboy/archive/2009/06/25/1510870.html 1.扩展jQuery静态方法. 1$.extend({ 2test:fun ...

  8. jQuery为开发插件提拱了两个方法:jQuery.fn.extend(); jQuery.extend();

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...

  9. jQuery.extend和jQuery.fn.extend的区别【转】

    解释的很有意思,清晰明了又有趣,转来分享下,哈哈哈 jQuery.extend和jQuery.fn.extend的区别,其实从这两个办法本身也就可以看出来.很多地方说的也不详细.这里详细说说之间的区别 ...

随机推荐

  1. nodejs模块学习: connect解析

    nodejs模块学习: connect解析 nodejs 发展很快,从 npm 上面的包托管数量就可以看出来.不过从另一方面来看,也是反映了 nodejs 的基础不稳固,需要开发者创造大量的轮子来解决 ...

  2. 精通 JS正则表达式(转)

    转载的目的在于:增加一些自己看不懂的解释.内容只加不改,灰色字体是自己寻找并增加的. 正则表达式可以: •测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式 ...

  3. Chrome浏览器扩展开发系列之十六:扩展中可用的Chrome浏览器API

    除了Chrome浏览器支持的chrome.* API之外,Chrome浏览器扩展还可以使用Chrome浏览器为Web页面或Chrome app提供的APIs.对于Chrome浏览器2支持的API,还可 ...

  4. jvm 加载class文件过程

    jvm 加载class文件分为装载-链接-初始化三个过程. load -------->link verify prepare resolve     ---------->initial ...

  5. pc端的企业网站(IT修真院test8)详解1-2

    今天接着说test8的页面还原. 头部header和尾部footer 我一开始是想直接使用bootstrap的栅格系统来实现的.但是内容的定位出了不少麻烦. 那么就索性用原生html+css来还原页面 ...

  6. co 模块

    1.co 模块,它基于 ES6 的 generator 和 yield ,让我们能用同步的形式编写异步代码. 2.co 模块是能让我们以同步的形式编写异步代码的 nodejs 模块 3.学习网络地址: ...

  7. js模块加载详解

    看着java中各种import加载,在回过头来看看javascript还在自己造轮子,写各种XX的模块加载框架,ECMASCRIPT6不知什么时候能够普及.不过DT归DT,该学的还是要学. 一 同步加 ...

  8. static关键字,引发的spring普通类获取spring的bean的思考

    在c++和java中static关键字用于修饰静态成员变量和成员函数 举例一个普通的javabean class AA { int a; static int b; geta/seta;//此处省略g ...

  9. Java 9 揭秘(14. HTTP/2 Client API)

    Tips 做一个终身学习的人. 在此章中,主要介绍以下内容: 什么是HTTP/2 Client API 如何创建HTTP客户端 如何使HTTP请求 如何接收HTTP响应 如何创建WebSocket的e ...

  10. jenkins+ANT+jmeter 接口测试环境搭建

    目的 jmeter很早就接触了,最近又在接触项目的时候整了一下.写这篇博客主要有两个目的 1,为了给自己搭建jmeter做一个总结. 2,在部署过程中遇到过一些坑,在这分享出来,也希望能给需要的人一个 ...