js之基本操作
阿新 • • 發佈：2018-12-15
一,if分支結構(條件語句)
語法 if (條件表示式) { 程式碼塊; } else if { 程式碼塊; } else if { 程式碼塊; } else { 程式碼塊; }注意:1,當某一個分支只有與一條邏輯語句時,可以省略{}
2,可以多分支使用,也可以相互巢狀使用,只要邏輯沒有問題就可以
例子:輸入春夏秋冬四個季節,和季節對應的溫度,給出穿什麼衣服的建議 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>if 分支結構</title> </head> <body> 分支結構 </body> <script> var jijie = prompt('季節:春夏秋冬:') if (jijie == '冬') { var wd = prompt('今天的溫度:') wd = Number(wd) if (wd <= 0) { alert('穿羽絨服') } else if (wd > 0) { alert('穿長袖') } else { alert('請輸入正確資訊') } } else if (jijie == '夏') { var wd = prompt('今天的溫度:') wd = Number(wd) if (wd >= 5) { alert('穿長袖!') } else if (wd < 5) { alert('穿半袖!') } else { alert('請輸入正確內容') } } else if (jijie == '春') { var wd = prompt('今天的溫度:') wd = Number(wd) if (wd >= 5) { alert('穿長袖!') } else if (wd < 5) { alert('穿半袖!') } else { alert('請輸入正確內容') } } else if (jijie == '秋') { var wd = prompt('今天的溫度:') wd = Number(wd) if (wd >= 5) { alert('穿長袖!') } else if (wd < 5) { alert('穿半袖!') } else { alert('請輸入正確內容') } } </script> </html>
二,switch分支結構
1,一個條件也就是一種演算法,可以獲得多種結果
2,break結束最近的case,跳出switch結構
3,多個case可以共用邏輯程式碼塊
4,表示式與值進行的是全等比較,所以表示式與值得型別需要統一 (字串 | 整數值)
5,default:上面幾種情況都不出現的時候就執行這條語句
語法: switch (一種條件) { case 結果1: 程式碼; break; case 結果2: 程式碼; break; case 結果3: 程式碼; break; case 結果4: 程式碼; break; default:程式碼塊; }<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>switch分支結構</title> </head> <body> switch分支結構 </body> <script> var month = prompt('請輸入月份'); month = + month switch (month) { case 1: case 3: case 5: case 7: case 8: case 10: case 12: { alert('31天'); break; }; case 4: case 6: case 9: case 11: alert("30天"); break; default: alert("28天"); } </script> </html>
三,迴圈結構
一條邏輯可以省略{}
break:結束本層迴圈
continue:結束本次迴圈,進入下一次迴圈
1.for迴圈
語法: for (迴圈變數①; 條件表示式②; 迴圈變數增量③) { 程式碼塊④; }2,while迴圈
while可以解決不明確迴圈次數但知道迴圈出口條件的需求
語法: 宣告變數 while (條件) { 迴圈體程式碼 變數自增 }3,do...while迴圈
do..while迴圈,迴圈體一定會被執行,至少執行一次
語法: 宣告變數 do { 迴圈體程式碼 變數自增 } while (條件)4,for...in迴圈
主要用於對字典的查詢,遍歷字典的每一個Key
例子: obj = {"name": "zero", "age": 8, 1: 100}; for (k in obj) { console.log(k, obj[k]) } // 物件的簡單使用 console.log(obj["name"]); console.log(obj[1]);5,for...of迭代器
1>.用於遍歷可迭代物件：遍歷結果為value
2>可用於所有的可迭代物件
例子: iter = ['a', 'b', 'c']; iter = 'abc'; for (v of iter) { console.log(v) }
四,異常處理:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>異常處理</title> </head> <body> 異常處理 </body> <script type="text/javascript"> while (1) { var num1 = + prompt("請輸入第一個數字:"); var num2 = + prompt("請輸入第二個數字:"); var res = num1 + num2; try { //throw是用於丟擲異常 if (isNaN(res)) throw "計算有誤!"; alert(res); break; } catch (err) { console.log("異常:" + err); } finally { console.log('該語句一定會被執行,一次try邏輯執行一次'); } } </script> </html>
五,函式初級
0函式的呼叫:
函式名(引數列表)
1.ES5函式定義 function fn1() { console.log("fn1 函式"); } fn1(); var fn2 = function () { console.log("fn2 函式"); } fn2(); 2.ES6函式定義 let fn3 = () => { console.log("fn3 函式"); } fn3();3.匿名函式 (function () { console.log("匿名函式"); }) // 匿名函式定義後,無法使用,所以只能在定義階段自呼叫 let d = "匿名"; (function (t) { console.log(t + "函式"); })(d);4,函式的引數
注:js引數都是位置引數
引數不統一 function fun1 (a, b, c) { console.log(a, b, c); // 100 undefined undefined } fun1(100); function fun2 (a) { console.log(a); // 100 } fun2(100, 200, 300); // 200,300被丟棄 預設值引數 function fun3 (a, b=20, c, d=40) { console.log(a, b, c, d); // 100 200 300 40 } fun3(100, 200, 300); 不定長引數 function fun4 (a, ...b) { console.log(a, b); // 100 [200 300] } fun4(100, 200, 300); // ...變數必須出現在引數列表最後5,返回值
1.空返回 var func1 = function (num) { if (num == 0) return; // 用來結束函式 console.log('num: ', num); } func1(100);2,返回值的型別任意,但是隻能為一個值 var func2 = function (a, b) { //return a, b, a + b; // 不報錯,但只返回最後一個值 return a + b; } // 注:函式返回值就是函式的值,外界可以用變數結束函式執行後的函式值 var res = func2(10, 20); console.log("和:%d", res);
六,事件初級
onload：頁面載入完畢事件，只附屬於window物件
onclick：滑鼠點選事件
onmouseover：滑鼠懸浮事件
onmouseout：滑鼠移開事件
onfocus：表單元素獲取焦點
onblur：表單元素失去焦點
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>事件初級</title> <script type="text/javascript"> // 事件需要繫結具體執行函式(方法) // 通過事件滿足的條件觸發繫結的函式(方法) // 函式(方法)完成具體的功能 // onload事件附屬於window // onload觸發條件:頁面載入完畢(DOM文件樹及頁面資源) // 行間式方式可以書寫在body標籤 window.onload = function () { div.style.color = 'red'; } </script> </head> <body> <!-- 事件初級 onclick:滑鼠點選時 onmouseover：滑鼠懸浮事件(這裡呼叫了一個函式) --> <div id="div" onclick="div.style.color = 'orange';" onmouseover="overAction()">123</div> <!-- 1.直接將js程式碼塊書寫在行間事件中, 不提倡 --> <!-- 2.行間事件呼叫函式, 不提倡(比較直接) --> </body> <script type="text/javascript"> // var overAction = function () { // div.style.color = 'blue'; // } // 3.為目的物件繫結事件方法,內部可以使用this關鍵詞 // this就是繫結的物件本身 // div.onmouseout = function () { // this.style.color = 'pink'; // } </script> </html>
七,JS選擇器
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>js選擇器</title> <style type="text/css"> /*css選擇器*/ #d { width: 200px; height: 200px; background-color: red; } </style> </head> <body> <div id="d" class="dd">123</div> <div id="d" class="dd">123</div> <div id="e1" class="ee">123</div> <div id="e2" class="ee">123</div> <div id="e3" class="ee">123</div> </body> <script type="text/javascript"> // 1.直接可以通過id名,確定頁面元素物件(id一定要唯一) // d.style.color = "cyan"; // 2.getElement方式(該方式查詢id,class,標籤時都存在各自的函式) // document:所有標籤都存在於文件中,所有通過document物件就可以找到指定的頁面元素物件 // id var d1 = document.getElementById('d'); d1.style.backgroundColor = "pink"; // 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"; // 標籤 var d3 = document.getElementsByTagName('div'); d3[1].style.backgroundColor = "#333"; // 注:getElementById只能由document呼叫 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> <script type="text/javascript"> // 引數為css語法的選擇器 //3,querySelector方法,id,class,標籤時都用一種 // 找滿足條件的第一個 // 可以被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"; // 找滿足條件的所有 var es = document.querySelectorAll('.ee'); console.log(es); // NodeList es[1].style.backgroundColor = "tomato"; </script> </html>
八,js操作頁面內容
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>js操作頁面內容</title> </head> <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> // 通過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) //sup的標籤下面的全部都顯示 console.log(">>" + sub.innerHTML) //sub的文字 //給頁面中的值賦值 sub.innerText = "<b>修改的sub文字</b>"//不解析標籤語法,原樣作為文字賦值給目標物件 sub.innerHTML = "<b style='color: red'>修改的sub文字</b>"//HTML可以解析標籤語法 console.log(sub.innerHTML); // 除標籤下面的東西全部賦值給目標物件 console.log(sub.outerHTML); // 連著標籤裡面的東西全部賦值給目標物件 var btn = document.querySelector('.btn'); var ipt = document.querySelector('.input'); //把input裡面的內容提交給後臺 btn.onclick = function () { // 獲取表單元素的文字值 // 獲取文字 var v = ipt.value; console.log(v); // 清空文字 ipt.value = ""; // 賦值空文字 } </script> </html>
九,操作頁面樣式