Web APIs 简介
1.Web APIs 和 JS 基础关联性
1.1 JS的组成
JavaScript：ECMAScript（JavaScript语法）、DOM(页面文档对象模型)、BOM（浏览器对象模型）
Web APIs：DOM(页面文档对象模型)、BOM（浏览器对象模型）
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的元素对象。
<div id="time">2020-12-01</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>
2.3 根据标签名获取
使用getElementByTagName()方法可以返回带有指定标签名的对象的集合
document.getElementsByTagName('标签名');
注意:
因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。得到元素对象的动态的
还可以获取某个元素(父元素)内部所有指定标签名的子元素
element.getElementsByTagName('标签名');
注意：父元素必须是单个对象(必须指明是哪一个元素对象).获取的时候不包括父元素自己
<ul>
<li>知否知否，应是等你好久</li>
<li>知否知否，应是等你好久</li>
<li>知否知否，应是等你好久</li>
<li>知否知否，应是等你好久</li>
<li>知否知否，应是等你好久</li>
<li>知否知否，应是等你好久</li>
</ul>
<ol id="ol">
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
</ol>
<script>
// 1. 返回的是 获取过来元素对象的集合 以伪数组的形式存储的
var lis = document.getElementsByTagNaem('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.getElementsByTagName('ol') // [ol]
// console.log(ol[0].getElementsByTagName('li'));
var ol = document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));
2.4 通过HTML5新增的方法获取
1. document.getElementsByClassName('类名'); // 根据类名返回元素对象集合
2. document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象
3. document.querySelectorAll('选择器'); // 根据指定选择器返回
<div class="box">盒子</div>
<div class="box">盒子</div>
<div class="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
// 1. getElementsByClassName 根据类型获取某些元素
var boxs = document.getElementsByClassName('box');
console.log(boxs);
// 2. querySlector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .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);
2.5 获取特殊元素(body,html)
**获取body元素**
1. document.body // 返回body元素对象
获取html元素
1. document.documentElement // 返回html元素对象
3.事件基础
3.1 事件概述
JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。
简单理解：触发—响应机制
网页中每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作
<button id="btn">唐伯虎</button>
<script>
// 点击一个按钮，弹出对话框
// 1. 事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
// (1) 事件源 事件被触发的对象 谁 按钮
var btn = document.getElementById('btn');
// (2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
// (3) 事件处理程序 通过一个函数赋值的方式 完成
btn.onclick = function() {
alert('点秋香');
}
</script>
3.2 执行事件的步骤
- 获取事件源
- 注册事件(绑定事件)
- 添加事件处理程序(采取函数赋值形式)
3.3 常见的鼠标事件
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标点击左键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
3.4 分析事件三要素
下拉菜单三要素
关闭广告三要素
4.操作元素
JavaScript的DOM 操作可以改变网页内容、结构和 样式，我们可以利用DOM操作元素来改变里面的内容、属性等。注意以下都是属性
4.1 改变元素内容
element.innerText
从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉
element.innerHTML
起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行
f<button id="btn">显示当前系统时间</button>
<div>某个时间</div>
<p>123</p>
<script>
// 当我们点击了按钮 div 里面的文字会发生变化
// 1. 获取元素
var btn = document.getElementById('btn');
var div = document.querySelector('div');
// 2. 注册事件
btn.onclick = function () {
// div.innerText = '2020-12-01';
div.innerText = getDate();
}
function getDate() {
// 格式化日期 年月日
var date = new Date();
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];
}
console.log(getDate());
// 我们元素可以不添加事件
var p = document.querySelector('p');
p.innerText = getDate();
</script>
innerText和innerHTML区别
<div></div>
<p>
我是文字
<span>123 </span>
</p>
<script>
// innerText和innerHTML区别
// 1. innerText 不识别html标签 非标准 去除空格和换行
var div = document.querySelector('div');
div.innerText = '<b>今天是：</b>2020'
// 2. innerHTML W3C标准 保留空格和换行
div.innerHTML = '<b>今天是：</b>2020'
// 这个两个属性是可读写的 可以获取元素里面的内容
var p = document.querySelector('p');
console.log(p.innerText);
console.log(p.innerHTML);
</script>
4.2 常用元素的属性操作
1. innerText、innerHTML 改变元素内容
2. src、href
3. id、alt、title
案例：分时显示不同图片，显示不同问候语
根据不同时间，页面显示不同图片，同时显示不同的问候语
如果上午打开页面，显示上午好，显示上午的图片
如果下午打开页面，显示下午好，显示下午的图片
如果晚上打开页面，显示晚上好，显示晚上的图片
案例分析
- 根据系统不同时间来判断，所以需要用到日期内置对象
- 利用多分支语句来设置不同 的图片
- 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
- 需要一个div元素，显示不同问候语修改元素内容即可
<img src="images/shangwu.png" alt="">
<div>上午好</div>
<script>
// 1. 获取元素
var div = document.querySelector('div');
var img = document.querySelector('img');
// 2. 得到当前的小时数
var date = new Date();
var h = date.getHours();
// 3. 判断小时数改变图片和文字信息
if (h < 12) {
img.src = 'images/images/shangwu.png';
div.innerHTML = '亲，上午好，好好写代码';
} else if (h < 18) {
img.src = 'images/xiawu.jpg';
div.innerHTML = '亲，下午好，好好写代码';
} else {
img.src = 'images/wanshang.png';
div.innerHTML = '亲，晚上好，好好写代码';
}
</script>
4.3 表单元素的属性操作
利用DOM可以操作如下表单元素的属性：
type、value、checked、selected、disabled
案例：仿京东显示密码
点击按钮将密码框切换为文本框，并可以查看密码明文。
案例分析
- 核心思路：点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码
- 一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框
- 算法：利用一个flag变量，来判断flag的值，如果是1就切换为文本框，flag设置为0，如果是0就切换为密码框，flag设置为1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿京东显示隐藏密码</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="">
</label>
<input type="password" id="pwd">
</div>
<script>
// 1. 获取元素
var img = document.querySelector('img');
var input = document.getElementById('pwd');
// 2. 注册事件 处理程序
var flag = 0;
img.onclick = function() {
// 点击一次之后，flag 一定要变化
if (flag == 0) {
input.type = 'text';
img.src = 'images/open.png';
flag = 1;
} else {
input.type = 'password';
img.src = 'images/close.png';
flag = 0;
}
}
</script>
</body>
</html>
4.4 样式属性操作
我们可以通过JS修改元素的大小、颜色、位置等样式
1. element.style 行内样式操作
2. element.className 类名样式操作
注意：
JS里面的样式采取驼峰命名法 比如 fontSize、backgroundColorJS 修改 style 样式操作，产生的是行内样式，css权重比较高
注意：
如果样式修改较多，可以采取操作类名方式更改元素样式class因为是个保留字，因此使用className来操作元素类名属性className 会直接更改元素的类名，会覆盖原先的类名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>操作元素之修改样式属性</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 = '400px';
}
</script>
</body>
</html>
案例：淘宝点击关闭二维码
当鼠标点击二维码关闭按钮的时候，则关闭整个二维码
案例分析
- 核心思路：利用样式的显示和隐藏完成，display: none;隐藏元素display: block;显示元素
- 点击按钮，就让这个二维码盒子隐藏起来即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关闭淘宝二维码案例</title>
<style>
.box {
position: relative;
width: 120px;
text-align: center;
font-size: 14px;
color: #f40;
background-color: #fff;
border: 1px solid #ccc;
margin: 100px auto;
}
.box img {
width: 100px;
}
.close-btn {
position: absolute;
top:-1px;
left: -17px;
width: 14px;
height: 14px;
line-height: 13px;
text-align: center;
font-style: normal;
border: 1px solid #ccc;
color: #ccc;
font-size: 12px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
淘宝二维码
<img src="images/tao.png" alt="">
<i class="close-btn">x</i>
</div>
<script>
// 1. 获取元素
var btn = document.querySelector('.close-btn');
var div = document.querySelector('.box');
// 2. 注册事件 程序处理
btn.onclick = function() {
div.style.display = 'none';
}
</script>
</body>
</html>
案例：循环精灵图背景
可以利用for循环设置一组元素的精灵图背景
案例分析
- 首先精灵图图片排列有规律的
- 核心思路：利用for循环 修改精灵图片的背景位置 background-position
- 剩下的就是考验你的数学功底了
- 让循环里面的i索引号*44就是每个图片的y坐标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>循环精灵图</title>
<style>
.box {
width: 266px;
margin: 200px auto;
}
li {
list-style: none;
}
ul 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');
// 2. 注册事件 程序处理
for (var i = 0; i < lis.length; i++) {
// 让索引号 * 44 就是每个li 的背景y坐标
var index = i * 44;
lis[i].style.backgroundPosition = '0 -' + index + 'px';
}
</script>
</body>
</html>
案例：显示隐藏文本框内容
当鼠标点击文本框时，里面的默认文字隐藏，当鼠标离开文本框时，里面的文字显示
案例分析
- 首先表单需要2个新事件，获取焦点 onfocus 失去焦点 onblur
- 如果获取焦点，判断表单里面内容是否为默认文字，如果是默认文字，就清空表单内容
- 如果失去焦点，判断表单内容是否为空，如果为空，则表单内容改为默认文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>显示隐藏文本框内容</title>
<style>
input {
color: #999;
outline: none;
}
</style>
</head>
<body>
<input type="text" value="手机" >
<script>
// 1. 获取元素
var text = document.querySelector('input');
// 2. 注册事件 获取焦点事件 onfocus
text.onfocus = function() {
if (this.value === '手机') {
this.value = '';
}
// 获得检点需要把文本框里面的文字颜色变黑
this.style.color = '#333';
}
// 3. 注册事件 失去焦点事件 onblur
text.onblur = function() {
if (this.value === '') {
this.value = '手机';
}
// 失去焦点需要把文本框里面的文字颜色变浅
this.style.color = '#999';
}
</script>
</body>
</html>
element.className 类名样式操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
line-height: 100px;
background-color: pink;
text-align: center;
}
.change {
background-color: purple;
color: #fff;
font-size: 24px;
margin-top: 100px;
}
</style>
</head>
<body>
<div>文本</div>
<script>
// 1. 使用element.style 获得元素修改样式 如果样式比较少 或者 功能简单的情况下使用
var div = document.querySelector('div');
div.onclick = function() {
// this.style.backgroundColor = 'purple';
// this.style.color = '#fff';
// this.style.fontSize = '24px';
// this.style.marginTop = '100px';
// 让当前元素类名改为 change
// 2. 我们可以通过修改元素的className 更改元素样式 适用于样式较多或者功能复杂的情况
// 3. 如果想要保留原先的类名 我们可以这么做
// this.className = 'change';
this.className = 'first change';
}
</script>
</body>
</html>
案例：密码框格式提示错误信息
用户如果离开密码框，里面输入个数不是6~16，则提示错误信息否则提示输入正确信息
案例分析
- 首先判断的事件是表单失去焦点onblur
- 如果输入正确则提示正确的信息颜色为绿色小图标变化
- 如果输入不是6到16位，则提示错误信息颜色为红色小图标变化
- 因为里面变化的样式较多，我们采取className修改样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿新浪注册页面</title>
<style>
.register {
width: 600px;
margin: 100px auto;
}
.message {
display: inline-block;
font-size: 12px;
color: #999;
background: url(images/mess.png) no-repeat left center;
padding-left: 20px;
}
.wrong {
color: red;
background: url(images/wrong.png) no-repeat;
}
.right {
color: green;
background: url(images/right.png) no-repeat;
}
</style>
</head>
<body>
<div class="register">
<input type="password" name="" id="" class="ipt">
<p class="message">请输入6~16位密码</p>
</div>
<script>
// 1. 获取元素
var ipt = document.querySelector('.ipt');
var message = document.querySelector('.message');
// 2. 注册事件 失去焦点
ipt.onblur = function() {
// 根据表单里面值的长度 ipt.value.length
if (this.value.length < 6 || this.value.length > 16) {
message.className = 'message wrong';
message.innerHTML = '密码位数输入有误';
} else {
message.className = 'message right';
message.innerHTML = '输入正确';
}
}
</script>
</body>
</html>
操作元素总结
操作元素是DOM核心内容
操作元素：操作元素内容、操作常见元素属性、操作表单元素属性、操作元素样式属性
作业
- 世纪佳缘 用户名 显示隐鲹内容
- 京东关闭广告(直接隐藏即可)
- 新浪下拉菜单(微博即可)
- 开关灯案例(见素材)
世纪佳缘 用户名 显示隐鲹内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>世纪佳缘用户名显示隐鲹内容</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
margin: 100px 500px;
}
.box input {
width: 120px;
height: 24px;
padding: 5px;
color: #999;
font-size: 12px;
outline-color: pink;
}
.box button {
width: 60px;
height: 24px;
background-color: rgb(18, 138, 250);
border: 0;
font-size: 12px;
color: #fff;
}
</style>
</head>
<body>
<div class="box">
<form action="" method="POST">
<input type="text" value="邮箱/ID/手机号" id="text">
<input type="password" name="" id="pwd" value="密码">
<button type="submit">登录</button>
</form>
</div>
<script>
// 1. 获取元素
var text = document.getElementById('text');
var pwd = document.getElementById('pwd');
// console.log(text,pwd);
// 2. 注册事件
text.onfocus = function () {
this.value = '';
}
text.onblur = function () {
this.value = '邮箱/ID/手机号';
}
var pd = pwd.value;
if (pd = '密码') {
pwd.type = 'text';
}
pwd.onfocus = function () {
this.value = '';
}
pwd.onblur = function () {
this.value = '密码';
}
</script>
</body>
</html>
京东关闭广告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东关闭广告</title>
<style>
.box {
position: relative;
width: 1200px;
margin: auto;
cursor: pointer;
}
.close {
position: absolute;
top: 2px;
right: 18px;
width: 20px;
height: 20px;
line-height: 14px;
text-align: center;
background-color: #2d2d2d;
font-style: normal;
font-size: 28px;
font-weight: 400;
color: #999;
opacity: 0.4;
}
.close:hover {
opacity: 1;
}
</style>
</head>
<body>
<div class="box">
<a href="#"><img src="../js笔记/第三周/images/jd.jpg" alt=""></a>
<i class="close">x</i>
</div>
<script>
// 1. 获取元素
var img = document.querySelector('img');
var close = document.querySelector('.close');
// console.log(img,close);
// 2. 注册事件 程序处理
close.onclick = function() {
img.style.display = 'none';
this.style.display = 'none';
}
</script>
</body>
</html>
新浪下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新浪下拉菜单</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
header {
height: 44px;
line-height: 40px;
background-color: rgb(240, 240, 240);
border-top: 4px solid orange;
border-bottom: 1px solid #ccc;
}
.box {
width: 1200px;
height: 40px;
margin: auto;
}
.box ul li {
position: relative;
float: right;
width: 80px;
padding: 0 15px;
font-size: 14px;
color: #4c4c4c;
}
.box ul li:hover {
background-color: rgba(0,0,0, .1);
}
.em {
position: absolute;
top: 16px;
right: 26px;
width: 6px;
height: 6px;
border-right: 2px solid red;
border-bottom: 2px solid red;
transform: rotate(45deg);
}
.box1 {
display: none;
}
.box1 ul li {
text-align: center;
border: 1px solid rgb(255, 197, 89);
margin: 0 -15px;
background-color: #fff;
}
.box1 ul li:hover {
background-color: rgb(255, 197, 89);
opacity: .5;
}
.box1 ul li:first-child {
border-top: 0;
}
</style>
</head>
<body>
<header class="header">
<div class="box">
<ul>
<li class="weibo">
微博
<em class="em"></em>
<div class="box1">
<ul>
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</div>
</li>
<li>博客</li>
<li>邮箱</li>
</ul>
</div>
</header>
<script>
// 1. 获取元素
var wb = document.querySelector('.weibo');
var box1 = document.querySelector('.box1');
// console.log(wb,box1);
// 2. 注册事件 程序处理
wb.onmouseover = function() {
box1.style.display = 'block';
}
wb.onmouseout = function() {
box1.style.display = 'none';
}
</script>
</body>
</html>
开关灯案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>开关灯案例</title>
</head>
<body>
<button class="btn">开关灯</button>
<script>
// 1. 获取元素
var body = document.body;
var btn = document.querySelector('.btn');
// 2. 注册事件 程序处理
var flag = 0;
btn.onclick = function() {
if (flag === 0) {
body.style.backgroundColor = '#000';
flag = 1;
} else {
body.style.backgroundColor = '#fff';
flag = 0;
}
}
</script>
</body>
</html>
4.5 排他思想
如果同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：
- 所有元素全部清除样式(干掉其他人)
- 给当前元素设置样式(留下我自己)
- 注意顺序不能颠倒，首先干掉其他人，再设置自己
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>排他思想</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
// 1. 获取所有的按钮元素
var btns = document.querySelectorAll('button');
for (var i = 0; i < btns.length; i++) {
btns[i].onfocus = function () {
// (1) 我们先把所有的按钮的背景颜色去掉
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
// (2) 然后才让当前的背景颜色为pink
this.style.backgroundColor = 'pink';
}
}
// 2. 首先先排除其他人，然后才设置自己的样式，这种排除其他人的思想我们称为排他思想
</script>
</body>
</html>
案例：百度换肤
案例分析
- 这个案例练习的是给一组元素注册事件
- 给4个小图片利用循环注册点击事件
- 当我们点击了这个图片，让我们页面背景改为当前的图片
- 核心算法：把当前图片的src路径取过来，给body作为背景即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度换肤效果</title>
<style>
body {
background: url(images/1.jpg) no-repeat;
background-size: 100%;
}
.baidu {
width: 450px;
height: 69px;
line-height: 68px;
text-align: center;
margin: 200px auto;
background-color: #fff;
}
.baidu li {
float: left;
margin-left: 2px;
}
li {
list-style: none;
}
.baidu img {
width: 100px;
padding-top: 3px;
}
</style>
</head>
<body>
<ul class="baidu">
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images//2.jpg" alt=""></li>
<li><img src="images//3.jpg" alt=""></li>
<li><img src="images//4.jpg" alt=""></li>
</ul>
<script>
// 1. 获取元素
var imgs = document.querySelector('.baidu').querySelectorAll('img');
// 2. 循环注册事件
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function () {
// this.src 就是我们点击图片的路径
// console.log(this.src);
// 把这个路径 this.src 给body
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
</script>
</body>
</html>
案例：表格隔行变色
案例分析
- 用到新的鼠标事件 鼠标经过 onmouseover 鼠标离开 onmouseout
- 核心思路：鼠标经过tr行，当前的行变背景颜色，鼠标离开去掉当前的背景颜色
- 注意: 第一行(thead里面的行)不需要变换颜色，因此我们获取的是tbody里面的行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格隔行变色</title>
<style>
table {
margin: 100px auto;
border-collapse: collapse;
}
thead tr {
height: 30px;
background-color: skyblue;
}
tbody tr {
height: 3px;
}
tbody td {
height: 30px;
border-bottom: 1px solid #d7d7d7;
font-size: 12px;
color: blue;
padding: 0 60px;
}
.bg {
background-color: #ccc;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>代码</th>
<th>名称</th>
<th>最新公布值</th>
<th>累计净值</th>
<th>前单位净值</th>
<th>净值增长率</th>
</tr>
</thead>
<tbody>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
</tbody>
</table>
<script>
// 1. 获取元素 获取的是 tbody 里面的行
var trs = document.querySelector('tbody').querySelectorAll('tr');
// console.log(trs);
// 2. 利用循环绑定事件
for(var i = 0; i < trs.length; i++) {
// 3. 鼠标经过事件 onmouseover
trs[i].onmouseover = function() {
this.className = 'bg';
}
// 4. 鼠标离开事件 onmouseout
trs[i].onmouseout = function() {
this.className = '';
}
}
</script>
</body>
</html>
案例：表单全选取消全选
业务需求：
- 点击上面全选复选框，下面所有的复选框都选中(全选)
- 再次点击全选复选框，下面所有的复选框都不中选(取消全选)
- 如果下面复选框全部选中，上面全选按钮就自动选中
- 如果下面复选框有一个没有选中，上面全选按钮就不选中
- 所有复选框一开始默认都没选中状态
案例分析
- **
全选和取消全选做法：**让下面所有复选框的checked属性(选中状态) 跟随全选按钮即可 - **
下面复选框需要全部选中,上面全选才能选中做法:**给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的，上面全选就不选中。 - 可以设置一个变量，来控制全选是否选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全选反选</title>
<style>
table {
margin: 100px auto;
border-collapse: collapse;
}
th,
td {
border: 1px solid #ccc;
}
thead tr {
height: 50px;
background-color: #09c;
color: #fff;
}
tbody td {
height: 50px;
background-color: #f0f0f0;
padding: 0 20px;
}
tbody td:nth-child(2) {
width: 200px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>
<input type="checkbox" name="" id="j_cbAll">
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" name="" id="">
</td>
<td>iPone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" id="">
</td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" id="">
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" name="" id="">
</td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
<script>
// 1. 全选和取消全选做法：让下面所有复选框的checked属性(选中状态) 跟随全选按钮即可
// 获取元素
var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
var j_tbs = document.getElementById('j_tb').querySelectorAll('input'); // 下面所有的复选框
// 注册事件
j_cbAll.onclick = function() {
// this.checked 它可以得到当前复选框的选中状态如果是true 就是选中 ，如果是false 就是未选中
console.log(this.checked);
for(var i = 0; i < j_tbs.length; i++) {
j_tbs[i].checked = this.checked;
}
}
// 2. 下面复选框需要全部选中,上面全选才能选中做法
for(var i = 0; i < j_tbs.length; i++) {
j_tbs[i].onclick = function() {
// flag 控制全选按钮是否选中
var flag = true;
// 每次点击下面的复选框都要循环检查4个小按钮是否全被选中
for(var i = 0; i < j_tbs.length; i++) {
if(!j_tbs[i].checked) {
flag = false;
break; // 退出for循环 这样可以提高执行效率 因为只要有一个没选中，剩下的就无需循环
}
}
j_cbAll.checked = flag;
}
}
</script>
</body>
</html>
4.6 自定义属性的操作
1.获取属性值
element.属性获取属性值- element.getAttribute(‘属性’);
区别：
element.属性获取内置属性值(元素本身自带的属性)- element.getAttribute(‘属性’) 主要获取自定义的属性(标准) 我们程序员自定义的属性
2.设置属性值
element.属性 = '值'设置内置属性值- element.setAttribute(‘属性’, ‘值’);
区别：
element.属性设置内置属性值- element.setAttribute(‘属性’); 主要设置自定义的属性(标准)
3.移除属性
- element.removeAttribute(‘属性’);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义属性操作</title>
</head>
<body>
<div id="demo" index="1"></div>
<script>
var div = document.querySelector('div');
// 1. 获取元素的属性值
// (1) element.属性
console.log(div.id);
// (2) element.getAttribute get 得到获取 attribute 属性的意思 程序员自己添加的属性称为自定义属性 index
console.log(div.getAttribute('id'));
// 2. 设置元素属性值
// (1) element.属性 = '值'
div.id = 'test';
div.className = 'navs';
// (2) element.setAttribute('属性', '值'); 主要针对于自定义属性
div.setAttribute('index', '2');
div.setAttribute('class', 'footer'); // class 特殊 这里面写的就是class 不是 className
// 3. element.removeAttribute('属性');
div.removeAttribute('index');
</script>
</body>
</html>
案例：tab栏属性切换(重点案例)
当鼠标点击上面相应的选项卡(tab), 下面内容跟随变化
案例分析
- Tab栏切换有2个大的模块
- 上面的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变(排他思想)修改类名的方式
- 下面模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。
- 规律：下面的模块显示内容和上面的选项卡一一对应，相匹配。
- 核心思路：给上面的tab_list里面的所有的小li添加自定义属性，属性值从0开始编号
- 当我们点击tab_list里面的某个小li，让tab_list里面对应序号的内容显示，其余隐藏(排他思想)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tab栏切换</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
.tab {
width: 1200px;
margin: 100px auto;
}
.tab_list {
/* overflow: hidden; */
text-align: center;
background-color: #f7f7f7;
border-bottom: 1px solid #e4393c;
}
.tab_list ul li {
float: left;
width: 160px;
height: 50px;
line-height: 50px;
color: #666;
font-size: 15px;
}
.tab_list .current {
background-color: #e4393c;
color: #fff;
}
.tab_list ul li:hover {
/* color: #e4393c; */
cursor: pointer;
}
.item {
display: none;
}
.item:nth-child(1) {
display: block;
}
.clearfix::before,
.clearfix::after {
content: '';
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list clearfix">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后服务</li>
<li>商品评价(5000)</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item">
商品介绍模块内容
</div>
<div class="item">
规格与包装模块内容
</div>
<div class="item">
售后服务模块内容
</div>
<div class="item">
商品评价(5000)模块内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
</div>
<script>
// 获取元素
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.item');
// for循环绑定点击事件
for (var i = 0; i < lis.length; i++) {
// 开始给5个小li 设置索引号
lis[i].setAttribute('index', i);
lis[i].onclick = function() {
// 1. 上面的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变(排他思想)修改类名的方式
// 干掉所有人 其余的li清除 class 这个类
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
// 留下我自己
this.className = 'current';
this.style.cursor = 'default';
// 2. 下面的显示内容模块
var index = this.getAttribute('index');
console.log(index);
// 干掉所有人 让其余的item 这些div 隐藏
for (var i = 0; i < items.length; i++ ) {
items[i].style.display = 'none';
}
// 留下我自己 让对应的item 显示出来
items[index].style.display = 'block';
}
}
</script>
</body>
</html>
4.7 H5自定义属性
自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过getAttribute(‘属性’)获取
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性
H5给我们新增了自定义属性：
1.设置H5自定义属性
H5规定自定义属性data-开头作为属性名并且赋值
比如<div data-index="1"></div>
或者使用JS设置
element.setAttribute('data-index', 2);
2.获取H5自定义属性
- 兼容性获取 element.getAttribute(‘data-index’)
- H5新增
element.data.index或者element.dateset['index']ie 11 才开始支持
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H5自定义属性</title>
</head>
<body>
<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
var div = document.querySelector('div');
// console.log(div.getTime);
console.log(div.getAttribute('getTime'));
console.log(div.getAttribute('data-list-name'));
div.setAttribute('data-time', 20);
// H5新增获取自定义属性的方法 它只能获取data-开头的
// dataset是一个集合 里面存放了以date开头的所有自定义属性
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
// 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
</script>
</body>
</html>
5.节点操作
5.1 为什么学节点操作
获取元素通常使用两种方式：
1.利用DOM提供的方法获取元素
- document.getElementById()
- document.getElementByTagName()
- document.querySeclector() 等
- 逻辑性不强、繁琐
- 利用父子兄节点关系获取元素
- 逻辑性强，但是兼容性稍差
这两种方式都可以获取元素节点，我们后面都会使用，但是节点操作更简单
5.2 节点概述
网页中的所有内容都是节点(标签、属性、文本、注释等)，在DOM中，节点使用node来表示
HTML DOM树中的所有节点均可以通过JavaScript进行访问，所有HTML元素(节点)均可被修改，也可以创建或删除。
一般地，节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性
- 元素节点 nodeType 为 1
- 属性节点 nodeType 为 2
- 文本节点 nodeType 为 3 (文本节点包含文字、空格、换行等)
我们在实际开发中，节点操作主要操作的是元素节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>节点概述</title>
</head>
<body>
<div>我是div</div>
<span>我是span</span>
<ul>
<li>我是小li</li>
<li>我是小li</li>
<li>我是小li</li>
<li>我是小li</li>
</ul>
<div class="box">
<span class="erweima">×</span>
</div>
<script>
var box = document.querySelector('.box');
console.dir(box);
</script>
</body>
</html>
5.3 节点层级
利用DOM树可以把节点划分为不同的层级关系，常见的是**父子兄层级关系**。
1.父级节点
node.parentNode
- parentNode 属性可返回某节点的父节点，注意是最近的一个父节点
- 如果指定的节点没有父节点则返回null
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>父节点操作</title>
</head>
<body>
<!-- 节点的优点 -->
<div>我是div</div>
<span>我是span</span>
<ul>
<li>我是小li</li>
<li>我是小li</li>
<li>我是小li</li>
<li>我是小li</li>
</ul>
<div class="box">
<span class="erweima">×</span>
</div>
<script>
// 1. 父节点 parentNode
var erweima = document.querySelector('.erweima');
// var box = document.querySelector('.box');
// 得到是离元素最近的父级节点 如果找不到父节点就返回为 null
erweima.parentNode;
</script>
</body>
</html>
2.子节点
1. parentNode.childNodes (标准)
parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即使更新的集合
注意：返回值里面包含了所有的子节点，包括元素节点、文本节点等
如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes
var ul = document.querySeclector('ul');
for(var i = 0; i < ul.childNodes.length; i++) {
if(ul.childNodes[i].nodeType == 1) {
// ul.childNodes[i] 是元素节点
console.log(ul.childNodes[i]);
}
}
2. parentNode.children (非标准)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子节点操作</title>
</head>
<body>
<!-- 节点的优点 -->
<div>我是div</div>
<span>我是span</span>
<ul>
<li>我是小li</li>
<li>我是小li</li>
<li>我是小li</li>
<li>我是小li</li>
</ul>
<ol>
<li>我是小li</li>
<li>我是小li</li>
<li>我是小li</li>
<li>我是小li</li>
</ol>
<div class="box">
<span class="erweima">×</span>
</div>
<script>
// DOM 提供的方法(API) 获取
var ul = document.querySelector('ul');
var lis = document.querySelectorAll('li');
// 1. 子节点 childNodes 所有的子节点 包含 元素节点 文本节点等等
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType);
console.log(ul.childNodes[1].nodeType);
// 2. children 获取所有的子元素节点
console.log(ul.children);
</script>
</body>
</html>
3. parentNode.firstChild
firstChild返回第一个子节点，找不到则返回null。同样，也是包含所有的节点
4. parentNode.lastChild
lastChild返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点
5. parentNode.firstElementChild
firstElementChild 返回第一个子元素节点，找不到则返回null。
6. parentNode.lastElementChild
lastElementChild 返回最后一个子元素节点，找不到则返回null。
注意： 这两个方法有兼容性问题，IE9以上才支持
实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而firstElementChild 和 lastElementChlid 又有兼容性问题，那么我们如何获取第一个子元素节点或者最后一个子元素节点呢？
解决方案：
如果想要第一个子元素节点，可以使用parentNode.chilren[0]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子节点-第一个子元素和最后一个子元素</title>
</head>
<body>
<ol>
<li>我是小li1</li>
<li>我是小li2</li>
<li>我是小li3</li>
<li>我是小li4</li>
</ol>
<script>
var ol = document.querySelector('ol');
// 1. firstChild 第一个子节点 不管是文本节点还是元素节点
console.log(ol.firstChild);
console.log(ol.lastChild);
// 2. firstElementChild 返回第一个子元素节点 ie9才支持
console.log(ol.firstElementChild);
console.log(ol.lastElementChild);
// 3. 实际开发的写法 既没有兼容性问题又返回第一个子元素
console.log(ol.children[0]);
console.log(ol.children[ol.children.length - 1]);
</script>
</body>
</html>
案例：下拉菜单
####案例分析
- 导航栏里面的li都要有鼠标经过效果，所以需要循环注册鼠标事件
- 核心原理：当鼠标经过li里面的第二个孩子ul显示，当鼠标离开，则ul隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新浪下拉菜单</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 100px;
}
.nav>li {
position: relative;
float: left;
width: 80px;
height: 41px;
text-align: center;
}
.nav li a {
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #FECC5B;
border-right: 1px solid #FECC5B;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.nav ul li a:hover {
background-color: #FFF5DA;
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li><a href="#">私信</a></li>
<li><a href="#">评论</a></li>
<li><a href="#">@我</a></li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li><a href="#">私信</a></li>
<li><a href="#">评论</a></li>
<li><a href="#">@我</a></li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li><a href="#">私信</a></li>
<li><a href="#">评论</a></li>
<li><a href="#">@我</a></li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li><a href="#">私信</a></li>
<li><a href="#">评论</a></li>
<li><a href="#">@我</a></li>
</ul>
</li>
</ul>
<script>
// 1. 获取元素
var nav = document.querySelector('.nav');
var lis = nav.children; // 得到4个小li
// 2. 利用循环绑定事件
for(var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function() {
this.children[1].style.display = 'block';
}
lis[i].onmouseout = function() {
this.children[1].style.display = 'none';
}
}
</script>
</body>
</html>
3.兄弟节点
1. node.nextSibling
nextSibling 返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。
2. node.previousSibling
pervousSibling 返回当前元素上一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。
3. node.nextElementSibling
nextElementSibling返回当前元素下一个兄弟元素节点，找不到返回null。
4. node.previousElementSibling
previousElementSibling 返回当前元素上一个兄弟节点，找不到则返回null。
注意：这两个方法有兼容性问题，IE9以上才支持。
问：如何解决兼容性问题？
答：自己封装一个兼容性的函数
function getNextElementSibling(element) {
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
}
5.4 创建节点
document.createElement('tagName')
document.createElement() 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。
5.4 添加节点
1. node.appendChild(child)
node.appendChild() 方法将一个节点添加到指定父节点的子节点列表**末尾**。类似于css里面的after伪元素
2. node.insertBefore(child, 指定元素)
node.insertBefore() 方法将一个节点添加到父节点的指定子节点**前面**。类似于css里面的before伪元素。
// 1. 创建元素节点
var li = document.createElement('li');
// 2. 添加节点 node.appendChild('child') node 父级 child 子级 后面追加元素 类似于数组中的 push
var ul = document.querySelector('ul');
ul.appendChild(li);
// 3. 添加节点 node.insertBefore(child, 指定元素)
var lili = document.createElement('li');
ul.insertBefore(lili, ul.children[0]);
// 4. 我们想要页面添加一个新的元素： 1. 创建元素 2. 添加元素
案例：简单版发布留言案例
案例分析:
- 核心思路：点击按钮之后，就动态创建一个li，添加到ul里面
- 创建li的同时，把文本域里面的值通过li.innerHTML赋值给li
- 如果想要把新的留言后面显示就用appendChild 如果想要前面显示就用inertBefore
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单版发布留言案例</title>
<style>
textarea {
outline-color: pink;
resize: none;
margin: 100px 0 0 100px;
}
li {
width: 300px;
height: 25px;
line-height: 25px;
background-color: pink;
color: red;
margin-top: 20px;
margin-left: 66px;
}
</style>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布</button>
<ul>
</ul>
<script>
// 1. 获取元素
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
// 2. 注册事件
btn.onclick = function () {
if (text.value == '') {
alert('您输入的内容为空哟~');
btn.disabled = true;
return false;
} else {
// (1) 创建元素
var li = document.createElement('li');
// 先有li 才能赋值
li.innerHTML = text.value;
// (2) 添加元素
// ul.appendChild(li);
ul.insertBefore(li, ul.children[0]);
}
}
</script>
</body>
</html>
5.5 节点操作
node.removeChild(child)
node.removeChild() 方法从DOM中删除一个子节点 ，返回删除的节点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>节点操作之删除节点</title>
</head>
<body>
<button>删除</button>
<ul>
<li>熊大</li>
<li>熊二</li>
<li>光头强</li>
</ul>
<script>
// 1. 获取元素
var ul = document.querySelector('ul');
var btn = document.querySelector('button');
// 2. 删除元素 node.removeChild(child)
// 3. 点击按钮依次删除里面的li
btn.onclick = function() {
if (ul.children.length == 0) {
this.disabled = true;
} else {
ul.removeChild(ul.children[0]);
}
}
</script>
</body>
</html>
案例：删除留言案例
案例分析
- 当我们把文本域里面的值赋值给li的时候，多添加一个删除的链接
- 需要把所有的链接获取过来，当我们点击当前的链接的时候，删除当前链接所在的li
- 阻止链接跳转需要添加JavaScript：void(0); 或者JavaScript:；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>删除留言案例</title>
<style>
textarea {
outline-color: pink;
resize: none;
margin: 100px 0 0 100px;
}
li {
width: 300px;
height: 25px;
line-height: 25px;
background-color: pink;
color: red;
margin-top: 20px;
margin-left: 66px;
}
li a {
float: right;
color: #fff;
text-decoration: none;
background-color: #d9534f;
border: 1px solid #d64641;
border-radius: 6px;
}
button {
background-color: #5bc0de;
border: 1px solid #49b9db;
color: #fff;
border-radius: 6px;
}
</style>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布</button>
<ul>
</ul>
<script>
// 1. 获取元素
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
// 2. 注册事件
btn.onclick = function () {
if (text.value == '') {
alert('您输入的内容为空哟~');
btn.disabled = true;
return false;
} else {
// (1) 创建元素
var li = document.createElement('li');
// 先有li 才能赋值
li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
// (2) 添加元素
// ul.appendChild(li);
ul.insertBefore(li, ul.children[0]);
// (3) 删除元素 删除的是当前链接的li 也就是它的父元素
var as = document.querySelectorAll('a');
for(var i = 0; i < as.length; i++ ) {
// node.removeChild(child); 删除的是 li 当前a所在的li this.parentNode
as[i].onclick = function() {
ul.removeChild(this.parentNode);
}
}
}
}
</script>
</body>
</html>
5.6 复制节点(克隆节点)
node.cloneNode()
node.cloneNode() 方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点
- 如果括号参数为**
空或者为false，则是浅拷贝**，即只克隆复制节点本身，不克隆里面的子节点。 - 如果括号参数为**
true，则是深度拷贝**，会复制节点本身以及里面所有的子节点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>节点操作之克隆节点</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul = document.querySelector('ul');
// 1. node.cloneNdoe() 括号内为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
// 1. node.cloneNdoe(true) 括号内为true 深拷贝 复制标签复制里面的内容
var lili = ul.children[0].cloneNode(true);
ul.appendChild(lili);
</script>
</body>
</html>
案例：动态生成表格
| 姓名 | 科目 | 成绩 | 操作 |
|---|---|---|---|
| 魏璎珞 | JavaScript | 100 | 删除 |
| 弘历 | JavaScript | 90 | 删除 |
| 傅恒 | JavaScript | 99 | 删除 |
| 明玉 | JavaScript | 89 | 删除 |
案例分析
- 因为里面的学生数据都是动态的，我们需要js动态生成。这里我们模拟数据，自己定义好数据。数据我们采取对象形式存储。
- 所有的数据都是放到tbody里面的行里面。
- 因为行很多，我们需要循环创建多个行(对应多少人)
- 每个行里面又有很多单元格(对应里面的数据)，我们还继续使用循环创建多个单元格，并且把数据存入里面(双重for循环)
- 最后一列单元格是删除，需要单独创建单元格。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态生成表格案例</title>
<style>
table {
width: 500px;
margin: 100px auto;
border-collapse: collapse;
text-align: center;
}
th,
td {
border: 1px solid #333;
}
thead tr {
height: 40px;
background-color: #ccc;
}
</style>
</head>
<body>
<table cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var datas = [{
name: '魏璎珞',
subject: 'JavaScript',
score: 100
}, {
name: '弘历',
subject: 'JavaScript',
score: 90
}, {
name: '傅恒',
subject: 'JavaScript',
score: 99
} ,{
name: '明玉',
subject: 'JavaScript',
score: 89
}];
// 2. 往tbody 里面创建行： 有几个人(通过我们数组的长度)我们就创建几行
var tbody = document.querySelector('tbody');
for (var i = 0; i < datas.length; i++) { // 外面的for循环管行 tr
// 1. 创建 tr 行
var tr = document.createElement('tr');
tbody.appendChild(tr);
// 2. 行里面创建单元格 td 单元格的数量取决于每个对象里面的属性个数 for循环遍历对象 datas[i]
for (var k in datas[i]) { // 里面的for循环单元格管列 td
// 创建单元格
var td = document.createElement('td');
// 把对象里面的属性值给td
// console.log(datas[i][k]);
td.innerHTML = datas[i][k];
tr.appendChild(td);
}
// 3. 创建有删除两个字的单元格
var td = document.createElement('td');
td.innerHTML = '<a href="javascript:;">删除</a>';
tr.appendChild(td);
}
// 删除操作 开始
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
// 点击a 删除 当前a 所在的行(链接的父元素的父元素) node.removeChild(child)
tbody.removeChild(this.parentNode.parentNode);
}
}
</script>
</body>
</html>
5.8 三种动态创建元素的区别
- document.write()
- element.innerHTML
- document.createElement()
区别
- document.write 是直接将内容写入页面的内容流，
但是文档流执行完毕，则它会导致页面全部重绘 - innerHTML 是将内容写入某个DOM节点，不会导致页面全部重绘
- innerHTML 创建多个元素效率更高(不要拼接字符串，采取数组形式拼接), 结构稍微复杂
- createElement() 创建多个元素效率稍低一点点，但是结构更清晰
总结：不同浏览器下，innerHTML效率要比createElement 高
innerHTML拼接效率
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>innerHTML拼接效率</title>
</head>
<body>
<script>
function fn() {
var d1 = +new Date();
var str = '';
for(var i = 0; i <= 100; i++) {
document.body.innerHTML = '<div style="width: 100px; height: 2px; border: 1px solid blue;></div>"'
}
var d2 = +new Date();
console.log(d2 - d1);
}
fn();
</script>
</body>
</html>
innerHTML数组效率测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>innerHTML数组效率测试</title>
</head>
<body>
<script>
function fn() {
var d1 = +new Date();
var array = [];
for ( var i = 0; i < 1000; i++) {
array.push('<div style="width: 100px; height: 2px; border: 1px solid blue;"></div>');
}
document.body.innerHTML = array.join('');
var d2 = +new Date();
console.log(d2 - d1);
}
</script>
</body>
</html>
createElement效率测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>createElement效率测试</title>
</head>
<body>
<script>
function fn() {
var d1 = +new Date();
for (var i = 0; i <=100; i++) {
var div = document.createElement('div');
div.style.width = '100px';
div.style.height = '2px';
div.style.border = '1px solid blue';
document.body.appendChild(div);
}
var d2 = +new Date();
console.log(d2 - d1);
}
</script>
</body>
</html>
6.DOM重点核心
文档对象模型(Document Object Model, 简称DOM)，是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准**编程接口**
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式
- 对于JavaScript，为了能够使JavaScript操作HTML，JavaScript就有了一套自己的dom编程接口
- 对于HTML，dom使得html形成一棵dom树，包含文档、元素、节点
我们获取过来的DOM元素是一个对象(Object)，所以称为 文档对象模型
关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改 、查 、属性操作、事件操作
6.1 创建
- document.write
- innerHTML
- createElement
6.2 增
- appendChild
- insertBefore
6.3 删
- removeChild
6.4 改
主要修改dom的元素的属性，dom元素的内容、属性、表单的值等
- 修改元素属性：src、href、title等
- 修改普通元素内容：innerHTML、innerText
- 修改表单元素：value、type、disabled等
- 修改元素的样式：style、className
6.5 查
主要获取查询dom的元素
- DOM提供的API方法：getElementById、getElementByTagNaem 古老的用法 不太推荐使用
- H5提供的新方法：querySelector、querySelectorAll 提倡
- 利用节点操作获取元素：父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling) 提倡
6.6 属性操作
主要针对于自定义属性。
- setAttribute: 设置dom的属性值
- getAttribute: 得到dom的属性值
- removeAttribute: 移除属性
6.7 事件操作
给元素注册事件，采取 事件源.事件类型=事件处理程序
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标点击左键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
事件高级
1.注册事件概述
1.1 注册事件概述
给元素添加事件，称为注册事件或者绑定事件。
注册事件有两种方式：传统方式和方法监听注册方式
传统注册方式
-
利用 on 开头的事件 onclick
-
<button onclick = “alert(‘hi~’)” ></button>
-
btn.onclick = function() {}
- 特点：注册事件的**
唯一性**
- 特点：注册事件的**
-
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
方法监听注册方式
- w3c标准 推荐方式
- addEventListener() 它是一个方法
- IE9之前的IE不支持此方法，可使用attachEvent() 代替
- 特点：同一个元素同一个事件可以注册多个监听器
- 按照注册顺序依次执行
1.2 addEventListener 事件监听方式
eventTarget.addEventListener(type,listener[,useCapture])
eventTarget.addEventListener() 方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，就会执行事件处理函数。
该方法接受三个参数：
type: 事件类型字符串，比如click、mouseover，注意这里不要带onlistener：事件处理函数，事件发生时，会调用该监听函数useCapture：可选参数，是一个布尔值，默认是false。学完DOM事件流之后，我们再进一步学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册事件的两种方式</title>
</head>
<body>
<button>传统注册事件</button>
<button>方法监听注册事件</button>
<script>
var btns = document.querySelectorAll('button');
// 1. 传统方式注册事件
btns[0].onclick = function() {
alert('hi~')
}
btns[0].onclick = function() {
alert('hao are you')
}
// 2. 事件侦听注册事件 addEventListener
// (1) 里面的事件类型是字符串 必定加引号 而且不带on
// (2) 同一个元素 同一个事件可以添加多个侦听器(事件处理程序)
btns[1].addEventListener('click', function() {
alert(22);
})
btns[1].addEventListener('click', function() {
alert(33);
})
</script>
</body>
</html>
1.3 attEvent 事件监听方式
eventTarget.attachEvent(eventNameWithOn, callback)
eventTarget.attachEvent() 方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，指定的回调函数就会被执行。
该方法接受两个参数：
eventNameWithOn: 事件类型字符串，比如onclick、onmouseover，这里要带oncallback：事件处理函数，当目标触发事件时回调函数被调用
// (3) attachEvent ie9以前的版本支持
btn[2].attachEvent('onclick', function() {
alert(11);
})
1.4 注册事件兼容性解决方案
function addEventListener(element, eventName, fn) {
// 判断当前浏览器是否支持 addEventListener 方法
if (element.addEventListener) {
element.addEventListener(eventName, fn); // 第三个参数 默认是false
} else if (element.attachEvent) {
element.attachEvent('on' + eventName, fn);
} else {
// 相当于 element.onclick = fn;
element['on' + eventName] = fn;
}
}
兼容性处理的原则：首先照顾大多数浏览器，再处理特殊浏览器
2.删除事件(解绑事件)
2.1 删除事件的方式
1.传统注册方式
eventTarget.onclick = null;
2.方法监听注册方式
- eventTarget.removeEventListener(type, listener[, useCapture]);
- eventTarget.detachEvent(eventNameWithOn, callback);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>删除事件</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
var divs = document.querySelectorAll('div');
divs[0].onclick = function() {
alert(11);
// 传统方式删除事件
divs[0].onclick = null;
}
divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号
function fn() {
alert(22);
divs[1].removeEventListener('click', fn);
}
// 3.
divs[2].attachEvent('onclick', fn1);
function fn1() {
alert(33);
}
</script>
</body>
</html>
2.2 删除事件兼容性解决方案
function removeEventListener(element, eventName, fn) {
// 判断当前浏览器是否支持 removeEventListener 方法
if (element.removeEventListener) {
element.removeEventListener(eventName, fn); // 第三个参数 默认是false
} else if (element.detachEvent) {
element.detachEvent('on' + eventName, fn);
} else {
element['on' + eventName] = null;
}
}
3.DOM事件流
**事件流**描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流
比如我们给一个div注册了点击事件：
DOM事件流分为3个阶段：
- 捕获阶段
- 当前目标阶段
- 冒泡阶段
- 事件冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程
- 事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程
我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素(目标点)的捕获过程；之后会产生泡泡，会在最低点(最具体元素)之后漂浮到水面之上，这个过程相当于事件冒泡。
注意
- JS代码中只能执行捕获或者冒泡其中的一个阶段。
- onclick 和 attachEcent 只能得到冒泡阶段。
- addEventListener(type, listener[, useCapture])第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false(不写默认就是false)，表示在事件冒泡阶段调用事件处理程序。
实际开发中我们很少使用事件捕获，我们更关注事件冒泡。有些事件是没有冒泡的，比如 noblur、onfocus、onmouseenter、onmouseleave事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件，我们后面讲解。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM 事件流三个阶段</title>
<style>
.father {
position: relative;
width: 400px;
height: 400px;
background-color: pink;
margin: 100px auto;
}
.son {
position: absolute;
top: 50%;
left: 50%;
width: 240px;
height: 240px;
line-height: 240px;
text-align: center;
color: #fff;
font-size: 24px;
background-color: purple;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="father">
<div class="son">son盒子</div>
</div>
<script>
// dom 事件流三个阶段
// 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
// 2. onclick 和 attachEvent(ie) 只能得到冒泡阶段。
// 3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段 document -> html -> body -> father -> son
// var son = document.querySelector('.son');
// son.addEventListener('click', function () {
// alert('son');
// }, true);
// var father = document.querySelector('.father');
// father.addEventListener('click', function () {
// alert('father');
// }, true);
// 4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段 son -> father -> body -> document -> html
var son = document.querySelector('.son');
son.addEventListener('click', function () {
alert('son');
}, false);
var father = document.querySelector('.father');
father.addEventListener('click', function () {
alert('father');
}, false);
document.addEventListener('click', function() {
alert('document');
});
</script>
</body>
</html>
4.事件对象
4.1 什么是事件对象
eventTarget.onclick = function(event) {}
eventTarget.addEventListener('click', function() {})
// 这个 event 就是事件对象， 我们还喜欢写成 e 或者 evt
官方解释：event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。
简单理解：事件发生后，跟事件相关的系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。
比如：
- 谁绑定了这个事件。
- 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。
4.2 事件对象的使用语法
这个event是个形参，系统帮我们设定为时间对象，不需要传递实参过去。
当我们注册事件时，event对象就会被系统自动创建，并依次传递给事件侦听器（事件处理函数）。
4.3 事件对象的兼容性方案
事件对象本身的获取存在兼容问题：
- 标准浏览器中是浏览器给方法传递的参数，只需要定义形参e就可以获取到。
- 在IE6~8中，浏览器不会给方法传递参数，如果需要的话，需要到window.event中获取查找。
解决：
e = e || window.event;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件对象</title>
</head>
<body>
<div>123</div>
<script>
// 事件对象
var div = document.querySelector('div');
div.onclick = function (e) {
console.log(e);
console.log(window.event);
e = e || window.event;
console.log(e);
}
// div.addEventListener('click', function(event) {
// console.log(event);
// });
// 1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
// 2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
// 3. 事件对象是我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息， 比如判断用户按下了那个键
// 4. 这个事件对象我们可以自己命名，比如 event、 evt、 e
// 5. 事件对象也有兼容性问题， ie678 通过 window.event 兼容性写法 e = e || window.event
</script>
</body>
</html>
4.4 事件对象的常见属性和方法
| 事件对象属性方法 | 说明 |
|---|---|
| e.target | 返回触发事件的对象 标准 |
| e.srcElement | 返回触发事件的对象 非标准 |
| e.type | 返回事件的类型 比如 click mouseover 不带on |
| e.cancelBubble | 该属性阻止冒泡 非标准 ie6-8使用 |
| e.returnValue | 该属性阻止默认事件(默认行为) 非标准 |
| e.preventDefault() | 该方法阻止默认事件(默认行为) 标准 |
| e.stopPropagation() | 阻止冒泡 标准 |
常见事件对象属性和方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常见事件对象属性和方法</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>123</div>
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
<script>
// 常见事件对象的属性和方法
// 1. e.target 返回的是触发事件的对象(元素) this 返回的是绑定事件的对象(元素)
// 区别：e.target 点击了哪个元素 就返回哪个元素 this 哪个元素绑定了点击事件那么就返回谁
var div = document.querySelector('div');
div.addEventListener('click', function(e) {
console.log(e.target);
console.log(this);
console.log(e.currentTarget);
});
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
// 我们给ul 绑定了事件 那么this就指向ul
console.log(this);
// e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击了li e.target 指向的就是li
console.log(e.target);
});
// (了解) 兼容性处理
div.onlick = function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
console.log(target);
}
// 2. 了解 跟this有个非常相似的属性 currentTarget ie678 不认识
</script>
</body>
</html>
事件对象阻止默认行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件对象阻止默认行为</title>
</head>
<body>
<div>123</div>
<a href="https://www.baidu.com">百度</a>
<form action="https://www.baidu.com">
<input type="submit" value="提交" name="sub">
</form>
<script>
// 常见事件对象属性和方法
// 1. 返回事件类型
var div = document.querySelector('div');
div.addEventListener('click', fn);
div.addEventListener('mouseover', fn);
div.addEventListener('mouseout', fn);
function fn(e) {
console.log(e.type);
}
// 2. 阻止默认行为(事件) 让链接不跳转 或者 让提交按钮不提交
var a = document.querySelector('a');
a.addEventListener('click', function(e) {
e.preventDefault();
});
// 3. 传统的注册方式
a.onclick = function(e) {
// 普通浏览器 e.preventDefault();
// e.preventDefault();
// 低版本浏览器 ie678 returnValue 属性
// e.returnValue();
// 我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点：return 后面的代码不执行了而且只限于传统的注册方式
return false;
alert(11);
}
</script>
</body>
</html>
5.阻止事件冒泡
5.1 阻止事件冒泡的两种方式
事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点
事件冒泡本身的特性，会带来坏处，也会带来好处，需要我们灵活掌握
阻止事件冒泡
- 标准写法：利用事件对象里面的 stopPropagation()方法
e.stopPropagation()
- 非标准写法：IE 6-8 利用事件对象 cancelBubble 属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>阻止事件冒泡</title>
<style>
.father {
position: relative;
width: 400px;
height: 400px;
background-color: pink;
margin: 100px auto;
}
.son {
position: absolute;
top: 50%;
left: 50%;
width: 240px;
height: 240px;
text-align: center;
color: #fff;
font-size: 24px;
line-height: 240px;
background-color: purple;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="father">
<div class="son">son盒子</div>
</div>
<script>
// 常见事件对象的属性和方法
var son = document.querySelector('.son');
son.addEventListener('click', function(e) {
alert('son');
e.stopPropagation(); // stop 停止 Propagation 传播
e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
},false);
var father = document.querySelector('.father');
father.addEventListener('click', function(e) {
alert('father');
},false);
document.addEventListener('click', function() {
alert('document');
})
</script>
</body>
</html>
6.事件委托(代理、委派)
事件冒泡本身的特性，会带来坏处，也会带来好处，需要我们灵活掌握。生活中有如下场景：
咱们班有100个学生，快递员有100个快递，如果一个个的送花费时间较长。同时每个学生领取的时候，也需要排队领取，也花费时间较长，何如？
**解决方案：快递员把100个快递，委托**给班主任，班主任把这些快递放到办公室，同学们下课自行领取即可
**优势：**快递员省事，委托给班主任就可以走了。同学们领取也方便，因为相信班主任
<ul>
<li>知否知否，应该有弹框在手</li>
<li>知否知否，应该有弹框在手</li>
<li>知否知否，应该有弹框在手</li>
<li>知否知否，应该有弹框在手</li>
<li>知否知否，应该有弹框在手</li>
</ul>
点击每个li都会弹出对话框，以前需要给每个li注册事件，是非常辛苦的，而且访问DOM的次数较多，这就会延长整个页面的交互就绪时间。
事件委托
事件委托也称为事件代理，在jQuery里面称为事件委派。
事件委托的原理
不是每个子节点单独设置事件监听器，而是事件监听器设置在父节点上，然后利用冒泡原理影响设置每个子节点
以上案例：给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器。
事件委托的作用
我们只操作了一次DOM，提高了程序的性能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件委托</title>
</head>
<body>
<ul>
<li>知否知否，点我应有弹框在手!</li>
<li>知否知否，点我应有弹框在手!</li>
<li>知否知否，点我应有弹框在手!</li>
<li>知否知否，点我应有弹框在手!</li>
<li>知否知否，点我应有弹框在手!</li>
</ul>
<script>
// 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
// alert('知否知否，点我应有弹框在手!');
// e.target 这个可以得到我们点击的对象
e.target.style.backgroundColor = 'pink';
})
</script>
</body>
</html>
7.常用的鼠标事件
7.1 常用的鼠标事件
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标点击左键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
| ondblclick | 鼠标双击时触发 |
1.禁止鼠标右键菜单
contextmenu 主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
2.禁止鼠标选中(selectstart 开始选中)
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
7.2 鼠标事件对象
event对象代表事件的状态，跟事件相关的系列信息的集合。现阶段我们主要是用鼠标事件对象MouseEvent 和键盘事件对象 KeyboardEvent。
| 鼠标事件对象 | 说明 |
|---|---|
| e.clientX | 返回鼠标相对于浏览器窗口可视区的X坐标 |
| e.clientY | 返回鼠标相对于浏览器窗口可视区的Y坐标 |
| e.pageX | 返回鼠标相对于文档页面的X坐标 IE9+ 支持 |
| e.pageY | 返回鼠标相对于文档页面的Y坐标 IE9 + 支持 |
| e.screenX | 返回鼠标相对于电脑屏幕的X坐标 |
| e.screenY | 返回鼠标相对于电脑屏幕的Y坐标 |
案例：跟随鼠标的天使
这个天使图片一直跟随鼠标移动
案例分析
- 鼠标不断的移动，使用鼠标移动事件：mousemove
- 在页面中移动，给document注册事件
- 图片要移动距离，而且不占位置，我们使用绝对定位即可
- 核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标作为图片的top和left值就可以移动图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跟随鼠标的天使</title>
<style>
img {
position: absolute;
}
</style>
</head>
<body>
<img src="images/angel.gif" alt="">
<script>
var pic = document.querySelector('img');
document.addEventListener('mousemove', function(e) {
// 1. mousemove 只要鼠标移动1px 就会触发这个事件
// console.log(1);
// 2. 核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标作为图片的top和left值就可以移动图片
var x = e.pageX;
var y = e.pageY;
// console.log('x坐标是' + x, 'y坐标是' + y);
// 3. 千万不要忘记给left和top添加px单位
pic.style.left = x - 48 + 'px';
pic.style.top = y - 40 + 'px';
})
</script>
</body>
</html>
8.常用的键盘事件
8.1 常用的键盘事件
事件除了使用鼠标触发，还可以使用键盘触发。
| 键盘事件 | 触发条件 |
|---|---|
| onkeyup | 某个键盘按键被松开时触发 |
| onkeydown | 某个键盘按键被按下时触发 |
| onkeypress | 某个键盘按键被按下时触发 但是它不识别功能键 比如 Ctrl shift 箭头等 |
注意：
1. 如果使用addEventListener不需要加on
2. onkeypress和前面2个的区别是，它不识别功能键，比如左右箭头，shift等
3. 三个事件的执行顺序是：keydown -- keypress -- keyup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常用的键盘事件</title>
</head>
<body>
<script>
// 常用的键盘事件
// 1. keyup 按键弹起的时候触发
// document.onkeyup = function() {
// console.log('我弹起啦');
// }
document.addEventListener('keyup', function() {
console.log('我弹起啦');
})
// 2. keydown 按键按下的时候触发
document.addEventListener('keydown', function() {
console.log('我按下啦down');
})
// 3. keypress 按键按下的时候触发 不能识别功能键 比如 Ctrl shift 左右箭头
document.addEventListener('keypress', function() {
console.log('我按下啦press');
})
// 4. 三个事件的执行顺序 keydown -- keypress -- keyup
</script>
</body>
</html>
8.2 键盘事件对象
| 键盘事件对象属性 | 说明 |
|---|---|
| keyCode | 返回该键的ASCII值 |
**注意：**onkeydown 和 onkeyup 不区分字母大小写，onkeypress区分字母大小写。
在我们实际开发中，我们更多的使用keydown 和 keyup ，它能识别所有的键(包括功能键)
Keypress不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>键盘事件对象之keyCode属性</title>
</head>
<body>
<script>
// 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
// 1. keyup 和 keydown 不区分字母大小写 a 和 A 得到的都是65
// 2. keypress 事件 区分字母大小写 a 97 和 A 得到的是65
document.addEventListener('keyup', function(e) {
// console.log(e);
console.log('up:' + e.keyCode);
// 我们可以利用keyCode返回的ASCII值来判断用户按下了那个键
if (e.keyCode === 65) {
alert('您按下了a键');
} else {
alert('您没有按下a键');
}
})
document.addEventListener('keypress', function(e) {
console.log('press:' + e.keyCode);
})
</script>
</body>
</html>
案例：模拟京东按键输入内容
当我们按下s键，光标就定位到搜索框
案例分析
- 核心思路：检测用户是否按下了s键，如果按下s键，就把光标定位到搜索框里面
- 使用键盘事件对象里面的keyCode判断用户按下的是否是s键
- 搜索框获得焦点：使用js里面的focus() 方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模拟京东按键输入内容</title>
</head>
<body>
<input type="text">
<script>
// 1. 核心思路：检测用户是否按下了s键，如果按下s键，就把光标定位到搜索框里面
// 2. 使用键盘事件对象里面的keyCode判断用户按下的是否是s键
// 3. 搜索框获得焦点：使用js里面的focus() 方法
var search = document.querySelector('input');
document.addEventListener('keyup', function(e) {
// console.log(e.keyCode);
if (e.keyCode === 83) {
search.focus();
}
})
</script>
</body>
</html>
案例：模拟京东快递单号查询
要求：当我们在文本框中输入内容时，文本框上面自动显示大字号的内容。
案例分析
- 快递单号输入内容时，上面的大号字体盒子(con)显示(这里面的字号更大)
- 表单检测用户输入：给表单添加键盘事件
- 同时把快递单号里面的值(value) 获取过来赋值给con盒子(innerHTML)作为内容
- 如果快递单号里面的内容为空，则隐藏大号字体(con)盒子
注意：keydown和keypress在文本框里面的特点：他们两个事件触发的时候，文字还没有落入文本框中。keyup事件触发的时候，文字已经落入文本框里面了- 当我们失去焦点，就隐藏这个con盒子
- 当我们获取焦点，并且文本框内容不为空，就显示这个con盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模拟京东快递单号查询案例</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.search {
position: relative;
width: 400px;
margin: 100px;
}
.con {
display: none;
position: absolute;
top: -42px;
left: 0;
width: 200px;
height: 30px;
line-height: 30px;
font-size: 18px;
background-color: #fff;
border: 1px solid #e6e7e6;
box-shadow: 0 6px 6px -1px rgba(0, 0, 0, .2);
margin-bottom: 12px;
padding-left: 4px;
}
.con::before {
position: absolute;
top: 28px;
left: 20px;
content: '';
width: 0;
height: 0;
border: 7px solid transparent;
border-top-color: #fff;
z-index: 99;
}
.jd {
width: 200px;
padding-left: 4px;
}
</style>
</head>
<body>
<div class="search">
<div class="con"></div>
<input type="text" placeholder="请输入您的快递单号", class="jd">
</div>
<script>
var con = document.querySelector('.con');
var jd_input = document.querySelector('.jd');
jd_input.addEventListener('keyup', function() {
console.log('输入内容');
if (this.value == '') {
con.style.display = 'none';
} else {
con.style.display = 'block';
con.innerHTML = this.value;
}
})
// 当我们失去焦点，就隐藏这个con盒子
jd_input.addEventListener('blur', function() {
con.style.display = 'none';
})
// 当我们获取焦点，并且文本框内容不为空，就显示这个con盒子
jd_input.addEventListener('focus', function() {
if (this.value !== '') {
con.style.display = 'block';
}
})
</script>
</body>
</html>
BOM 浏览器对象模型
1.BOM概述
1.1 什么是BOM
BOM(BrowserObjectModel) 即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分
DOM
-
文档对象模型
-
DOM就是把[
文档]当做一个[对象]来看待- DOM的顶级对象是**
document**
- DOM的顶级对象是**
-
ODM主要学习的是操作页面元素
-
DOM是W3C标准规范
BOM
- 浏览器对象模型
- 把[
浏览器]当做一个[对象]来看待 - BOM的顶级对象是**
window** - BOM学习的是浏览器窗口交互的一些对象
- BOM是浏览器厂商在各自浏览器上定义的，兼容性较差
1.2 BOM的构成
BOM比DOM更大，它包含DOM。
window包含document、location、navigation、screen、history
**window对象是浏览器的顶级对象，**它具有双重角色
- 它是JS访问浏览器窗口的一个接口
- 它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法
在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如alert()、prompt()等
注意：window下的一个特殊属性window.name
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BOM顶级对象window</title>
</head>
<body>
<script>
// window.document.querySelector();
var num = 10;
console.log(num);
console.log(window.num);
function fn() {
console.log(11);
}
fn();
window.fn();
// alert(11);
// window.alert(11);
console.dir(window);
// var name = 10;
console.log(window.name);
</script>
</body>
</html>
2. window对象的常见事件
2.1 窗口加载事件
window.onload = function() {}
或者
window.addEventListener('load', function() {});
window.onload是窗口(页面)加载事件，当文档内容完全加载完全会触发该事件(包括图像、脚本文件、CSS文件等)，就调用的处理函数
注意：
- 有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数
- window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准。
- 如果使用 addEventListener 则没有限制
document.addEventListener('DOMContentLoaded', function() {})
DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。
ie9以上支持
如果页面的图片很多的话，从用户访问到onload触发可能需要较长的时间，交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded事件比较合适
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>window常见事件</title>
</head>
<body>
<script>
// window.onload = function () {
// var btn = document.querySelector('button');
// btn.addEventListener('click', function () {
// alert('点击我');
// })
// }
// window.onload = fun.0ction() {
// alert(11);
// }
window.addEventListener('load', function() {
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
alert('点击我');
})
})
window.addEventListener('load', function() {
alert(22);
})
document.addEventListener('DOMContentLoaded', function() {
alert(33);
})
// load 等页面内容全部加载完毕，包含页面dom元素 图片 flash css 等等
// DOMContentLoaded 是 DOM 加载完毕，不包含图片 flash css 等就可以执行，加载速度比 load更快一些
</script>
<button>点击</button>
</body>
</html>
2.2 调整窗口大小事件
window.onresize = function() {}
window.addEventListener('resize', function() {});
window.onresize 是调整窗口大小加载事件，当触发时就调用的处理函数
注意：
- 只要窗口大小发生像素变化，就会触发这个事件
- 我们经常利用这事件完成响应式布局。window.innerWidth当前屏幕的宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>调整窗口大小事件</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<script>
window.addEventListener('load', function() {
var div = document.querySelector('div');
window.addEventListener('resize', function() {
console.log(window.innerWidth);
// alert('变化了');
if (window.innerWidth <= 800) {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
})
})
</script>
<div></div>
</body>
</html>
3.定时器
3.1 两种定时器
window对象给我们提供了两个非常好用的方法-定时器
- setTimeout()
- setInterval()
3.2 setTimeout( ) 定时器
window.setTimeout(调用函数， [延迟的毫秒数]);
setTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。
注意：
- window可以省略
- 这个调用函数可以
直接写函数，或者写函数名或者采取字符串'函数名()'三种形式。第三种不推荐 - 延迟的毫秒数省略默认是0，如果写，必须是毫秒。
setTimeout() 这个调用函数我们也称为**回调函数 callback**
普通函数是按照代码顺序直接调用。
而这个函数，**需要等待**时间，时间到了才去调用这个函数，因此称为回调函数。
简单理解：回调，就是回头调用的意思。上一件事干完，**回头再调用**这个
以前我们讲的 element.onclick = function() {} 或者 element.addEventListener(‘click’, fn); 里面的函数也是回调函数
案例：5秒钟自动关闭的广告
案例分析
- 核心思路：5秒之后，就把这个广告隐藏起来
- 用定时器setTimeout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>5秒自动关闭的广告</title>
</head>
<body>
<img src="images/ad.jpg" alt="" class="ad">
<script>
var ad = document.querySelector('.ad');
setTimeout(function(){
ad.style.display = 'none';
}, 5000)
</script>
</body>
</html>
3.3 停止setTimeout() 定时器
window.clearTimeout(timeoutID)
clearTimeout() 方法取消了先前通过调用 setTimeout() 建立的定时器
注意：
- window可以省略
- 里面的参数就是定时器的标识符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清除setTimeout定时器</title>
</head>
<body>
<button>点击停止定时器</button>
<script>
var btn = document.querySelector('button');
var timer = setTimeout(function() {
alert('爆炸！');
}, 5000)
btn.addEventListener('click', function() {
clearTimeout(timer);
})
</script>
</body>
</html>
3.4 setInterval() 定时器
window.setInterval(回调函数, [间隔的毫秒数]);
setInterval() 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数
注意：
- window可以省略
- 这个调用函数可以
直接写函数，或者写函数名或者采取字符串’函数名()'三种形式 - 间隔的毫秒数省略默认是0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数
- 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定时器之setInterval.html</title>
</head>
<body>
<script>
// 1. setInterval
// 语法规范：window.setInterval(调用函数, 延迟时间);
setInterval(function() {
console.log('继续输出');
}, 1000)
// 2. setTimeout 延迟时间到了就去调用这个函数
// 3. setInterval 每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数
</script>
</body>
</html>
案例：倒计时
案例分析
- 这个倒计时是不断变化的，因此需要定时器来自动变化(setInterval)
- 三个黑色盒子里面分别存放时分秒
- 三个盒子利用innerHTML放入计算的小时分钟秒数
- 第一次执行也是间隔毫秒数，因此刚刷新页面会有空白
- 最好采取封装函数的方式，这样可以先调用一次这个函数，防止刚开始刷星页面有空白问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倒计时</title>
<style>
div {
width: 200px;
height: 50px;
margin: 200px;
}
li {
list-style: none;
}
div ul li {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
color: #fff;
background-color: #000;
}
</style>
</head>
<body>
<div>
<ul>
<li class="hour">1:</li>
<li class="minute">2:</li>
<li class="second">3</li>
</ul>
</div>
<script>
// 1. 获取元素
var hour = document.querySelector('.hour'); // 小时的黑色盒子
var minute = document.querySelector('.minute'); // 分钟的黑色盒子
var second = document.querySelector('.second'); // 秒数的黑色盒子
var inputTime = +new Date('2020-12-19 8:00:00'); // 返回的是用户输入的时间总的毫秒数
countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白
// 2. 开启定时器
var timer = setInterval(countDown, 1000);
function countDown() {
var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
var h = parseInt(times / 60 / 60 % 24) // 计算小时
h = h < 10 ? '0' + h : h;
hour.innerHTML = h; // 把剩余的小时给小时黑色盒子
var m = parseInt(times / 60 % 60); // 计算分数
m = m < 10 ? '0' + m : m;
minute.innerHTML = m; // 把剩余的分钟给分钟黑色盒子
var s = parseInt(times % 60); // 计算当前秒数
s = s < 10 ? '0' + s : s;
second.innerHTML = s; // 把剩余的秒数给秒数黑色盒子
}
</script>
</body>
</html>
3.5 停止 setInterval() 定时器
window.clearInterval(intervalID);
clearInterval() 方法取消了先前通过调用 setInterval() 建立的定时器。
注意：
- window 可以省略
- 里面的参数就是定时器的标识符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清除setInterval定时器</title>
</head>
<body>
<button class="begin">开启定时器</button>
<button class="stop">关闭定时器</button>
<script>
var begin = document.querySelector('.begin');
var stop = document.querySelector('.stop');
var timer = null; // 全局变量 null是一个空对象
begin.addEventListener('click', function() {
var timer = setInterval(function() {
console.log('ni hao ma');
}, 1000)
})
stop.addEventListener('click', function() {
clearInterval(timer);
})
</script>
</body>
</html>
案例：发送短信
点击按钮，该按钮60秒之内不能再次点击，防止重复发生短信
案例分析
- 按钮点击之后，会禁用disabled为true
- 同时按钮里面的内容给会变化，注意button里面的内容通过innerHTML修改
- 里面秒数是有变化的，因此需要用到定时器
- 定义一个变量，在定时器里面，不断递减
- 如果变量为0说明到了时间，我们需要停止定时器，并且复原按钮初识状态。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>发送短信案例</title>
</head>
<body>
手机号码: <input type="tel" name="" id=""> <button>发送</button>
<script>
// 1. 按钮点击之后，会禁用disabled为true
// 2. 同时按钮里面的内容给会变化，注意button里面的内容通过innerHTML修改
// 3. 里面秒数是有变化的，因此需要用到定时器
// 4. 定义一个变量，在定时器里面，不断递减
// 5. 如果变量为0说明到了时间，我们需要停止定时器，并且复原按钮初识状态。
var btn = document.querySelector('button');
var time = 60;
btn.addEventListener('click', function () {
this.disabled = true;
var timer = setInterval(function () {
if (time == 0) {
// 清除定时器和复原按钮
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '发送';
time = 60; // 这个time需要重新开始
} else {
btn.innerHTML = '还剩下' + time + '秒'
time--;
}
}, 1000)
})
</script>
</body>
</html>
3.6 this
this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>this指向问题</title>
</head>
<body>
<button>点击</button>
<script>
// this指向问题 一般情况下this的最终指向的是那个调用它的对象
// 1. 全局作用域或者普通函数中this指向全局对象window (注意定时器里面的this指向window)
console.log(this);
function fn() {
console.log(this);
}
window.fn();
setInterval(function() {
console.log(this);
}, 1000)
// 2. 方法调用中谁调用this指向谁
var o = {
sayHi: function() {
console.log(this); // this指向的是 o 这个对象
}
}
o.sayHi();
var btn = document.querySelector('button');
btn.onclick = function() {
console.log(this); // this指向的是btn这个按钮对象
}
btn.addEventListener('click', function() {
console.log(this); // this指向的是btn这个按钮对象
})
// 3. 构造函数中this指向构造函数的实例
function Fun() {
console.log(this); // this 指向的是fun 实例对象
}
var fun = new Fun();
</script>
</body>
</html>
4.JS执行机制
4.1 JS是单线程
JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为JJavaScript这门脚本语言诞生的使命所致–JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。
单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是：如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。
4.2 一个问题
以下代码执行的结果是什么
console.log(1);
setTimeout(function() {
console.log(3);
}, 1000)
console.log(2);
为了解决这个问题，利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程。于是，JS中出现了同步和异步。
同步
前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法：我们要烧水煮饭，等水开了(10分钟之后)，再去切菜，炒菜。
异步
你在做一件事时，因为这件事情会花费很长时间，在做这件事情的同时，你还可以去处理其他的事情，比如做法的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。
他们的本质区别：这条流水线上各个流程的执行顺序不同。
4.3 同步和异步
同步任务
同步都在主线程上执行，形成一个**执行栈**
异步任务
JS的异步是通过回调函数实现的。
一般而言，异步任务有以下三种类型；
- 普通事件，如click、resize等
- 资源加载，如load、error等
- 定时器，包括setInterval、setTimeout等
异步任务相关回调函数添加到**任务队列**中(任务队列也称为消息队列)
4.4 JS执行机制
- 先执行
执行栈中的同步任务。 - 异步任务(回调函数)放入
任务队列中。 - 一旦执行栈中是所有同步任务执行完毕，系统就会按次序读取
任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。 - 由于主线程不断的重复获得任务、执行任务、再获取任务、再执行、所以这种机制被称为**
事件循环( event loop )**。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS执行队列</title>
</head>
<body>
<script>
// 第一个问题
console.log(1);
setTimeout(function() {
console.log(3);
}, 1000)
console.log(2);
// 2. 第二个问题
console.log(1);
setTimeout(function() {
console.log(3);
}, 0)
console.log(2) ;
</script>
</body>
</html>
console.log(1);
document.onclick = function() {
console.log('click');
}
console.log(2);
setTimeout(function(){
console.log(3);
}, 3000)
5.location对象
5.1 什么是location对象
window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。
5.2 URL
统一资源定位符（Uniform Resource Locator，URL）是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
URL的一般语法格式为：
protocol://host:[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link
| 组成 | 说明 |
|---|---|
| protocol | 通信协议 常用的http，ftp，maito等 |
| host | 主机（域名） www.itheima.com |
| port | 端口号 可选，省略时使用方案的默认端口 如http的默认端口为80 |
| path | 路径 由 零或多个‘/’符号隔开的字符串，一般用来表示主机上的一个目录或文件地址 |
| query | 参数 以键值对的形式，通过&符号分隔开来 |
| fragment | 片段 #后面内容 常见于链接 锚点 |
5.3 location对象的属性
| location对象属性 | 返回值 |
|---|---|
| location.href | 获取或者设置 整个URL |
| location.host | 返回主机（域名）www.itheima.com |
| location.port | 返回端口号 如果未写返回 空字符串 |
| location.pathname | 返回路径 |
| location.search | 返回参数 |
| location.hash | 返回片段 #后面内容 常见与链接 锚点 |
重点记住：href 和 search
案例：5秒钟之后自动跳转页面
案例分析
- 利用定时器做倒计时效果
- 时间到了，就跳转页面。使用location.href
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>点击</button>
<div></div>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.addEventListener('click', function () {
// console.log(location.href);
location.href = 'http://www.itcast.cn';
})
var time = 5;
var timer = setInterval(fn, 1000)
function fn() {
if (time == 0) {
location.href = 'http://www.itcast.cn';
} else {
div.innerHTML = '将在' + time + '秒钟之后跳转到首页';
time--;
}
}
fn();
</script>
</body>
</html>
案例：获取URL参数数据
主要练习数据在不同页面中的传递。
案例分析
- 第一个登陆页面，里面有提交表单，action提交到index.html页面
- 第二个页面，可以使用第一个页面的参数，这样实现了一个数据不同页面之间的传递效果
- 第二个页面之所以可以使用第一个页面的数据，是利用了URL里面的location.search参数
- 在第二个页面中，需要把这个参数提取
- 第一步去掉？利用substr
- 第二部 利用=号分割键和值 split（‘= ’）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="index.html">
用户名：<input type="text" name="uname">
<input type="submit" value="登录">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<script>
console.log(location.search); // ?uname=andy
// 1. 先去掉? substr('起始的位置', 截取几个字符);
var params = location.search.substr(1); // uname=andy
console.log(params);
// 2. 利用等号把字符串分割为数组 split('=');
var arr = params.split('=');
console.log(arr);
var div = document.querySelector('div');
// 3. 把数据写入div中
div.innerHTML = arr[1] + '欢迎您';
</script>
</body>
</html>
5.4 location对象的方法
| location对象方法 | 返回值 |
|---|---|
| location.assign() | 跟href一样，可以跳转页面（也称为重定向页面） |
| location.replace() | 替换当前页面，因为不记录历史，所以不能后退页面 |
| location.reload() | 重新加载页面，相当于刷新按钮或者f5 如果参数为true 强制刷新 ctrl+f5 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>location常见的方法</title>
</head>
<body>
<button>点击</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
// 记录浏览历史，所以可以实现后退功能
// location.assign('http://www.itcast.cn');
// 不记录浏览历史，所以不可以实现后退功能
// location.replace('http://www.itcast.cn');
location.reload();
})
</script>
</body>
</html>
6.navigator对象
navigator对象包含有关浏览器的信息，它有很多属性，我们最常用的是userAgent，该属性可以返回有客户发送服务器的user-agent头部的值。
下面前端代码可以判断用户那个终端打开页面，实现跳转
if ((navigator.userAgent.match(/(phone|pad|iPone|iPod|ios|iPad|Androdi|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|WOSBRowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
window.location.href = ""; // 手机
} else {
window.location.href = ""; // 电脑
}
7.history对象
window对象给我们提供了一个history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL
| history对象方法 | 作用 |
|---|---|
| back（） | 可以后退功能 |
| forward（） | 前进功能 |
| go（参数） | 前进后退功能 参数如果是 1 前进一个页面 如果是-1后退一个页面 |
history对象一般在实际开发中比较少用，但是会在一些OA办公系统中见到。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="list.html">点击我去往列表页</a>
<button>前进</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
// history.forward();
history.go(1);
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="index.html">点击我去往首页</a>
<button>后退</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
// history.back();
history.go(-1);
})
</script>
</body>
</html>
467
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
