简单的事件和DOM操作

首先，定义五个按钮和一个div，div用来展示对应的效果变化

 　<button id="btn1">变宽</button>

    <button id="btn2">变高</button>

    <button id="btn3">变色</button>

    <button id="btn4">隐藏</button>

    <button id="btn5">重置</button>

    <div id="mydiv"></div>

 

对应的事件代码如下：

<script>

  var btn = document.querySelectorAll("button");

  var mydiv = document.getElementById("#mydiv");

  $(btn[0]).click(function () {

    $("#mydiv").css({ width: "300px" });

  });

  $(btn[1]).click(function () {

    $("#mydiv").css({ height: "300px" });

  });

  $(btn[2]).click(function () {

    $("#mydiv").css({ "background-color": "red" });

  });

  $(btn[3]).click(function () {

    $("#mydiv").hide();

  });

  $(btn[4]).click(function () {

    $("#mydiv").css({width: "200px",

        height: "200px",

        "background-color": "black",

        "margin-left": "43%",

        "margin-top": "10px"});

    $("#mydiv").show();

  });

</script>