1.1 控制div属性

中心主题：通过分别点击“变宽”、“变高”、“变色”、“隐藏”、“重置”按钮对div的相关css属性进行操作。

一、HTML结构

<div class="cont-wrap">
    <div> <input type="button" value="变宽" class="changeWidth"/>
        <input type="button" value="变高" class="changeHeight"/>
        <input type="button" value="变色" class="changeColor"/>
        <input type="button" value="隐藏" class="changeNone"/>
        <input type="button" value="重置" class="changeReset"/>
    </div>

    <div class="cont"></div>
</div>

二、CSS样式

   .cont-wrap{
            width:340px;
            margin:0px auto;
        }
        .cont-wrap>div{
            float: left;
        }
        input{
            width:14%;
        }
        input:not(:last-of-type){
            margin-right: 10px;
        }
        .cont,.cont1{
            width:200px;
            height:200px;
            background-color: deeppink;
            margin-left:10%;
            margin-top:10%;
            display:block;
        }

三、jquery代码

 $(document).ready(function (){
        var $cont=$(".cont");
        var $changeWidth=$(".changeWidth");
        var $changeHeight=$(".changeHeight");
        var $changeColor=$(".changeColor");
        var $changeNone=$(".changeNone");
        var $changeReset=$(".changeReset");
        $changeWidth.click(function(){
        $cont.animate({width:"500px"},2500);
     });
        $changeHeight.click(function(){
            $cont.animate({height:"500px"},2500);
        });
        $changeColor.click(function(){
            $cont.css("background-color","pink");
        });
        $changeNone.click(function(){
            $cont.css("display","none");
        });
        $changeReset.click(function(){
            $cont.css({display:"block",width:"200px",height:"200px",backgroundColor:"deeppink"});
        });


    });

四、实际效果

初始状态：

 

变宽：

变高：

隐藏：

重置：