DOM基本操作
前言
hello，大家好，今天我们来学习卡其漫画中的DOM操作，就是让页面有一个动态的切换效果，最终效果如下图所示：
主要内容
本章节主要内容是要使用jQuery这个强大的js方法库再结合我们书写的css样式来实现一个鼠标
移入不同按钮切换图片的效果，按钮的样式也是要跟着一起发生变化，主要涉及的知识点有：
css样式，页面元素的获取，事件的注册，添加类，移除类等...
之前的页面样式 如下图所示：
上面的静态页面就是在我们学习完了静态布局技术之后完成的，但是一个完整的页面，光
有静态的页面展示还是远远不够的，还需要有动态效果，比如单击或鼠标移入一个按钮，切换
一张图片等，下面我们就在之前的页面基础上实现动态的效果切换，要想实现动态的切换效
果，总共分5步。
首先：为了能够实现按钮的切换，我们需要先在原来的style.css中再完善一下css代码，给对应
的li标签再添加一个current类，以保证在鼠标切换到对应的标签的时候，能够实现效果的变
化，代码如下：
.carousel-icon li:nth-child(1) {
background: url(../images/newicon_20160225.png) no-repeat -67px -265px;
}
.carousel-icon li:nth-child(1).selected {
background: url(../images/newicon_20160225.png) no-repeat -68px -283px;
}
.carousel-icon li:nth-child(2) {
background: url(../images/newicon_20160225.png) no-repeat -44px -265px;
}
.carousel-icon li:nth-child(2).selected {
background: url(../images/newicon_20160225.png) no-repeat -44px -283px;
}
.carousel-icon li:nth-child(3) {
background: url(../images/newicon_20160225.png) no-repeat -2px -265px;
}
.carousel-icon li:nth-child(3).selected {
background: url(../images/newicon_20160225.png) no-repeat -2px -283px;
}
.carousel-icon li:nth-child(4) {
background: url(../images/newicon_20160225.png) no-repeat -23px -265px;
}
.carousel-icon li:nth-child(4).selected {
background: url(../images/newicon_20160225.png) no-repeat -23px -283px;
}第2步：我们要使用jQuery这个强大的js库来实现对应的特效效果，因此需要先引入这个js库
<script src="./js/jquery.js"></script>第3步：接下来，我们还需要在js这个文件夹中新建 一个index.js的文件，用来写js代码，用于
实现结构和逻辑相分离
第4步：在index.js文件中，写如下代码
$(function () { // 入口函数
// 1. 查找元素
var images = $(".carousel-image li");
var icons = $(".carousel-icon li");
// 2. 鼠标移入事件
icons.on("mouseenter", function () { // 切换指示器
$(this).addClass("selected").siblings().removeClass("selected");
// 切换图片
images.eq($(this).index()).css({ 'opacity': 1 }).siblings().css({ 'opacity': 0 });
});
});第5步：在index.js中写完了代码之后，不要忘了将文件也要引入到index.html页面中
<script src="./js/index.js"></script>至此，我们可以看到一个如文章开头图片一样的效果了。这就是使用jQuery这个强大的方法库
再加上css样式来实现的动态切换切换，jQuery这个js库呢，来负责业务逻辑，而css还是负责
样式，两者紧密配合来共同实现酷炫交互的页面效果。
通过本节课的学习，我们掌握了:
