通过前几章的了解，我们可以大概做出一个简单的页面了，但是那只是一个呆板的平面，那么我们怎么做到让它和用户进行交互呢？Javascript的作用由此体现出来：进行交互，完成人和网页之间的互动。
通俗易懂的来讲：
在上面的页面中，我们通过前面的知识能很快做出来，但是我们怎么做到当用户用鼠标点击“点击”按钮时，“AAA”这个字母消失的效果呢，这就是Jquery所要完成的工作。
在学习之前，我们先要有这样一个认识：Jquery是一个额外的东西，因此如果我们要使用它，我们必须告诉电脑它的出处，代码如下：
<script src="jquery.js"></script>
聪明的同学很快就能发现这个和前面我们所学的<link rel="stylesheet" href="">很相似，所以我们很容易就能知道<script src="jquery.js"></script>这个是要放在<head></head>里面的。
那么这个时候就有人问了，“哎呀<script src="jquery.js"></script>里面的“jquery.js”是什么意思啊？”，通过<link rel="stylesheet" href="">，我们也是能很清楚的知道“jquery.js”是我自己所建立的一个.js的文件，然后我们通过<script src="jquery.js"></script>来找到这个文件。那么又会有人问了，“哎呀jquery.js这个文件里面我们要写些什么东西啊？”，这个自己去查，内容是固定的，在网上查到后复制粘贴上去就行，别的现在我们不需要找到，只要知道我们一旦要用到交互的方法，我们就把<script src=""></script>这个代码写道我们html的文件里面就行。
那么我们要把js的代码写道哪里呢？代码如下：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.js"></script>
<script>
具体内容
</script>
</head>
好了，有了上面的理解，让我们现在进入正式的学习。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.js"></script>
<script>
$(function() {
$("body").on("click", ".btn", function() {
$(".box").hide()
})
})
</script>
</head>
<body>
<div class="box">AAA</div>
<input type="button" value="点击" class="btn">
</body>
</html>
上面代码所展现的形式是：
当我用鼠标点击“点击”按钮时，
“AAA”这个字母将会消失。
页面的内容（即<body></body>）里面的东西我想大家以及大概知道了，那么我们来讲解<head></head>里面的内容，代码如下：
<script src="jquery.js"></script>
<script>
$(function() {
$("body").on("click", ".btn", function() {
$(".box").hide()
})
})
</script>
<script src="jquery.js"></script>如上面我们所说，就是引用jquery的方法，没什么好讲的。
我们来分布讲解：
那么
<script>
$(function() {
})
</script>
是什么意思呢？现在不需要知道，你只要明白这是固定写法就行，所以现在我们明白了，当我们要用到交互的知识时，无脑把
<script src="jquery.js"></script>
<script>
$(function() {
})
</script>
写到html的代码中，然后就剩下
$("body").on("click", ".btn", function() {
$(".box").hide()
})
该部分的意思见下面的笔记：
<script> $(function() { 事件绑定方法一 : 点击消失 $(".btn").click(function() { $(".box").hide() }) 事件绑定方法二 : $(".btn").on("click", function() { $(".box").hide() }) s可以让交互变得更灵活，如可以通过用户输入的数据来更改交互的方式) // 体会on绑定事件的重要性 // $(".input").on("blur", function() { // var type = $(".input").val() // $(".btn").on("click", function() { // $(".box").hide() // }) // }) // 事件绑定事件三 绑定未来元素 // $("body").on("click", ".btn", function() { // $(".box").hide() // }) //未来元素(通过js后来添加上的元素) //添加（制造未来元素）体会事件绑定方法三 绑定未来元素的重要性 //$("body").append('<input type="button" value="点我" class="btn">') $("body").on("click", ".btn", function() { $(".box").hide(4000, function() { alert("666") }) }) }) </script>
