前言
大家好，在接下来的6节课当中呢，我们要实现2大业务功能：
第1个是：卡其漫画中的DOM操作，就是让之前写好的静态页面有一个动态切换效果，效
果图如下：
第2个是：卡其漫画页面中数据的交互，也就是页面中的数据每天都是在动态变化的，效果
图如下：
要实现以上2大业务功能，当前得来学习一下让我们的项目开发变得高效且简单的一个JS库，jQuery.
主要内容
本章节主要内容有：
jQuery是什么
使用jQuery的基本步骤
jQuery中强大的选择器
jQuery中的事件注册
jQuery中的this
jQuery中的类操作
首先，来看jQuery是什么？jQuery是一个名叫John Resig(约翰*莱西格)的年轻小伙子在
2006年的时候使用javascript这门脚本语言封装好的一个强大的方法库，jQuery让我们的项目
开发变得异常高效而简单，代码写起也是非常的方便优美。
下图是作者照片
如何使用jQuery呢？既然jQuery是别人封装好的javascript方法库，我们就需要先拿到这
个方法库，因此，需要先到jQuery的官方网站去下载这个js文件，这里我已经帮大家下好了，
在拿到jQuery这个库的前提下，使用步骤可以分为这3步：
第1步：将jQuery文件引入到我们的html页面当中来
第2步：写入口函数
第3步：写业务功能的代码
下面我们来完成一个小案例，以案例为驱动将来学习一下jQuery的使用步骤，jQuery的事
件注册，jQuery的类操作等相关的知识点 ，最终效果如图所示：
首先，先新建一个code文件夹，准备好案例使用的素材，如img图片，jQuery方法库
其次，在code文件夹中新建一个index.html的页面，并在页面中写3个li标签和对应的样式，样
式要使用类选择器
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery操作</title>
<style>
ul {
list-style: none;
}
ul li {
float: left;
width: 200px;
height: 186px;
margin-right: 10px;
border: 1px solid #000;
cursor: pointer;
}
ul li:nth-child(1).current {
background: url(./images/0.jpg) no-repeat;
}
ul li:nth-child(2).current {
background: url(./images/1.jpg) no-repeat;
}
ul li:nth-child(3).current {
background: url(./images/2.jpg) no-repeat;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>第3步：先在当前index.html页面中引入jQuery
<script src="./js/jquery-1.12.2.js"></script>第4步：写入口函数，在入口函数中写业务功能实现，入口函数的作用是为了保证页面中的DOM树渲染完毕才能执行js代码
<script>
$(function(){
alert('hello world')
})
</script>第5步：获取页面中的每个li标签，并给每个li标签注册事件. 在jQuery当中，我们使用$函数再加上具体的选择器就可以实
现获取页面中对应的标签，注册事件的时候，推荐使用on的方式来注册事件，这样的事件注册效率最高
<script>
$(function(){
// 给li标签注册单击事件，实现打印输出'hello world'
$('ul li').on('click',function(){
console.log('hello world');
})
})
</script>第6步：实现鼠标当前li标签，让当前li标签显示背景图片效果.
由于我们已经在style中添加了样式类current，也就是哪个li标签拥有了current类，哪个li标签
就有对应的背景图片，此处需要用到一个鼠标移入的事件'mouseenter'，鼠标移入谁，谁有对
应的背景图片，也就是给鼠标移入的li标签添加一个类current，添加类要使用addClass()方
法，在事件处理程序中的当前对象要使用this,其余的li标签没有背景图片，获取其余的li标签要
使用siblings()方法，移除类要使用removeClass()方法，当鼠标离开ul时，所有的li标签都恢复
原样，都没有了背景图片，代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>jQuery操作</title> <style> ul { list-style: none; } ul li { float: left; width: 200px; height: 186px; margin-right: 10px; border: 1px solid #000; cursor: pointer; } ul li:nth-child(1).current { background: url(./images/0.jpg) no-repeat; } ul li:nth-child(2).current { background: url(./images/1.jpg) no-repeat; } ul li:nth-child(3).current { background: url(./images/2.jpg) no-repeat; } </style> <script src="./js/jquery-1.12.2.js"></script> <script> $(function(){ $('ul li').on('mouseenter',function(){ $(this).addClass('current').siblings().removeClass('current') }) $('ul').on('mouseleave',function(){ $(this).find('li').removeClass('current') }) }) </script></head><body> <ul> <li></li> <li></li> <li></li> </ul></body></html>最终效果图如下：
至此，我们就使用jQuery实现了，鼠标移入li标签显示背景图片的效果了。在这个案例当
中，我们学会了jQuery的使用步骤，jQuery的事件注册，jQuery的事件中的this，使用jQuery
添加类，移除类等知识点，希望大家多加练习，下节课再见。
