2016.3.18__ JavaScript基礎_2__第十三天

2016.3.18__ JavaScript基礎_2__第十三天
2016.3.18__ JavaScript基礎2_第十三天今日課程預覽

1.for迴圈

如果您希望一遍又一遍地運行相同的代碼，並且每次的值都不同，那麼使用迴圈是很方便的。

當然，我們可以一遍遍的重複代碼。

document.write(cars[0] + "");document.write(cars[1] + "");document.write(cars[2] + "");document.write(cars[3] + "");document.write(cars[4] + "");document.write(cars[5] + "");

但是我們程式猿是最討厭重複性操作的人，讓我們寫這麼多不是逼瘋我們麼。

所以我們要使用迴圈。（下面是對迴圈結構的詳細說明，有一定基礎的同學可以跳過）

for (var i=0;i

1.1 迴圈詳解

下面是對迴圈結構的詳細說明，有一定基礎的同學可以跳過。

迴圈體的結構

for(定義一個迴圈增量；迴圈條件；迴圈增量自加/自減){    迴圈體}

分析一下這個迴圈結構：

迴圈增量： 在這裡定義一個迴圈增量，並賦初值（一般是 0 或者 1） 迴圈條件： 這是一個條件運算式，用來判斷迴圈調試是不是滿足 迴圈增量自加： 在這裡，每次迴圈，之前定義的迴圈增量都會增加1次 迴圈體： 在迴圈條件成立的前提下，會不斷重複迴圈體中的內容，直至迴圈條件不成立

注意：寫迴圈的時候一定要注意給出正確的迴圈條件，否則會造成死迴圈。

<script> cars=["BMW","Volvo","Saab","Ford"]; for (var i=0;i"); } </script>1.2 跳出迴圈、中止迴圈1.2.1 break

那如果我們想要我們的程式當迴圈到一個特定的人的時候，不繼續進行了，該怎麼辦？

我們需要使用我們的 break，去跳出當前的迴圈。

    <script>        for (var i=0;i<10;i++)        {            alert(i);            if(i > 5){                break;            }        }    </script>

當 i <= 5 之前，每次迴圈都去列印 i 的值， 當 i > 5的時候，就直接跳出當前迴圈。繼續向後執行。

1.2.2 continue

當我們想迴圈到某一個次數之後，我們就不對當前迴圈內的某些內容執行的時候，我們就可以使用 continue 去跳出當前的迴圈，繼續下一次的迴圈。

    <script>        for (var i=0;i<10;i++)        {            alert(i);            if(i > 5){                alert("執行了continue")；                continue;            }            alert("沒有執行continue")；        }    </script>

前5次迴圈，都列印計數並顯示沒有執行continue，五次之後就顯示執行了continue。

注意：

break是停止整個迴圈，不管你執行到第幾次，直接結束。

continue是跳出當前迴圈計數時的迴圈，就好像當我們迴圈到第5次的時候，執行了 continue，程式會直接結束當前的這次迴圈，去執行第6次迴圈。

這一點一定一定要注意！

1.3 其他類型迴圈

除了for迴圈（迴圈代碼塊一定的次數）之外，還有三種常見迴圈。

for/in - 迴圈遍曆對象的屬性

while - 當指定的條件為 true 時迴圈指定的代碼塊

do/while - 同樣當指定的條件為 true 時迴圈指定的代碼塊

因為其他迴圈方法，使用情境不多，在這裡不做更多介紹。

1.4 for..in.. 迴圈（拓展）

for..in..迴圈是 for 迴圈的一個變種，

它的作用主要是將一個對象的所有屬性依次迴圈出來。

    var o = {        name: "larra",        age:20,        sex:"girl"    };    for(var key in o){        alert(key); //'name','age','sex'    }

2. input 的 checked 屬性

我們在之前的學習過程中已經介紹過了，input 標籤設定了類型 checkbox 屬性之後，

就變成了一個複選框，選中狀態時，checked 屬性為 true ， 未選中為 false。

那如果我們想要通過點擊一個按鈕就能去更改是否選中，我們該怎麼做呢？

可以看見我們點擊按鈕，我們複選框的屬性就發生了改變，很神奇對吧。

那我們接下來配合上面的迴圈去做個練習，我們來模仿下購物車的原理。

當然，我寫的並不嚴謹，只是為了讓大家有一個基礎的概念。更完善的就等大家回去自己嘗試了。

3. className 屬性

我們也可以通過 className 屬性給元素繫結一個class 類型的CSS樣式.

  <script type="text/javascript"> var button_1 = document.getElementById("button_1"); var div_1 = document.getElementById("div_1"); button_1.onclick = function(){ if(div_1.className ==""){ div_1.className = "active"; } else{ div_1.className = ""; } } </script>4. this 指標

JS 中的 this 指標使用到函數中，首先需要分析 this 所在的函數是被當做哪個對象的方法去調用的。

也就是說，this 存在哪個函數中，誰調用函數就指代誰（即指標指向原對象的地址）。

相當於 Object-C 中的 self。

樣本一:

    var obj = {};     obj.x = 100;     obj.y = function(){        alert( this.x );     };     obj.y(); //彈出 100 

這段代碼非常容易理解，當執行 obj.y() 時，函數是作為對象obj的方法調用的，因此函數體內的this指向的是obj對象，所以會彈出100。

樣本二:

    //ul1是id對應的一個ul列表對象    ul1.onmouseleave = function(){   //此處這裡面的this就指代ul1對象（this誰調用，就指代誰）   this.style.display = "none";    }

同時我們也可以將之前的代碼進行一下替換，

    <script type="text/javascript">        var button_1 = document.getElementById("button_1");        var change_1 = document.getElementById("change_1");        button_1.onclick = function(){            if(this.checked){                this.checked = false;            }            else{                this.checked = true;            }        }    </script>

我們發現我們的代碼並沒有出錯，這也證明了我們之前所說的 哪個元素繫結了某個函數，這個函數中的 this 關鍵字就指代哪個元素。

5. 綜合練習

預計實現效果：

A B C <script type="text/javascript"> //擷取所有的切換按鈕 var inputs = document.getElementsByTagName("input"); //擷取所有的 div var divs = document.getElementsByTagName("div"); //遍曆所有的按鈕，給點擊事件綁定函數 for (var i=0; i