Tab切换栏的详细解析
下面给出京东某一页面的tab栏页面切换：
举例引入：鼠标悬停时，current元素的背景变色
本段我们先举一个例子，因为这里用到了排他思想。对于理解tab切换，很有帮助。
完整的代码实现：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
button {
margin: 10px;
width: 100px;
height: 40px;
cursor: pointer;
}
.current {
background-color: red;
}
</style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
//需求：鼠标放到哪个button上，改button变成黄色背景（添加类）
var btnArr = document.getElementsByTagName("button");
//绑定事件
for(var i=0;i<btnArr.length;i++){ //要为每一个按钮绑定事件，所以用到了for循环
btnArr[i].onmouseover = function () {
//【重要】排他思想：先把所有按钮的className设置为空，然后把我（this）这个按钮的className设置为current
//排他思想和for循环连用
for(var j=0;j<btnArr.length;j++){
btnArr[j].className = "";
}
this.className = "current"; //【重要】核心代码
}
}
//鼠标离开current时，还原背景色
for(var i=0;i<btnArr.length;i++){ //要为每一个按钮绑定事件，所以用到了for循环
btnArr[i].onmouseout = function () { //鼠标离开任何一个按钮时，就把按钮的背景色还原
this.className = "";
}
}
</script>
</body>
</html>
代码解释：
鼠标悬停时，current栏变色，这里用到了排他思想：先把所有按钮的className设置为空，然后把我(this)这个按钮的className设置为current，就可以达到变色的效果。核心代码是：
//排他思想：先把所有按钮的className设置为空，然后把我（this）这个按钮的className设置为current
//排他思想和for循环连用
for(var j=0;j<btnArr.length;j++){
btnArr[j].className = "";
}
this.className = "current";
实现的效果如下：
tab切换：初步的代码
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 500px;
height: 200px;
border: 1px solid #ccc;
margin: 50px auto;
overflow: hidden;
}
ul {
width: 600px;
height: 40px;
margin-left: -1px;
list-style: none;
}
li {
float: left;
width: 101px;
height: 40px;
text-align: center;
font: 600 18px/40px "simsun";
background-color: pink;
cursor: pointer;
}
span {
display: none;
width: 500px;
height: 160px;
background-color: yellow;
text-align: center;
font: 700 100px/160px "simsun";
}
.show {
display: block;
}
.current {
background-color: yellow;
}
</style>
<script>
window.onload = function () {
//需求：鼠标放到上面的li上，li本身变色(添加类)，对应的span也显示出来(添加类);
//思路：1.点亮上面的盒子。 2.利用索引值显示下面的盒子。
var liArr = document.getElementsByTagName("li");
var spanArr = document.getElementsByTagName("span");
for(var i=0;i<liArr.length;i++){
//绑定索引值（新增一个自定义属性：index属性）
liArr[i].index = i;
liArr[i].onmouseover = function () {
//1.点亮上面的盒子。 2.利用索引值显示下面的盒子。(排他思想)
for(var j=0;j<liArr.length;j++){
liArr[j].className = "";
spanArr[j].className = "";
}
this.className = "current";
spanArr[this.index].className = "show"; //【重要代码】
}
}
}
</script>
</head>
<body>
<div class="box">
<ul>
<li class="current">鞋子</li>
<li>袜子</li>
<li>帽子</li>
<li>裤子</li>
<li>裙子</li>
</ul>
<span class="show">鞋子</span>
<span>袜子</span>
<span>帽子</span>
<span>裤子</span>
<span>裙子</span>
</div>
</body>
</html>
实现效果如下：
上方代码的核心部分是：
for(var i=0;i<liArr.length;i++){
//绑定索引值（新增一个自定义属性：index属性）
liArr[i].index = i;
liArr[i].onmouseover = function () {
//1.点亮上面的盒子。 2.利用索引值显示下面的盒子。(排他思想)
for(var j=0;j<liArr.length;j++){
liArr[j].className = "";
spanArr[j].className = "";
}
this.className = "current";
spanArr[this.index].className = "show"; //【重要代码】
}
}
这段代码中，我们是通过给 liArr[i]一个index属性：liArr[i].index = i，然后让下方的span对应的index也随之对应显示：spanArr[this.index].className = "show"。
这样做比较难理解，其实还有一种容易理解的方法是：给liArr[i]增加index属性时，通过attribute的方式，因为这种方式增加的属性是可以显示在标签上的。也就有了下面这样的代码：
for(var i=0;i<liArr.length;i++){
//绑定索引值(自定义属性)，通过Attribute的方式【重要】
liArr[i].setAttribute("index",i);
liArr[i].onmouseover = function () {
//3.书写事件驱动程序（排他思想）
//1.点亮盒子。 2.利用索引值显示盒子。(排他思想)
for(var j=0;j<liArr.length;j++){
liArr[j].removeAttribute("class");
spanArr[j].removeAttribute("class");
}
this.setAttribute("class","current");
spanArr[this.getAttribute("index")].setAttribute("class","show");
}
}
显示的效果是一样的，不同的地方在于，我们审查元素发现，li标签中确实新增了自定义的index属性：
为了多个tab栏彼此独立，我们就需要通过封装函数的方式把他们抽取出来，于是就有了下面的改进版代码。
tab切换：改进版代码（函数封装）
方式一：给current标签设置index值【推荐的代码】
完整版代码实现：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 500px;
height: 200px;
border: 1px solid #ccc;
margin: 50px auto;
overflow: hidden;
}
ul {
width: 600px;
height: 40px;
margin-left: -1px;
list-style: none;
}
li {
float: left;
width: 101px;
height: 40px;
text-align: center;
font: 600 18px/40px "simsun";
background-color: pink;
cursor: pointer;
}
span {
display: none;
width: 500px;
height: 160px;
background-color: yellow;
text-align: center;
font: 700 100px/160px "simsun";
}
.show {
display: block;
}
.current {
background-color: yellow;
}
</style>
<script>
window.onload = function () {
//需求：鼠标放到上面的li上，li本身变色(添加类)，下方对应的span也显示出来(添加类);
//思路：1.点亮上面的盒子。 2.利用索引值显示下面的对应的盒子。
//1、获取所有的box
var boxArr = document.getElementsByClassName("box");
//让每一个box都调用函数
for (var i = 0; i < boxArr.length; i++) {
fn(boxArr[i]);
}
function fn(element) {
var liArr = element.getElementsByTagName("li"); //注意，是element获取事件源，不是document获取事件源
var spanArr = element.getElementsByTagName("span");
//2.绑定事件（循环绑定）
for (var i = 0; i < liArr.length; i++) {
//绑定索引值（新增一个自定义属性：index属性）
liArr[i].index = i;
liArr[i].onmouseover = function () {
//3.书写事件驱动程序（排他思想）
//1.点亮上面的盒子。 2.利用索引值显示下面的盒子。(排他思想)
for (var j = 0; j < liArr.length; j++) {
liArr[j].className = "";
spanArr[j].className = "";
}
this.className = "current";
spanArr[this.index].className = "show"; //【重要】核心代码
}
}
}
}
</script>
</head>
<body>
<div class="box">
<ul>
<li class="current">鞋子</li>
<li>袜子</li>
<li>帽子</li>
<li>裤子</li>
<li>裙子</li>
</ul>
<span class="show">鞋子</span>
<span>袜子</span>
<span>帽子</span>
<span>裤子</span>
<span>裙子</span>
</div>
<div class="box">
<ul>
<li class="current">鞋子</li>
<li>袜子</li>
<li>帽子</li>
<li>裤子</li>
<li>裙子</li>
</ul>
<span class="show">鞋子</span>
<span>袜子</span>
<span>帽子</span>
<span>裤子</span>
<span>裙子</span>
</div>
<div class="box">
<ul>
<li class="current">鞋子</li>
<li>袜子</li>
<li>帽子</li>
<li>裤子</li>
<li>裙子</li>
</ul>
<span class="show">鞋子</span>
<span>袜子</span>
<span>帽子</span>
<span>裤子</span>
<span>裙子</span>
</div>
</body>
</html>
注意，通过函数fn的封装之后，我们是通过参数element获取元素，而不再是document了。这样可以达到“抽象性”的作用，各个tab栏之间相互独立。
上方代码中，我们是通过给 liArr[i]一个index属性：liArr[i].index = i，然后让下方的span对应的index也随之对应显示：spanArr[this.index].className = "show"。
这样做比较难理解，根据上一段的规律，当然还有一种容易理解的方法是：给liArr[i]增加index属性时，通过attribute的方式，因为这种方式增加的属性是可以显示在标签上的。也就有了下面的方式二。
方式二：通过attribute设置index的值
基于上面方式一中的代码，我们修改一下js部分的代码，其他部分的代码保持不变。js部分的代码如下：
<script>
window.onload = function () {
//需求：鼠标放到上面的li上，li本身变色(添加类)，下方对应的span也显示出来(添加类);
//思路：1.点亮上面的盒子。 2.利用索引值显示下面的对应的盒子。
//1、获取所有的box
var boxArr = document.getElementsByClassName("box");
//让每一个box都调用函数
for (var i = 0; i < boxArr.length; i++) {
fn(boxArr[i]);
}
function fn(element) {
var liArr = element.getElementsByTagName("li"); //注意，是element获取事件源，不是document获取事件源
var spanArr = element.getElementsByTagName("span");
//2.绑定事件（循环绑定）
for (var i = 0; i < liArr.length; i++) {
//绑定索引值(自定义属性)
liArr[i].setAttribute("index", i);
liArr[i].onmouseover = function () {
//3.书写事件驱动程序（排他思想）
//1.点亮盒子。 2.利用索引值显示盒子。(排他思想)
for (var j = 0; j < liArr.length; j++) {
liArr[j].removeAttribute("class"); //注意，这里是class，不是className
spanArr[j].removeAttribute("class");
}
this.setAttribute("class", "current");
spanArr[this.getAttribute("index")].setAttribute("class", "show");
}
}
}
}
</script>
不过，方式一的写法应该比方式二更常见。
总结：通过函数封装的形式，可以保证各个tab栏之间的切换互不打扰。最终实现效果如下：
第二部分
下面给出盒子隐藏方法例子
DOM操作练习
举例1：点击按钮时，显示和隐藏盒子。
代码实现：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
button {
margin: 10px;
}
div {
width: 200px;
height: 200px;
background-color: pink;
}
.show {
display: block;
}
.hide {
display: none;
}
</style>
</head>
<body>
<button id="btn">隐藏</button>
<div>
生命壹号
</div>
<script>
//需求：点击button,隐藏盒子。改变文字，在点击按钮，显示出来。
//步骤：
//1.获取事件源和相关元素
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源和相关元素
var btn = document.getElementById("btn");
var div1 = document.getElementsByTagName("div")[0];
//2.绑定事件
btn.onclick = function () {
//3.书写事件驱动程序
//判断btn的innerHTML属性值，如果为隐藏就隐藏盒子，并修改按钮内容为显示。
//反之，则显示，并修改按钮内容为隐藏
if (this.innerHTML === "隐藏") {
div1.className = "hide";
//修改按钮上的文字（innerHTML）
btn.innerHTML = "显示";
} else {
div1.className = "show";
//修改按钮上的文字（innerHTML）
btn.innerHTML = "隐藏";
}
}
</script>
</body>
</html>
代码解释：
当盒子是显示状态时，就设置为隐藏；当盒子是隐藏状态时，就设置为显示。注意这里的逻辑判断。
另外，这里用到了innerHTHL属性，它可以修改按钮上显示的文字。
代码最终显示的效果如下：
20180127_1518.gif
举例2：相册
这里推荐一个网站：
- 占位图片生成的在线网站：placeholder.com/
好处是：素材做出来之前，先留出空位，方便以后换图。比如via.placeholder.com/400x300这个链接可以生成400*300的占位图片。
需求：
- （1）点击小图片，改变下面的大图片的src属性值，让其赋值为a链接中的href属性值。
- （2）让p标签的innnerHTML属性值，变成a标签的title属性值。
为了实现美女相册，代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
font-family: "Helvetica", "Arial", serif;
color: #333;
margin: 1em 10%;
}
h1 {
color: #333;
background-color: transparent;
}
a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none;
}
#imagegallery {
list-style: none;
}
#imagegallery li {
margin: 0px 20px 20px 0px;
padding: 0px;
display: inline;
}
#imagegallery li a img {
border: 0;
}
</style>
</head>
<body>
<h2>
美女画廊
</h2>
<a href="#">注册</a>
<ul id="imagegallery">
<li>
<a href="image/1.jpg" title="美女A">
<img src="image/1-small.jpg" width="100" alt="美女1"/>
</a>
</li>
<li>
<a href="image/2.jpg" title="美女B">
<img src="image/2-small.jpg" width="100" alt="美女2"/>
</a>
</li>
<li>
<a href="image/3.jpg" title="美女C">
<img src="image/3-small.jpg" width="100" alt="美女3"/>
</a>
</li>
<li>
<a href="image/4.jpg" title="美女D">
<img src="image/4-small.jpg" width="100" alt="美女4"/>
</a>
</li>
</ul>
<div style="clear:both"></div>
<img id="image" src="image/placeholder.png" width="450px"/>
<p id="des">选择一个图片</p>
<script>
//需求：
//（1）点击小图片，改变下面的大图片的src属性值，让其赋值为a链接中的href属性值。
//（2）让p标签的innnerHTML属性值，变成a标签的title属性值。
//1.获取事件源和相关元素
//利用元素获取其下面的标签。
var ul = document.getElementById("imagegallery");
var aArr = ul.getElementsByTagName("a"); //获取ul中的超链接<a>
// console.log(aArr[0]);
var img = document.getElementById("image");
var des = document.getElementById("des");
//2.绑定事件
//以前是一个一个绑定，但是现在是一个数组。我们用for循环绑定
for (var i = 0; i < aArr.length; i++) {
aArr[i].onclick = function () {
//3.【核心代码】书写事件驱动程序：修改属性值
img.src = this.href; //this指的是函数调用者，和i并无关系，所以不会出错。
// img.src = aArr[i].href; 注意，上面这一行代码不要写成这样
des.innerHTML = this.title;
return false; //return false表示：阻止继续执行下面的代码。
}
}
</script>
</body>
</html>
代码解释：
（1）获取事件源：我们通过ul.getElementsByTagName("a")来获取ul里面的a元素。
（2）绑定事件：因为要绑定一个数组，所以这里用for循环来绑定
（3）【重要】书写事件驱动程序：这里是用img.src = this.href，而不是用img.src = aArr[i].href。因为this指的是函数的调用者。如果写成后者，等i变成了4，就会一直是4。显然不能达到效果。
（4）代码的最后一行：return false表示：阻止继续执行下面的代码。
实现的效果如下：
举例3：鼠标悬停时，显示二维码大图
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.code {
width: 50px;
height: 50px;
}
.code a {
display: block;
width: 50px;
height: 50px;
background: url(http://img.smyhvae.com/20180127_QRcode_small.png) no-repeat -159px -51px;
position: relative;
}
.code-big {
position: absolute;
top: 10px;
left: 80px;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
<script>
window.onload = function () {
//需求：鼠标放到a链接上，显示二维码（添加show类名，去掉hide类名）
// 鼠标移开a链接，隐藏二维码（添加hide类名，去掉show类名）
//1.获取事件源和相关元素
var a = document.getElementsByTagName("a")[0];
var div = document.getElementsByClassName("code-big")[0];
//2.绑定事件
a.onmouseover = fn1; //鼠标悬停时
a.onmouseout = fn2; //鼠标离开时
//定义方法
function fn1() {
//3.书写事件驱动程序
div.className = "code-big show";
//div.className = div.className.replace("hide", "show");
}
function fn2() {
div.className = "code-big hide";
//了解,字符串操作，把字符串中的hide替换成show。
// div.className = div.className.replace("show","hide");
}
}
</script>
</head>
<body>
<div class="code">
<a href="#"></a>
<img src="http://img.smyhvae.com/2016040102.jpg" alt="" class="code-big hide"/>
</div>
</body>
</html>
实现效果：
20180127_1800.gif
表单元素的属性
表单元素的属性包括：type、value、checked、selected、disabled等。
举例1：禁用文本框/解禁文本框
<body>
账号: <input type="text" value=""/><button>禁用</button><button>解禁</button><br><br>
密码: <input type="password" value="aaabbbccc"/>
<script>
var inp = document.getElementsByTagName("input")[0];
var btn1 = document.getElementsByTagName("button")[0];
var btn2 = document.getElementsByTagName("button")[1];
btn1.onclick = function () {
inp.disabled = "no"; //禁用文本框。属性值里随便写什么字符串都行，但不能为空。
}
btn2.onclick = function () {
inp.disabled = false; //解禁文本框。让disabled属性消失即可。
// inp.removeAttribute("disabled");
}
</script>
</body>
当文本框被禁用之后，文本框只读，不能编辑，光标点不进去。
上方代码可以看到，禁用文本框的代码是：
inp.disabled = "no"; //让disabled属性出现，即可禁用
我们的目的时让disabled这个属性出现，即可禁用。所以，属性值里可以写数字，可以写任意一个字符串，但不能写0，不能写false，不能为空。一般我们写no。
解禁文本框的代码是：
inp.disabled = false; // 方法1：让disabled属性消失，即可解禁。
inp.removeAttribute("disabled"); //方法2：推荐
我们的目的是删除disabled属性，即可解禁。属性值可以是false，可以是0。但我们一般采用方式2进行解禁。
举例2：文本框获取焦点/失去焦点
细心的读者会发现，京东和淘宝的搜索框，获取焦点时，提示文字的体验是不同的。
京东：
20180127_2000.gif
淘宝：
20180127_2005.gif
其实，淘宝的提示文字，是用一个绝对定位的单独的标签来做的。
京东是判断输入框是否获取焦点；淘宝是判断输入框内是否有用户输入的文字。
我们现在来实现一下。代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
input {
width: 300px;
height: 36px;
padding-left: 5px;
color: #ccc;
}
label {
position: absolute;
top: 82px;
left: 56px;
font-size: 12px;
color: #ccc;
cursor: text;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>
京东: <input id="inp1" type="text" value="微单相机"/><br><br>
淘宝: <label for="inp2">电动牙刷</label><input id="inp2" type="text"/><br><br>
placeholder: <input type="text" placeholder="我是placeholder"/>
<script>
//需求：京东的input按钮获取焦点后，立刻删除内容。失去后光标显示文字。
var inp1 = document.getElementById("inp1");
inp1.onfocus = function () {
//判断，如果input里面的内容是“微单相机”，那么把值赋值为“”；
if (this.value === "微单相机") {
inp1.value = "";
inp1.style.color = "#000";
}
}
//失去焦点事件
inp1.onblur = function () {
//判断：如果input内容为空，那么把内容赋值为微单相机。
if (this.value === "") {
inp1.value = "微单相机";
inp1.style.color = "#ccc";
}
}
//需求：在input中输入文字，label标签隐藏；当里面的文字变成空字符串，label显示。
var inp2 = document.getElementById("inp2");
var lab = document.getElementsByTagName("label")[0];
//2.绑定事件(输入文字、和删除文字时，都会触动这个事件)
inp2.oninput = function () {
//判断input中的值是否为空，如果为空，那么label显示，否则隐藏。
if (this.value === "") {
lab.className = "show";
} else {
lab.className = "hide";
}
}
</script>
</body>
</html>
实现效果如下：
如上方所示，我们还可以用placeholder来做，但是IE678并不支持，所以不建议使用。
举例3：用户注册信息错误时，输入框失去焦点后，高亮显示。
代码实现：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.wrong {
border: 2px solid red;
}
.right {
border: 2px solid #91B81D;
}
</style>
</head>
<body>
账号：<input type="text" onblur="fn(this)"/><br><br>
密码：<input type="password" onblur="fn(this)"/>
<script>
//需求：失去焦点的时候判断input按钮中的值，如果账号或密码在6-12个字符之间通过，否则报错。
function fn(aaa){
//html中的input标签行内调用function的时候,是先通过window调用的function，所以打印this等于打印window
// console.log(this)
//只有传递的this才指的是标签本身。
// console.log(aaa)
// console.log(this.value)
if(aaa.value.length < 6 || aaa.value.length>12){
aaa.className = "wrong";
}else{
aaa.className = "right";
}
}
</script>
</body>
</html>
代码解释：这次我们是在标签内调用function的，此时是先通过window调用的function。所以行内调用的时候要带this。
实现效果：
举例4：全选和反选
对应的代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* { padding: 0; margin: 0; } .my-table { width: 300px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 300px; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "微软雅黑"; color: #fff; } td { font: 14px "微软雅黑"; } tbody tr { background-color: #f0f0f0; } tbody tr:hover { cursor: pointer; background-color: #fafafa; } </style>
<script>
window.onload = function () { //需求1：点击上面的的input，下面全选或者反选。 //思路：获取了上面的input按钮，只需要判断，checked属性是true还是false，如果是true，下面的全部变成true；false同理。 var topInp = document.getElementById("title"); var tbody = document.getElementById("content"); var botInpArr = tbody.getElementsByTagName("input"); //绑定事件 topInp.onclick = function () { //费劲版// for(var i=0;i<botInpArr.length;i++){// if(topInp.checked === true){// botInpArr[i].checked = true;// }else{// botInpArr[i].checked = false;// }// } //优化版（被点击的input按钮的checked属性值，应该直接作为下面的所有的input按钮的checked属性值） for(var i=0;i<botInpArr.length;i++){ botInpArr[i].checked = this.checked; } } //需求2：点击下面的的input，如果下面的全部选定了，上面的全选，否则相反。 //思路：为下面的每一个input绑定事件，每点击一次都判断所有的按钮 // checked属性值是否全部都是true，如果有一个是false， // 那么上面的input的checked属性也是false;都是true，topInp的checked就是true； for(var i=0;i<botInpArr.length;i++){ botInpArr[i].onclick = function () { //每一个input都要绑定事件 //开闭原则（用开关来控制） var bool = true; //检测每一个input的checked属性值。 for(var j=0;j<botInpArr.length;j++){ if(botInpArr[j].checked === false){ bool = false; } } topInp.checked = bool; } } } </script>
</head>
<body>
<div class="my-table">
<table>
<thead>
<tr>
<th> <input type="checkbox" id="title" /> </th>
<th>菜名</th>
<th>饭店</th>
</tr>
</thead>
<tbody id="content">
<tr>
<td> <input type="checkbox" /> </td>
<td>菜品1</td>
<td>木屋烧烤</td>
</tr>
<tr>
<td> <input type="checkbox" /> </td>
<td>菜品2</td>
<td>蒸菜馆</td>
</tr>
<tr>
<td> <input type="checkbox" /> </td>
<td>菜品3</td>
<td>海底捞火锅</td>
</tr>
<tr>
<td> <input type="checkbox" /> </td>
<td>菜品4</td>
<td>面点王</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
注意代码中的注释，需求2是比较难的地方，这里用到了两次for循环。第一次for循环是因为，要给每个input都要进行绑定事件。
实现的效果如下：
