循環 while 和 for · JavaScript學習記錄

### 循環 while 和 for - 用 while 引入循環的概念 - while 循環語法 - 自增的意義 - 循環的構成：初始化、條件、語句、自增 - for 循環 - 用 for 代替 while 循環 - 用 for 循環為一組元素甜膩驕傲事件 - 什么時候用循環----一組元素 - 例子 - 全選---- checked 屬性 - 反選---- for 循環配合 if 判斷 - 代碼: ```HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>提取行間事件和循環</title> <style> div { display: block; border: 1px solid black; width: 100px; height: 100px; margin: 10px; float: left; } </style> <script> window.onload = function () { // 封裝 getElementById 函數 function get(id) { return document.getElementById(id); } // 封裝 getElementsByTagName function gets(tagName) { return document.getElementsByTagName(tagName) } // 提取行間樣式 get('btn1').onclick = function () { get('btn1').value = '提取成功'; } // 修改一組元素中的某一個元素 get('btn2').onclick = function () { gets('div')[2].style.background = 'blue'; } // 修改一組元素- while 循環 get('btn3').onclick = function () { var i = 0; while ( i < gets('div').length ) { gets('div')[i].style.background = 'yellow'; i++; } } // for get('btn4').onclick = function () { for (var i = 0; i < gets('div').length; i++ ){ gets('div')[i].style.background = 'pink'; } } // 全選的實現 if 判斷無需div get('btn5').onclick = function () { for (var i = 0; i < gets('input').length; i++ ){ if (gets('input')[i].type == 'checkbox'){ if (gets('input')[i].checked == false) { gets('input')[i].checked = true; } else { gets('input')[i].checked = false; } } } } // 元素.getElementsByTagName 方法單個div get('btn6').onclick = function () { var div2 = get('div2'); var inp = div2.getElementsByTagName('input'); for (var i = 0; i < inp.length; i++ ){ // console.log(inp); if (inp[i].checked == false) { inp[i].checked = true; } else { inp[i].checked = false; } } } // 元素.getElementsByTagName 方法多個div get('btn7').onclick = function () { var div2 = gets('div'); for (var i = 0; i < div2.length; i++ ){ var div = gets('div')[i]; var inps = div.getElementsByTagName('input'); for (var a = 0; a < inps.length; a++){ if (inps[a].checked == false) { inps[a].checked = true; } else { inps[a].checked = false; } } } } }; </script> </head> <body>  <input id="btn1" type="button" value="按鈕">  <input type="button" id="btn2" value="改第三個元素">  <input type="button" id="btn3" value="while循環改一組元素"> <input type="button" id="btn4" value="for循環改一組元素"> <input type="button" id="btn5" value="全選"> <input type="button" id="btn6" value="全選2"> <input type="button" id="btn7" value="全選3"> <div><input type="checkbox" name="1" id="c1"></div> <div><input type="checkbox" name="1" id="c2"></div> <div><input type="checkbox" name="1" id="c3"></div> <div><input type="checkbox" name="1" id="c4"></div> <div><input type="checkbox" name="1" id="c5"></div> <div id="div2"> <input type="checkbox" name="" id=""> <input type="checkbox" name="" id=""> <input type="checkbox" name="" id=""> <input type="checkbox" name="" id=""> <input type="checkbox" name="" id=""> <input type="checkbox" name="" id=""> <input type="checkbox" name="" id=""> </div> </body> </html> ```