JS基礎(chǔ)操作
一、分支結(jié)構(gòu)
1、if語句
- if 基礎(chǔ)語法
if (條件表達(dá)式) {
代碼塊;
}
// 當(dāng)條件表達(dá)式結(jié)果為true，會(huì)執(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均未被匹配時(shí)執(zhí)行
二、循環(huán)結(jié)構(gòu)
1、for循環(huán)
for (循環(huán)變量①; 條件表達(dá)式②; 循環(huán)變量增量③) {
代碼塊④;
}
// 1.循環(huán)變量可以在外、在內(nèi)聲明
// 2.執(zhí)行邏輯 ① ②④③ ... ②④③ ②，入口為①，出口為②，②④③個(gè)數(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])
}
// 用于遍歷對(duì)象：遍歷的結(jié)果為key，通過[]語法訪問對(duì)應(yīng)的value
5、for...of循環(huán)
iter = ['a', 'b', 'c'];
for (i of iter) {
console.log(iter[i])
}
// 1.用于遍歷可迭代對(duì)象：遍歷結(jié)果為index，通過[]語法訪問對(duì)應(yīng)的value
// 2.ES6新增，可迭代對(duì)象有 字符串、數(shù)組、Map、Set、Anguments、NodeList等
6、break，continue關(guān)鍵詞
- break：結(jié)束本層循環(huán)
- continue：結(jié)束本次循環(huán)進(jìn)入下一次循環(huán)
三、異常處理
try {
易錯(cuò)代碼塊;
} catch (err) {
異常處理代碼塊;
} finally {
必須邏輯代碼塊;
}
// 1.err為存儲(chǔ)錯(cuò)誤信息的變量
// 2.finally分支在異常出現(xiàn)與否都會(huì)被執(zhí)行
throw "自定義異常"
// 必要的時(shí)候拋出自定義異常，要結(jié)合對(duì)應(yīng)的try...catch使用
四、函數(shù)初級(jí)
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ù)
- 個(gè)數(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);
- 通過...語法接收多個(gè)值
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ù)最多只能擁有一個(gè)返回值
五、事件初級(jí)
- onload：頁面加載完畢事件，只附屬于window對(duì)象
- onclick：鼠標(biāo)點(diǎn)擊時(shí)間
- 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及任意頁面元素對(duì)象調(diào)用
// 返回值為HTMLCollection (一個(gè)類數(shù)組結(jié)果的對(duì)象，使用方式同數(shù)組)
// 沒有匹配到任何結(jié)果返回空HTMLCollection對(duì)象 ([])
// 3.通過tag名獲取所有滿足條件的頁面元素
document.getElementsByTagName('tag名');
// 該方法可以由document及任意頁面元素對(duì)象調(diào)用
// 返回值為HTMLCollection (一個(gè)類數(shù)組結(jié)果的對(duì)象，使用方式同數(shù)組)
// 沒有匹配到任何結(jié)果返回空HTMLCollection對(duì)象 ([])
2、querySelect系列
// 1.獲取第一個(gè)匹配到的頁面元素
document.querySelector('css語法選擇器');
// 該方法可以由document及任意頁面對(duì)象調(diào)用
// 2.獲取所有匹配到的頁面元素
document.querySelectorAll('css語法選擇器');
// 該方法可以由document及任意頁面對(duì)象調(diào)用
// 返回值為NodeList (一個(gè)類數(shù)組結(jié)果的對(duì)象，使用方式同數(shù)組)
// 沒有匹配到任何結(jié)果返回空NodeList對(duì)象 ([])
3、id名
- 可以通過id名直接獲取對(duì)應(yīng)的頁面元素對(duì)象，但是不建議使用
七、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.具體屬性名采用小駝峰命名法
- 只讀 計(jì)算后 樣式
// eg: 背景顏色
// 推薦
getComputedStyle(頁面元素對(duì)象, 偽類).getPropertyValue('background-color');
// 不推薦
getComputedStyle(頁面元素對(duì)象, 偽類).backgroundColor;
// IE9以下
頁面元素對(duì)象.currentStyle.getAttribute('background-color');
頁面元素對(duì)象.currentStyle.backgroundColor;
// 1.頁面元素對(duì)象由JS選擇器獲取
// 2.偽類沒有的情況下用null填充
// 3.計(jì)算后樣式為只讀
// 4.該方式依舊可以獲取行間式樣式 (獲取邏輯最后的樣式)
- 結(jié)合 css 操作樣式
頁面元素對(duì)象.className = ""; // 清除類名
頁面元素對(duì)象.className = "類名"; // 設(shè)置類名
頁面元素對(duì)象.className += " 類名"; // 添加類名
