demo7.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
border-collapse:collapse;
width:90%;
}
tr{
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:lightgray;
height:35px;
}
td{
width:25%;
text-align:center;
}
</style>
</head>
<body>
<button onclick = "hide()">隐藏div</button>
<button onclick = "show()">显示div</button>
<br>
<br>
<div id = "d">
这是一个div
</div>
<br>
<div id = "d1" style = "background-color:pink">Hello Html DOM</div>
<button onclick = "change()">改变div的背景色</button>
<br>
<br>
<table id = "t">
<tr>
<td>id</td>
<td>姓名</td>
<td>年龄</td>
<td>身高</td>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>22</td>
<td>177</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>33</td>
<td>188</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>24</td>
<td>166</td>
</tr>
<tr>
<td>4</td>
<td>赵柳</td>
<td>14</td>
<td>145</td>
</tr>
</table>
<br>
<br>
<div>
<input type = "text" onfocus = "a()" onblur = "b()" id = "input1" placeholder = "输入框1">
<br>
<br>
<input type = "text" id = "input2" placeholder = "输入框2">
<br>
<br>
</div>
<div id = "message"></div>
<br>
<br>
<input type = "button" onmousedown = "down()" onmouseup = "up()" value = "用于演示按下和弹起">
<br>
<br>
<input type = "button" onmousemove = "move()" value = "用于演示鼠标经过">
<br>
<br>
<input type = "button" onmouseover = "over()" value = "用于演示鼠标经过">
<br>
<br>
<input type = "button" onmouseout = "out()" value = "用于演示鼠标退出">
<br>
<br>
<div id = "message1"></div>
</body>
<!--样式-->
<script>
function hide() {
var d = document.getElementById("d");
d.style.display = "none";
}
function show(){
var d = document.getElementById("d");
d.style.display = "block";
}
</script>
<script>
// 通过给元素的style.backgroundColor 赋值，修改样式
// style.backgroundColor 这里的backgroundColor和css中的背景色background-color 是有所不同的
// 换句话说，通过DOM的style去修改样式，需要重新记忆另一套样式名称，这是很累赘的事情。
// 最好能够通过CSS的属性名，直接就进行修改了。比如通过这样的方式：
// d1.css("background-color","green");
// 这样就仅仅需要使用CSS原本的属性名即可了。
// Javascript并不提供这样的解决方案，但是到了JQuery就提供了这样的解决方案
function change(){
var d1 = document.getElementById("d1");
d1.style.backgroundColor = "green";
}
</script>
<script>
//使用JavaScript来实现表格斑马线
var trs = document.getElementsByTagName("tr");
for(i = 0;i < trs.length;i++){
if(1 == i % 2)
trs[i].style.backgroundColor = "#f8f8f8";
}
</script>
<!--DOM的事件-->
<script>
//焦点事件
// 当组件获取焦点的时候，会触发onfocus事件
// 当组件失去焦点的时候，会触发onblur事件
function a(){
document.getElementById("message").innerHTML = "输入框1获取了焦点";
}
function b(){
document.getElementById("message").innerHTML = "输入框1失去了焦点";
}
</script>
<script>
//鼠标事件
// 鼠标事件，由鼠标按下，鼠标弹起，鼠标经过，鼠标进入，鼠标退出几个事件组成
// 当在组件上鼠标按下的时候，会触发onmousedown事件
// 当在组件上鼠标弹起的时候，会触发onmouseup事件
// 当在组件上鼠标经过的时候，会触发onmousemove事件
// 当在组件上鼠标进入的时候，会触发onmouseover事件
// 当在组件上鼠标退出的时候，会触发onmouseout事件
// 当鼠标进入一个组件的时候，onmousemove和onmouseover都会被触发，
// 区别在于无论鼠标在组件上如何移动，onmouseover只会触发一次，onmousemove每次移动都会触发
var number = 0;
function down(){
document.getElementById("message1").innerHTML = "按下了鼠标";
}
function up(){
document.getElementById("message1").innerHTML = "弹起了鼠标";
}
function move(){
document.getElementById("message1").innerHTML = "鼠标经过次数：" + (++number);
}
function over(){
document.getElementById("message1").innerHTML = "鼠标进入次数：" + (++number);
}
function out(){
document.getElementById("message1").innerHTML = "鼠标退出";
number = 0;
}
</script>
</html>