使用$.extend()扩展Object对象，jQuery基础(五)一Ajax应用与常用插件教程-慕课网

4-9 使用$.extend()扩展Object对象

本节编程练习不计算学习进度，请电脑登录imooc.com操作

使用$.extend()扩展Object对象

除使用$.extend扩展工具函数外，还可以扩展原有的Object对象，在扩展对象时，两个对象将进行合并，当存在相同属性名时，后者将覆盖前者，调用格式为：

$. extend (obj1,obj2,…objN);

参数obj1至objN表示需要合并的各个原有对象。

例如，调用$.extend()函数对两个已有的对象进行合并，并将合并后的新对象元素内容显示在页面中，如下图所示：

在浏览器中显示的效果：

从图中可以看出，当两个对象通过$.extend()函数扩展合并后，返回一个包含两个对象中全部属性元素的新对象，相同名称的“name”属性，前者被后者覆盖。

任务

我来试试，亲自调用$.extend()函数扩展合并两个指定的对象

在下列代码的第23行，调用$.extend()函数合并两个名称分别为objInfo和objMess的对象。

index.html style.css

<!DOCTYPE html>
<html>
    <head>
        <title>使用$.extend()扩展Object对象</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
    </head>
 
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">合并原有对象</span> 
            </div>
            <div class="content">
                <div class="tip"></div>
            </div>
        </div>
 
        <script type="text/javascript">
            $(function () {
                var objInfo = { name: "" };
                var objMess = { name: "白富美,", title: "欢迎与我联系！" };
                var objNewInfo =?;
                var strTmp = "<b>对象 白富美 合并后</b>：<br/><br/>";
                strTmp += objNewInfo.name + objInfo.title;
                //显示在页面中
                $(".tip").show().append(strTmp);
            });
        </script>
    </body>
</html>

#divtest
{
    width: 282px;
}
#divtest .title
{
    padding: 8px;
    background-color: Blue;
    color: #fff;
    height: 23px;
    line-height: 23px;
    font-size: 15px;
    font-weight: bold;
}
#divtest .content
{
    padding: 8px;
    background-color: #fff;
    font-size: 13px;
}
#divtest .content .tip
{
    border: solid 1px #ccc;
    background-color: #eee;
    margin: 10px 0px;
    padding: 8px;
    display: none;
}
.fl
{
    float: left;
}
.fr
{
    float: right;
}