語法：

for ( ① ; ② ; ④){
③
}

執(zhí)行順序：
1→2(true)→3→4→2(true)→3→4....→2(false)

• ①定義語句：定義一些變量，需要用這些變量控件我們的循環(huán)；

• ②判斷語句：只有當(dāng)判斷條件語句為true才能繼續(xù)往下執(zhí)行；

• ③循環(huán)體：整個(gè)大括號(hào)里面都是代碼，可能不止一句代碼！

• ④變化語句：變量的變化；

  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個(gè)盒子點(diǎn)擊任一個(gè)盒子彈出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>

→注冊(cè)事件：就是已經(jīng)添加好了aBox[0] ~ aBox[4] 的點(diǎn)擊事件
等同于

  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 );
            }

關(guān)于點(diǎn)擊后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呢？
因?yàn)樯厦媸亲?cè)事件，在沒有點(diǎn)擊之前 function(){ alert( i ); }并沒有被執(zhí)行到，但for循環(huán)的i已經(jīng)執(zhí)行完了，這里再點(diǎn)擊觸發(fā)，這時(shí)候的i就是for循環(huán)結(jié)束時(shí)的i就是 5
跟之前 for( var x = 0 ; x < 3 ; x++){ } alert( x ); 一樣；

如果點(diǎn)擊要彈出對(duì)應(yīng)的位置

利用自定義屬性：一個(gè)對(duì)象可以通過添加一個(gè)原來沒有的屬性用來存值；

注意：

1. 合法標(biāo)簽屬性 title id class ... 類似這些
2. 自定標(biāo)簽屬性
   →這兩個(gè)能在標(biāo)簽上體現(xiàn)

3. 自定義屬性（只存在js里面體現(xiàn)）

例：
aBox[0].title ='';不能用title等合法標(biāo)簽屬性來做自定義屬性，因?yàn)檫@樣相當(dāng)于操作標(biāo)簽屬性了，會(huì)再HTML里體現(xiàn)出來；

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 ); }

點(diǎn)擊哪個(gè)就會(huì)彈對(duì)應(yīng)的哪個(gè)的位置值

這里的ali不是數(shù)組，只是不同主人的ali
aBox[0].ali ?aBox[1].ali ? aBox[2].ali ? aBox[3].ali ? aBox[4].ali