目錄
## 一、javascript初識
### 1、 概念
1. javascript是基於對象和事件驅動的解釋性腳本語言;
2. 特性:
1. 基於對象: 可以運用自己創建的對象
2. 事件驅動: javascript可以直接對用戶或者客戶端的操作進行響應
3. 解釋性: 相對編譯性來說, 瀏覽器可以直接識別和解析代碼
4. 跨平臺性: 只要是瀏覽器就可以運行
3. js組成部分
1. ECMAScript: 用來指定javascript語法標準, 核心
2. DOM: Document Object Model 文檔對象模型
3. BOM: Browser Object Model 瀏覽器對象模型
### 2、 js引入方式
1. 行內引入： 事件驅動, 給元素加上對應的事件, 不常用
```javascript
<div class="box" οnclick="alert(1)">這是一個div</div>
```
2. 內嵌: script雙標籤, script標籤可以放置於任何位置,推薦放於body的結束標籤之前, 工作少用, 學習常用
```javascript
<script>
alert(3);
</script>
```
3. 外鏈: script雙標籤, script標籤可以放置於任何位置, 用src將地址引入進來, 工作常用
```javascript
<script src="test.js"></script>
```
4. 注意事項:
```javascript
// 注意： 1. 從上到下的順序執行, 遇到script標籤會停止執行去運行script標籤中的代碼，script標籤中代碼執行完成後再繼續執行其他代碼
// 2. 外鏈的script標籤中寫其他js代碼，其他js代碼不會執行
<script>
// 阻斷頁面
alert(2);
</script>
<script src="test.js">
// 不會執行
alert(1);
</script>
```
5. 註釋:
1. 單行註釋: ctrl + /
2. 多行註釋: ctrl + shift + / || ctrl + alt + a
### 3、 調試工具
1. alert(要彈出的內容): 警告框，讓用戶看到提示, 阻斷頁面
2. console.log(要輸出的內容): 輸出在控制檯, 右鍵---> 檢查--->console
### 4、獲取元素（id）： document.getElementById('id')
```javascript
// 獲取元素方式: 通過id獲取
// 語法: document.getElementById('id');
// document: 文檔
// get: 得到
// Element: 元素
// ById: 通過id
document.getElementById('box')
```
### 5、 事件三部曲:
元素添加事件三部曲:
1. 得到元素 document.getElementById('box')
2. 添加事件: .事件 = function(){}
3. 具體要做的事情: alert(2);
```javascript
document.getElementById('box').onclick = function(){
alert(2);
}
```
## 二、鼠標事件
1. 單擊事件： onclick
```javascript
document.getElementById('box').onclick = function(){
alert(2);
}
```
2. 雙擊: ondblclick
```javascript
document.getElementById('box').ondblclick = function(){
alert(3);
}
```
3. 鼠標移入: onmouseover/ onmouseenter
```javascript
// onmouseenter: enter中子元素不會觸發父元素身上的事件
// onmouseover: over中子元素會觸發父元素的事件
// document.getElementById('box').onmouseenter = function(){
// console.log(1);
// }
document.getElementById('box').onmouseover = function(){
console.log(2);
}
```
4. 鼠標移出: onmouseout / onmouseleave
5. 鼠標按下: onmousedown
```javascript
document.getElementById('box').onmousedown = function(){
// alert(3);
console.log(1);
}
```
6. 鼠標擡起: onmouseup
```javascript
document.getElementById('box').onmouseup = function(){
// alert(4);
console.log(2);
}
```
7. 鼠標移動：onmousemove
```javascript
document.getElementById('box').onmousemove = function(){
console.log(5);
}
```
8. 鼠標右鍵菜單: oncontextmenu
```javascript
document.getElementById('box').oncontextmenu = function(){
console.log(6);
}
```
## 三、變量
> 用來存儲數據的容器
### 1、 聲明
- 先聲明後賦值
- 單個聲明: var 變量名; 變量名 = 值;
- 多個聲明: var 變量名1, 變量名2, ... , 變量名n; 變量名1 = 值; 變量名2 = 變量名3 = 值2;
- 聲明的同時並賦值
- 單個聲明: var 變量名 = 值;
- 多個聲明: var 變1 = 值1, 變2 = 值2, ..., 變n = 值n;
```javascript
var val;
val = 10;
console.log(val);
var val1, val2, val3;
val1 = 20;
val2 = val3 = 30;
console.log(val1, val2, val3);
var newNum = 30;
console.log(newNum);
var newNum1 = 20, newNum2 = 30;
console.log(newNum1, newNum2);
```
### 2、 變量的命名規範:
- 遵循駝峯命名法, 見名知意; userLoginName, userPassword
- 變量由字母、數字、_、$組成, 數字不能開頭
- 不能使用關鍵字和保留字
- 不能重複, 後面的會覆蓋前面的
### 3、 window.onload = function(){}
> 作用： 等待窗口(頁面及資源)加載完成後在執行其中的代碼
```javascript
window.onload = function () {
console.log(1);
var oDiv = document.getElementById('box');
console.log(oDiv);
oDiv.onclick = function () {
alert(2);
}
oDiv.onmousedown = function () {
console.log(7);
}
}
```
## 四、js操作元素內容
### 1、獲取
* 標籤.innerText: 獲取得到純文本內容, 不識別標籤
* 標籤.innerHTML: 獲取得到文本內容及標籤(帶標籤的文本內容)
```javascript
var box = document.getElementById('box');
var box1 = document.getElementById('box1');
console.log(box, box1);
console.log(box.innerText);
console.log(box1.innerHTML);
```
### 2、設置
* 標籤.innerText = 值; 設置時，會覆蓋標籤中原有的內容, 不識別標籤
* 標籤.innerHTML = 值; 設置時, 會覆蓋標籤中原有的內容, 可以識別標籤
```javascript
box.innerText = '這是新更改的內容9';
box.innerText = '<i>這是第二次更新的內容8<i>';
box1.innerHTML = '這是新更改的內容7';
box1.innerHTML = '<strong>這是新更改的內容6</strong>';
```
3. innerText與innerHTML的區別: innerText不識別標籤, innerHTML可以識別標籤
```javascript
案例：簡易聊天框
<div>
<ul id="oul">
<li>這是第一句話</li>
<li>這是第二句話</li>
<li>這是第的句話</li>
</ul>
</div>
<button id="btn">添加內容</button>
<script>
// 點擊添加內容，往ul中添加li
// 1. 獲取元素
var btn = document.getElementById('btn');
var oul = document.getElementById('oul');
// 2. 添加事件
btn.onclick = function(){
// 3. 做具體的事情
// 得到原有的ul中的內容
var text = oul.innerHTML;
console.log(text + '<li>這是新內容</li>');
oul.innerHTML = text + '<li>這是新內容</li>';
}
</script>
```
## 五、操作表單
### 1、獲取
> 標籤.value
* 注意： option中如果設置了value 得到的就是value， 建議使用value獲取textarea的值
```javascript
var userName = document.getElementById('userName');
var userPassword = document.getElementById('userPassword');
console.log(userName.value);
console.log(userPassword.value);
var ck = document.getElementById('ck');
var ck1 = document.getElementById('ck1');
console.log(ck.value, ck.checked);
console.log(ck1.value, ck1.checked);
var man = document.getElementById('man');
var woman = document.getElementById('woman');
console.log(man.value, woman.value);
var cs = document.getElementById('cs');
// 下拉列表中,沒有添加value時, 默認用option中的內容作爲value值
// 有value時, 返回被選中的option的value值
console.log(cs.value);
var txt = document.getElementById('txt');
console.log(txt.value); // textarea 中內容可以拿到, 建議用
console.log(txt.innerText); // 空
console.log(txt.innerHTML); // 可以拿到
```
### 2、設置
>標籤.value = 值;
```javascript
// ----------設置--------
userName.value = '前端迷';
userPassword.value = '666666';
txt.value = '這是新的設置內容';
city.value = '重慶'; //匹配不到
city.value = 'cq'; //所設置的內容要與value值完全一致否則爲空
city.value = 'cq'; //重設默認選中項
```
```javascript
簡易聊天框
<div id="box">
<ul id="oul">
<li>我們已經成爲好友,快開始聊天吧</li>
</ul>
</div>
<input type="text" id="inp"><button id="send">發送</button>
<script>
// 輸入內容，點擊發送，到對話框中
// 1. 獲取元素
var inp = document.getElementById('inp');
var send = document.getElementById('send');
var oul = document.getElementById('oul');
// 2. 添加事件
send.onclick = function(){
// 3. 做具體的事情
// 3-1: 獲取輸入的內容
var txt = inp.value;
console.log(txt);
var ulHTML = oul.innerHTML;
// 拼接: 1. 刪 2. 加： 加兩個引號兩個加號 3. 拼
oul.innerHTML = ulHTML + '<li>' + txt + '</li>';
// 3-2: 清空輸入框
inp.value = '';
}
</script>
```
## 六、操作元素屬性
### 1、獲取
* 元素.屬性名
* 元素["屬性名"] 元素[變量];
### 2、設置
* 元素.屬性名 = "屬性值";
* 元素["屬性名"] = "屬性值";
元素[變量] = "屬性值";
* 注意: class作爲保留字, 不能直接使用, className
* 區別: 所有點的方式都可以換成中括號, 中括號中屬性名要加引號, 中括號中可以用變量, 點的方式不能用變量
```javascript
var box = document.getElementById('box');
var btn = document.getElementById('btn');
btn.onclick = function(){
console.log(box.className);
box.id = 'a';
// class作爲保留字, 不能直接使用, className
var y = box.className; // box
box.className = y + ' b';//注意要有空格拼接
var cn = 'id';//將id設爲cn變量
console.log(box.id);
console.log(box["id"]);
console.log(box[cn]);
// box['id'] = 'c';
box[cn] = 'c';
}
```
## 七、操作img的src
### 1、獲取
- 標籤.src 注意： 獲取到絕對地址, 沒有實際作用
### 2、設置:
- 標籤.src = '值'; 相對地址
```javascript
var img = document.getElementById('img');
console.log(img.src); // file:///E:/%E4%B8%AD%E5%85%AC%E6%95%99%E8%82%B2/20200316/day02/img/dark.jpg
// 點擊開燈按鈕，讓圖片亮起來(換img的src)
// 1. 獲取元素
var btn = document.getElementById('btn');
// 2. 添加事件
btn.onclick = function(){
// 3. 具體的事情
img.src = './img/bright.jpg';
//img.src = "../images/" + userInput + ".jpg";相對地址
}
```
## 八、操作元素樣式
### 1、獲取
- 標籤.style.屬性名
### 2、設置
- 標籤.style.屬性名 = '屬性值';
* 注意:
* 只能操作行內樣式
* js中沒有連字符'-', 遇到有連字符, 去掉連字符,將連字符緊跟的第一個字母變成大寫, 遵循駝峯命名法
```javascript
var box = document.getElementById('box');
console.log(box.style); // 不會直接用
console.log(box.style.width); // 200px
console.log(box.style.height);
console.log(box.style.background);
console.log(box.style.color); // 空
box.style.width = '500px';
box.style.border = '10px solid #0f0';
// 點擊放大按鈕, 將字體放大
var btn = document.getElementById('btn');
btn.onclick = function(){
box.style.fontSize = '100px';// 無連字符，遵循駝峯命名法
}
```
## 九、批量樣式設置: cssText
### 1、獲取
- 標籤.style.cssText 只能獲取到行內所設置的樣式
### 2、設置
- 標籤.style.cssText = '值'; 設置標籤上的style屬性
* 設置時, cssText會覆蓋原有的所有行內樣式
```javascript
console.log(box.style.cssText);
box.style.cssText = 'width: 100px; height: 200px; font-size: 10px;';
```
```javascript
操作元素案例：輸入序號-顯示對應圖片
<input type="text" id="inp"> <button id="btn">切換</button>
<br>
<img src="./img/1.jpg" alt="" id="myImg">
<div id="cont">當前顯示的是: img/1.jpg</div>
<script>
// 輸入圖片地址, 切換到對應的圖片
// 用戶輸入圖片名稱, 點擊切換按鈕, 圖片顯示爲用戶所輸入的名字的圖片, 展示的文字對應更改成用戶輸入的名字
// 1. 獲取元素
var inp = document.getElementById('inp');
var btn = document.getElementById('btn');
var myImg = document.getElementById('myImg');
var cont = document.getElementById('cont');
// console.log(inp, btn, myImg, cont);
// 2. 添加事件
btn.onclick = function(){
// 3. 具體要做的事情
// 3-1: 得到用戶所輸入的內容
var txt = inp.value; // 1 2 3 4
// 3-2: 切換圖片
myImg.src = "./img/" + txt + ".jpg";
// 3-3:文字顯示
cont.innerHTML = '當前顯示的是: img/' + txt + '.jpg';
// 3-4: 清除輸入框
inp.value = '';
}
</script>
```
## 十、數據類型
### 1. 檢驗數據類型
- typeof 要檢驗的數據
- typeof(要檢驗的數據)
- typeof 檢驗結果:
- 返回自身類型: number\string\boolean\undefined\function
- 返回object: null\object\array
- 存儲的數據類型和存儲位置
- 基礎: 存儲數據類型比較單一, 存儲於棧中
- 複雜: 存儲數據類型比較多樣化, 存儲於堆中
- 複雜數據類型用=賦值，改變的是地址指針
### 2、分類
- 基礎數據類型: number\string\boolean\null\undefined
- 複雜數據類型: (引用、複合)object\array\function
#### number
- 整型: 0 1 2 3 整數
- 浮點型: 小數, 必須包含一個小數點並且小數點後之少一位不爲0的數字 1.2 2.01
- 特殊值:
- 如果數字以0開頭，並且後面的數字都不超過8，就表示八進制數
- 如果數字以0x開頭，表示十六進制數 0-9ab-f
- 正無窮大：Infinity/-Infinity(100/0,除數爲0)
- NaN: 特殊值, Not a Number, 不是一個數字, 任何與數值操作錯誤的時候都會返回NaN
- 檢驗: 使用typeof之後，返回結果是number
- NaN與所有數值進行計算，返回結果都是NaN
- NaN與任何數值都不相等，包括自身
```
注意: 由於計算機存儲不精的問題，導致計算結果有偏差, 在使用的過程中要避免使用小數去做判斷
console.log(0.1 + 0.2); // 0.30000000000000004
```
#### string
1. 概念: 字符串, 被成對的單雙引號包裹起來的字符都是字符串
```javascript
var str = 'abc';
console.log(typeof str); // string
var str1 = '123';
console.log(typeof str1); // string
```
2. 字符串的長度: 字符串.length
3. 獲取到指定下標的字符:
* 字符串.charAt(下標);
* 字符串[下標]: ie8以上可以使用
* 下標: 從左往右、從0開始的數字
#### boolean
1. boolean: 布爾值, true(真) false(假)
2. 一般用來做判斷條件或者是判斷條件的結果
```javascript
var b = true;
console.log(b);
console.log(typeof b); // boolean
console.log(1 == 1); // true
if(true){//如果爲真就執行
console.log(1);//1
}
```
#### null與undefined
1. undefined: 聲明瞭變量未賦值時(未初始化)
2. null: 空, 空對象, 現在沒有值，但是將來可能會給他一個值
3. js中規定: null和undefined相等
4. null和undefined的區別: undefined是聲明瞭未賦值, null本身就是空
```javascript
var a;
console.log(a);
var b = undefined;
console.log(typeof b); // undefined
var nu = null;
console.log(nu);
console.log(typeof nu); // object
console.log(1 == undefined); // false
console.log(undefined == undefined); // true
console.log(null == null);//true
// js中規定: null和undefined相等
console.log(null == undefined); // true
```
### 複雜數據類型
#### object
1. 概念: 對象, 對象是由方法和屬性組成的, 一切皆對象, 所有的一切都是對象
2. 例子: window\document\元素 {}
```javascript
console.log(typeof window); // object
console.log(document);
console.log(typeof document); // object
var box = document.getElementById('box');
console.log(typeof box); // object
var obj = {};
console.log(obj); // 空對象
```
3. 創建： var 變量名 = {
'key': 'value',
'key1': 'value1'
}
```javascript
var myObj = {
'name': '彭于晏',
'height': '183cm'
}
console.log(myObj);
```
4. 取值： 對象變量名.key 對象變量名['key'] 對象變量名[變量]
```javascript
console.log(myObj.name);//彭于晏
console.log(myObj['name']);
var h = 'height';
console.log(myObj[h]);//183cm
```
#### array
1. array: 數組, 存放數據的容器, 用來存放不定數量、不定類型的數據
值得有序集合;
索引: 每一個值的下標
元素: 數組中的每一項
2. 創建: var 變量名 = [元素1, 元素2, ...., 元素n];
3. 數組的長度: 數組.length
4. 得到指定下標的元素: 數組[下標]
```javascript
var arr = [];
console.log(arr);//Array(0)[]
var arr1 = [1, 2, 3];
console.log(arr1);
var arr2 = [1, true, null, 0xa7, 060, 'abc', 1.2, undefined, NaN, {}, 1/0, box, [1,2,3]];
console.log(arr2);
console.log(arr2.length);
console.log(arr2[3]); // 167 0xa7
console.log(typeof arr2); // object
```
#### function
1. function: 函數, 存放一段代碼, 在有需要的時候調用
2. 函數使用:
* 聲明函數: function 函數名(){ // 要執行的代碼塊 }
* 調用: 函數名();
* 注意: 只聲明不調用函數不起作用
* 函數名的命名規則遵循變量的命名規則
```javascript
function today(){
console.log('啊，要上課');
}
today();
today();
today();
today();
today();
today();
today();
```
### 3、強制轉換
#### Number
* Number(要轉換的數據): 將數據強制轉換成number類型
* 可以轉換：
* 純數字字符串\空和空格\Boolean\null
* array: 空數組、只有一項且爲數字、數字字符串、空字符串、boolean、null可以轉換
```javascript
// string: 純數字字符串\空和空格
console.log(Number('')); // 0
console.log(Number(' ')); // 0
console.log(Number('a')); // NaN
console.log(Number('123a')); // NaN
console.log(Number('123')); // 123
console.log(Number('12.5')); // 12.5
// boolean: true(1) false(0)
console.log(Number(true)); // 1
console.log(Number(false)); // 0
// null(0) undefined
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN
var obj = {};
console.log(Number(obj)); // NaN
// array: 空數組、只有一項且爲數字、數字字符串、空字符串、boolean、null可以轉換
var arr = [];
console.log(Number(arr)); // 0
console.log(Number(['123'])); // 123
console.log(Number([null])); // 0
console.log(Number(['123', '456'])); // NaN
```
#### parseInt
1. parseInt(要轉換的數據, 進制)
2. 從左往右依次轉換, 遇到不能轉換的就停止, 返回整型(整數); 如果第一個字符就不能轉換, 返回NaN
3. 進制: 2-36進制, 得到對應進制字符串
注意: 進制不是必須寫,但是建議寫
```javascript
console.log(parseInt('300px')); // 300
console.log(parseInt('12.5px')); // 12
console.log(parseInt('070')); // 在ie8及以下，以0爲開頭的會轉換成8進制數
console.log(parseInt('070', 10));
console.log(parseInt('110', 8));
console.log(parseInt('a123')); // NaN
```
#### parseFloat
1. parseFloat(要轉換的數據): 轉換規則與parseInt一致, 返回可以是浮點數
```javascript
console.log(parseFloat('300px')); // 300
console.log(parseFloat('12.5px')); // 12.5
console.log(parseFloat('12.0px')); // 12
```
#### isNaN
1. isNaN(要判斷的數據): 判斷數據 是不是 不是一個數字
2. 不是一個數字: true 是一個數字: false
```javascript
console.log(isNaN(123)); // false
console.log(isNaN('123')); // false
console.log(isNaN('a123')); // true
console.log(isNaN('123a')); // true
// Number('123a')---> NaN--true 數字---false
console.log(isNaN('12.5')); // false
console.log(isNaN('12.5px')); // true
// Number(true); 1
console.log(isNaN(true)); // false
console.log(isNaN(null)); // false
console.log(isNaN(undefined)); // true
console.log(isNaN({})); // true
console.log(isNaN([])); // false
console.log(isNaN([null])); // false
```
### 強制轉換
##### string
1. 數據對象.toString(進制)：
* toString方法是屬於要轉換的對象的自帶方法, 可以被改變
* null與undefined不支持
* 進制, 轉換後得到轉換的數據對應的進制字符串, 2-36進制
```javascript
// number
var num = 30;
console.log(num.toString());
console.log(typeof num.toString()); // string
// boolean
var t = true;
console.log(t.toString());
console.log(typeof t.toString()); // string
// null 與 undefined: null 是空對象，本身就是空 undefined是聲明未賦值
var n = null;
// console.log(n.toString());
// console.log(undefined.toString());
var obj = {};
console.log(obj.toString()); // [object Object]
var arr = [];
console.log(arr.toString()); // 空字符
var arr1 = [1,2,3];
console.log(arr1.toString()); // 1,2,3
// 進制, 轉換後得到轉換的數據對應的進制字符串, 2-36進制
var num = 10;
console.log(num.toString(2));
console.log(typeof num.toString(2)); // string
```
2. String(要轉換的數據): 強制轉換
```javascript
console.log(String(null));
console.log(typeof String(null)); // string
console.log(String(undefined)); // undefined
console.log(String(arr1)); // 1,2,3
```
#### Boolean
1. Boolean(要轉換的數據): 強制轉換
2. js中的真真假假:
假: 空字符 0 NaN null undefined false
真: 除了以上6個，剩下都是真的
3. ```javascript
// string
console.log(Boolean('')); // false
console.log(Boolean(' ')); // true
console.log(Boolean('a')); // true
console.log(Boolean('0')); // true
// number
console.log(Boolean(0)); // false
console.log(Boolean(10)); // true
console.log(Boolean(-1)); // true
console.log(Boolean(0.25)); // true
console.log(Boolean(NaN)); // false
// null與undefined
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
// 複雜
var obj = {};
console.log(obj);
console.log(Boolean(obj)); // true
var arr = [];
console.log(arr);
console.log(Boolean(arr)); // true
function a(){
console.log(1);
}
console.log(Boolean(a));
```
4. ```javascript
// string
console.log(Boolean('')); // false
console.log(Boolean(' ')); // true
console.log(Boolean('a')); // true
console.log(Boolean('0')); // true
// number
console.log(Boolean(0)); // false
console.log(Boolean(10)); // true
console.log(Boolean(-1)); // true
console.log(Boolean(0.25)); // true
console.log(Boolean(NaN)); // false
// null與undefined
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
// 複雜
var obj = {};
console.log(obj);
console.log(Boolean(obj)); // true
var arr = [];
console.log(arr);
console.log(Boolean(arr)); // true
function a(){
console.log(1);
}
console.log(Boolean(a));// true
```
## 十一、運算符
### 1、分類
1. 算術運算符: + - * / %(取餘) ++ --
2. 賦值運算符: = += -= *= /= %=
3. 比較運算符: > >= < <= ==(雙等) ===(恆等\全等) !=(不等) !==(不全等)
4. 邏輯運算符: &&(與) ||(或) !(非,取反)
5. 三目運算符: 三元, 判斷的條件 ? 條件成立時, 執行的代碼 : 條件不成立時, 執行的代碼
##### 算術運算符
* +: 計算中，如果有一邊爲string, 那麼做拼接; 其他數據類型, 儘可能的用Number轉換後在做計算
* \- * / %: 儘可能的使用Number轉換後在做計算
* 複雜數據類型在做計算的時候, 先使用toString方法轉換成字符串之後在做計算
```javascript
console.log('abc' + '123'); // abc123
console.log('abc' + 123); // abc123
console.log(123 + true); // 123 + 1 124
console.log(123 + null); // 123 + 0 123
console.log(null + undefined); // 0 + NaN NaN
console.log('123' + {}); // 123[object Object]
console.log(123 + [1,2,3]); // 123 + '1,2,3' '1231,2,3'
console.log(123 + []); // 123
// - * / %: 儘可能的使用Number轉換後在做計算
// -:
console.log('abc' - '123'); // NaN - 123 NaN
console.log(123 - true); // 122
console.log(null - undefined); // NaN
console.log({} - false); // NaN
console.log([] - null); // 0
console.log(true - []); // 1
// *:
console.log('abc' * null); // NaN
console.log(123 * undefined); // NaN
console.log(true * false); // 0
console.log({} * '123'); // NaN * 123 NaN
console.log(['2'] * true); // 2
console.log(['2', '3'] * false); // NaN
// /:
console.log('123' / false); // 123 / 0 Infinity
console.log('-123' / null); // -Infinity
console.log(null / undefined); // NaN
console.log(true / [1]); // 1
// %: 取餘: 餘數(除不盡剩下的那個數)
console.log(10 % 3); // 1
console.log(10 % 2); // 0
console.log(true % false); // 1 % 0 NaN
console.log(null % true); // 0 % 1 0
console.log([5] % '2') // 5 % 2 1
```
#### ++與--
* ++(在自身基礎上+1) --(在自身基礎上-1)
* ++/--在前: 先自加/減再運算(賦值/輸出)
* ++/--在後: 先做運算(賦值或輸出), 在做自加/減
```javascript
var num = 10;
// num++;
// num = num + 1;
// num = num - 1;
// num--;
// ++num;
console.log(num);
// ++/--在前: 先自加/減再運算(賦值/輸出)
// var m = ++num; // ++num --> 11
// console.log(m); // 11
// console.log(num); // 11
// console.log(++num); // 11
// console.log(num); // 11
// ++/--在後: 先做賦值或輸出, 在做自加/減
// var m = num++;
// console.log(m); // m = num; m = 10; num++; num-->11
// console.log(num); // 11
// console.log(num++);// 輸出num-->10 num++; num--->11
// console.log(num); // 11
// console.log(--num); // 9
// console.log(num); // 9
console.log(num--); // 10
console.log(num); // 9
```
#### 賦值運算符: =(賦值) += -= *= /= %=
```javascript
var num = 10;
// +=:
var num1 = 10;
num += 30;
// num = num + 30;
console.log(num);
// -=:
var num2 = 10;
num2 -= 2;
console.log(num2); // 8
// *=:
var num3 = 10;
num3 *= 10;
console.log(num3); // 100
// /=:
var num4 = 20;
num4 /= 2;
console.log(num4); // 10
// %=:
var num5 = 10;
num5 %= 2;
console.log(num5); // 0
var n = 30;
n += 'a';
// n = n + 'a';
console.log(n); // 30a
var m = true;
m /= 1;
console.log(m); // 1
```
#### 比較運算符
* < <= > >= == === != !==
* 返回結果是個布爾值, 比較的判斷成立返回true 不成立返回false
* 字符串比較中, 從左到右依次比較每個字符的ASCII值, 如果有一位已經比較出來大小，那就結束比較
* ==: 雙等: 只比較值
===: 三等\全等\恆等: 不僅比較值，還比較數據類型
* !=: 只比較值
!==: 不僅比較值，還比較數據類型
```javascript
// 返回結果是個布爾值
// 比較的判斷成立返回true 不成立返回false
console.log(1 > 2); // false
console.log(2 < 3); // true
console.log('1' < '2'); // true 49 < 50
console.log('10000' < '2'); // true
// 字符串比較中, 從左到右依次比較每個字符的ASCII值, 如果有一位已經比較出來大小，那就結束比較
// 0 ----> 48
// A ----> 65
// a ----> 97
console.log('a' > 'A'); // 97 > 65 true
console.log('22221' < '2'); // false
console.log(true > false); // 1 > 0
console.log('a' > undefined); // false NaN > NaN
console.log('a' < undefined); // false
console.log('a' < 'undefined'); // true
console.log({} > []); // '[object Object]' > '' true
console.log(1 >= 1); // 1 > 1 或 1 == 1 true
// ==: 雙等: 只比較值
// ===: 三等\全等\恆等: 不僅比較值，還比較數據類型
console.log('1' == 1); // true
console.log('1' === 1); // false
// !=: 只比較值
// !==: 不僅比較值，還比較數據類型
console.log('1' != 1); // false
console.log('1' !== 1); // true
```
#### 邏輯運算符
* &&(與): 左右兩邊各爲一個條件, 如果兩邊均爲true, 返回true, 如果有一邊爲false則返回false
* ||(或): 左右兩邊各爲一個條件,如果有一個條件爲true, 返回true, 如果兩個都是false, 會false
* !(非\取反): 布爾, Boolean, true-->取反---> false
```javascript
console.log(3 > 2 > 1); // false
console.log(3 > 2 && 2 > 1); // true && true true
console.log(3 < 2 && 2 > 1); // false && true false
console.log(3 > 2 || 2 > 1); // true
console.log(3 < 2 || 2 > 1); // false || true true
console.log(3 < 2 || 2 < 1); // false || false false
// js爲假: false '' null undefined 0 NaN
console.log(!''); // true
console.log(!' '); // false
console.log(!0); // true
console.log(!{}); // false
console.log(!!false); // !false ---> true !true --- > false
```
#### 三目運算符
* 條件 ? 條件成立, 執行的代碼 : 條件不成立, 執行的代碼
```javascript
var num = 10;
// num > 10 ? alert(1) : alert(2);
var a;
// num < 30 ? a = 30 : a = 10;
// console.log(a); // 30
a = num < 30 ? 30 : 20;
console.log(a); // 30
```
### 2、隱式轉換規則
* +: 計算中，如果有一邊爲string, 那麼做拼接; 其他數據類型, 儘可能的用Number轉換後在做計算
* \- * / %: 儘可能的使用Number轉換後在做計算
* 複雜數據類型在做計算的時候, 先使用toString方法轉換成字符串之後在做計算
## 十二、條件語句
### 1、流程控制語句分類： 控制代碼的執行順序的語句
* 順序結構: 按照順序執行代碼
* 條件選擇結構(分支): if\ if else\switch
* 循環結構: 將代碼執行特定次數的語句, for\while\do while
* 其他語句: break\continue
### 2、條件選擇結構
if: if(條件) { // 條件爲真(成立)時, 執行的代碼}
if else: if(條件) { // 條件爲真(成立)時, 執行的代碼} else { // 條件爲假(不成立)時, 所執行的代碼 }
if else多層嵌套:
if(條件1){
// 條件1成立的時候，執行的代碼
} else if(條件2){
// 條件2成立的時候, 執行的代碼
} else {
// 以上條件都不成立的時候, 所執行的代碼
}
```javascript
var m = 0;
// 適用於單一代碼代碼
// m > 60 ? alert('合格') : alert('不合格');
if(m > 60){
console.log('你可太優秀了');
alert('合格');
} else{
// 條件不成立
console.log('我們繼續加油');
alert('不合格');
}
// 60及以下: 不合格 61 - 80: 中等 81 - 90: 良好 91 - 100: 優秀
var mark = 73;
if(mark <= 60){
console.log('不合格, 繼續加油');
} else if(mark > 60 && mark <= 80){
console.log('中等, 在拼一下');
} else if(mark > 80 && mark <= 90){
console.log('良好, 在努力一下你就是優秀了');
} else {
console.log('非常優秀, 繼續保持');
}
```
* 注意：if後的{}可以省略的, 如果省略了, 只能控制後面的第一條語句
```javascript
// if後的{}可以省略的, 如果省略了, 只能控制後面的第一條語句
var a = 10;
if(a > 10){
console.log(1);
console.log(2);
}
if(a > 10)
console.log(1);
console.log(2);
```
```javascript
案例：複選框的反選
<input type="checkbox" name="" id="inp" >
<button id="btn">反選</button>
<script>
// 點擊btn, 將input從選中變成不選中, 從不選中變成選中
// 1. 獲取元素
var btn = document.getElementById('btn');
var inp = document.getElementById('inp');
// console.log(inp, btn);
// 2. 添加事件
btn.onclick = function(){
// 3. 具體要做的事情
console.log(inp.checked); // 選中爲true, 不選中爲false
// true ----> false false ---> true
inp.checked = !inp.checked;
// if(inp.checked){
// inp.checked = false;
// } else {
// inp.checked = true;
// }
}
</script>
```
### 3、switch
1. 適用於條件結果比較明確並且單一的時候
2. 語法:
switch(要判斷的數據/ 條件){
case 結果1:
符合結果1時, 所執行的代碼;
break;
case 結果2:
符合結果2時, 所執行的代碼;
break;
.....(可以有很多個結果)
default:
以上結果都不符合的時候, 所執行的代碼;
break;
}
3. 注意事項: break: 是防止穿透; 不加break, case匹配到一個之後, 後面的結果都不會進行匹配, 直接執行;
```javascript
/*
90以上: A 80以上: B 70以上: C 其他: D
*/
var core = 78;
// 找出如何是單一條件
var p = parseInt(core / 10);
switch (p) {
case 10:
console.log('A+');
break;
case 9:
console.log('A');
break;
case 8:
console.log('B');
break;
case 7:
console.log('C');
break;
default:
console.log('D');
break;
}
```
## 十三、獲取元素的方式
### 1、標籤名獲取
1. document.getElementsByTagName('標籤名'); 獲取文檔中的所有的標籤
2. 父元素.getElementsByTagName('標籤名'); 獲取對應的父元素中的標籤
標籤名不區分大小寫
### 2、類名獲取
1. document.getElementsByClassName('類名'); 獲取文檔中的所有此類名的標籤
2. 父元素.getElementsByClassName('類名'); 獲取對應的父元素中的類名標籤
```javascript
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
var uls = document.getElementsByTagName('ul');
console.log(uls[1]);
var lis2 = uls[1].getElementsByTagName('li');
console.log(lis2);
var boxs = document.getElementsByClassName('box');
console.log(boxs);
// 第一個ul中的類名爲box的元素
var box1 = uls[0].getElementsByClassName('box');
console.log(box1);
```
* 注意： 返回一個集合
* 集合: 類數組, 有索引有元素, 但是不能使用數組的方法
* 通過下標獲取到對應的下標的元素
### 3、tagName/className與id獲取的區別:
a. id只能通過document獲取, tagName/className可以是document也可以是父元素;
b. id直接獲取到元素, tagName/className獲取到的是一個集合
c. 操作方式不同, id可以直接操作, tagName/className需要通過下標取出元素後再操作
d. 通過tagName/className獲取的元素具有動態性, 先獲取, 後添加, 元素也可以找得到, id不可以
e. 特殊點: className在ie8以上才支持
```javascript
var box = document.getElementById('box');
var lis = document.getElementsByTagName('li');
console.log(box, lis);
var ul = document.getElementsByTagName('ul')[0];
ul.innerHTML += '<li id="box">12345</li>';
console.log(lis);
console.log(box);
var four = document.getElementsByClassName('four'); // ie8報錯
console.log(four);
```
## 十四、循環
### 1、for
1. 語法：
for(表達語句一; 表達語句二; 表達語句三){
// 每次循環要執行的代碼
}
for(1 初始化循環變量; 2 循環結束的條件; 4 更新循環變量){
// 3 循環體
}
2. 執行順序：
1. 初始化循環變量: var i = 0;
2. 循環判斷: i < 5 ? 是符合條件, 執行第三步: 不符合條件, 終止循環
3. 循環體執行
4. 更新循環變量: i++;
5. 回到第二步
3. 注意: 必須要有一個可以讓循環結束的條件, 否則就會造成死循環
```javascript
for(var i = 0; i < 5; i++){
console.log(i);
}
```
### 2、for 變種
1. 初始化變量: var i = 0;
for(;2.循環結束的條件;){
// 3.循環體
// 4.變量更新
}
注意: 兩個分號不能省略
```javascript
var sum = 0;
var i = 1;
for(; i <= 100;){
sum += i;
i++;
}
console.log(sum);
```