【JavaScript】（8）——例項：圖片切換效果
背景：不知道怎麼回事，最近做的專案都是在和UI打交道，各種圖片，各種表格，各種按鈕的組合、拼接；寫各種JS方法讓他們無縫組合，自由切換；對CSS+HTML中的多種屬性都熟悉了一下，盒子模型，背景圖片等等。剛剛接手的時候既興奮又激動，但是實際忙起來，既眼花又頭疼。不過還好持續的時間不算太長，熟練了，適應了，就好了。
一、問題出世
專案中要實現checkbox功能，但是用的是兩張圖片，點選圖片後互相交換，想想感覺挺簡單的，在圖片那裡新增一個onclick事件，然後再寫這個onclick事件的方法，最後呼叫，簡單到不行不行的，於是，第一版出爐了：
兩張圖片：
JS方法：
<span style="font-family:KaiTi_GB2312;"><Script> var numb = 0; function changeimg(){ numb++; if (numb % 2 == 0) { document.getElementById('img1').src = "img/yes.jpg"; } else { document.getElementById('img1').src = "img/no.jpg"; } } </Script> </span>
HTML介面：
<span style="font-family:KaiTi_GB2312;"><body>
<div class="container1" style="float:center" width="200px ">
<img id="img1" class="img1" src="img/yes.jpg" onclick="changeimg()" >
</div>
</body></span>
二、問題升級
對於一組圖片，這種方法已經足夠了，但是多組圖片，該怎麼實現呢？在我的東找西問中，嘗試了多種方法，最後決定用其中一種比較適合我想要的效果的方法。
JS方法：
<span style="font-family:KaiTi_GB2312;"><Script> var i = 0; var numb = 0; function changeimg(i){ numb++; if (numb % 2 == 0) { document.getElementsByClassName('img1')[i].src = "img/yes.jpg"; } else { document.getElementsByClassName('img1')[i].src = "img/no.jpg"; } } </Script> </span>
HTML介面：
<span style="font-family:KaiTi_GB2312;"><body>
<div class="container1" style="float:left" width="100px ">
<img id="img1" class="img1" src="img/yes.jpg" onclick="changeimg(0)" >
</div>
<div class="container1" style="float:left" width="100px ">
<img id="img1" class="img1" src="img/yes.jpg" onclick="changeimg(1)" >
</div>
<div class="container1" style="float:left" width="100px ">
<img id="img1" class="img1" src="img/yes.jpg" onclick="changeimg(2)" >
</div>
<div class="container1" style="float:left" width="100px ">
<img id="img1" class="img1" src="img/yes.jpg" onclick="changeimg(3)" >
</div>
<div class="container1" style="float:left" width="100px ">
<img id="img1" class="img1" src="img/yes.jpg" onclick="changeimg(4)" >
</div>
</body></span>效果：
三、方法升級
上面的方法已經能實現了此項功能，但是還是不夠好，控制每一組圖片的引數i，是個變數，後期維護的時候不太好控制，經過學宇師姐的提點，終於找到了一個更好的方法，後期無論這樣的圖片有多少組，都不會惦記著自己之前的i寫到了多少。
JS方法：
<span style="font-family:KaiTi_GB2312;"><Script>
var numb = 0;
function changeimg(img){
numb++;
if (numb % 2 == 0) {
img.src = "img/yes.jpg";
}
else {
img.src = "img/no.jpg";
}
}
</Script></span>HTML介面：
<span style="font-family:KaiTi_GB2312;"><body>
<div class="container1" style="float:left" width="100px ">
<img id="img1" class="img1" src="img/yes.jpg" onclick="changeimg(this)" >
</div>
<div class="container1" style="float:left" width="100px ">
<img id="img1" class="img1" src="img/yes.jpg" onclick="changeimg(this)" >
</div>
<div class="container1" style="float:left" width="100px ">
<img id="img1" class="img1" src="img/yes.jpg" onclick="changeimg(this)" >
</div>
<div class="container1" style="float:left" width="100px ">
<img id="img1" class="img1" src="img/yes.jpg" onclick="changeimg(this)" >
</div>
<div class="container1" style="float:left" width="100px ">
<img id="img1" class="img1" src="img/yes.jpg" onclick="changeimg(this)" >
</div>
</body></span>效果和上面的效果完全相同。
四、知識點彙總
1、 getElementsByClassName() 和 getElementById()
getElementsByClassName()方法接收一個引數，這個引數也是CSS選擇符的字串，可以是一個也可以是多個。getElementsByClassName()方法返回的則是帶有指定類的所有元素的NodeList。注意傳入多個類名的時候，類名的先後順序不重要。
getElementById() 方法可返回對擁有指定 ID 的第一個物件的引用。
擴充套件：
document.getElementById(id)
獲取指定id的DOM元素。
document.getElementsByTagName(tagName)
獲取指定標籤的DOM元素集合。
document.getElementsByName(name)
獲取name為給定引數的DOM元素。
document.getElementsByClassName(className)
獲取包含名稱為className的CSS類名的元素。
在JS中的具體用法：
★ 全域性變數和全域性函式附屬於全域性物件(window)，因此使用”var”或”this”兩種方法定義全域性變數是等效的。
★ 執行上下文和作用域不同。執行上下文在執行時確定，隨時可能改變，而作用域則在定義時確定，永遠不會變。
★ 如果當前執行的是一個物件的方法，則執行上下文就是這個方法所附屬的物件。
★ 如果當前是一個建立物件的過程或者執行一個物件的方法，則執行上下文就是這個正在被建立的物件。
★ 如果一個方法在執行時沒有明確指定附屬物件，則這個方法的上下文為全域性物件。
★ 使用call和apply可以改變物件的執行上下文。
1、基礎是高樓大廈的地基，沒有它無法蓋起高樓，基礎知識的熟練掌握是你實踐快速上手的資本。
2、溝通交流會讓你的思維更加敏捷，也許你在某個地方轉不過彎兒來，和小夥伴們交流一下，也許換個思路就能很輕鬆的解決問題。
3、一個問題，多種解決方案，適合自己的就是最好的。
4、嘗試自己沒有用過的方法解決相同的問題，這樣才能成長得更快！
