第三章 web前端开发工程师--JavaScript进阶程序设计 3-5 javascript For 循环的应用

JavaScript For 循环的使用

本节课所讲的内容：

1. For 循环的使用

2. for 循环的嵌套

一、For 循环的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>for 循环的应用</title>
    <style>
        div{
            width: 50px;
            height: 50px;
            border: 1px solid red;
            position: absolute;
        }
    </style>
</head>
<body>
    <script>
        var aDiv = document.getElementsByTagName('div');
        for(var i=0;i<21;i++){
            document.body.innerHTML +='<div>'+i+'</div>';
        }
        for(var i=0;i<aDiv.length;i++){
            aDiv[i].style.left = 10+i*50+'px';
            aDiv[i].style.top = 10+i*50+'px';
        }
        //此时看不出来效果，只有定位才能成功

    </script>
</body>
</html>

二、For 循环的嵌套


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>For 循环嵌套</title>
</head>
<body>
    <ul id="list">
        <li>
            <h2>我的课程</h2>
            <ul>
                <li>web前端</li>
                <li>PHP后台</li>
                <li>Linux</li>
            </ul>
        </li>
        <li>
            <h2>我的联系方式</h2>
            <ul>
                <li>1111111</li>
                <li>[email protected]</li>
                <li>北京</li>
            </ul>
        </li>
    </ul>
    <script>
        window.onload = function(){
        //示例一：
        var oUL = document.getElementById('list');
        var aUL = oUL.getElementsByTagName('ul'); 
        var len = aUL.length;
        for(var i=0;i<len;i++){
            aLi = aUL[i].getElementsByTagName('li');
            for(var j=0;j<aLi.length;j++){
                aLi[j].style.color='red';
            }
        }

       //示例二：
       var arr = [[1,2,3,4],[1,2,3],[1,2]];

       for(var i=0; i<arr.length; i++){
            //alert(arr[i]);
            for(var j=0; j<arr[i].length; j++){
                alert(arr[i][j]);
            }
       }

    }
    </script>
</body>
</html>

第三章 web前端开发工程师--JavaScript进阶程序设计 3-5 javascript For 循环的应用

JavaScript For 循环的使用

猜你喜欢