JS基礎(chǔ)操作

[TOC]

一、分支結(jié)構(gòu)

1、if語句

• if 基礎(chǔ)語法

if (條件表達(dá)式) {代碼塊; } // 當(dāng)條件表達(dá)式結(jié)果為true，會執(zhí)行代碼塊；反之不執(zhí)行 // 條件表達(dá)式可以為普通表達(dá)式 // 0、undefined、null、""、NaN為假，其他均為真

• if 復(fù)雜語法

// 1.雙分支 if (表達(dá)式1) {代碼塊1; } else {代碼塊2; }// 2.多分支 if (表達(dá)式1) {} else if (表達(dá)式2) {} ... else if (表達(dá)式2) {} else {}

• if 嵌套

if (表達(dá)式1) {if (表達(dá)式2) {}... }...

2、switch語句

switch (表達(dá)式) {case 值1: 代碼塊1; break;case 值2: 代碼塊2; break;default: 代碼塊3; } // 1.表達(dá)式可以為 整數(shù)表達(dá)式 或 字符串表達(dá)式 // 2.值可以為 整數(shù) 或 字符串 // 3.break可以省略 // 4.default為默認(rèn)代碼塊，需要出現(xiàn)在所有case最下方，在所有case均未被匹配時執(zhí)行

二、循環(huán)結(jié)構(gòu)

1、for循環(huán)

for (循環(huán)變量①; 條件表達(dá)式②; 循環(huán)變量增量③) {代碼塊④; } // 1.循環(huán)變量可以在外、在內(nèi)聲明 // 2.執(zhí)行邏輯 ① ②④③ ... ②④③ ②，入口為①，出口為②，②④③個數(shù)為[0, n]

2、while循環(huán)

while (條件表達(dá)式) {代碼塊; }

3、do...while循環(huán)

do {代碼塊; } while (條件表達(dá)式);

4、for...in循環(huán)

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

5、for...of循環(huán)

iter = ['a', 'b', 'c']; for (i of iter) {console.log(iter[i]) } // 1.用于遍歷可迭代對象：遍歷結(jié)果為index，通過[]語法訪問對應(yīng)的value // 2.ES6新增，可迭代對象有 字符串、數(shù)組、Map、Set、Anguments、NodeList等

6、break，continue關(guān)鍵詞

• break：結(jié)束本層循環(huán)
• continue：結(jié)束本次循環(huán)進(jìn)入下一次循環(huán)

三、異常處理

try {易錯代碼塊; } catch (err) {異常處理代碼塊; } finally {必須邏輯代碼塊; } // 1.err為存儲錯誤信息的變量 // 2.finally分支在異常出現(xiàn)與否都會被執(zhí)行 throw "自定義異常" // 必要的時候拋出自定義異常，要結(jié)合對應(yīng)的try...catch使用

四、函數(shù)初級

1、函數(shù)的定義

• ES5

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

• ES6

let 函數(shù)名 = (參數(shù)列表) => {函數(shù)體; }

• 匿名函數(shù)

(function (參數(shù)列表) {函數(shù)體; })// 匿名函數(shù)需要自調(diào)用 (function (參數(shù)列表) {函數(shù)體; })(參數(shù)列表);

2、函數(shù)的調(diào)用

• 函數(shù)名(參數(shù)列表)

3、函數(shù)的參數(shù)

• 個數(shù)不需要統(tǒng)一

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

• 可以任意位置具有默認(rèn)值

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); // ...變量必須出現(xiàn)在參數(shù)列表最后

4、返回值

function fn () {return 返回值; } // 1.可以空return操作，用來結(jié)束函數(shù) // 2.返回值可以為任意js類型數(shù)據(jù) // 3.函數(shù)最多只能擁有一個返回值，返回多個的時候，不報錯，只返回最后一個值

五、事件初級

• onload：頁面加載完畢事件，只附屬于window對象
• onclick：鼠標(biāo)點(diǎn)擊時間
• onmouseover：鼠標(biāo)懸浮事件
• onmouseout：鼠標(biāo)移開事件
• onfocus：表單元素獲取焦點(diǎn)
• onblur：表單元素失去焦點(diǎn)

六、JS選擇器

1、getElement系列

// 1.通過id名獲取唯一滿足條件的頁面元素 document.getElementById('id名'); // 該方法只能由document調(diào)用// 2、通過class名獲取所有滿足條件的頁面元素 document.getElementsByClassName('class名'); // 該方法可以由document及任意頁面元素對象調(diào)用 // 返回值為HTMLCollection (一個類數(shù)組結(jié)果的對象，使用方式同數(shù)組) // 沒有匹配到任何結(jié)果返回空HTMLCollection對象 ([])// 3.通過tag名獲取所有滿足條件的頁面元素 document.getElementsByTagName('tag名'); // 該方法可以由document及任意頁面元素對象調(diào)用 // 返回值為HTMLCollection (一個類數(shù)組結(jié)果的對象，使用方式同數(shù)組) // 沒有匹配到任何結(jié)果返回空HTMLCollection對象 ([])

2、querySelect系列

// 1.獲取第一個匹配到的頁面元素 document.querySelector('css語法選擇器'); // 該方法可以由document及任意頁面對象調(diào)用// 2.獲取所有匹配到的頁面元素 document.querySelectorAll('css語法選擇器'); // 該方法可以由document及任意頁面對象調(diào)用 // 返回值為NodeList (一個類數(shù)組結(jié)果的對象，使用方式同數(shù)組) // 沒有匹配到任何結(jié)果返回空NodeList對象 ([])

3、id名

• 可以通過id名直接獲取對應(yīng)的頁面元素對象，但是不建議使用

七、JS操作頁面內(nèi)容

• innerText：普通標(biāo)簽內(nèi)容（自身文本與所有子標(biāo)簽文本）
• innerHTML：包含標(biāo)簽在內(nèi)的內(nèi)容（自身文本及子標(biāo)簽的所有）
• value：表單標(biāo)簽的內(nèi)容
• outerHTML：包含自身標(biāo)簽在內(nèi)的內(nèi)容（自身標(biāo)簽及往下的所有）

八、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.該方式依舊可以獲取行間式樣式 (獲取邏輯最后的樣式)

• 結(jié)合 css 操作樣式

頁面元素對象.className = ""; // 清除類名 頁面元素對象.className = "類名"; // 設(shè)置類名 頁面元素對象.className += " 類名"; // 添加類名 前面要注意加空格classList[add|remove|toggle] //add添加 remove 刪除 toggle有則無，無則有 eg: this.classlist.toggle('active') //如果class里沒有active就加上，有就刪掉

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。