WebApi阶段学习什么？
WebApi是浏览器提供的一组接口
使用 JavaScript 去操作页面文档 和 浏览器
什么是 API
API: 应用程序接口（Application Programming Interface）
接口：本质上就是各种函数，无需关心内部如何实现，程序员只需要调用就可以很方便实现某些功能
作用：开发人员使用 JavaScript提供的接口来操作网页元素和浏览器
如何学习API
阶段课程递进
今日内容
| 描述 | 属性/方法 | 效果 |
| 获取DOM对象 | document.querySelector() | 获取指定的第一个元素 |
| document.querySelectorAll() | 获取指定的所有元素 | |
| 操作元素内容 | 元素.innerText | 操作元素内容，不解析标签 |
| 元素.innerHTML | 操作元素内容，解析标签 | |
| 操作元素样式 | 元素.style.width | 通过style操作样式 |
| 元素.className | 通过类名操作样式 | |
| 元素.classList.add() | 增加类名 | |
| 元素.classList.remove() | 删除类名 | |
| 元素.classList.toggle() | 切换类名 | |
| 间隔函数 | setInterval(function() {}, 1000) | 定时器，每隔指定时间重复执行 |
DOM简介
DOM（Document Object Model——文档对象模型）
作用：DOM用来 操作网页文档，开发网页特效和实现用户交互
DOM的核心思想就是把网页内容当做对象来处理，通过对象的属性和方法对网页内容操作
document 对象
document对象是DOM顶级对象，是网页内容的入口
document对象中提供的属性和方法都是用来访问和操作网页内容的
例：document.write()
获取DOM元素
想要操作页面元素，那我们需要先利用DOM方式来获取（选择）这个元素
方式有2种：
选择匹配的第一个元素（重点）
语法：
const box = document.querySelector('div')// 总结：
const box = document.querySelector('css选择器')参数:
包含一个或多个有效的CSS选择器字符串
返回值：
CSS选择器匹配的第一个元素对象
如果没有匹配到，则返回 null
多参看文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
// 利用css选择器来获取DOM元素
// 1. document.querySelector() 选择指定css选择器的第一个元素
// 1.1 参数是字符串的css选择器
const box = document.querySelector('div')
console.log(box)// 1.2 返回值是dom对象
console.log(typeof box) // object
console.dir(box)const box = document.querySelector('.box')
console.log(box)const li = document.querySelector('ul li')
console.log(li) // 只选择满足条件的第一个元素liconst li = document.querySelector('ul li:nth-child(2)')
console.log(li) // 选择第2个小li// 1.3 如果获取不到则返回 null
const p = document.querySelector('p')
console.log(p) // null随堂练习
请使用document.querySelector获取如下三个li对象输出在控制台中 :
- 【我的首页】 - 使用 .nav li:first-child 选择器
- 【公司简介】 - 使用 .nav li:last-child 选择器
- 【联系方式】 - 使用 .nav li:nth-child(3) 选择器
选择匹配的多个元素对象
语法：
const lis = document.querySelectorAll('div')参数:
包含一个或多个有效的CSS选择器 字符串
返回值：
CSS选择器匹配的NodeList 伪数组
哪怕满足条件的元素只有一个，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已
// 2. document.querySelectorAll() 选择指定css选择器的所有元素
// 2.1 参数还是字符串的css选择器
const lis = document.querySelectorAll('.nav li')// 2.2 返回值是一个伪数组里面包含了所有的dom对象 li
console.log(lis)// 2.3 伪数组
// (1) 有长度和索引号
// (2) 没有数组的一些常用方法 比如 push pop splice等方法
// lis.push(1)
// console.log(lis) // 因为lis是伪数组无法使用push方法所以报错// 2.4 利用循环遍历伪数组得到里面的每一个元素对象
for (let i = 0; i < lis.length; i++) {console.log(lis[i]) // 里面的每一个元素对象
}// 2.5 即使只有1个元素，我们querySelectorAll 获得的也是一个伪数组，里面只有1个元素而已
const boxs = document.querySelectorAll('.box')
console.log(boxs)伪数组
伪数组：有长度，有索引号的数组，但是没有 pop() push() 等数组方法
想要得到里面的每一个对象，则需要遍历（for）的方式获得
const lis = document.querySelectorAll('.nav li')let newLis = []for(let i =0;i<lis.length;i++){newLis.push(lis[i])}console.log(newLis)随堂练习
请在控制台输出 6个 li 的 DOM对象
<body><ul class="nav"><li>我的首页</li><li>产品介绍</li><li>联系方式</li></ul><ol class="nav"><li>一级标题</li><li>二级标题</li><li>三级标题</li></ol></body>其他方式(了解)
querySelector 和 querySelectorAll这些方法在 IE 8浏览器 开始才得到支持。
像IE6等老式浏览器的写法如下：
| 语法 | 实例 | 描述 |
| getElementById | document.getElementById('box') | 根据id获取元素，单个元素 |
| getElementsByTagName | document.getElementsByTagName('li') | 根据标签名获取元素，伪数组 |
| getElementsByClassName | document.getElementsByClassName('one') | 根据类名获取元素，伪数组 |
| getElementsByName | document.getElementsByName('sex') | 根据name属性值获取元素，伪数组 |
// 1. getElementById 根据id获取
const box = document.getElementById('box')
console.log(box)// 2. getElementsByClassName 根据类名获取 返回伪数组
const items = document.getElementsByClassName('item')
console.log(items)// 3. getElementsByTagName 根据标签名获取 返回伪数组
const ps = document.getElementsByTagName('p')
console.log(ps)// 4. getElementsByName 根据name属性获取 返回伪数组
const inputs = document.getElementsByName('username')
console.log(inputs)
操作元素内容
DOM对象可以操作页面标签，所以本质上就是操作DOM对象（增删改查）
如果想要操作标签元素的内容，则可以使用如下2种方式：
1.对象.innerText 属性
2.对象.innerHTML 属性
innerText
元素.innerText 属性作用："渲染"文本内容到标签里面
基本语法
// 第一步：先获取到元素对象
const 元素对象 document.querySelector('css选择器')
// 第二步：元素对象.innerText操作元素对象的内容
1. 获取元素内容：元素对象.innerText
2. 新增或修改元素内容：元素对象.innerText = 新内容
3. 如果要删除元素对象的内容：元素对象.innerText = ''举例说明：
注意点：innerText只显示纯文本，不解析html标签
innerText将文本内容添加/更新到任意标签位置，文本中包含的标签不会被解析。
<script>// 操作DOM元素内容// 1. 对象.innerText 增删改查// 1.1 查console.log(box.innerText) // 古丽扎娜// 1.2 改box.innerText = '迪丽热巴'// 1.3 增const box1 = document.querySelector('.box1')console.log(box1)box1.innerText = '佟丽丫丫'// 1.4 删 给空字符串可以删除内容box.innerText = ''box1.innerText = ''
</script>
innerHTML
元素.innerHTML 属性作用："渲染"文本内容到标签里面
基本语法
// 第一步：先获取到元素对象
const 元素对象 document.querySelector('css选择器')
// 第二步：元素对象.innerHTML操作元素对象的内容
1. 获取元素内容：元素对象.innerHTML
2. 新增或修改元素内容：元素对象.innerHTML = 新内容
3. 如果要删除元素对象的内容：元素对象.innerHTML = ''举例说明：
innerHTML将文本内容添加/更新到任意标签位置，文本中包含的标签会被解析。
<script>const box = document.querySelector('.box1')// 2. 对象.innerHTML 会解析标签box.innerHTML = '<strong>迪丽热巴</strong>'
</script>
注意：innerHTML属性，文本中包含的标签会被解析
总结：如果文本内容中包含 html 标签时推荐使用 innerHTML，否则建议使用 innerText 属性。
年会抽奖案例
图片素材下载：
images.rar
需求：当网页打开后，从数组 ['迪丽热巴', '古丽扎娜', '佟丽丫丫', '马尔扎哈'] 中随机抽取一等奖、二等奖和三等奖，显示到网页对应的标签里面
功能约定：
①：页面刷新，随机抽取数组中的获奖姓名
②：不允许重复得奖(一旦数组中的名字已经得奖，则此名字不再参与后面的抽奖)
技术实现分析：
①：一等奖: 随机生成一个数字（0~数组长度）表示数组下标，根据下标找到对应数组的名字
②：通过innerText 或者 innerHTML 将名字写入span元素内部
③：因为不允许重复抽奖，所以抽取一等奖的姓名要使用 splice方法将其从数组中删除
④： 二等奖、三等奖依次类推 ①②③同样操作
效果：刷新浏览器，随机出现不同的抽奖名单
请拷贝如下静态结构到html中，然后开始编写js逻辑代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>年会抽奖</title><style>.wrapper {width: 840px;height: 420px;background: url(./images/bg01.jpg) no-repeat center / cover;padding: 100px 250px;box-sizing: border-box;}.wrapper span {color: #b10e0d;}</style></head><body><div class="wrapper"><strong>年会抽奖</strong><h1>一等奖：<span class="one">???</span></h1><h3>二等奖：<span class="two">???</span></h3><h5>三等奖：<span class="three">???</span></h5></div><script>// 数组const arr = ['迪丽热巴', '古丽扎娜', '佟丽丫丫', '马尔扎哈']// TODO：开始编写抽奖逻辑代码</script></body></html>
// 数组const arr = ['迪丽热巴', '古丽扎娜', '佟丽丫丫', '马尔扎哈']// 写法1：// 1. 随机获取1等奖的名单 [0-3] let index = Math.floor(Math.random() * arr.length)let uname = arr[index] //随机获取到一等奖的名字// 2. 将uname变量中的名字写到页面元素 class="one" 的span中const span1 = document.querySelector('.one')span1.innerHTML = uname// 3. 将已经抽到了奖项的人从arr数组中删除arr.splice(index,1) // console.log(arr)// 实现二、三等将的抽取index = Math.floor(Math.random() * arr.length)uname = arr[index] //随机获取到2等奖的名字const span2 = document.querySelector('.two')span2.innerHTML = unamearr.splice(index,1) index = Math.floor(Math.random() * arr.length)uname = arr[index] //随机获取到3等奖的名字const span3 = document.querySelector('.three')span3.innerHTML = unamearr.splice(index,1) // 2. 函数封装写法
// 分析：由于1,2，3等奖的逻辑代码是相似的，所以我们可以将这个代码封装成一个函数// 但由于代码里面有一个选择器是要动态变化的，所以将这个选择器的字符串提炼成函数的形参function getName(className){// 1. 随机获取1等奖的名单 [0-3] let index = Math.floor(Math.random() * arr.length)let uname = arr[index] //随机获取到一等奖的名字// 2. 将uname变量中的名字写到页面元素 class="one" 的span中const span1 = document.querySelector(className)span1.innerHTML = uname// 3. 将已经抽到了奖项的人从arr数组中删除arr.splice(index,1) }getName('.one') //1等奖getName('.two') //2等奖getName('.three') //3等奖
操作元素属性
- 操作元素常用属性
- 操作元素样式属性
- 操作 表单元素 属性
- 自定义属性
操作元素常用属性
可以通过DOM操作元素属性，比如通过 src 更换 图片地址
最常见的属性比如： href、title、src 等等
- 直接能过属性名修改，最简洁的语法
<script>// 1. 先获取这个元素const img = document.querySelector('img')// 2. 操作DOM元素常见属性// 2.1 查console.log(img.src)// 2.2 改img.src = './images/3.png'// 2.3 增img.title = '我是播仔，我是不是很可爱'// 2.4 删img.alt = ''
</script>
随堂练习案例
需求：当我们刷新页面，页面中的图片随机显示不同的图片
分析：
①：利用随机数抽取数组中的一个图片地址
②：修改图片元素的src地址（把图片地址赋值给src属性）
const img = document.querySelector('img')
img.src =图片地址
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>随机显示图片案例</title><style>img {width: 600px;}</style></head><body><img src="./images/1.png" alt=""><script>// 随机显示图片案例// 图片地址const arr = ['./images/1.png','./images/2.png','./images/3.png','./images/4.png']// 获取图片元素const img = document.querySelector('img')// 1. 利用随机数抽取数组中的一个地址const random = Math.floor(Math.random() * arr.length)console.log(arr[random]) // 得到图片地址// 2. 把地址赋值给图片src属性img.src = arr[random]</script></body></html>
操作元素样式属性
什么是样式属性：用来控制html元素样式的属性，比如，color，background-color，translate，width，height，内边距，外边距，边框，边框圆角等
操作样式属性的场景：
- 比如轮播图小圆点自动更换颜色 样式
操作样式属性分为三块来学习
通过 style 属性操作元素样式
语法：
const 元素对象 = document.querySelector('css选择器')元素对象.style.样式属性 = 样式值举例说明：
<body><div class="box"></div>
</body><script>// 通过style操作元素样式// 1. 先要获取这个box元素对象const box = document.querySelector('.box')// 2. 通过style来从操作样式box.style.width = '300px'box.style.height = '50px'box.style.marginTop = '50px'box.style.backgroundColor = 'red'// 3. 注意事项// 3.1 给样式赋值的时候，千万不要忘了加单位比如 300px// 3.2 如果有-的样式，我们采取的是小驼峰命名法比如 marginTop// 3.3 一定不要忘了加 style 属性
</script>
注意事项：
1. 给样式赋值的时候，千万不要忘了加单位比如 300px
2. 如果有-的样式，我们采取的是小驼峰命名法比如 marginTop
3. 一定不要忘了加 style 属性
随堂练习
需求：当我们刷新页面，页面中的背景图片随机显示不同的图片
分析：
①：利用随机数抽取数组中的一个图片地址
②：修改body元素的背景样式地址
核心代码： document.querySelector('body').style.backgroundImage = `url(${arr[random]})`
// 背景图片地址数组
const arr = ['./images/bg1.jpg','./images/bg2.jpg','./images/bg3.jpg','./images/bg4.jpg','./images/bg5.jpg'
]操作类名(className) 操作CSS
如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式
例如：要将这么多属性一次性应用到同一个元素身上，我们可以将css样式统一放到类选择器中，再将类名应用到元素身上
<style>.size {width:300px;height:50px;background-color:red;margin-top: 50px;}.bd{border-radius:10px;}
</style><body><div class="box"></div>
</body>
<script>// 1. 获取.box元素对象const divObj = document.querySelector('.box')// 2. 利用类名操作元素样式divObj.className = 'size'// 3. 利用类名操作样式添加的新的类名会覆盖掉原先的类名divObj.className = 'size bd'</script>核心：把多个样式放到css一个类中，然后把这个类添加到这个元素身上
注意：className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
通过 classList 操作元素样式
为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
<style>.size {width:300px;height:50px;background-color:red;margin-top: 50px;}</style><body><div class="box"></div>
</body><script>// 1. 获取box盒子const box = document.querySelector('.box')// 2.通过classList操作元素样式(推荐)// 2.1 追加类名// box.classList.add('size')// 2.2 删除类名// box.classList.remove('size')// 2.3 切换类名： 如果元素身上有这个类名，那么就删除，如果没有这个类名则添加box.classList.toggle('size')
</script>
总结
使用 style、 className 和classList 怎么选择？
修改样式很少的时候，使用 style
修改大量样式的可以选择类：className / classList
classList 是追加和删除不影响以前类名，更提倡
综合案例
轮播图随机版:
目的：练习操作元素常见属性和样式属性
需求：当我们刷新页面，页面中的轮播图会显示不同图片以及样式
模块分析：
①：页面刷新随机显示图片、文字、背景颜色
②：对应小圆点高亮显示
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>随机轮播图</title><style>* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}</style>
</head><body><div class="slider"><div class="slider-wrapper"><img src="./images/slider01.jpg" alt="" /></div><div class="slider-footer"><p>对人类来说会不会太超前了？</p><ul class="slider-indicator"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev"><</button><button class="next">></button></div></div></div><script>// 初始数据对象数组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)' },]// 1. 利用随机数选取数组中的一个对象 // 2. 利用选取的对象来更换图片// 需求：把图片元素的地址换成数据里面的图片地址// 2.1 获取图片元素 // 2.2 把随机生成的图片地址 赋值给 图片元素.src // 3. 更换文字内容// 3.1 获取文字盒子 p // 3.2 把随机生成的文字赋值给 p元素.innerText // 4. 更换背景颜色 slider-footer 盒子// 4.1 获取 slider-footer 盒子 // 4.2 把随机生成的背景颜色赋值给 footer元素 style// 5. 更换小圆点// 5.1 先选择对应的小圆点// 5.2 让选出来的小圆点高亮显示</script>
</body></html>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>随机轮播图</title><style>* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}</style>
</head><body><div class="slider"><div class="slider-wrapper"><img src="./images/slider01.jpg" alt="" /></div><div class="slider-footer"><p>对人类来说会不会太超前了？</p><ul class="slider-indicator"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev"><</button><button class="next">></button></div></div></div><script>// 初始数据对象数组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)' },]// 1. 利用随机数选取数组中的一个对象let index = Math.floor(Math.random() * sliderData.length)let data = sliderData[index]// 2. 利用选取的对象来更换图片// 需求：把图片元素的地址换成数据里面的图片地址// 2.1 获取图片元素 const imgBox = document.querySelector('.slider-wrapper img') // 2.2 把随机生成的图片地址 赋值给 图片元素.src imgBox.src = data.url// 3. 更换文字内容// 3.1 获取文字盒子 p const pBox = document.querySelector('.slider-footer p')// 3.2 把随机生成的文字赋值给 p元素.innerText 或者 innerHTMLpBox.innerHTML = data.title// 4. 更换背景颜色 slider-footer 盒子// 4.1 获取 slider-footer 盒子 const divBox = document.querySelector('.slider-footer') // 4.2 把随机生成的背景颜色赋值给 footer元素 styledivBox.style.backgroundColor = data.color// 5. 更换小圆点// 5.1 先选择对应的小圆点const liBox = document.querySelector(`.slider-indicator li:nth-child(${index + 1})`)// 5.2 让选出来的小圆点高亮显示liBox.classList.add('active')</script>
</body></html>操作表单元素属性
什么是表单元素？
登录页面中的，文本框，复选框等都是表单元素，表单元素可以收集用户输入的信息
<input type="text" value="" placeholder="请输入用户名">
<input type="password" value="1809999999">
<input type="checkbox" checked>
<input type="checkbox" >
<button disabled>登录</button>
。。。。更多去MDN搜索表单元素
操作表单元素属性
表达元素中的属性分为两类：
- 操作表单元素的内容、类型属性，比如：value,type,placeholder
DOM对象.属性
DOM对象.属性= 新值- 操作表单元素状态属性, checked、disabled
特点：表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示
DOM对象.属性
DOM对象.checked= true / false
DOM对象.disabled= true / false<script>// 操作表单属性// 1. 操作表单 type 和 value 属性// 1.1 修改type属性const username = document.querySelector('[name=username]')console.log(username)// username.type = 'password'// 1.2 操作表单的 value 属性// console.log(username.value) // 查// username.value = '用户名试试' // 增// username.value = '请输入用户名' // 改// username.value = '' // 删// 2. 禁用按钮或者是勾选复选框 布尔型// 2.1 禁用按钮 const button = document.querySelector('button')// button.disabled = true // true 是禁用button.disabled = false // false 是不禁用// 2.2 勾选复选框const agree = document.querySelector('.isagree')console.log(agree)// agree.checked = true // true 是选中复选框agree.checked = false // flase 是不选中复选框
</script>
自定义属性（重要）
标准属性: 标签天生自带的属性 比如class、id、title等
可以直接使用点语法操作比如：对象.id
<input id="uname" title="用户名" class="red"type="text"value="" placeholder="请输入用户名">自定义属性：以data-开头的属性
<input class="box"data-index="1"data-oldname="test">- 使用场景：通过自定义属性可以存储数据，后期可以使用这个数据
- 在标签上一律以data-开头
- 在DOM对象上一律以dataset对象方式获取
<script>// 自定义属性// 1. 获取盒子const box = document.querySelector('.box')// 2. 得到自定义属性值// console.log(box.dataset) // 得到一个对象集合// console.log(box.dataset.index) // 1// console.log(box.dataset) // 得到一个对象集合console.log(box.dataset.oldname) // testbox.dataset.sex = '男' // 增加一个自定义属性
</script>
注意：dataset里面的属性全部是小写
<input data-oldName="test"> -> box.dataset.oldname
定时器-间隔函数
网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发
例如：网页中的倒计时
倒计时大全 节日倒计时 日期倒计时器 - 倒计时网
要实现这种需求，需要定时器函数
定时器函数可以开启和关闭定时器
开启定时器:
语法
作用：每隔一段时间调用这个函数
注意：间隔时间单位是毫秒 , 1秒 = 1000毫秒
举例：
function repeat() {console.log('前端程序员，就是头发多咋滴~~')
}
// 每隔一秒(1000毫秒)调用repeat函数
let id = setInterval(repeat, 1000)// 每隔一秒(1000毫秒)调用repeat函数
let id = setInterval(function() {console.log('前端程序员，就是头发多咋滴~~')
}, 1000)注意：
- 函数名字不需要加括号
- 定时器返回的是一个数字，表示标记这个定时器的id
关闭定时器
需要定时器变量名来关闭
举例：
// 开启定时器
// 返回的是一个唯一的数字，存储到了timer变量中
let timer = setInterval(function () {console.log('前端程序员，就是头发多咋滴~~')}, 1000)// 关闭定时器clearInterval(timer)综合案例-轮播图定时版
效果需求：
①：每隔一秒钟自动切换图片、文本、颜色、小圆点
②：到了最后一张，自动切换到第1张
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>随机轮播图</title><style>* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}</style>
</head><body><div class="slider"><div class="slider-wrapper"><img src="./images/slider01.jpg" alt="" /></div><div class="slider-footer"><p>对人类来说会不会太超前了？</p><ul class="slider-indicator"><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev"><</button><button class="next">></button></div></div></div><script>// 初始数据对象数组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)' },]// const sfBox = document.querySelector('.slider-footer')// const pBox = document.querySelector('.slider-footer p')// const imgBox = document.querySelector('.slider-wrapper img')// const liBox = document.querySelector(`.slider-indicator li:nth-child(${index + 1})`)// 1. 利用随机数选取数组中的一个对象let index = 0setInterval(function () {index++if (index >= sliderData.length) {index = 0}// 0. 根据index获取数组中对应的对象const data = sliderData[index]// 1. 切换图片const imgBox = document.querySelector('.slider-wrapper img')imgBox.src= data.url// 2. 切换标题const pBox = document.querySelector('.slider-footer p')pBox.innerHTML = data.title// 3. 切换背景色const sfBox = document.querySelector('.slider-footer')sfBox.style.backgroundColor = data.color// 3. 切换指示器原点样式const liBox = document.querySelector(`.slider-indicator li:nth-child(${index + 1})`)// 找到带有class="avtive"的li标签，将其身上的active移除document.querySelector(`.slider-indicator .active`).classList.remove('active')// 给当前元素设置active样式liBox.className = 'active'}, 1000)</script>
</body></html>
