任务1：焦点事件
任务要求：
验证用户名和密码是否为空。
效果如下图所示：
任务分析：
在页面创建一个表单，用于填写用户名和密码，然后注册失去焦点事件 ，在失去焦点时进行表单验证。
任务实现：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="login.css">
</head>
<body>
<div id="tips"></div>
<div class="box">
<label>用户名：<input type="text" id="user"> </label>
<label>密码：<input type="password" id="pwd"> </label>
<button type="button">登录</button>
</div>
<script>
var tips = document.getElementById("tips");
document.getElementById("user").onblur = blur;
document.getElementById("pwd").onblur = blur;
//失去焦点时执行的函数
function blur() {
if (this.value === "") {
tips.style.display = "block";
tips.innerHTML = "注意：输入内容不能为空！";
} else {
tips.style.display = "none";
}
}
</script>
</body>
</html>
CSS文件下载：
任务2：文本框内容的显示和隐藏
任务要求：
本任务实现一个文本框添加提示文本，当单击文本框时，里面的默认提示文字会隐藏，当鼠标指针离开文本框时，里面的文字会显示出来。
效果如下图所示：
任务分析：
1、为文本框元素注册获取焦点事件focus和失去焦点事件blur.
2、获取焦点时，判断文本框里面的内容是否为默认文字“手机”,如果是默认文字，就清空表单内容。
3、失去焦点时，判断文本框里面的内容是否为空，如果为空，则将表单里面的内容改为默认文字“手机”。
任务实现：
<body>
<input type="text" value="手机" style="color: #999;">
<script>
var text = document.querySelector("input");
text.onfocus = function () { //注册获得焦点事件focus
if (this.value == "手机") {
this.value = "";
}
this.style.color = "#333";
};
text.onblur = function () { //注册失去焦点事件blur
if (this.value == "") {
this.value = "手机";
}
this.style.color = "#999"; //失去焦点需要把文本框里面的文字颜色变浅
};
</script>
</body>
任务3：鼠标事件
任务要求：
在一个展示金融信息的页面中，有一个统计债券相关数据的表格。当用户使用鼠标指针移入表格时，鼠标指针所在行的背景颜色会发生变化。
效果如下图所示：
任务分析：
1、定义一个统计债券相关数据的表格
2、利用for语句为trs中的每一个元素注册事件，当鼠标指针移入时将当前tr元素的类名设置为bg，用于设置背景颜色；当鼠标指针移出时将当前tr元素的类名设置为空，从而去掉背景颜色。
任务实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bg {
background-color: pink;
}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>代码</th>
<th>名称</th>
<th>最新公布净值</th>
<th>累计净值</th>
<th>前单位净值</th>
<th>净值增长率</th>
</tr>
</thead>
<tbody>
<tr>
<td>0035*</td>
<td>3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>0035*</td>
<td>3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>0035*</td>
<td>3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>0035*</td>
<td>3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>0035*</td>
<td>3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
</tbody>
</table>
<script>
var trs = document.querySelector("tbody").querySelectorAll("tr");
for (var i = 0; i < trs.length; i++) {
trs[i].onmouseover = function () {
this.className = "bg";
};
trs[i].onmouseout = function () {
this.className = "";
}
}
</script>
</body>
</html>
任务4：下拉菜单
任务要求：
下拉菜单是网页中的常见结构之一，当鼠标指针移入下拉菜单中的某一项时，显示该项的子菜单；当鼠标指针移出所在项时，隐藏子菜单。
效果如下图所示：
任务分析：
1、编写页面布局：编写HTML代码搭建页面的整体布局。
2、实现鼠标指针移入、移出的效果：首先获取元素节点，然后为获取的每个元素节点注册鼠标移入和移出事件，最后在事件处理函数中，设置子菜单的显示和隐藏。
任务实现：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="nav.css">
</head>
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul style="display: none;">
<li><a href="#">私信</a></li>
<li><a href="#">评论</a></li>
<li><a href="#">@我</a></li>
</ul>
</li>
<li>
<a href="#">留言板</a>
<ul style="display: none;">
<li><a href="#">私信</a></li>
<li><a href="#">评论</a></li>
<li><a href="#">@我</a></li>
</ul>
</li>
<li>
<a href="#">电话</a>
<ul style="display: none;">
<li><a href="#">私信</a></li>
<li><a href="#">评论</a></li>
<li><a href="#">@我</a></li>
</ul>
</li>
<li>
<a href="#">邮箱</a>
<ul style="display: none;">
<li><a href="#">私信</a></li>
<li><a href="#">评论</a></li>
<li><a href="#">@我</a></li>
</ul>
</li>
</ul>
<script>
var nav = document.querySelector(".nav");
var lis = nav.children;
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseenter = function () {
this.children[1].style.display = "block";
};
lis[i].onmouseleave = function () {
this.children[1].style.display = "none";
}
}
</script>
</body>
</html>
CSS样式文件下载：
任务5：键盘事件
任务要求：
创建一个表单，表单中有4个文本框，当用户填写完成第1个文本框内容后，按“Enter”键可以自动跳转到第2个文本框。
效果如下图所示：
任务分析：
1、定义文本框
2、遍历文本框，为每个文本框注册keydown事件
3、编写事件处理函数，判断当前按的按键是否为“Enter”键，通过查阅虚拟键码对照表可知，“Enter”键的虚拟码为13，计算当前触发事件的文本框的索引，计算下一个文本框的索引。
4、使下一个文本框激活，从而获得键盘焦点。
任务实现：
<body>
<p>用户姓名：<input type="text"></p>
<p>电子邮箱：<input type="text"></p>
<p>手机号码：<input type="text"></p>
<p>个人描述：<input type="text"></p>
<script>
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].onkeydown = next;
}
function next(e) {
//判断按的按键是否为“Enter”键，“Enter”键的键码为13
if (e.keyCode === 13) {
//遍历所有input元素，找到当前input元素的索引
for (var i = 0; i < inputs.length; i++) {
if (inputs[i] === this) {
//计算下一个input元素的索引
var index = i + 1 >= inputs.length ? 0 : i + 1;
break;
}
}
//如果下一个input元素还是文本框，则获取键盘焦点
if (inputs[index].type === "text") {
inputs[index].focus(); //触发focus事件
}
}
}
</script>
</body>
任务6：表单事件
任务要求：
页面中定义一个表单，用于填写用户名，以及一个“提交”按钮。表单提交时，判断用户名文本框内容是否为空，如果为空，则提示“请填写用户名！”并阻止表单提交。
效果图下图所示：
任务分析：
1、定义包含文本框和提交按钮的表单
2、为表单注册提交事件，判断用户名是否为空。
任务实现：
<body>
<form action="" id="form">
<label>用户名：<input type="text" id="user"></label>
<input type="submit" value="提交">
</form>
<script>
var form = document.getElementById("form");
var user = document.getElementById("user");
form.onsubmit = function () {
if (user.value == "") {
alert("请填写用户名！");
return false;
}
}
</script>
</body>
原创视频
