[toc]
# 每日英語
1. `declare` 聲明
1. `active` 活動的
# 關于游戲的一些小 bug(兩次 `alert` 和一次 `alert`, 如果換成 `onmousemove`...)
# 聊聊 `onmouseover`,`onmouseout`,`onmouseoenter`,`onmouseleave`
> 事件冒泡: 子元素的行為, 會觸發父元素的行為
> `onmouseover` 鼠標移入(會事件冒泡)
> `onmouseout` 鼠標移出(會事件冒泡)
> `onmouseenter` 鼠標移入
> `onmouseleave` 鼠標移出
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#div1 {
width: 300px;
height: 300px;
background: #ccc;
}
#div2 {
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div id="div1"><div id="div2"></div></div>
</body>
<script>
window.onload = function() {
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
oDiv1.onmouseenter = function() {
alert("enter!!!");
};
oDiv1.onmouseleave = function() {
alert("leave!!!");
};
// oDiv1.onmouseover = function() {
// alert("over!!!");
// };
// oDiv1.onmouseout = function() {
// alert("out!!!");
// };
oDiv2.onmouseenter = function() {
alert("enter!!!");
};
oDiv2.onmouseleave = function() {
alert("leave!!!");
};
// oDiv2.onmouseover = function() {
// alert("over!!!");
// };
// oDiv2.onmouseout = function() {
// alert("out!!!");
// };
};
</script>
</html>
```
# style 和 className
> 樣式可以寫在行間, 也可以通過 class 或者 id 來添加
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.box1 {
width: 200px;
height: 200px;
background: yellow;
}
.box2 {
width: 200px;
height: 200px;
background: green;
}
</style>
</head>
<body>
<div class="box2"></div>
</body>
</html>
```
> 使用 style 加的樣式, 都是行間樣式
> 通過 style 取的樣式, 也都是行間樣式
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#div1 {
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" value="變紅" onclick="toRed()" />
<div id="div1"></div>
</body>
<script>
function toRed() {
var oDiv = document.getElementById("div1");
oDiv.style.background = "red";
}
</script>
</html>
```
寫在行間, 可以取出來, 寫在 style 標簽中, 無法取出
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#div1 {
width: 200px;
height: 200px;
border: 1px solid black;
/* background: red */
}
</style>
</head>
<body>
<input type="button" value="變紅" onclick="toRed()" />
<div id="div1" style="background: red"></div>
</body>
<script>
function toRed() {
var oDiv = document.getElementById("div1");
alert(oDiv.style.background);
}
</script>
</html>
```
# style 操作行間樣式, 帶來的隱患
## 樣式的優先級
`*`<`tag`<`class`<`id`<`interline`
> 通過添加 class 來加樣式
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#div1 {
width: 200px;
height: 200px;
border: 1px solid black;
}
.box {
background: red;
}
</style>
</head>
<body>
<input type="button" value="變紅" onclick="toRed()" />
<div id="div1"></div>
</body>
<script>
function toRed() {
var oDiv = document.getElementById("div1");
oDiv.className = "box";
}
</script>
</html>
```
> 兩個按鈕, 既通過 class 來添加樣式, 又添加行間樣式
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#div1 {
width: 200px;
height: 200px;
border: 1px solid black;
}
.box {
background: red;
}
</style>
</head>
<body>
<input type="button" value="變紅" onclick="toRed()" />
<input type="button" value="變綠" onclick="toGreen()" />
<div id="div1"></div>
</body>
<script>
function toRed() {
var oDiv = document.getElementById("div1");
oDiv.className = "box";
}
function toGreen() {
var oDiv = document.getElementById("div1");
oDiv.style.background = "green";
}
</script>
</html>
```
> _如果已經有了 style 樣式, 則通過添加 class 來修改樣式的話, 結果無效_
> _要么都操作 style, 要么都操作 class, 保持優先級一致_
# 提取行間事件
## 什么是行間事件?
> 把事件寫在行間, 就叫行間事件
## 行間事件的缺陷
> 代碼寫死了, 每個 checkbox 都需要加 onclick 嗎?
> 多人協作時, 會被豬隊友刪掉
## 如何通過 js 動態的添加事件
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<input type="button" value="click me" onclick="alert('hello world')" />
</body>
</html>
```
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<input type="button" value="click me" id="btn1" />
</body>
<script>
var oDiv = document.getElementById("btn1");
function hello() {
alert("hello world!");
}
oDiv.onclick = hello;
</script>
</html>
```
匿名函數
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<input type="button" value="click me" id="btn1" />
</body>
<script>
var oDiv = document.getElementById("btn1");
oDiv.onclick = function() {
alert("hello world!!!!");
};
</script>
</html>
```
# 再談 js 代碼的位置問題
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script>
var oDiv = document.getElementById("btn1");
oDiv.onclick = function() {
alert("hello world");
};
</script>
</head>
<body>
<input type="button" value="click me" id="btn1" />
</body>
</html>
```
## 解決方案(window.onload)
> 當頁面加載完成時發生/執行
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script>
window.onload = function() {
var oDiv = document.getElementById("btn1");
oDiv.onclick = function() {
alert("hello world");
};
};
</script>
</head>
<body>
<input type="button" value="click me" id="btn1" />
</body>
</html>
```
# 行為,樣式,結構 三者分離
1. 別加行間樣式
1. 別加行間 js 事件
# 批量修改元素的屬性
獲取一組元素
`getElementsByTagName`
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid black;
float: left;
margin: 10px;
}
</style>
<script>
window.onload = function() {
var aDiv = document.getElementsByTagName("div");
// alert(aDiv.length);
// aDiv.style.background = "red";
aDiv[0].style.background = "red";
};
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
```
循環數組
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid black;
float: left;
margin: 10px;
}
</style>
<script>
window.onload = function() {
var aDiv = document.getElementsByTagName("div");
for (var index = 0; index < aDiv.length; index++) {
var element = aDiv[index];
element.style.background = "red";
}
};
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
```
# 全選選中所有復選框
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script>
window.onload = function() {
var oBtn = document.getElementById("btn1");
var oDiv = document.getElementById("div1");
var aCh = oDiv.getElementsByTagName("input");
oBtn.onclick = function() {
for (var index = 0; index < aCh.length; index++) {
var element = aCh[index];
element.checked = true;
}
};
};
</script>
</head>
<body>
<input type="button" id="btn1" value="全選" />
<br />
<div id="div1">
<input type="checkbox" />
<br />
<input type="checkbox" />
<br />
<input type="checkbox" />
<br />
<input type="checkbox" />
<br />
<input type="checkbox" />
<br />
<input type="checkbox" />
<br />
<input type="checkbox" />
<br />
<input type="checkbox" />
<br />
<input type="checkbox" />
<br />
<input type="checkbox" />
<br />
<input type="checkbox" />
<br />
<input type="checkbox" />
<br />
<input type="checkbox" />
<br />
<input type="checkbox" />
<br />
<input type="checkbox" />
<br />
<input type="checkbox" />
<br />
<input type="checkbox" />
<br />
<input type="checkbox" />
<br />
<input type="checkbox" />
</div>
</body>
</html>
```
# 添加, 不選, 反選
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script>
window.onload = function() {
var oBtn1 = document.getElementById("btn1");
var oBtn2 = document.getElementById("btn2");
var oBtn3 = document.getElementById("btn3");
var oDiv = document.getElementById("div1");
var aCh = oDiv.getElementsByTagName("input");
oBtn1.onclick = function() {
for (var index = 0; index < aCh.length; index++) {
var element = aCh[index];
element.checked = true;
}
};
oBtn2.onclick = function() {
for (var index = 0; index < aCh.length; index++) {
var element = aCh[index];
element.checked = false;
}
};
oBtn3.onclick = function() {
for (var index = 0; index < aCh.length; index++) {
var element = aCh[index];
if (element.checked) {
element.checked = false;
} else {
element.checked = true;
}
}
};
};
</script>
</head>
<body>
<input type="button" id="btn1" value="全選" />
<input type="button" id="btn2" value="不選" />
<input type="button" id="btn3" value="反選" />
<br />
<div id="div1">
<input type="checkbox" />
<br />
<input type="checkbox" />
<br />
<input type="checkbox" />
<br />
<input type="checkbox" />
<br />
<input type="checkbox" />
<br />
<input type="checkbox" />
<br />
<input type="checkbox" />
<br />
<input type="checkbox" />
<br />
<input type="checkbox" />
<br />
<input type="checkbox" />
<br />
<input type="checkbox" />
<br />
<input type="checkbox" />
<br />
<input type="checkbox" />
<br />
<input type="checkbox" />
<br />
<input type="checkbox" />
<br />
<input type="checkbox" />
<br />
<input type="checkbox" />
<br />
<input type="checkbox" />
<br />
<input type="checkbox" />
</div>
</body>
</html>
```
# 再做選項卡
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#div1 .active {
background: yellow;
}
#div1 div {
width: 200px;
height: 200px;
border: 1px solid #999;
background: #ccc;
display: none;
}
</style>
<script>
window.onload = function() {
var oDiv = document.getElementById("div1");
var aBtn = oDiv.getElementsByTagName("input");
var aDiv = oDiv.getElementsByTagName("div");
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].onclick = function() {
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].className = "";
aBtn[i].index = i;
aDiv[i].style.display = "none";
}
this.className = "active";
aDiv[this.index].style.display = "block";
};
}
};
</script>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="出國" />
<input type="button" value="教育" />
<input type="button" value="培訓" />
<input type="button" value="招生" />
<div style="display:block">111</div>
<div>222</div>
<div>333</div>
<div>444</div>
</div>
</body>
</html>
```
- 每日單詞
- JavaScript 入門
- JavaScript 基礎
- JavaScript 基礎回顧
- JavaScript 函數
- 匿名函數,多維數組,數據類型轉換
- JavaScript 類型轉換, 變量作用域
- js 運算符(一)
- js 運算符(二)
- js 流程控制語句
- JavaScript 掃盲日
- JavaScript 牛刀小試(一)
- JavaScript 牛刀小試(二)
- JavaScript 再談函數
- JavaScript-BOM
- JavaScript-定時器(一)
- JavaScript-定時器(二)
- 番外-輪播圖源碼
- JavaScript 輪播圖和 DOM 簡介
- JavaScript-DOM 基礎-NODE 接口-屬性
- JavaScript-DOM 基礎-NODE 接口-方法
- NodeList-接口-HTMLCollection-接口
- Document 節點
- CSS 復習與擴展(一)
- CSS 復習與擴展(二)
- 走進 jQuery 的世界
- 使用 jquery
- 使用 jquery-2
- jquery 中高級
- jquery 備忘清單-1
- jquery 備忘清單-2
- 聊聊 json
- jquery 備忘清單-3