标签：
一、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>
标签：
原文地址：http://www.cnblogs.com/LO-ME/p/4386476.html
