一、for语句概述：
是一种先判断，后运行的循环语句。但它具有在执行循环之前初始变量和定义循环后要执行代码的能力。
for (var box = 1; box <= 5 ; box++) { //第一步，声明变量 var box = 1;
alert(box); //第二步，判断 box <=5
} //第三步，alert(box)
//第四步，box++
//第五步，从第二步再来，直到判断为 false
<script>
for(var i=0; i<3; i++){
alert(i);
}
alert(i); // 结果是3
</script>
二、for嵌套
<title>无标题文档</title>
<script>
var arr = [
[ 1,2,3,4,‘4+‘ ],
[ 4,5,6 ],
[ 7,8,9 ]
];
for( var i=0; i<arr.length; i++ ){
// arr[i][0]
// arr[i][1]
// arr[i][2]
for( var j=0; j<arr[i].length; j++ ){
// alert( arr[i][j] );
}
}
window.onload = function (){
var oUl = document.getElementById(‘list‘);
var aUl = oUl.getElementsByTagName(‘ul‘);
var len = aUl.length;
var aLi = null; // 空
for( var i=0; i<len; i++ ){
aLi = aUl[i].getElementsByTagName(‘li‘);
for( var j=0; j<aLi.length; j++ ){
aLi[j].style.border = ‘1px solid red‘;
}
}
};
</script>
</head>
<body>
<ul id="list">
<li>
<h2>我的好友</h2>
<ul>
<li>莫涛</li>
<li>张森</li>
<li>杜鹏</li>
</ul>
</li>
<li><ol><li>no</li><li>no</li><li>no</li></ol></li>
<li>
<h2>我的坏友</h2>
<ul>
<li>莫小涛</li>
<li>张小森</li>
</ul>
</li>
<li><ol><li>no</li><li>no</li><li>no</li></ol></li>
<li>
<h2>我的黑名单</h2>
<ul>
<li>莫张</li>
</ul>
</li>
</ul>
</body>
三、for语句的简单应用
1、将数组中的文字，添加到每个li标签中
<title>无标题文档</title>
<style>
li { height:30px; border-bottom:1px solid #333; }
</style>
<script>
window.onload = function (){
var oUl = document.getElementById(‘list‘);
var aLi = oUl.getElementsByTagName(‘li‘);
var arr = [ ‘今天‘, ‘明天‘, ‘后天‘ ];
var len = arr.length;
/*aLi[0].onclick = function (){ alert(1); };
aLi[1].onclick = function (){ alert(1); };
aLi[2].onclick = function (){ alert(1); };*/
//aLi.onclick = function (){ alert(1); };//错误写法
for( var i=0; i<len; i++ ){
aLi[i].innerHTML = arr[i];
aLi[i].onclick = function (){
// alert(i); i => 3
};
}
};
</script>
</head>
<body>
<ul id="list">
<li></li>
<li></li>
<li></li>
</ul>
</body>
2、动态添加按钮
<title>无标题文档</title>
<script>
window.onload = function (){
/*
document.body.innerHTML += ‘<input type="button" value="按钮" />‘;
document.body.innerHTML += ‘<input type="button" value="按钮" />‘;
document.body.innerHTML += ‘<input type="button" value="按钮" />‘;
*/
// 性能有问题！！！
var str = ‘‘;
for( var i=0; i<60; i++ ){
// document.body.innerHTML += ‘<input type="button" value="按钮" />‘;
str += ‘<input type="button" value="按钮" />‘;
}
document.body.innerHTML = str;
};
</script>
</head>
<body>
</body>
3、计算元素坐标
<title>无标题文档</title>
<style>
div{width:50px; height:50px; background:red; position:absolute; top:0; left:0; font-size:30px; text-align:center;line-height:50px; color:#fff; }
</style>
<script>
window.onload = function (){
var aDiv = document.getElementsByTagName(‘div‘);
//动态创建div
for( var i=0; i<8; i++ ){
document.body.innerHTML += ‘<div>‘ + i + ‘</div>‘;
}
//设置每个div的定位
for( var i=0; i<aDiv.length; i++ ){
aDiv[i].style.left = i*50 + ‘px‘;
aDiv[i].style.top = i*50 + ‘px‘;
}
};
</script>
</head>
<body>
</body>
时间： 2024-10-11 22:22:10