【JavaScript】（8）——实例：图片切换效果

背景：不知道怎么回事，最近做的项目都是在和UI打交道，各种图片，各种表格，各种按钮的组合、拼接；写各种JS方法让他们无缝组合，自由切换；对CSS+HTML中的多种属性都熟悉了一下，盒子模型，背景图片等等。刚刚接手的时候既兴奋又激动，但是实际忙起来，既眼花又头疼。不过还好持续的时间不算太长，熟练了，适应了，就好了。

一、问题出世

    项目中要实现checkbox功能，但是用的是两张图片，点击图片后互相交换，想想感觉挺简单的，在图片那里添加一个onclick事件，然后再写这个onclick事件的方法，最后调用，简单到不行不行的，于是，第一版出炉了：

两张图片：

   

JS方法：

HTML界面：

效果：

二、问题升级

    对于一组图片，这种方法已经足够了，但是多组图片，该怎么实现呢？在我的东找西问中，尝试了多种方法，最后决定用其中一种比较适合我想要的效果的方法。

JS方法：

HTML界面：

效果：

三、方法升级

    上面的方法已经能实现了此项功能，但是还是不够好，控制每一组图片的参数i，是个变量，后期维护的时候不太好控制，经过学宇师姐的提点，终于找到了一个更好的方法，后期无论这样的图片有多少组，都不会惦记着自己之前的i写到了多少。

JS方法：

HTML界面：

效果和上面的效果完全相同。

四、知识点汇总

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、尝试自己没有用过的方法解决相同的问题，这样才能成长得更快！