1，首先呢我們要說一下通過標(biāo)簽選擇元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通過標(biāo)簽獲取元素</title>
<script type="text/javascript">
window.onload = function(){
// //獲取頁面上所有的li
// var aLi = document.getElementsByTagName('li');
//獲取id為list01的ul
var oList = document.getElementById('list01');
//再獲取這個(gè)ul下的所有l(wèi)i
var aLi = oList.getElementsByTagName('li');
alert(aLi.length);//8
// aLi.pop();//錯(cuò)誤用法，aLi是一個(gè)類似數(shù)組的選擇集，沒有數(shù)組通用的一些方法
aLi[0].style.backgroundColor = 'gold';
aLi[1].style.backgroundColor = 'gold';
}
</script>
</head>
<body>
<ul id="list01">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<ul id="list02">
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</body>
</html>
2，在然后呢，我們說一下循環(huán)語句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>循環(huán)語句</title>
<script type="text/javascript">
/*
循環(huán)語句：
通過循環(huán)語句可以反復(fù)的執(zhí)行一段代碼多次
while循環(huán)
- 語法：
while(條件表達(dá)式){
語句...
}
- while語句在執(zhí)行時(shí)，
先對條件表達(dá)式進(jìn)行求值判斷，
如果值為true，則執(zhí)行循環(huán)體，
循環(huán)體執(zhí)行完畢以后，繼續(xù)對表達(dá)式進(jìn)行判斷
如果為true，則繼續(xù)執(zhí)行循環(huán)體，以此類推
如果值為false，則終止循環(huán)
do...while循環(huán)
- 語法：
do{
語句...
}while(條件表達(dá)式)
- 執(zhí)行流程：
do...while語句在執(zhí)行時(shí)，會先執(zhí)行循環(huán)體，
循環(huán)體執(zhí)行完畢以后，在對while后的條件表達(dá)式進(jìn)行判斷，
如果結(jié)果為true，則繼續(xù)執(zhí)行循環(huán)體，執(zhí)行完畢繼續(xù)判斷以此類推
如果結(jié)果為false，則終止循環(huán)
實(shí)際上這兩個(gè)語句功能類似，不同的是while是先判斷后執(zhí)行，
而do...while會先執(zhí)行后判斷，
do...while可以保證循環(huán)體至少執(zhí)行一次，
而while不能
for語句，也是一個(gè)循環(huán)語句，也稱為for循環(huán)
在for循環(huán)中，為我們提供了專門的位置用來放三個(gè)表達(dá)式：
1.初始化表達(dá)式
2.條件表達(dá)式
3.更新表達(dá)式
for循環(huán)的語法：
for(①初始化表達(dá)式;②條件表達(dá)式;④更新表達(dá)式){
③語句...
}
for循環(huán)的執(zhí)行流程：
①執(zhí)行初始化表達(dá)式，初始化變量（初始化表達(dá)式只會執(zhí)行一次）
②執(zhí)行條件表達(dá)式，判斷是否執(zhí)行循環(huán)。
如果為true，則執(zhí)行循環(huán)③
如果為false，終止循環(huán)
④執(zhí)行更新表達(dá)式，更新表達(dá)式執(zhí)行完畢繼續(xù)重復(fù)②
任意一種循環(huán)都可以互相嵌套
*/
window.onload = function(){
var oList = document.getElementById('list01');
var aLi = oList.getElementsByTagName('li');
/*for (var i = 0; i < aLi.length; i++) {
if(i % 2 == 0){
aLi[i].style.background = 'gold';
}
}*/
/*for(var j in aLi){
aLi[j].style.background = 'red';
}*/
//創(chuàng)建一個(gè)循環(huán)，往往需要三個(gè)步驟
//1.創(chuàng)初始化一個(gè)變量
var j = 0;
//2.在循環(huán)中設(shè)置一個(gè)條件表達(dá)式
while(j < aLi.length){
aLi[j].style.background = 'gold';
//3.定義一個(gè)更新表達(dá)式，每次更新初始化變量
j++;
}
/*
以下是死循環(huán)的寫法
像這種將條件表達(dá)式寫死為true的循環(huán)，叫做死循環(huán)
該循環(huán)不會停止，除非瀏覽器關(guān)閉，死循環(huán)在開發(fā)中慎用
可以使用break，來終止循環(huán)
*/
/*while(true){
if(j>10){
break;//退出整個(gè)循環(huán)
}
j++;
}
//for循環(huán)的死循環(huán)寫法
for(;;){
}*/
/*
break關(guān)鍵字可以用來退出switch或循環(huán)語句
不能在if語句中使用break和continue
break關(guān)鍵字，會立即終止離他最近的那個(gè)循環(huán)語句
continue關(guān)鍵字可以用來跳過當(dāng)次循環(huán)
同樣continue也是默認(rèn)只會對離他最近的循環(huán)循環(huán)起作用
*/
/*
可以為循環(huán)語句創(chuàng)建一個(gè)label，來標(biāo)識當(dāng)前的循環(huán)
label:循環(huán)語句
使用break語句時(shí)，可以在break后跟著一個(gè)label，
這樣break將會結(jié)束指定的循環(huán)，而不是最近的
*/
outer:
for(var i=0 ; i<5 ; i++){
console.log("@外層循環(huán)"+i);
for(var j=0 ; j<5; j++){
console.log("內(nèi)層循環(huán):"+j);
break outer;
}
}
}
</script>
</head>
<body>
<ul id="list01">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
