JavaScript基礎操作

一、分支結構

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均未被匹配時執行
// 5.表達式與值進行的是全等於（===），值與類型都要相等
// 6.多個case可以共用邏輯代碼塊
 

switch (表達式) {
    case 值1: 
    case 值2: 
    case 值3:代碼塊2; break;
        
    case 值4:case 值5: case 值6: case 值7:{
            alert(‘31天‘);
            break;
        };
    default: 代碼塊3;
}
// 多個case共用邏輯代碼塊，兩種寫法，同行寫case | 分行寫case，前者後面要用{}

二、循環結構

1、for循環

for (循環變量①; 條件表達式②; 循環變量增量③) {
    代碼塊④;
}
for (var i = 0 ; i < 10 ; i ++){
    alert(‘for循環‘);
}
// 1.循環變量可以在外、在內聲明
// 2.執行邏輯 ① ②④③ ... ②④③ ②，入口為①，出口為②，②④③個數為[0, n]
 

2、while循環

while (條件表達式) {
    代碼塊;
}
// while 可以解決不明確循環次數，但知道退出循環的條件

3、do...while循環

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

4、for...in循環

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

5、for...of循環

iter = [‘a‘, ‘b‘, ‘c‘];
for (v in iter) {
    console.log(v)
}
// 1.用於遍歷可叠代對象：遍歷結果為value
// 2.ES6新增，可叠代對象有 字符串、數組、Map、Set、Anguments、NodeList等

6、break，continue關鍵詞

• break：結束本層循環
• continue：結束本次循環進入下一次循環

三、異常處理

try {
    易錯代碼塊;
} catch (err) {
    異常處理代碼塊;
} finally {
    必須邏輯代碼塊;
}
// 1.err為存儲錯誤信息的變量
// 2.finally分支在異常出現與否都會被執行

throw "自定義異常"
// 必要的時候拋出自定義異常，要結合對應的try...catch使用

<script type="text/javascript">
    while (1) {
        var num1 = + prompt("請輸入第一個數字:");
        var num2 = + prompt("請輸入第二個數字:");

        var res = num1 + num2;

        try {
            if (isNaN(res)) throw "計算有誤!";
            alert(res);
            break;
        } catch (err) {
            console.log("異常:" + err);
        } finally {
            console.log(‘該語句一定會被執行,一次try邏輯執行一次‘);
        }
    }

</script>

四、函數初級

1、函數的定義

• ES5

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

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

• ES6

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

• 匿名函數

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

// 匿名函數定義後無法使用，所以只能自調用
(function (參數列表) {
    函數體;
})(參數列表);

2、函數的調用

• 函數名(參數列表)

3、函數的參數

• 個數不需要統一，實參和形參的個數不需要相等

// 當實參個數小於形參的個數，調用函數，沒有實參對應的實參，輸出undefined
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.函數最多只能擁有一個返回值

五、事件初級

1. 事件需要綁定具體執行函數
2. 事件滿足的條件觸發綁定的函數
3. 函數完成具體功能

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

<!-- 1.直接將js代碼塊書寫在行間事件中, 不提倡 -->
<div id=‘div‘ onclick=‘div.style.color="red";‘></div>

<!-- 2.在行間式時間中調用函數，不提倡 -->
<div id=‘div‘ onclick=‘func()‘></div>

<div id=‘div‘></div>
<script>
    
    window.onload=function(){
        div.style.color=‘red‘;
    }
    
    // 3.為目標時間綁定事件方法，內部可以用this綁定對象本身
    div.onmouseover=function(){
        this.style.color=‘blue‘;
    }
</script>

六、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對象 ([])

<script type="text/javascript">
    // 1.直接可以通過id名,確定頁面元素對象(id一定要唯一)
    d.style.color = "cyan";

    // 2.getElement方式
    // document:所有標簽都存在於文檔中,所有通過document對象就可以找到指定的頁面元素對象

    // （1）id，id是唯一的，所以只能獲取唯一滿足條件的頁面元素
    // 註:只有getElementById只能由document調用
    var d1 = document.getElementById(‘d‘);
    d1.style.backgroundColor = "pink";

    // （2）class，獲取所有滿足條件的頁面元素
    var d2 = document.getElementsByClassName(‘dd‘);
    console.log(d2);  // HTMLCollection 類數組類型
    console.log(d2[0].style);
    d2[0].style.backgroundColor = "cyan";
    d2[1].style.backgroundColor = "blue";

    // （3）tagName，獲取所有滿足條件的頁面元素
    var d3 = document.getElementsByTagName(‘div‘);
    d3[1].style.backgroundColor = "#333";


    var body = document.getElementsByTagName(‘body‘)[0];
    body.style.backgroundColor = "#eee";
    var d4 = body.getElementsByClassName(‘dd‘)[0];
    d4.style.backgroundColor = "orange";
    var d5 = body.getElementsByTagName(‘div‘)[1];
    d5.style.backgroundColor = "brown";

</script>

2、querySelect系列

// 1.獲取第一個匹配到的頁面元素
document.querySelector(‘css語法選擇器‘);
// 該方法可以由document及任意頁面對象調用

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

<script type="text/javascript">

    // document.querySelector(‘css語法選擇器‘)找滿足條件的第一個
    // 可以被document調用,也可以被普通對象調用
    var e1 = document.querySelector(‘#e1‘); // id為e1的標簽,唯一一個
    e1.style.backgroundColor = "#f7f";

    var e2 = document.querySelector(‘body .ee‘); // body標簽下的class為ee的 第一個標簽
    e2.style.backgroundColor = "#ff6700";

    var e3 = document.querySelector(‘body .ee:nth-of-type(5)‘);
    console.log(e3)
    e3.style.backgroundColor = "#ff6700";

    // document.querySelectorAll(‘css語法選擇器‘)找滿足條件的所有
    var es = document.querySelectorAll(‘.ee‘);
    console.log(es); // NodeList,類數組結果的對象
    es[1].style.backgroundColor = "tomato";

</script>

3、id名

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

七、JS操作頁面內容

• innerText：普通標簽內容（自身文本與所有子標簽文本）
• innerHTML：包含標簽在內的內容（自身文本及子標簽的所有）
• value：表單標簽的內容
• outerHTML：包含自身標簽在內的內容（自身標簽及往下的所有）

<body>
    <div class="sup">
        sup的文本
        <div class="sub">sub的文本</div>
    </div>
    <form action="">
        <input class="input" type="text" />
        <button class="btn" type="button">獲取</button>
    </form>
</body>

<script type="text/javascript">
    // 通過js獲取頁面需要操作的元素對象
    var sup = document.querySelector(‘.sup‘);
    var sub = sup.querySelector(‘.sub‘);

    // 獲取

    // 自身及所有子級的文本
    console.log(">>>>>" + sup.innerText);  // sup的文本 \n sub的文本
    console.log(">>>>>" + sub.innerText);  // sub的文本

    // 自身文本及所有子級的所有(包含標簽的所有信息:標簽名,id名,class名,樣式,事件,文本...)
    console.log(">>>>>" + sup.innerHTML);  // <div class="sub">sub的文本</div>
    console.log(">>>>>" + sub.innerHTML);  // sub的文本

    // 賦值
    sub.innerText = "<b>修改的sub文本</b>";
    sub.innerHTML = "<b style=‘color: red‘>修改的sub文本</b>";
    // Text不解析標簽語法,原樣作為文本賦值給目標對象
    // HTML可以解析標簽語法

    console.log(sub.innerHTML);  // <b style=‘color: red‘>修改的sub文本</b>
    console.log(sub.outerHTML);  // <div class="sub"><b style=‘color: red‘>修改的sub文本</b></div>

    var btn = document.querySelector(‘.btn‘);
    var ipt = document.querySelector(‘.input‘);
    btn.onclick = function () {
        // 獲取表單元素的文本值

        // 獲取文本
        var v = ipt.value;
        console.log(v);

        // 清空文本
        ipt.value = "";  // 賦值空文本
    }

</script>

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

註意：

1. js操作的就是行間式
2. 行間式優先級高於任何css選擇器，一旦行間式修改了樣式，那麽不管外聯式還是內聯式都無法修改樣式
3. 行間式優先級低於 !important 。如果內聯式或外聯式有!important，會使用important的樣式
4. ele.style.樣式只能獲取行間式樣式，如果沒有行間式，那麽 ele.style.樣式 就無法獲取樣式
5. getComputedStyle(頁面元素對象, 偽類).getPropertyValue(‘background-color‘)。計算後樣式，不僅可以獲取行間式，還可以獲取內聯式和外聯式的樣式
6. 顏色在計算後的樣式中全部為 rgb(a,b,c) 的形式

<head>
    <meta charset="UTF-8">
    <title>js操作頁面樣式</title>
    <style type="text/css">
        div#div.div {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="div" class="div"></div>
    <button class="btn">切換</button>
</body>
<script type="text/javascript">
    var div = document.querySelector(‘.div‘);

    // 需求:切換背景顏色 紅 <=> 黃
    // 1.獲取原來的顏色
    // 2.判斷顏色
    // 3.修改顏色

    // 獲取計算後樣式
    // getComputedStyle參數: 頁面對象 偽類
    // getPropertyValue參數: css語法的樣式字符串
    // var bgColor = getComputedStyle(div, null).getPropertyValue(‘background-color‘);
    var bgColor = getComputedStyle(div, null).backgroundColor;
    console.log(bgColor);  // rgb(255, 0, 0)


    var btn = document.querySelector(‘.btn‘);
    // 點擊一下
    btn.onclick = function () {
        // 獲取當前顏色一次，只讀不能改
        bgColor = getComputedStyle(div, null).backgroundColor;
        console.log(bgColor); 
        // 判斷並修改
        if (bgColor == ‘rgb(255, 0, 0)‘) {
            div.style.backgroundColor = ‘orange‘;
        } else {
            div.style.backgroundColor = ‘red‘;
        }
    }

</script>
</html>

• 結合 css 操作樣式

頁面元素對象.className = "";  // 清除類名
頁面元素對象.className = "類名";  // 設置類名
頁面元素對象.className += " 類名";  // 添加類名

<head>
    <meta charset="UTF-8">
    <title>js操作類名</title>
    <style type="text/css">
        .div {
            width: 200px;
            height: 200px;
            background-color: red;
            display: none;
        }
        .show {
            width: 200px;
            height: 200px;
            background-color: red;
            display: block;
        }
        .hidden {
            display: none;
        }
        .border {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <button class="btn1">顯示</button>
    <button class="btn2">加邊框</button>
    <button class="btn3">改顏色</button>
    <button class="btn4">加文本</button>
    <button class="btn5">隱藏</button>
    <div class="div"></div>
</body>
<script type="text/javascript">
    var div = document.querySelector(‘.div‘);
    var b1 = document.querySelector(‘.btn1‘);
    var b5 = document.querySelector(‘.btn5‘);
    var b2 = document.querySelector(‘.btn2‘);
    var b4 = document.querySelector(‘.btn4‘);



    b1.onclick = function () {
        div.className = ‘show‘;
    }
    b5.onclick = function () {
        div.className = ‘hidden‘;
    }
    b2.onclick = function () {
        div.className += ‘ border‘;
    }
    b4.onclick = function () {
        div.innerText += "文本";
    }


</script>

前端（十二）—— JavaScript基礎操作：if語句、for循環、while循環、for...in、for...of、異常處理、函數、事件、JS選擇器、JS操作頁面樣式