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>