[toc]
# 每日英语
1. `global` 全局
1. `static` 静态
# 第一个 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>
<style>
#div1 {
width: 200px;
height: 100px;
background-color: #ccc;
border: 1px #999 solid;
display: none;
}
</style>
</head>
<body>
<input type="checkbox" />
<div id="div1">为了您的安全....</div>
</body>
</html>
```
## 什么是事件?
> 可以简单的理解成是用户的操作
#### onclick 事件, 鼠标点击事件
> 点击按钮出弹框
```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('good!!!')" />
</body>
</html>
```
## 鼠标移入, 显示 div, 鼠标移出, 隐藏 div
鼠标移入事件: `onmouseover`
鼠标移出事件: `onmouseout`
#### 先试试鼠标移入, 弹框
```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: 100px;
background-color: #ccc;
border: 1px #999 solid;
display: none;
}
</style>
</head>
<body>
<input type="checkbox" onmouseover="alert('good!!!')" />
<div id="div1">为了您的安全....</div>
</body>
</html>
```
## id 的作用
> 给元素起个名字
## 先试试让 div 显示
```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: 100px;
background-color: #ccc;
border: 1px #999 solid;
display: none;
}
</style>
</head>
<body>
<input type="checkbox" onmouseover="div1.style.display='block'" />
<div id="div1">为了您的安全....</div>
</body>
</html>
```
> `.`的意思可以理解成`的`
> `=`的意思可以理解成把`xxx`变成`yyy`
## 再让 div 消失
```html
<input
type="checkbox"
onmouseover="div1.style.display='block'"
onmouseout="div1.style.display='none'"
/>
```
## 有点小问题...
低版本的火狐, 不认`div1`
`div1==> document.getElementById('div1')`
## 分析 `document.getElementById('div1')`
> 通过 id 找元素
> 通过 id 获取元素
## 大致顺序
1. 书写 html 和 css, 保证在各个浏览器都能正常显示, 要有一个稳定的布局
1. 确定要修改哪些属性
1. 确定用到哪些事件
1. 编写 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>
<style>
#div1 {
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
```
```html
<div
id="div1"
onmouseover="document.getElementById('div1').style.width='300px';document.getElementById('div1').style.height='300px';document.getElementById('div1').style.background='green'"
/>
```
```html
<div
id="div1"
onmouseover="document.getElementById('div1').style.width='300px';document.getElementById('div1').style.height='300px';document.getElementById('div1').style.background='green'"
onmouseout="document.getElementById('div1').style.width='200px';document.getElementById('div1').style.height='200px';document.getElementById('div1').style.background='red'"
/>
```
## 使用函数美化代码
```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;
background: red;
}
</style>
<script>
function toGreen() {
document.getElementById("div1").style.width = "300px";
document.getElementById("div1").style.height = "300px";
document.getElementById("div1").style.background = "green";
}
function toRed() {
document.getElementById("div1").style.width = "200px";
document.getElementById("div1").style.height = "200px";
document.getElementById("div1").style.background = "red";
}
</script>
</head>
<body>
<div id="div1" onmouseover="toGreen()" onmouseout="toRed()"></div>
</body>
</html>
```
## 重用
> 相同的代码只写一次(DRY)
> 长得像的代码都可以合并
```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;
background: red;
}
</style>
<script>
function toGreen() {
var oDiv = document.getElementById("div1");
oDiv.style.width = "300px";
oDiv.style.height = "300px";
oDiv.style.background = "green";
}
function toRed() {
var oDiv = document.getElementById("div1");
oDiv.style.width = "200px";
oDiv.style.height = "200px";
oDiv.style.background = "red";
}
</script>
</head>
<body>
<div id="div1" onmouseover="toGreen()" onmouseout="toRed()"></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 {
width: 200px;
height: 200px;
background: red;
}
</style>
<script>
var oDiv = document.getElementById("div1");
function toGreen() {
oDiv.style.width = "300px";
oDiv.style.height = "300px";
oDiv.style.background = "green";
}
function toRed() {
oDiv.style.width = "200px";
oDiv.style.height = "200px";
oDiv.style.background = "red";
}
</script>
</head>
<body>
<div id="div1" onmouseover="toGreen()" onmouseout="toRed()"></div>
</body>
</html>
```
## 网页换肤
```css
body {
background: black;
}
input {
width: 200px;
height: 100px;
background: yellow;
}
```
```css
body {
background: #ccc;
}
input {
width: 100px;
height: 50px;
background: red;
}
```
```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" />
<link rel="stylesheet" href="index.css" />
<title>Document</title>
</head>
<body>
<input type="button" value="皮肤1" />
<input type="button" value="皮肤2" />
</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" />
<link id="ll" rel="stylesheet" href="index1.css" />
<title>Document</title>
</head>
<body>
<input type="button" value="皮肤1" onclick="toSkin1()" />
<input type="button" value="皮肤2" onclick="toSkin2()" />
</body>
<script>
function toSkin1() {
var oLink = document.getElementById("ll");
oLink.href = "index.css";
}
function toSkin2() {
var oLink = document.getElementById("ll");
oLink.href = "index1.css";
}
</script>
</html>
```
1. 可以给任何标签加 id 属性
1. 任何标签的任何属性, 都可以修改
1. 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>
</head>
<body>
<input type="text" value="" id="txt1" />
<input type="button" value="点击改文字" onclick="changeTxt()" />
</body>
<script>
function changeTxt() {
var oTxt = document.getElementById("txt1");
oTxt.value = "文字已经改变了!!!";
}
</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="text" value="" id="txt1" />
<input type="button" value="点击加title" onclick="addTitle()" />
</body>
<script>
function addTitle() {
var oTxt = document.getElementById("txt1");
oTxt.title = "这是input的提示!";
}
</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="text" value="原来的字儿" id="txt1" />
<input type="button" value="点击修改文字" onclick="changeTxt()" />
<input type="button" value="加title" onclick="addTitle()" />
</body>
<script>
function changeTxt() {
var oTxt = document.getElementById("txt1");
oTxt.value = "新的字儿";
}
function addTitle() {
var oTxt = document.getElementById("txt1");
oTxt.title = "this is a title";
}
</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>
<style>
#div1 {
width: 100px;
height: 200px;
background: #ccc;
display: none;
}
</style>
</head>
<body>
<input type="button" value="显示/隐藏" onclick="showHide()" />
<div id="div1"></div>
</body>
<script>
function showHide() {
var oDiv = document.getElementById("div1");
if (oDiv.style.display == "block") {
oDiv.style.display = "none";
} else {
oDiv.style.display = "block";
}
}
</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>
<h1>this is 0 h1</h1>
<h1>this is 1 h1</h1>
<h1>this is 2 h1</h1>
<h1>this is 3 h1</h1>
<h1>this is 4 h1</h1>
<h1>this is 5 h1</h1>
<h1>this is 6 h1</h1>
<h1>this is 7 h1</h1>
<h1>this is 8 h1</h1>
<h1>this is 9 h1</h1>
<h1>this is 10 h1</h1>
<h1>this is 11 h1</h1>
<h1>this is 12 h1</h1>
<h1>this is 13 h1</h1>
<h1>this is 14 h1</h1>
<h1>this is 15 h1</h1>
<h1>this is 16 h1</h1>
<h1>this is 17 h1</h1>
<h1>this is 18 h1</h1>
<h1>this is 19 h1</h1>
<h1>this is 20 h1</h1>
<h1>this is 21 h1</h1>
<h1>this is 22 h1</h1>
<h1>this is 23 h1</h1>
<h1>this is 24 h1</h1>
<h1>this is 25 h1</h1>
<h1>this is 26 h1</h1>
<h1>this is 27 h1</h1>
<h1>this is 28 h1</h1>
<h1>this is 29 h1</h1>
<h1>this is 30 h1</h1>
<h1>this is 31 h1</h1>
<h1>this is 32 h1</h1>
<h1>this is 33 h1</h1>
<h1>this is 34 h1</h1>
<h1>this is 35 h1</h1>
<a href="#">链接</a>
<a href="javascript:;">链接</a>
</body>
</html>
```
# 关于 class 的一个小问题
> 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>
<style>
#div1 {
width: 100px;
height: 100px;
border: 1px black solid;
}
.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.class = "box";
oDiv.className = "box";
}
</script>
</html>
```
# div 变色
```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;
background: red;
}
</style>
</head>
<body>
<input type="button" value="变绿" onclick="toGreen()" />
<input type="button" value="变黄" onclick="toYellow()" />
<input type="button" value="变黑" onclick="toBlack()" />
<div id="div1"></div>
</body>
<script>
function toGreen() {
oDiv = document.getElementById("div1");
oDiv.style.background = "green";
}
function toYellow() {
oDiv = document.getElementById("div1");
oDiv.style.background = "yellow";
}
function toBlack() {
oDiv = document.getElementById("div1");
oDiv.style.background = "black";
}
</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>
<style>
#div1 {
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<input type="button" value="变绿" onclick="setColor('green')" />
<input type="button" value="变黄" onclick="setColor('yellow')" />
<input type="button" value="变黑" onclick="setColor('black')" />
<div id="div1"></div>
</body>
<script>
function setColor(color) {
oDiv = document.getElementById("div1");
oDiv.style.background = color;
}
</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>
<style>
#div1 {
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<input type="button" value="变宽" onclick="addWidth()" />
<input type="button" value="变高" onclick="addHeight()" />
<input type="button" value="变绿" onclick="toGreen()" />
<div id="div1"></div>
</body>
<script>
function addWidth() {
var oDiv = document.getElementById("div1");
oDiv.style.width = "400px";
}
function addHeight() {
var oDiv = document.getElementById("div1");
oDiv.style.height = "400px";
}
function toGreen() {
var oDiv = document.getElementById("div1");
oDiv.style.background = "green";
}
</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>
<style>
#div1 {
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<input type="button" value="变宽" onclick="setStyle('width','400px')" />
<input
type="button"
value="变高"
onclick="setStyle('height','400px')"
/>
<input
type="button"
value="变绿"
onclick="setStyle('background','green')"
/>
<div id="div1"></div>
</body>
<script>
function setStyle(styleName, styleValue) {
var oDiv = document.getElementById("div1");
oDiv.style.styleName = styleValue;
}
</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>
<style>
#div1 {
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<input type="button" value="变宽" onclick="setStyle('width','400px')" />
<input
type="button"
value="变高"
onclick="setStyle('height','400px')"
/>
<input
type="button"
value="变绿"
onclick="setStyle('background','green')"
/>
<div id="div1"></div>
</body>
<script>
function setStyle(styleName, styleValue) {
var oDiv = document.getElementById("div1");
oDiv.style[styleName] = styleValue;
}
</script>
</html>
```
#变量和字符串的区别
> 字符串是变量数据类型的一种
> 变量=字符串(给变量赋值一个字符串)
```javascript
var obj = {
sex: "female",
age: 17
};
var a = "age";
console.log(obj.a);
console.log(obj[a]);
```
# 匈牙利命名法
1. 变量名 = 属性+类型+对象描述
属性:
`g_` 全局变量 global
`c_` 常量 constant
`s_` 静态变量 static
类型:
`a` array
`o` object
`n` number
`f` float
`b` boolean
`fn` function
`s` string
- 每日单词
- 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