JaveScript基础 for循环

语法：

for ( ① ; ② ; ④){
③
}

执行顺序：
1→2(true)→3→4→2(true)→3→4....→2(false)

①定义语句：定义一些变量，需要用这些变量控件我们的循环；
②判断语句：只有当判断条件语句为true才能继续往下执行；
③循环体：整个大括号里面都是代码，可能不止一句代码！

④变化语句：变量的变化；

for( var x=0 ; x<10 ; x++){  
    alert( x );
}

x++ →x=x+1;
x-- → x=x-1;
也可以用 x +=2;
上面弹出 1~9；

  for( var x=0 ; x<10 ; x++){  
     
  }
   alert( x );

弹出10；
var x 放在外面跟里面一样

例：5个盒子点击任一个盒子弹出1

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<script type="text/javascript">
    var aBox = document.getElementsByClassName( 'box' );
        for( var i=0 ; i<=4 ; i++){
            aBox[i].onclick = function(){
                alert( 1 );
            }
        }
</script>

→注册事件：就是已经添加好了aBox[0] ~ aBox[4] 的点击事件
等同于

  aBox[0].onclick = function(){
                alert( 1 );
            }
  aBox[1].onclick = function(){
                alert( 1 );
            }
  aBox[2].onclick = function(){
                alert( 1 );
            }
  aBox[3].onclick = function(){
                alert( 1 );
            }
  aBox[4].onclick = function(){
                alert( 1 );
            }

关于点击后i的多少

<script type="text/javascript">
    var aBox = document.getElementsByClassName( 'box' );
        for( var i=0 ; i<=4 ; i++){
            aBox[i].onclick = function(){
                alert( i );
            }
        }  弹出5；
</script>

为什么是5呢？
因为上面是注册事件，在没有点击之前 function(){ alert( i ); }并没有被执行到，但for循环的i已经执行完了，这里再点击触发，这时候的i就是for循环结束时的i就是 5
跟之前 for( var x = 0 ; x < 3 ; x++){ } alert( x ); 一样；

如果点击要弹出对应的位置

利用自定义属性：一个对象可以通过添加一个原来没有的属性用来存值；

注意：

合法标签属性 title id class ... 类似这些

自定标签属性
→这两个能在标签上体现

自定义属性（只存在js里面体现）

例：
aBox[0].title ='';不能用title等合法标签属性来做自定义属性，因为这样相当于操作标签属性了，会再HTML里体现出来；

aBox[0].goudan = 1; → 存值

  <script type="text/javascript">
    var aBox = document.getElementsByClassName( 'box' );

        for( var i=0 ; i<=4 ; i++){
            aBox[i].ali = i;
            aBox[i].onclick = function(){
                alert( this.ali );
            }
        }
</script>

等同于

  aBox[0].ali = 0;
  aBox[0].onclick = function(){ alert( this.ali ); }

  aBox[1].ali = 1;
  aBox[1].onclick = function(){ alert( this.ali ); }

  aBox[2].ali = 2;
  aBox[2].onclick = function(){ alert( this.ali ); }

  aBox[3].ali = 3;
  aBox[3].onclick = function(){ alert( this.ali ); }

  aBox[4].ali = 4;
  aBox[4].onclick = function(){ alert( this.ali ); }

点击哪个就会弹对应的哪个的位置值

这里的ali不是数组，只是不同主人的ali
aBox[0].ali aBox[1].ali aBox[2].ali aBox[3].ali aBox[4].ali

最后编辑于：2018.01.19 16:02:52