HTML中的循环

1,首先呢我们要说一下通过标签选择元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过标签获取元素</title>
    <script type="text/javascript">
        window.onload = function(){
            // //获取页面上所有的li
            // var aLi = document.getElementsByTagName('li');
            //获取id为list01的ul
            var oList = document.getElementById('list01');
            //再获取这个ul下的所有li
            var aLi = oList.getElementsByTagName('li');
            alert(aLi.length);//8
            // aLi.pop();//错误用法,aLi是一个类似数组的选择集,没有数组通用的一些方法
            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,在然后呢,我们说一下循环语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环语句</title>
    <script type="text/javascript">
    /*
    循环语句:
        通过循环语句可以反复的执行一段代码多次
    
    while循环
        - 语法:
            while(条件表达式){
                语句...
            }
    
        - while语句在执行时,
            先对条件表达式进行求值判断,
                如果值为true,则执行循环体,
                    循环体执行完毕以后,继续对表达式进行判断
                    如果为true,则继续执行循环体,以此类推
                如果值为false,则终止循环
    
    do...while循环
        - 语法:
            do{
                语句...
            }while(条件表达式)
    
        - 执行流程:
            do...while语句在执行时,会先执行循环体,
                循环体执行完毕以后,在对while后的条件表达式进行判断,
                如果结果为true,则继续执行循环体,执行完毕继续判断以此类推
                如果结果为false,则终止循环
    
            实际上这两个语句功能类似,不同的是while是先判断后执行,
                而do...while会先执行后判断,
            do...while可以保证循环体至少执行一次,
                而while不能
    for语句,也是一个循环语句,也称为for循环
        在for循环中,为我们提供了专门的位置用来放三个表达式:
            1.初始化表达式
            2.条件表达式
            3.更新表达式
    
    for循环的语法:
            for(①初始化表达式;②条件表达式;④更新表达式){
                ③语句...
            }
    
            for循环的执行流程:
                ①执行初始化表达式,初始化变量(初始化表达式只会执行一次)
                ②执行条件表达式,判断是否执行循环。
                    如果为true,则执行循环③
                    如果为false,终止循环
                ④执行更新表达式,更新表达式执行完毕继续重复②
    任意一种循环都可以互相嵌套
    */
    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';
        }*/
        //创建一个循环,往往需要三个步骤
        //1.创初始化一个变量
        var j = 0;
        //2.在循环中设置一个条件表达式
        while(j < aLi.length){
            aLi[j].style.background = 'gold';
            //3.定义一个更新表达式,每次更新初始化变量
            j++;
        }
        /*
        以下是死循环的写法
        像这种将条件表达式写死为true的循环,叫做死循环
        该循环不会停止,除非浏览器关闭,死循环在开发中慎用
        可以使用break,来终止循环
        */
        /*while(true){
            if(j>10){
                break;//退出整个循环
            }
            j++;
        }
        //for循环的死循环写法
        for(;;){
        }*/
        /*
        break关键字可以用来退出switch或循环语句
            不能在if语句中使用break和continue
            break关键字,会立即终止离他最近的那个循环语句
        continue关键字可以用来跳过当次循环
            同样continue也是默认只会对离他最近的循环循环起作用
         */
        /*
        可以为循环语句创建一个label,来标识当前的循环
            label:循环语句
        使用break语句时,可以在break后跟着一个label,
            这样break将会结束指定的循环,而不是最近的
         */
        outer:
        for(var i=0 ; i<5 ; i++){
            console.log("@外层循环"+i);
            for(var j=0 ; j<5; j++){
                console.log("内层循环:"+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>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,033评论 1 92
  • 汪涵,湖南电视台的一哥、天天向上的主持人、火星情报局的局长。。。。。。这些耳熟能详的的标价,只要看看电视,看过湖南...
    歐晓陽阅读 231评论 4 0
  • “我差一点自杀了,……但那是另一个我,另一具尸体……我曾以多种方式结束了它的生命。但我活了下来……我又生活在‘圣洁...
    半夏倾阅读 208评论 0 0
  • 女追男10年,该放弃吗? 说到这个题目,你肯定想起了奶茶刘若英苦恋师傅陈升的故事,师傅是个有情有义的人,一次次的婉...
    金头鱼阅读 1,432评论 0 0
  • 经济学是研究个人如何致富,国家如何富强的学问。亚当斯密之所以是现代经济学的鼻祖,因为他的著作《国富论》全名即为《国...
    滕公子实习录阅读 266评论 0 0

友情链接更多精彩内容