1. Web APIs 和 JS 基础关联性
1.1 JS 的组成
1.2 JS 基础阶段以及 Web APIs 阶段
JS 基础阶段
- 我们学习的是 ECMAScript 标准规定的基本语法
- 要求同学们掌握 JS 基础语法
- 只学习基本语法，做不了常用的网页交互效果
- 目的是为了 JS 后面的课程打基础、做铺垫
Web APIs 阶段
- Web APIs 是 W3C 组织的标准
- Web APIs 我们主要学习 DOM 和 BOM
- Web APIs 是我们 JS 所独有的部分
- 我们主要学习页面交互功能
- 需要使用 JS 基础的课程内容做基础
JS 基础学习 ECMAScript 基础语法为后面作铺垫， Web APIs 是 JS 的应用，大量使用 JS 基础语法做交互效果
2. API 和 Web API
2.1 API
API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
简单理解：API 是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。
比如手机充电的接口：
我们要实现充电这个功能：
- 我们不关心手机内部变压器，内部怎么存储电等
- 我们不关心这个充电线怎么制作的
- 我们只知道，我们拿着充电线插进充电接口就可以充电
- 这个充电接口就是一个 API
2.2 Web API
Web API 是浏览器 提供的一套操作 浏览器功能 和 页面元素 的 API ( BOM 和 DOM )。
现阶段我们主要针对于浏览器讲解常用的 API , 主要针对浏览器做交互效果。
比如我们想要浏览器弹出一个警示框， 直接使用 alert(‘弹出’)
MDN 详细 API : https://developer.mozilla.org/zh-CN/docs/Web/API
因为 Web API 很多，所以我们将这个阶段称为 Web APIs
2.3 API 和 Web API 总结
- API 是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现
- Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。
- Web API 一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法（函数）
- 学习 Web API 可以结合前面学习内置对象方法的思路学习
1. DOM 简介
1.1 什么是 DOM
文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准 编程接口。
W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。
1.2 DOM 树
-
文档：一个页面就是一个文档，DOM 中使用 document 表示
-
元素：页面中的所有标签都是元素，DOM 中使用 element 表示
-
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示
DOM 把以上内容都看做是对象
2. 获取元素
2.1 如何获取页面元素
DOM在我们实际开发中主要用来操作元素。
我们如何来获取页面中的元素呢?
获取页面中的元素可以使用以下几种方式：
- 根据 ID 获取
- 根据标签名获取
- 通过 HTML5 新增的方法获取
- 特殊元素获取
2.2 根据 ID 获取
使用 getElementById() 方法可以获取带有 ID 的元素对象。
document.getElementById('id');
使用 console.dir() 可以打印我们获取的元素对象，更好的查看对象里面的属性和方法。
01 - getElementById获取元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01 - getElementById获取元素</title>
</head>
<body>
<div id="time">2020-6-1</div>
<script>
// 1. 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
// 2. get 获得 element 元素 by 通过 驼峰命名法
// 3. 参数 id是大小写敏感的字符串
// 4. 返回的是一个元素对象
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
// 5. console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
console.dir(timer);
</script>
</body>
</html>
2.3 根据标签名获取
使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。
document.getElementsByTagName('标签名');
注意：
1. 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
2. 得到元素对象是动态的
3. 如果获取不到元素,则返回为空的伪数组(因为获取不到对象)
还可以获取某个元素(父元素)内部所有指定标签名的子元素.
element.getElementsByTagName('标签名');
注意：父元素必须是 单个对象(必须指明是哪一个元素对象). 获取的时候不包括父元素自己。
02 - getElementsByTagName获取某些元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02 - getElementsByTagName获取某些元素</title>
</head>
<body>
<ul>
<li>知否知否，应是等你好久11</li>
<li>知否知否，应是等你好久11</li>
<li>知否知否，应是等你好久11</li>
<li>知否知否，应是等你好久11</li>
</ul>
<ol id="ol">
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
</ol>
<script>
// 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
// 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
// 3. 如果页面中只有一个li 返回的还是伪数组的形式
// 4. 如果页面中没有这个元素 返回的是空的伪数组的形式
// 5. element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
var ol = document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));
</script>
</body>
</html>
2.4 通过 HTML5 新增的方法获取
1. document.getElementsByClassName(‘类名’); // 根据类名返回元素对象集合
2. document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象
3. document.querySelectorAll('选择器'); // 根据指定选择器返回
注意：
querySelector 和 querySelectorAll里面的选择器需要加符号
比如:document.querySelector( '#nav ');
03 - H5新增获取元素方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03 - H5新增获取元素方式</title>
</head>
<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
// 1. getElementsByClassName 根据类名获得某些元素集合
var boxs = document.getElementsByClassName('box');
console.log(boxs);
// 2. querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box #nav
var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);
// 3. querySelectorAll()返回指定选择器的所有元素对象集合
var allBox = document.querySelectorAll('.box');
console.log(allBox);
var lis = document.querySelectorAll('li');
console.log(lis);
</script>
</body>
</html>
2.5 获取特殊元素（body，html）
获取body元素
1. doucumnet.body // 返回body元素对象
获取html元素
1. document.documentElement // 返回html元素对象
04 - 获取特殊元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04 - 获取特殊元素</title>
</head>
<body>
<script>
// 1.获取body 元素
var bodyEle = document.body;
console.log(bodyEle);
console.dir(bodyEle);
// 2.获取html 元素
// var htmlEle = document.html;
var htmlEle = document.documentElement;
console.log(htmlEle);
</script>
</body>
</html>
3. 事件基础
3.1 事件概述
JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。
简单理解： 触发— 响应机制。
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。
3.2 事件三要素
- 事件源 （谁）
- 事件类型 （什么事件）
- 事件处理程序 （做啥）
3.3 常见的鼠标事件
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标点击左键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
05 - 事件三要素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05 - 事件三要素</title>
</head>
<body>
<button id="btn">唐伯虎</button>
<script>
// 点击一个按钮，弹出对话框
// 1. 事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
//(1) 事件源 事件被触发的对象 谁 按钮
var btn = document.getElementById('btn');
//(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
//(3) 事件处理程序 通过一个函数赋值的方式 完成
btn.onclick = function() {
alert('点秋香');
}
</script>
</body>
</html>
06 - 执行事件步骤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06 - 执行事件步骤</title>
</head>
<body>
<div>123</div>
<script>
// 执行事件步骤
// 点击div 控制台输出 我被选中了
// 1. 获取事件源
var div = document.querySelector('div');
// 2.绑定事件 注册事件
// div.onclick
// 3.添加事件处理程序
div.onclick = function() {
console.log('我被选中了');
}
</script>
</body>
</html>
4. 操作元素
JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容 、属性等。注意以下都是属性
4.1 改变元素内容
element.innerText
从起始位置到终止位置的内容, 但它去除 html 标签， 同时空格和换行也会去掉
element.innerHTML
起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行
07 - 操作元素之改变元素内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07 - 操作元素之改变元素内容</title>
<style>
div,
p {
margin-top: 30px;
width: 300px;
height: 30px;
line-height: 30px;
color: #fff;
background-color: #2ecc71;
}
</style>
</head>
<body>
<button>显示当前系统时间</button>
<div>某个时间</div>
<p>1123</p>
<script>
// 当我们点击了按钮， div里面的文字会发生变化
// 1. 获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
// 2.注册事件
btn.onclick = function() {
// div.innerText = '2019-6-6';
div.innerHTML = getDate();
}
function getDate() {
var date = new Date();
// 我们写一个 2020年 6月 1日 星期一
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
}
// 我们元素可以不用添加事件
var p = document.querySelector('p');
p.innerHTML = getDate();
</script>
</body>
</html>
08 - innerText和innerHTML的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08 - innerText和innerHTML的区别</title>
</head>
<body>
<div></div>
<p>
我是文字
<span>123</span>
</p>
<script>
// innerText 和 innerHTML的区别
// 1. innerText 不识别html标签 非标准 去除空格和换行
var div = document.querySelector('div');
// div.innerText = '<strong>今天是：</strong> 2020';
// 2. innerHTML 识别html标签 W3C标准 保留空格和换行的
div.innerHTML = '<strong>今天是：</strong> 2020';
// 这两个属性是可读写的 可以获取元素里面的内容
var p = document.querySelector('p');
console.log(p.innerText);
console.log(p.innerHTML);
</script>
</body>
</html>
4.2 常用元素的属性操作
- innerText、innerHTML 改变元素内容
- src、href
- id、alt、title
09 - 操作元素之修改元素属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09 - 操作元素之修改元素属性</title>
<style>
img {
width: 300px;
}
</style>
</head>
<body>
<button id="chuoye">戳爷</button>
<button id="jiesen">杰森斯坦森</button> <br>
<img src="images/chuoye.jpg" alt="" title="刘德华">
<script>
// 修改元素属性 src
// 1. 获取元素
var chuoye = document.getElementById('chuoye');
var jiesen = document.getElementById('jiesen');
var img = document.querySelector('img');
// 2. 注册事件 处理程序
chuoye.onclick = function() {
img.src = 'images/chuoye.jpg';
img.title = '戳爷';
}
jiesen.onclick = function() {
img.src = 'images/jiesen.jpg';
img.title = '杰森斯坦森';
}
</script>
</body>
</html>
10 - 分时问候并显示不同图片案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10 - 分时问候并显示不同图片案例</title>
<style>
img {
width: 300px;
}
</style>
</head>
<body>
<img src="images/s.gif" alt="">
<div>上午好</div>
<script>
// 根据系统不同时间来判断，所以需要用到日期内置对象
// 利用多分支语句来设置不同的图片
// 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
// 需要一个div元素，显示不同问候语，修改元素内容即可
// 1.获取元素
var img = document.querySelector('img');
var div = document.querySelector('div');
// 2. 得到当前的小时数
var date = new Date();
var h = date.getHours();
// 3. 判断小时数改变图片和文字信息
if (h < 12) {
img.src = 'images/s.gif';
div.innerHTML = '亲，上午好，好好写代码';
} else if (h < 18) {
img.src = 'images/x.gif';
div.innerHTML = '亲，下午好，好好写代码';
} else {
img.src = 'images/w.gif';
div.innerHTML = '亲，晚上好，好好写代码';
}
</script>
</body>
</html>
11 - 操作元素之表单属性设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11 - 操作元素之表单属性设置</title>
</head>
<body>
<button>按钮</button>
<input type="text" value="输入内容">
<script>
// 1. 获取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
// 2. 注册事件 处理程序
btn.onclick = function() {
// input.innerHTML = '点击了'; 这个是 普通盒子 比如 div 标签里面的内容
// 表单里面的值 文字内容是通过 value 来修改的
input.value = '被点击了';
// 如果想要某个表单被禁用 不能再点击 disabled 我们想要这个按钮 button禁用
// btn.disabled = true;
this.disabled = true;
// this 指向的是事件函数的调用者 btn
}
</script>
</body>
</html>
12 - 仿京东显示隐藏密码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12 - 仿京东显示隐藏密码</title>
<style>
.box {
position: relative;
width: 400px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
}
.box input {
width: 370px;
height: 30px;
border: 0;
outline: none;
}
.box img {
position: absolute;
top: 2px;
right: 2px;
width: 24px;
}
</style>
</head>
<body>
<div class="box">
<label for="">
<img src="images/close.png" alt="" id="eye">
</label>
<input type="password" name="" id="pwd">
</div>
<script>
// 1. 获取元素
var eye = document.getElementById('eye');
var pwd = document.getElementById('pwd');
// 2. 注册事件 处理程序
var flag = 0;
eye.onclick = function() {
// 点击一次之后， flag 一定要变化
if (flag == 0) {
pwd.type = 'text';
eye.src = 'images/open.png';
flag = 1; // 赋值操作
} else {
pwd.type = 'password';
eye.src = 'images/close.png';
flag = 0;
}
}
</script>
</body>
</html>
13 - 操作元素之修改样式属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>13 - 操作元素之修改样式属性</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
// 1. 获取元素
var div = document.querySelector('div');
// 2. 注册事件 处理程序
div.onclick = function() {
// div.style里面的属性 采取驼峰命名法
this.style.backgroundColor = 'purple';
this.style.width = '250px';
}
</script>
</body>
</html>
14 - 关闭淘宝二维码案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>14 - 关闭淘宝二维码案例</title>
<style>
.box {
position: relative;
width: 76px;
height: 90px;
border: 1px solid #eee;
margin: 100px auto;
font-size: 12px;
text-align: center;
color: #ff5000;
/* display: block; */
}
.box span {
line-height: 22px;
}
.box img {
width: 62px;
height: 62px;
}
.close-btn {
position: absolute;
top: -1px;
left: -16px;
width: 14px;
height: 14px;
border: 1px solid #eee;
line-height: 14px;
color: #ddd;
font-family: tahoma, Arial, Helvetica, sans-serif;
cursor: pointer;
text-decoration: none;
}
</style>
</head>
<body>
<div class="box">
<span>手机淘宝</span>
<img src="images/tao.png" alt="">
<s class="close-btn">x</s>
</div>
<script>
// 1. 获取元素
var btn = document.querySelector('.close-btn');
var box = document.querySelector('.box');
// 2.注册事件 程序处理
btn.onclick = function() {
box.style.display = 'none';
}
</script>
</body>
</html>
15 - 循环精灵图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>15 - 循环精灵图</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.box {
width: 250px;
margin: 100px auto;
}
.box li {
float: left;
width: 24px;
height: 24px;
background-color: pink;
margin: 15px;
background: url(images/sprite.png) no-repeat;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
// 1. 获取元素 所有的小li
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
// 让索引号 乘以 44 就是每个li 的背景y座标 index就是我们的y座标
var index = i * 44;
lis[i].style.backgroundPosition = '0 -' + index + 'px';
}
</script>
</body>
</html>
测试
考点：获取元素
-
关于获取元素,以下描述正确的是 ( D )。
A. document.getElementById()获取到的是元素集合
B. document.getElementsByTagName()获取到的是单个元素
C. document.querySelector()获取到的是元素集合
D. document.getElementsByClassName()有浏览器兼容性问题
解析：
A选项，返回的是单个元素对象或null；
B选项返回的是元素集合；
C选项返回的单个元素对象；
D选项，是h5新增的方法，所以有浏览器兼容性问题 -
关于获取元素,以下获取到单个元素的方法是 （ A ）
A. document.getElementById()
B. document.getElementsByTagName()
C. document.querySelectorAll()
D. document.getElementsByClassName()
-
（多选）关于获取元素,以下获取到元素集合的方法是（ AD ）。
A. document.getElementById()
B. document.getElementsByClassName()
C. document.querySelector()
D. document.querySelectorAll()
考点：注册事件
-
点击一个按钮，弹出对话框，____ 应该填写的正确代码是（ A ）。
<body> <button id="btn">唐伯虎</button> <script> var btn = document.getElementById('btn'); ____________ </script> </body>A.
btn.onclick = function() {alert('点秋香');}B.
btn.onclick = alert('点秋香');C.
btn.click = function() {alert('点秋香');D.
btn.click() -
（多选题）关于事件，下列描述正确的是（ BD ）。
A. 当页面一打开，所有的事件就会被触发
B. 注册事件的格式为： 事件源.事件 = 事件处理程序
C. 一个事件只能触发执行一次
D. 事件函数内this指的是当前触发事件的元素
考点：操作元素内容
-
（多选题）关于操作元素的内容，说法正确的是（ ABC ）。
A. innerHTML可以识别渲染html标签
B. innerText不可以识别html标签
C. element.innerHTML = ‘’; 和 element.innerText = ‘’; 作用一样
D. var content = element.innerHTML; 和 var content = element.innerText; 的作用一样
解析： innerText和innerHTML的区别。修改内容时,innerHTML可以识别渲染标签，innerText不可以，所有AB选项正确。C选项，都是清空标签的内容，正确。D选项，获取内容时，innerHTML会原封不动的获取内容包括标签、空白、换行，而innerText会过滤标签、空白、换行。
-
（单选题）关于操作元素的属性，错误的是（ D ）。
A. element.id = ‘box01’;
B. element.src = ‘image/new.jpg’;
C. element.title = ‘冰冰’;
D. element.class = ‘contentLeft’;
解析： 操作元素常用属性。操作元素属性的格式为：元素对象.属性名 = 值; 但是class属性特殊，用className。
作业
1 - 输入框内容显示和隐藏（加强训练）
-
题目描述
仿世纪佳缘网，显示和隐藏输入框中的提示内容，具体表现：
1）输入框获得焦点，提示内容消失，边框变色
2）输入框失去焦点，如果内容为空，提示内容恢复，边框变色；如果内容不为空，只有边框变色
-
分析
-
给文本框注册获得焦点事件，清空value值，改变border的颜色
-
给文本框注册失去焦点事件
-
获取并判断文本框的内容
-
内容为空，恢复提示内容，边框恢复原来的颜色
-
内容不为空，边框恢复原来的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1 - 输入框内容显示和隐藏（加强训练）</title>
<style>
.input_text {
border: 1px solid #d9d9d9;
color: #aaa;
outline: none;
}
.input_text_focus {
border: 1px solid #ffd6db;
color: #888;
outline: none;
}
</style>
</head>
<body>
<div class="new_header">
<div class="new_wrap">
<div class="form_login">
<form action="" id="hder_login_form_new" method="post">
<input type="text" class="input_text" id="uname" value="邮箱/ID/手机号">
</form>
</div>
</div>
</div>
<script>
var inputObj = document.getElementById('uname');
inputObj.onfocus = function(){
if(this.value == '邮箱/ID/手机号'){
this.value = '';
this.className = 'input_text_focus';
}
}
inputObj.onblur = function(){
if(this.value == ''){
this.className = 'input_text';
this.value = '邮箱/ID/手机号';
}
}
</script>
</body>
</html>
2 - 京东关闭广告（直接隐藏即可）（加强训练）
-
题目描述
仿京东网，单击关闭广告。
-
分析
-
获取要操作的关闭按钮和广告元素
-
关闭按钮注册单击事件
-
隐藏广告元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2 - 京东关闭广告（直接隐藏即可）（加强训练）</title>
<style>
*{
margin: 0;
padding: 0;
}
.activity-top {
background: rgb(226, 66, 8);
}
.jd_container{
background: url(./images/dj.webp) no-repeat 50% 0;
width: 1190px;
height: 80px;
position: relative;
margin: auto;
}
.jd_container .jd_618 {
background: url(./images/dj_618.webp);
width: 190px;
height: 80px;
}
.jd_container .top-parts {
position: absolute;
top: 18px;
right: 30px;
height: 100%;
line-height: 80px;
}
.jd_container .top-parts a{
width: 116px;
height: 46px;
margin-right: 10px;
display: inline-block;
}
.jd_container .jd_close {
background: url(./images/dj_close.png) top/100%;
width: 20px;
height: 20px;
display: block;
position: absolute;
top: 5px;
right: 0px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="J_promtional-top">
<div class="activity-top">
<div class="jd_container">
<div class="jd_618"></div>
<div class="top-parts">
<a href="">
<img src="./images/top-parts__item1.webp" alt="">
</a>
<a href="">
<img src="./images/top-parts__item2.webp" alt="">
</a>
</div>
<i class="jd_close"></i>
</div>
</div>
</div>
<script>
var closeObj = document.querySelector('.jd_close');
var activityObj = document.querySelector('.activity-top');
closeObj.onclick = function(){
activityObj.style.display = 'none';
}
</script>
</body>
</html>
3 - 新浪下拉菜单（加强训练）
-
题目描述
仿新浪网，鼠标移入显示下拉菜单，鼠标移出隐藏下拉菜单。
-
分析
- 获取要操作的“微博”和下拉菜单元素
- 给“微博”注册鼠标移入事件，显示下拉菜单
- 给“微博”注册鼠标移出事件，隐藏下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3 - 新浪下拉菜单（加强训练）</title>
<style>
*{
margin: 0;
padding: 0;
font-size: 12px;
}
a{
text-decoration: none;
color: #333;
}
ul li{
list-style: none;
}
.top-nav {
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
background-color: #fcfcfc;
height: 40px;
}
.weibo {
width: 78px;
margin: 0 auto;
}
.weibo li i{
width: 40px;
display: inline-block;
height: 16px;
font-style: normal;
color: #4C4C4C;
padding: 12px 15px 12px 18px;
cursor: pointer;
}
.weibo li i:hover{
background-color: #EDEEF0;
color: #ff8400;
}
.arrow {
display: inline-block;
width: 8px;
height: 5px;
background: url(./images/icon.png) 0 -977px no-repeat;
margin-left: 6px;
margin-bottom: 1px;
}
.topmenulist {
display: none;
width: 78px;
box-shadow: 3px 3px 3px rgba(0, 0, 0, .1);
border: 1px solid #EBBE7A;
border-bottom: none;
border-top: none;
}
.topmenulist .nav a {
display: block;
width: 48px;
line-height: 30px;
padding: 0 15px;
border-bottom: 1px solid #fecc58;
}
.topmenulist .nav a:hover{
color: #E67902;
background: #FFF5DA;
}
</style>
</head>
<body>
<div class="top-nav">
<ul class="weibo" id="top_weibo">
<li>
<i href="">微博<span class="arrow"></span></i>
<div class="topmenulist" id="weibo_list">
<nav class="nav">
<a href="">私信</a>
<a href="">评论</a>
<a href="">@我</a>
</nav>
</div>
</li>
</ul>
</div>
<script>
var i_weibo = document.querySelector('i');
var top_weibo = document.getElementById('top_weibo');
var weibo_list = document.getElementById('weibo_list');
top_weibo.onmouseover = function(){
i_weibo.style.backgroundColor = '#EDEEF0';
weibo_list.style.display = 'block';
}
top_weibo.onmouseout = function(){
i_weibo.style.backgroundColor = '#fcfcfc';
weibo_list.style.display = 'none';
}
</script>
</body>
</html>
4 - 网页开关灯（加强训练）
-
题目描述
单击按钮，控制网页开关灯
-
分析
1.获取要操作的按钮和body元素
2.给按钮注册单击事件
3.使用全局变量记录灯的状态
4.根据灯的状态，控制body元素的背景色，实现开关灯效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4 - 开关灯案例</title>
</head>
<body>
<button id="btn">开关灯</button>
<script>
var btn = document.getElementById('btn');
var flag = 0;
btn.onclick = function() {
if (flag == 0) {
document.body.style.backgroundColor = 'black';
flag = 1;
} else {
document.body.style.backgroundColor = '#fff';
flag = 0;
}
}
</script>
</body>
</html>
