JS基礎操作

一、分支結構

1、if語句

• if 基礎語法

if (條件表示式) {
    程式碼塊;
}
// 當條件表示式結果為true，會執行程式碼塊；反之不執行
// 條件表示式可以為普通表示式
// 0、undefined、null、""、NaN為假，其他均為真

•  if 複雜語法

// 1.雙分支
if (表示式1) {
    程式碼塊1;
} else {
    程式碼塊2;
}
​
// 2.多分支
if (表示式1) {
    
} else if (表示式2) {
    
} 
...
 
else if (表示式2) {
    
} else {
    
}

• if 巢狀

if (表示式1) {
    if (表示式2) {
        
    }...
}...

2、switch語句

switch (表示式) {
    case 值1: 程式碼塊1; break;
    case 值2: 程式碼塊2; break;
    default: 程式碼塊3;
}
// 1.表示式可以為 整數表示式 或 字串表示式
// 2.值可以為 整數 或 字串
// 3.break可以省略
// 4.default為預設程式碼塊，需要出現在所有case最下方，在所有case均未被匹配時執行
 

二、迴圈結構

1、for迴圈

for (迴圈變數①; 條件表示式②; 迴圈變數增量③) {
    程式碼塊④;
}
// 1.迴圈變數可以在外、在內宣告
// 2.執行邏輯 ① ②④③ ... ②④③ ②，入口為①，出口為②，②④③個數為[0, n]

2、while迴圈

while (條件表示式) {
    程式碼塊;
}

3、do...while迴圈

do {
    程式碼塊;
} while (條件表示式);

4、for...in迴圈

obj = {"name": "zero", "age": 8}
for (k in
 
 obj) {
    console.log(k, obj[k])
}
// 用於遍歷物件：遍歷的結果為key，通過[]語法訪問對應的value

5、for...of迴圈

iter = ['a', 'b', 'c'];
for (i in iter) {
    console.log(iter[i])
}
// 1.用於遍歷可迭代物件：遍歷結果為index，通過[]語法訪問對應的value
// 2.ES6新增，可迭代物件有 字串、陣列、Map、Set、Anguments、NodeList等

6、break，continue關鍵詞

break：結束本層迴圈

continue：結束本次迴圈進入下一次迴圈

三、異常處理

try {
    易錯程式碼塊;
} catch (err) {
    異常處理程式碼塊;
} finally {
    必須邏輯程式碼塊;
}
// 1.err為儲存錯誤資訊的變數
// 2.finally分支在異常出現與否都會被執行
throw "自定義異常"
// 必要的時候丟擲自定義異常，要結合對應的try...catch使用

四、函式初級

1、函式的定義

function 函式名 (引數列表) {
    函式體;
}
​
var 函式名 = function (引數列表) {
    函式體;
}

let 函式名 = (引數列表) => {
    函式體;
}
匿名函式

function (引數列表) {
    函式體;
}
​
// 匿名函式需要自呼叫
(function (引數列表) {
    函式體;
})(引數列表);

2、函式的呼叫

• 函式名(引數列表)

3、函式的引數

• 個數不需要統一

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被丟棄

• 可以任意位置具有預設值

function fn (a, b=20, c, d=40) {
    console.log(a, b, c, d)  // 100 200 300 40
}
fn(100, 200, 300)

• 通過...語法接收多個值

function fn (a, ...b) {
    console.log(a, b)  // 100 [200 300]
}
fn(100, 200, 300)
// ...變數必須出現在引數列表最後

4、返回值

function fn () {
    return 返回值;
}
// 1.可以空return操作，用來結束函式
// 2.返回值可以為任意js型別資料
// 3.函式最多隻能擁有一個返回值

五、事件初級

• onload：頁面載入完畢事件，只附屬於window物件

• onclick：滑鼠點選時間

• onmouseover：滑鼠懸浮事件

• onmouseout：滑鼠移開事件

六、JS選擇器

1、getElement系列

// 1.通過id名獲取唯一滿足條件的頁面元素
document.getElementById('id名');
// 該方法只能由document呼叫
​
// 2、通過class名獲取所有滿足條件的頁面元素
document.getElementsByClassName('class名');
// 該方法可以由document及任意頁面元素物件呼叫
// 返回值為HTMLCollection (一個類陣列結果的物件，使用方式同陣列)
// 沒有匹配到任何結果返回空HTMLCollection物件 ([])
​
// 3.通過tag名獲取所有滿足條件的頁面元素
document.getElementsByTagName('tag名');
// 該方法可以由document及任意頁面元素物件呼叫
// 返回值為HTMLCollection (一個類陣列結果的物件，使用方式同陣列)
// 沒有匹配到任何結果返回空HTMLCollection物件 ([])

2、querySelect系列

// 1.獲取第一個匹配到的頁面元素
document.querySelector('css語法選擇器');
// 該方法可以由document及任意頁面物件呼叫
​
// 2.獲取所有匹配到的頁面元素
document.querySelectorAll('css語法選擇器');
// 該方法可以由document及任意頁面物件呼叫
// 返回值為NodeList (一個類陣列結果的物件，使用方式同陣列)
// 沒有匹配到任何結果返回空NodeList物件 ([])

3、id名

• 可以通過id名直接獲取對應的頁面元素物件，但是不建議使用

七、JS操作頁面內容

• innerText：普通標籤內容（自身文字與所有子標籤文字）

• innerHTML：包含標籤在內的內容（自身文字及子標籤的所有）

• value：表單標籤的內容

• outerHTML：包含自身標籤在內的內容（自身標籤及往下的所有）

八、JS操作頁面樣式

• 讀寫 style屬性 樣式

div.style.backgroundColor = 'red';
// 1.操作的為行間式
// 2.可讀可寫
// 3.具體屬性名採用小駝峰命名法

• 只讀 計算後 樣式

// eg: 背景顏色
// 推薦
getComputedStyle(頁面元素物件, 偽類).getPropertyValue('background-color');
// 不推薦
getComputedStyle(頁面元素物件, 偽類).backgroundColor;

// IE9以下
頁面元素物件.currentStyle.getAttribute('background-color');
頁面元素物件.currentStyle.backgroundColor;
​
// 1.頁面元素物件由JS選擇器獲取
// 2.偽類沒有的情況下用null填充
// 3.計算後樣式為只讀
// 4.該方式依舊可以獲取行間式樣式 (獲取邏輯最後的樣式

• 結合 css 操作樣式

頁面元素物件.className = "";  // 清除類名
頁面元素物件.className = "類名";  // 設定類名
頁面元素物件.className += " 類名";  // 新增類名

// box.style.樣式名  ==> 可以設值,也可以獲取,但操作的只能是行間式

// getComputedStyle(box, null).樣式名 ==> 只能獲取值,不能設值, 能獲取所有方式設定的值(行間式 與 計算後樣式)

// 注: 獲取計算後樣式,需要關注值的格式

•  標籤內容

// box.innerHTML
// 可以設值, 也可以獲取值, 能解析html語法程式碼

// box.outerHTML
// 獲取包含自身標籤資訊的所有子內容資訊