zoukankan      html  css  js  c++  java
  • jQuery extend()

    jQuery extend()

    jQuery extend()方法,可以将多个对象合并到第一个对象,从而扩展原来的对象。

    语法:

    jQuery.extend( [deep ], target, object1 [, objectN ] )
    
    • deep: Boolean类型值,如果是true,可以递归进行深拷贝,除了可以拷贝基本数据类型,还可以递归进行数组或对象的拷贝。
    • target:Object类型,目标对象,后面的对象属性都将添加到这个目标对象
    • object1:一个对象,它包含额外的属性合并到第一个参数.
    • objectN:更多的对象,它们包含额外的属性合并到第一个参数.

    使用:

    实例一:合并两个对象,并修改第一个对象

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery.extend demo</title>
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>
     
    <div id="log"></div>
     
    <script>
    var object1 = {
      apple: 0,
      banana: { weight: 52, price: 100 },
      cherry: 97
    };
    var object2 = {
      banana: { price: 200 },
      durian: 100
    };
     
    // 将object2合并到object1
    $.extend( object1, object2 );
     
    $( "#log" ).append( JSON.stringify( object1 ) );
    //结果:{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}
    //解释:object1把object2中的属性都添加自己身上来了,但是object1中的banana: { weight: 52, price: 100 }直接被object2中的banana: { price: 200 }替代了,主要是因为banana: { weight: 52, price: 100 }是一个对象,而不是基本数据类型,所以这里的对象只是到内存地址的一个引用而已,扩展后会直接重写原来的对象。
    </script>
     
    </body>
    </html>
    

    实例二:采用递归方式合并两个对象,并修改第一个对象。

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery.extend demo</title>
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>
     
    <div id="log"></div>
     
    <script>
    var object1 = {
      apple: 0,
      banana: { weight: 52, price: 100 },
      cherry: 97
    };
    var object2 = {
      banana: { price: 200 },
      durian: 100
    };
     
    // 递归将object2合并到object1
    $.extend( true, object1, object2 );//添加true,实行递归拷贝
     
    
    $( "#log" ).append( JSON.stringify( object1 ) );
    //结果:{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}
    //没有重新写banana对象,只是把里面的price属性修改了
    </script>
     
    </body>
    </html>
    

    实例三:合并 defaults 和 options 对象,并且不修改 defaults 对象。这是常用的插件开发模式。

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery.extend demo</title>
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>
     
    <div id="log"></div>
     
    <script>
    var defaults = { validate: false, limit: 5, name: "foo" };
    var options = { validate: true, name: "bar" };
     
    //将defaults和options合并,并且不修改 defaults
    var settings = $.extend( {}, defaults, options );
     
    
    $( "#log" ).append( "<div><b>defaults -- </b>" + JSON.stringify( defaults ) + "</div>" );
    $( "#log" ).append( "<div><b>options -- </b>" + JSON.stringify( options ) + "</div>" );
    $( "#log" ).append( "<div><b>settings -- </b>" + JSON.stringify( settings ) + "</div>" );
    
    //结果:defaults -- {"validate":false,"limit":5,"name":"foo"}
    //结果:options -- {"validate":true,"name":"bar"}
    //结果:settings -- {"validate":true,"limit":5,"name":"bar"}
    
    //解释:通过传递一个空对象作为目标对象,从而可以保留原对象
    </script>
     
    </body>
    </html>
    

    参考:jQuery.extend()

  • 相关阅读:
    hdu1316
    MVC中的ViewData、ViewBag和TempData
    linux下性能监控工具
    【翻译自mos文章】执行utlpwdmg.sql之后报ORA-28003, ORA-20001, ORA-20002, ORA-20003, ORA-20004 错误
    HTTP协议的消息头:Content-Type和Accept的作用 转载https://www.cnblogs.com/lexiaofei/p/7289436.html
    HTTP协议的消息头:Content-Type和Accept的作用
    JWT(JSON Web Token) 多网站的单点登录,放弃session 转载https://www.cnblogs.com/lexiaofei/p/7409846.html
    Http协议中get和post的区别
    常用的HTTP请求头与响应头
    浏览器获取自定义响应头response-headers
  • 原文地址:https://www.cnblogs.com/YeChing/p/6399276.html
Copyright © 2011-2022 走看看