简单的事件和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>