目录
1 Web API 基本认知
1.0 变量声明
变量声明有三个 var let 和 const， 我们应该用那个呢？
- 首先var 先排除，老派写法，问题很多，可以淘汰掉…
- let or const ?
建议： const 优先，尽量使用const，原因是：
const 语义化更好
-很多变量我们声明的时候就知道他不会被更改了，那为什么不用 const呢？
实际开发中也是，比如react框架，基本都用const
建议：有了变量先给const，如果发现它后面是要被修改的，再改为let
- 请问以下代码，可不可以把let 改为 const？
- const 声明的值不能更改，而且const声明变量的时候需要里面进行初始化
- 但是对于引用数据类型，const声明的变量，里面存的不是 值，不是值，不是值，是 地址。
以下代码，可不可以把let 改为 const？
1.1 Web API 作用和分类
Web API : 操作网页文档或浏览器的接口(方法)
作用: 就是使用 JS 去操作 html 和浏览器
分类：DOM (文档对象模型)、BOM（浏览器对象模型）
1.2 什么是DOM
DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API
白话文：DOM是浏览器提供的一套专门用来 操作网页内容 的功能
DOM作用 : 开发网页内容特效和实现用户交互
1.3 DOM树
DOM树:
- 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
- 描述网页内容关系的名词
- 作用：文档树直观的体现了标签与标签之间的关系
1.4 DOM对象（重要）
- DOM对象：浏览器根据html标签生成的 JS对象
- 所有的标签属性都可以在这个对象上面找到
- 修改这个对象的属性会自动映射到标签身上
-DOM的核心思想
- 把网页内容当做对象来处理
-document 对象
- 是 DOM 里提供的一个对象
- 所以它提供的属性和方法都是用来访问和操作网页内容的
- 例：document.write()
- 网页所有内容都在document里面
2 获取DOM对象
目标：能查找/获取DOM对象
提问：我们想要操作某个标签首先做什么？
- 肯定首先选中(获取)这个标签，跟 CSS选择器类似，选中标签才能操作
查找元素DOM元素就是利用 JS 选择页面中标签元素
学习路径：
1. 根据CSS选择器来获取DOM元素 (重点)
2. 其他获取DOM元素方法（了解）
2.1 根据CSS选择器来获取DOM元素 (重点)
1. 选择匹配的第一个元素
语法：
参数:
包含一个或多个有效的CSS选择器 字符串
返回值：
CSS选择器匹配的第一个元素,一个 HTMLElement对象。
- (即有多个相同的CSS选择器,默认选中第一个)
如果没有匹配到，则返回null。
多参看文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
2. 选择匹配的多个元素
语法：
参数:
包含一个或多个有效的CSS选择器 字符串
返回值：
CSS选择器匹配的NodeList 对象集合
例如：
得到的是一个伪数组：
- 有长度有索引号的数组
- 但是没有 pop() push() 等数组方法
- 想要得到里面的每一个对象，则需要遍历（for）的方式获得。
3 总结
练习 • 请控制台依次输出 3个 li 的 DOM对象
2.2 其他获取DOM元素方法（了解）
3 操作元素内容
目标：能够修改元素的文本更换内容
- DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象。
- 就是操作对象使用的点语法。
如果想要修改标签元素的里面的内容，则可以使用如下几种方式：
1. 元素innerText 属性
- 将文本内容添加/更新到任意标签位置
- 显示纯文本，不解析标签
2. 元素.innerHTML 属性
- 将文本内容添加/更新到任意标签位置
- 会解析标签，多标签建议使用模板字符
如果还在纠结到底用谁，你可以选择innerHTML
案例 年会抽奖案例
4 操作元素属性
4.1 操作元素常用属性
还可以通过 JS 设置/修改标签元素属性(固有属性)，最常见的属性比如： href、title、src、disabled(禁用) 等
语法:
注意: 元素属性可以修改,可以调用
举例:
练习 • 页面刷新，图片随机更换
4.2 操作元素样式属性
还可以通过 JS 设置/修改标签元素的样式属性。
比如通过 轮播图小圆点自动更换颜色样式
- 点击按钮可以滚动图片，这是移动的图片的位置 left 等等
4.2.1 通过 style 属性操作CSS
如:
注意：
1. 修改样式通过style属性引出
2. 如果属性有-连接符，需要转换为小驼峰命名法( 删去-,第二个词首字母大写)
3. 赋值的时候，需要的时候不要忘记加css单位
4. 样式属性可以修改, 不能调用
练习 • 页面刷新，页面随机更换背景图片
需求：当我们刷新页面，页面中的背景图片随机显示不同的图片
分析：
①： 随机函数
②： css页面背景图片 background-image
③： 标签选择body， 因为body是唯一的标签，可以直接写 document.body.style
// 随机背景图片
let num = Math.floor(Math.random() * (10 - 1)) + 1
document.body.style.backgroundImage = `url(./images/desktop_${num}.jpg)` // 随机背景颜色
let r = Math.floor(Math.random() * (255)) + 1
let g = Math.floor(Math.random() * (255)) + 1
let b = Math.floor(Math.random() * (255)) + 1
let bg = document.body
bg.style.backgroundColor = `rgb(${r},${g},${b})`4.2.2 操作类名(className) 操作CSS
注意：
1. 由于class是关键字, 所以使用className去代替(更换类名)
2. className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
总结:
1. 使用 className 有什么好处？
- 可以同时修改多个样式
2. 使用 className 有什么注意事项？
直接使用 className 赋值会覆盖以前的类名
4.2.3 通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
练习 • 轮播图随机版
需求：当我们刷新页面，页面中的轮播图会显示不同图片以及样式
模块：
①：图片会随机变换
②：底部盒子背景颜色和文字内容会变换
③：小圆点随机一个高亮显示
// 1. 初始数据
const sliderData = [
{ url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
{ url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
{ url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
{ url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
{ url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
{ url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
{ url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
{ url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
]
// 2 数组随机项
const random = Math.floor(Math.random() * (sliderData.length))
console.log(sliderData[random])
// 3 更改样式属性
// 3-1 图片
const pic = document.querySelector('.slider-wrapper img')
pic.src = sliderData[random].url
// 3-2 title
const p = document.querySelector('.slider-footer p')
p.innerHTML = sliderData[random].title
// 3-3 颜色
const bgc = document.querySelector('.slider-footer')
bgc.style.background = sliderData[random].color
// 3-4 圆点
const li = document.querySelector(`.slider-indicator li:nth-child(${random + 1})`)
li.classList.toggle('active')
// document.querySelector(`.slider-indicator li:nth-child(${random + 1})`).classList.add(`active`)
4.3 操作 表单元素 属性
表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
1 正常的有属性有取值的 跟其他的标签属性没有任何区别
- 获取: DOM对象.属性名
- 设置: DOM对象.属性名 = 新值
2 表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示
如果为true 代表添加了该属性 如果是false 代表移 除了该属性, 比如： disabled、checked、selected
console.log(input.disabled) 结果为true/false 即为表单元素已/未禁用
4.4 自定义属性
标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如： disabled、checked、selected
自定义属性：
- 在html5中推出来了专门的data-自定义属性
- 在标签上一律以data-开头
- 在DOM对象上一律以dataset对象方式获取 (不能以对象.属性的方式获取)
console.log(div.getAttribute(`data-id`)) 也可获取
5 定时器-间歇函数
5-1 定时器函数介绍
目标：能够说出定时器函数在开发中的使用场景
- 网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发
- 例如：网页中的倒计时
- 要实现这种需求，需要定时器函数
5-2 间歇函数 setInterval 基本使用
定时器函数/间歇函数/反复性定时器 可以开启和关闭定时器
与 setTimeout 区别:
- setTimeout 时间到了,就去调用这个回调函数,只调用一次,就结束了这个定时器.
- setInterval 每隔这个延时时间,就去调用这个回调函数,会调用很多次.
5-2-1 开启定时器
windows setInterval(函数,间隔时间)- window 可以省略
- 作用：每隔一段时间调用这个函数
- 间隔时间单位是毫秒 (1000ms=1s)
// 函数
function repeat() {
document.write(`多敲键盘,少掉头`)
}
// 每隔一秒调用一次repeat函数
setInterval(repeat, 1000)注意：
1. 定时器返回的是一个id数字?
2. 这个调用函数可以直接写函数，或者写函数名或者采取字符串 '函数名()' 三种形式。
3. 间隔的毫秒数省略默认是 0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。
4.因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。
5. 第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次。
5-2-2 关闭定时器
let timer = setInterval(function () {
console.log('hi')
}, 1000)
clearInterval(timer)案例 阅读注册协议
需求：按钮60秒之后才可以使用
分析：
①：开始先把按钮禁用（disabled 属性）
②：一定要获取元素
③：函数内处理逻辑 秒数开始减减 按钮里面的文字跟着一起变化 如果秒数等于0 停止定时器 里面文字变为 同意 最后按钮可以点
<script>
// 1 先禁用
let btn = document.querySelector(`.btn`)
btn.disabled = true
// 2 内容修改
let time = 3;
const agree = setInterval(function () {
//4 时间到后复原
if (time === 0) {
// 停止计时器
clearInterval(agree)
// 复原按钮
btn.disabled = false
btn.innerHTML = '我已经阅读用户协议'
}
// 3 内容变动
else {
btn.innerHTML = `我已经阅读用户协议(${time})`
time--
}
}, 1000);
</script>案例-发送短信
点击按钮后，该按钮60秒之内不能再次点击，防止重复发送短信
分析:
① 按钮点击之后，会禁用 disabled 为true
② 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改
③ 里面秒数是有变化的，因此需要用到定时器
④ 定义一个变量，在定时器里面，不断递减
⑤ 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态。
案例 轮播图定时器版
需求：每隔一秒钟切换一个图片
分析：
①：准备一个数组对象，里面包含详细信息（素材包含）
②：获取元素
③：设置定时器函数 设置一个变量++ 找到变量对应的对象 更改图片、文字信息 激活小圆点：移除上一个高亮的类名，当前变量对应的小圆点添加类
④：处理图片自动复原从头播放（放到变量++后面，紧挨） 如果图片播放到最后一张， 就是大于等于数组的长度 则把变量重置为0
扫一扫
1078
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
