[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