JS基礎操作

[TOC]

一、分支結構

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 of 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、函數的定義

• ES5

function 函數名 (參數列表) {函數體; }var 函數名 = function (參數列表) {函數體; }

• ES6

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：鼠標移開事件
• onfocus：表單元素獲取焦點
• onblur：表單元素失去焦點

六、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 += " 類名"; // 添加類名 前面要注意加空格classList[add|remove|toggle] //add添加 remove 刪除 toggle有則無，無則有 eg: this.classlist.toggle('active') //如果class里沒有active就加上，有就刪掉

總結

以上是生活随笔為你收集整理的JS基础操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。