jQuery.extend()方法

最新推荐文章于 2022-12-06 19:58:25 发布

叶落无痕123

最新推荐文章于 2022-12-06 19:58:25 发布

阅读量509

点赞数

本文链接：https://blog.csdn.net/u012767761/article/details/70327730

版权

定义和用法

jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。

注意：1. 如果只为$.extend()指定了一个参数，则意味着参数target被省略。此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。
2. 如果多个对象具有相同的属性，则后者会覆盖前者的属性值。

语法

$.extend( target [, object1 ] [, objectN ] )

指示是否深度合并

$.extend( [deep ], target, object1 [, objectN ] )

警告: 不支持第一个参数传递 false 。

参数	描述
deep	可选。 Boolean类型指示是否深度合并对象，默认为false。如果该值为true，且多个对象的某个同名属性也都是对象，则该"属性对象"的属性也将进行合并。
target	Object类型目标对象，其他对象的成员属性将被附加到该对象上。
object1	可选。 Object类型第一个被合并的对象。
objectN	可选。 Object类型第N个被合并的对象。

实例1

遍历数组元素,并修改第一个对象

< div id = " log " ></ div >
< script >
$ ( function ( ) {
var object1 = {
apple : 0 ,
      banana : { weight : 52 , price : 100 } ,
cherry : 97
   } ;
   var object2 = {
      banana : { price : 200 } , durian : 100 } ; /* object2 合并到 object1 中 */

    $. extend ( object1 , object2 ) ;
   var printObj = typeof JSON != " undefined " ? JSON . stringify : function ( obj ) {
        var arr = [ ] ;
        $. each ( obj , function ( key , val ) {
   var next = key + " : " ;
             next += $. isPlainObject ( val ) ? printObj ( val ) : val ;
             arr . push ( next ) ;
        } ) ;
   return " { " + arr . join ( " , " ) + " } " ; } ;
   $ ( " #log " ) . append ( printObj ( object1 ) ) ;
   } )
</ script >

运行结果：{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}

实例2

递归方式合并两个对象
采用递归方式合并两个对象，并修改第一个对象。
源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 递归方式合并两个对象</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

<div id="log"></div>
<script>
$(function () {
   var object1 = {
       apple: 0,
       banana: { weight: 52, price: 100 },
       cherry: 97
   };
   var object2 = {
       banana: { price: 200 },
       durian: 100
   };
   // 将 object2 递归合并到 object1中
   $.extend( true, object1, object2 );
   // 假设 JSON.stringify - 在 IE版本< 8中无效
   $( "#log" ).append( JSON.stringify( object1 ) );
})
</script>

</body>
</html>

运行结果：{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}

实例3

合并 defaults 和 options 对象
合并 defaults 和 options 对象，并且不修改 defaults 对象。这是常用的插件开发模式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 合并 defaults 和 options 对象</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

<div id="log"></div>
<script>
$(function () {
   var defaults = { validate: false, limit: 5, name: "foo" };
   var options = { validate: true, name: "bar" };
   /*合并默认值和选项，不修改默认对象。*/
   var settings = $.extend({}, defaults, options);
   var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {
       var arr = [];
       $.each(obj, function(key, val) {
           var next = key + ": ";
           next += $.isPlainObject(val) ? printObj(val) : val;
           arr.push( next );
       });
       return "{ " + arr.join(", ") + " }";
   };
   $("#log").append( "<div><b>defaults -- </b>" + printObj(defaults) + "</div>" );
   $("#log").append( "<div><b>options -- </b>" + printObj(options) + "</div>" );
   $("#log").append( "<div><b>settings -- </b>" + printObj(settings) + "</div>" );
})
</script>

</body>
</html>

运行结果：

defaults -- {"validate":false,"limit":5,"name":"foo"}

options -- {"validate":true,"name":"bar"}

settings -- {"validate":true,"limit":5,"name":"bar"}

叶落无痕123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery.extend()方法

定义和用法jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。注意：1. 如果只为$.extend()指定了一个参数，则意味着参数target被省略。此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。2. 如果多个对象具有相同的属性，则后者会覆盖前者的属性值。语法$.extend( tar
复制链接

扫一扫