【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类名的元素。
2、this关键字
在JS中的具体用法：
★ 全局变量和全局函数附属于全局对象(window)，因此使用”var”或”this”两种方法定义全局变量是等效的。
★ 执行上下文和作用域不同。执行上下文在运行时确定，随时可能改变，而作用域则在定义时确定，永远不会变。
★ 如果当前执行的是一个对象的方法，则执行上下文就是这个方法所附属的对象。
★ 如果当前是一个创建对象的过程或者执行一个对象的方法，则执行上下文就是这个正在被创建的对象。
★ 如果一个方法在执行时没有明确指定附属对象，则这个方法的上下文为全局对象。
★ 使用call和apply可以改变对象的执行上下文。
1、基础是高楼大厦的地基，没有它无法盖起高楼，基础知识的熟练掌握是你实践快速上手的资本。
2、沟通交流会让你的思维更加敏捷，也许你在某个地方转不过弯儿来，和小伙伴们交流一下，也许换个思路就能很轻松的解决问题。
3、一个问题，多种解决方案，适合自己的就是最好的。
4、尝试自己没有用过的方法解决相同的问题，这样才能成长得更快！
