2 js基礎
# JS基礎操作
## 一、分支結構
#### 1、if語句
- if 基礎語法
```js
if (條件表達式) {
代碼塊;
}
// 當條件表達式結果為true，會執行代碼塊；反之不執行
// 條件表達式可以為普通表達式
// 0、undefined、null、""、NaN為假，其他均為真
```
- if 復雜語法
```js
// 1.雙分支
if (表達式1) {
代碼塊1;
} else {
代碼塊2;
}
// 2.多分支
if (表達式1) {
} else if (表達式2) {
}
...
else if (表達式2) {
} else {
}
```
- if 嵌套
```js
if (表達式1) {
if (表達式2) {
}...
}...
```
#### 2、switch語句
```js
switch (表達式) {
case 值1: 代碼塊1; break;
case 值2: 代碼塊2; break;
default: 代碼塊3;
}
// 1.表達式可以為 整數表達式 或 字符串表達式
// 2.值可以為 整數 或 字符串
// 3.break可以省略
// 4.default為默認代碼塊，需要出現在所有case最下方，在所有case均未被匹配時執行
```
## 二、循環結構
#### 1、for循環
```js
for (循環變量①; 條件表達式②; 循環變量增量③) {
代碼塊④;
}
// 1.循環變量可以在外、在內聲明
// 2.執行邏輯 ① ②④③ ... ②④③ ②，入口為①，出口為②，②④③個數為[0, n]
```
#### 2、while循環
```js
while (條件表達式) {
代碼塊;
}
```
#### 3、do...while循環
```js
do {
代碼塊;
} while (條件表達式);
```
#### 4、for...in循環
```js
obj = {"name": "zero", "age": 8}
for (k in obj) {
console.log(k, obj[k])
}
// 用於遍歷對象：遍歷的結果為key，通過[]語法訪問對應的value
```
#### 5、for...of循環
```js
iter = [‘a‘, ‘b‘, ‘c‘];
for (i of iter) {
console.log(iter[i])
}
// 1.用於遍歷可叠代對象：遍歷結果為index，通過[]語法訪問對應的value
// 2.ES6新增，可叠代對象有 字符串、數組、Map、Set、Anguments、NodeList等
```
#### 6、break，continue關鍵詞
- break：結束本層循環
- continue：結束本次循環進入下一次循環
## 三、異常處理
```js
try {
易錯代碼塊;
} catch (err) {
異常處理代碼塊;
} finally {
必須邏輯代碼塊;
}
// 1.err為存儲錯誤信息的變量
// 2.finally分支在異常出現與否都會被執行
```
```js
throw "自定義異常"
// 必要的時候拋出自定義異常，要結合對應的try...catch使用
```
## 四、函數初級
#### 1、函數的定義
- ES5
```js
function 函數名 (參數列表) {
函數體;
}
var 函數名 = function (參數列表) {
函數體;
}
```
- ES6
```js
let 函數名 = (參數列表) => {
函數體;
}
```
- 匿名函數
```js
(function (參數列表) {
函數體;
})
// 匿名函數需要自調用
(function (參數列表) {
函數體;
})(參數列表);
```
#### 2、函數的調用
- 函數名(參數列表)
#### 3、函數的參數
- 個數不需要統一
```js
function fn (a, b, c) {
console.log(a, b, c); // 100 undefined undefined
}
fn(100);
function fn (a) {
console.log(a) // 100
}
fn(100, 200, 300) // 200,300被丟棄
```
- 可以任意位置具有默認值
```js
function fn (a, b=20, c, d=40) {
console.log(a, b, c, d); // 100 200 300 40
}
fn(100, 200, 300);
```
- 通過...語法接收多個值
```js
function fn (a, ...b) {
console.log(a, b); // 100 [200 300]
}
fn(100, 200, 300);
// ...變量必須出現在參數列表最後
```
#### 4、返回值
```js
function fn () {
return 返回值;
}
// 1.可以空return操作，用來結束函數
// 2.返回值可以為任意js類型數據
// 3.函數最多只能擁有一個返回值
```
## 五、事件初級
- onload：頁面加載完畢事件，只附屬於window對象
- onclick：鼠標點擊時間
- onmouseover：鼠標懸浮事件
- onmouseout：鼠標移開事件
## 六、JS選擇器
#### 1、getElement系列
```js
// 1.通過id名獲取唯一滿足條件的頁面元素
document.getElementById(‘id名‘);
// 該方法只能由document調用
// 2、通過class名獲取所有滿足條件的頁面元素
document.getElementsByClassName(‘class名‘);
// 該方法可以由document及任意頁面元素對象調用
// 返回值為HTMLCollection (一個類數組結果的對象，使用方式同數組)
// 沒有匹配到任何結果返回空HTMLCollection對象 ([])
// 3.通過tag名獲取所有滿足條件的頁面元素
document.getElementsByTagName(‘tag名‘);
// 該方法可以由document及任意頁面元素對象調用
// 返回值為HTMLCollection (一個類數組結果的對象，使用方式同數組)
// 沒有匹配到任何結果返回空HTMLCollection對象 ([])
```
#### 2、querySelect系列
```js
// 1.獲取第一個匹配到的頁面元素
document.querySelector(‘css語法選擇器‘);
// 該方法可以由document及任意頁面對象調用
// 2.獲取所有匹配到的頁面元素
document.querySelectorAll(‘css語法選擇器‘);
// 該方法可以由document及任意頁面對象調用
// 返回值為NodeList (一個類數組結果的對象，使用方式同數組)
// 沒有匹配到任何結果返回空NodeList對象 ([])
```
#### 3、id名
- 可以通過id名直接獲取對應的頁面元素對象，但是不建議使用
## 七、JS操作頁面內容
- innerText：普通標簽內容（自身文本與所有子標簽文本）
- innerHTML：包含標簽在內的內容（自身文本及子標簽的所有）
- value：表單標簽的內容
- outerHTML：包含自身標簽在內的內容（自身標簽及往下的所有）
## 八、JS操作頁面樣式
- 讀寫 style屬性 樣式
```js
div.style.backgroundColor = ‘red‘;
// 1.操作的為行間式
// 2.可讀可寫
// 3.具體屬性名采用小駝峰命名法
```
- 只讀 計算後 樣式
```js
// eg: 背景顏色
// 推薦
getComputedStyle(頁面元素對象, 偽類).getPropertyValue(‘background-color‘);
// 不推薦
getComputedStyle(頁面元素對象, 偽類).backgroundColor;
// IE9以下
頁面元素對象.currentStyle.getAttribute(‘background-color‘);
頁面元素對象.currentStyle.backgroundColor;
// 1.頁面元素對象由JS選擇器獲取
// 2.偽類沒有的情況下用null填充
// 3.計算後樣式為只讀
// 4.該方式依舊可以獲取行間式樣式 (獲取邏輯最後的樣式)
```
- 結合 css 操作樣式
```js
頁面元素對象.className = ""; // 清除類名
頁面元素對象.className = "類名"; // 設置類名
頁面元素對象.className += " 類名"; // 添加類名
```
2 js基礎