[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