js陣列、迴圈、this指標以及應用
JavaScript的陣列
一、簡要說明：
1.陣列變數var arr = [];
2.陣列是資料的倉庫，length為陣列資料的數量；
3.表示方法：["第一個資料","第二個資料","第三個資料"]；
4.arr[下標]為陣列下標位置的資料（從0開始);
5.arr.push("第四個資料")向陣列最後一位後新增資料;
注意：陣列用標籤名獲取元素：document.getElementsByTagName("");
二、該方法與ById的區別：
1.ById是靜態方法（它的前面必須是document）；ByTagName是動態方法（它的前面可以是另一個元素的所有後代元素中獲取）；
2.ById獲取的只有一個元素（而且id本身在同一個頁面中也是唯一的）；ByTagName獲取的可能是多個（無論是一個和多個都會變成類陣列），需要加上[]和數字或者遍歷來控制；
3.ById無法選中動態建立的元素（如通過innerHTML生成的標籤），ByTagName可以選中動態建立的元素；
js迴圈
當我們需要重複執行某些程式碼或連續執行的程式碼有數字在變化時，就可以使用迴圈：for(;;){}。而且迴圈也被用做給陣列或類陣列遍歷（既讓陣列或類陣列的每項都執行）。
注意：多個for可以都用變數i，但是迴圈巢狀要換變數名。
this指標
1.它是一個object，直接用alert彈出的是window。
2.Js裡當物件是window的時候一般把window省略，實際上alert是window的方法。
3.再試一下div的點選事件裡彈出this則變成了div。
4.得到的結論是：this就是呼叫當前方法（函式）的（元素）物件，在全域性下就是window。
5.但是事件呼叫匿名函式裡直接呼叫時，this又回變成window，這時元素呼叫的函式實際是匿名函式，而匿名函式內部直接呼叫的函式依然是window在呼叫。
應用舉例
1.for迴圈應用舉例：用for迴圈做出一個v字型效果
<style type="text/css">
body{margin:0;}
ul{margin:0; padding:0; list-style:none; position:relative;}
li{width:50px; height:50px; background-color:red; position:absolute;}
</style>
</head>
<body>
<ul id="ul1"></ul>
<script>
var oUl = document.getElementById("ul1");
var str = "";
for(var i=0;i<11;i++){
str += "<li></li>";
}
oUl.innerHTML = str;
var aLi = oUl.getElementsByTagName("li");
for(var i=0;i<aLi.length;i++){
if(i<6){
aLi[i].style.top = i*50+"px";
}else{
aLi[i].style.top = (aLi.length-1-i)*50+"px";
}
aLi[i].style.left = i*50+"px";
}
</script> 2.用陣列實現切換圖片效果
<body>
<input type="button" value="上一張"/>
<input type="button" value="下一張"/><br/>
<img src="img/1.png" width="391" height="479"/>
<script>
var arr = ["img/1.png","img/2.png","img/3.png","img/4.png"];
var i=0;
var aBtn = document.getElementsByTagName("input");
var oImg = document.getElementsByTagName("img")[0];
aBtn[0].onclick = function (){
if(i==0){
i = 3;
}else{
i--;
}
oImg.src = arr[i];
}
aBtn[1].onclick = function (){
if(i==3){
i = 0;
}else{
i++;
}
oImg.src = arr[i];
}
</script>
</body>3.this指標應用舉例：
<style type="text/css">
li{font-size:18px; background-color:red; color:#fff;}
</style>
</head>
<body>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
</ul>
<script>
var aLi = document.getElementsByTagName("li");
for(var i=0;i<aLi.length;i++){
aLi[i].onclick = function (){
this.style.backgroundColor = "blue";
};
}注意錯誤寫法：
for(var i=0;i<aLi.length;i++){
aLi[i].onclick = function (){ //錯誤寫法
changeStyle();
};