jQuery.extend()方法

来源：互联网发布：甬温线动车事故知乎编辑：程序博客网时间：2024/06/12 03:47

定义和用法

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

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

语法

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

指示是否深度合并

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

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

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

实例1

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

<divid="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 =typeofJSON !="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"}

0 0