web api基础
变量声明有三个var let 和const
·我们应该用那个呢？
·首先var先排除，老派写法，问题很多，可以淘汰掉...
· let or const?
·建议：const优先，尽量使用const，原因是：
- const语义化更好
- 很多变量我们声明的时候就知道他不会被更改了，那为什么不用const呢？实际开发中也是，比如react框架，基本const
·如果你还在纠结，那么我建议：
- ·有了变量先给const，如果发现它后面是要被修改的，再改为let
const arr=['red', 'pink']
arr.push('blue')
console.log(arr) 
以下文章酌情观看
·DOM （Document Object Model-文档对象模型）是用来呈现以及与任意HTML或XML文档交互的API
·白话文：DOM是浏览器提供的一套专门用来操作网页内容的功能
·DOM作用
开发网页内容特效和实现用户交互
DOM树是什么
将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
描述网页内容关系的名词
作用：文档树直观的体现了标签与标签之间的关系
·DOM对象：浏览器根据html标签生成的JS对象
所有的标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上
·DOM的核心思想
<div>123</div>
<script>
const div = document.querySelector('div') //打印对象
console.dir（div）//dom 对象-----object
</script>把网页内容当做对象来处理
·document 对象
是DOM里提供的一个对象
所以它提供的属性和方法都是用来访问和操作网页内容的
例：document.write（）
网页所有内容都在document里面
获取DOM对象
利用CSS选择器
document. querySelector('#nav')参数：
包含一个或多个有效的css选择器字符串
返回值：
CSS选择器匹配的第一个元素，一个HTMLElement对象。
如果没有匹配到，则返回null。
选择匹配的多个元素
document.querySelectorAll('css选择器')参数：
包含一个或多个有效的CSS选择器字符串
返回值：
CSS选择器匹配的NodeList对象集合
document.querySelectorAll('ul li')得到的是一个伪数组：
有长度有索引号的数组
但是没有pop() push()等数组方法
想要得到里面的每一个对象，则需要遍历(for)的方式获得。
哪怕只有一个元素，通过querySelectAll()获取过来的也是一个伪数组，里面只有一个元素而已
其他获得DOM方式
//根据id获取一个元素
document.getElementById('nav')
// 根据 标签获取一类元素 获取页面 所有
div.document.getElementsByTagName('div')
//根据 类名获取元素 获取页面 所有类名为 w的
document.getElementsByClassName('w') 操作元素内容
<body>
<div class＝＂box＂>我是文字的内容<／div>
<script>
const obj={ name：＇pink老师＇ }
console.Log(obj.name)
obj.name＝'red老师' // 1．获取元素
const box = document.querySelector('.box') // 2．修改文字内容 对象．innerText 属性
console.Log（box.innerText）//获取文字内容
box.innerText＝'我是一个盒子”//修改文字内容 box是个对象
box.innerText＝'<strong>我是一个盒子<／strong>'
//不解析标签
// 3． innerHTML 解析标签
console.log(box.innerHTML) // box.innerHTML＝'我要更换'
box.innerHTML＝'<strong>我要更换<／strong>'
</script>
</body>2．元素．innerHTML 属性
将文本内容添加／更新到任意标签位置会解析标签，多标签建议使用模板字符举例说明
const info = document.querySelector('.info') //获取标签内部的文字
console.Log(info.innerHTML) // 添加／修改标签内部文字内容
info.innerHTML ＝'嗨喽，俺是<strong>刘德华<／strong>～'元素.innerText属性 只识别文本，不能解析标签元素.innerHTML属性
能识别文本，能够解析标签如果还在纠结到底用谁，你可以选择innerHTML
年会抽奖案例
<script>
// 1.声明数组
const personArr =['周杰伦，，刘僚华，，周星驰‘，「ink老师L，张学
友
// 2.先做一等奖
// 2.2就%&数组的下标
const random = Math.floor(Math.random() * personArr.length)
// const? Le. Log (personA rr[ random J )
// 2.2获取one元奥
const one = document*querySelector('#one')
// 2.3把名字给one
one* innerHTML = personArr[random]
// 2.4副除数弊i个名字
personArr-splice(randomj 1)
// consote-LogfpersonArr)
// 3.二等奖
// 2.1随机数数组的下标
const random2 = Math.floor(Math.random() * personArr.length)
// consoLe.Log(personArr[random])
// 2.2获取one元素
const two = document.querySelector('#two')
// 2.3把名字给one
two.innerHTML = personArr[random2]
// 2.4删除数组这个名字
personArr.splice(random2, 1)
// 4. 三筝奖
// 2.?随机数数组的下标
const random? = Math.floor(Math.random() * personArr.length)
// consoLe. Log(personArr[random])
// 2.2获取one无事
const three = document.querySelector('frthree')
// 2.3把名字给one
three.innerHTML = personArr[random3]
// 2.4副除数组这个名学
personArr.splice(random3j 1)
</script>操作元素属性
还可以通过JS设置/修改标签元素属性，比如通过sfc更换图片
• 最常见的属性比如：href、title、src等
语法：对象.属性=值
<body>
<img src="./images/1.webp" alt=" ">
<script>
//1.获取图片元素
const img = document.querySelector('img')
// 2.修改图片对象的属性 对象.属性=
img.src = './images/2.webp'
img.title = 'pink老师的艺术照'
| </script>
</body>随机更换图片案例
//准备好几张名字为为1 2 3 4 的图片
<body>
<img src="./images/1.webp" alt="">
<script>
//取到N~M的随机整数
function getRandom(N, M){
return Math.floor(Math.random() * (M - N + 1)) + N
}
//1.获取图片对象
const img = document. querySelector('img')
//2、随机得到序号
const random = getRandom(1, 6)
/3，更换路径
img.src = `./images/${random}.webp`
</script>
</body>操作元素样式属性
•还可以通过js设置/修改标签元素的样式属性。
＞比如通过轮播图小圆点自动更换颜色样式
＞点击按钮可以滚动图片，这是移动的图片的位置left等等
学习路径：
1 .通过style属性操作CSS
2 .操作类名(className)操作C5S
3 .通过classList操作类控制CSS
1 通过style属性操作CSS
语法：对象.style.样式属性=值
<script>
//1.获取元素
const box = document.querySelector('.box')
//2.修改样式属性 对象.style.样式属性=' ' 别忘了跟单位
box.style.width = '300px'
//多组单词的采取小驼峰命名法
box.style.backgroundcolor = 'hotpink'
box.style.border = '2px solid blue'
box.style.borderTop = '2px solid red' //0.025rem
</script>注意：
1 .修改样式通过style属性引出
2 .如果属性有-连接符，需要转换为小驼峰命名法
3 .赋值的时候，需要的时候不要忘记加css单位
element.style.paddingLeft='300px'
例子
<script>
// console.Log(document^body)
// 到N ~ M的随机整数
function getRandom(M, N) {
return Math.floor(Math.random() * (M - N + 1)) + N
//
const random = getRandom(1,10)
document.body.style.backgroundimage = `url(./images/desktop_${random}.jpg)`
</script>2. 操作类名(className)操作CSS
如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。
语法：
//active是一个css类名
元素.className = 'active'●注意：
1.由于class是关键字，所以使用className去代替
2.className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名
<style>
div {
width: 200px;
height: 200px;
background-color: ・pink;
}
.nav{
color: □ red ;
}
.box {
width: 300px;
height: 300px;
background-color:skyblue;
margin: 100px auto;
padding: 10px;
border: lpx solid 口#000;
}
</style>
</head>
<body>
<div class="nav">123</div>
<script>
// 1.获取元素
const div = document.queryselector('div')
// 2.添加类名cLass是个关键字我们用cLassName
div.className = 'nav box'
</script>
</body>
3.通过classlist修改样式
•为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
//追加一个类
元素.classList.add（'类名'）
//删除一个类
元素.classList.remove（' 类名'）
//切换一个类
元素.classList.toggle（'类名'）顺带一提，多类名情况下属性冲突是跟据 style表中顺序靠后的，不是根据在html中.
<style>
.box {
width: 200px;
height: 200px;
color:#333;
}
.active {
color:red;
background-color: pink
}
</style>
</head>
<body>
<div class＝"box">文字</div>
<script>
//通过cLassList添加
// 1．获取元素
const box = document.querySelector('.box')
// 2．修改样式
//2.1 追加类add（）类名不加点，并且是字符串,ture to-----div class＝＂box active＂
box.classList.add('active')
// 2.2 删除类 remove（）类名不加点，并且是字符串 ,ture to-----div class＝＂box＂
box.classList.remove('box')
//2.3 切换类 toggle（）有还是没有啊，有就删掉，没有就加上
box.classList.toggle('active')
</script>
</body> 使用 className和classList的区别？
- 修改大量样式的更方便
- 修改不多样式的时候方便
- classList是追加和删除不影响以前类名
轮播图随机版
需求：当我们刷新页面，页面中的轮播图会显示不同图片以及样式
分析：①：准备一个数组对象，里面包含详细信息（素材包含）
②：随机选择一个数字，选出数组对应的对象，更换图片，底部盒子背景颜色，以及文字内容
③：利用这个随机数字，让小圆点添加高亮的类（addClass）利用css结构伪类选择器
<!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>
//1．初始数据
const sliderData=[
{url:'./images／slider02.jpg'，title:'开启剑与雪的黑暗传说！'，color：'rgb（43,35,26）'},
{url:'./images／slider03.jpg'，title:'真正的jo厨出现了！'，color：'rgb（36,31,33）'},
{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）'},
{ur1:'./images／slider08.jpg'，title:'谁不想和小猫咪贴贴呢！',color：'rgb(99,72,114)'},
]
//1.需要一个随机数
const random = parseInt(Math.random()*sliderData.length)
//console.Log(sliderDatarandom）
//2把对应的数据染到标签里面
//2.1获取图片
const img=document.querySelector('.slider-wrapper img'）
//2.2，修改图片路径=对象.urL
img.src = sliderData[random].url
// 3.把p里面的文字内容更换
// 3.1获取p
const p = document.querySelector('.slider-footer p')
// 3.2修改p
p.innerHTML = sliderData[random].title
// 4.修改背景颜色
const footer = document.querySelector('.slider-footer')
footer.style.backgroundcolor =slideerData[random].color//行内样式表是高于内部样式表，所以可以后来更改来覆盖以前的style=""
// 5.小圆点
const li = document.querySelector(`.slider-indicator li：nth-child(${random +1})`)
//让当前这个小It添加active这个类
li.classList.add('active')
</script>
</body>
获取设置表单的值
- 表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型变为文本框
- 正常的有属性有取值的跟其他的标签属性没有任何区别
获取：DOM对象属性名
设置：DOM对象.属性名=新值
表单.value='用户名'
表单.type = 'password'复选框
表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示如果为true代表添加了该属性如果是false代表移除了该属性。
比如：disabled、checked、selected
<body>
<button>点击</button>
<script>
// 1.获取
const button = document.querySelector('button')
// console.log(button.disabled) // 默认false 不禁用
button.disabled = true // 禁用按钮
</script>
</body><body>
<input type="checkbox" name="" id="" checked>
<buttom disabled>点击</buttom>//这样就禁止使用了
<script>
//1获取元素
// const uname = document.querySeLeetor(^nputr)
//2.获取值获取衰单里面的值用的value
// console. Log(uname.vaLue)//电脑
// consote. Log(uname.innerHTML ) innertHTML 得不到表单的内察
// 3.设置表单的值
// uname.vaLue ="我要买电脑"
// console.Log(uname.type)
// uname.type = 'password'
//1获取
const ipt = document.querySelector('input')
// consoLe. Log(ipt.checked) // faLse 只接受布尔值
ipt.checked = true
// ipt. checked = 'true' //会选中,不提倡 有隐式转换
//获取
const button = document.querySelector('button')
// consoLe. Log(buttor).disabLed) // 默认false 不禁用
button.disabled = true // 禁用按钮
</script>
</body>自定义属性
标准属性：标签天生自带的属性比如class id title等，可以直接使用点语法操作比如：disabled, checked.selected
•自定义属性：
＞在html5中推出来了专门的data-自定义属性
＞在标签上一律以data-开头
＞在DOM对象上一律以dataset对象方式获取
<body>
<div data-id="1" data-spm="不知道">1</div>
<div data-id="2">2</div>
<div data-id="3">3</div>
<div data-id="4">4</div>
<div data-id="5">5</div>
<script>
const one = document.querySelector('div')
console.log(one.dataset)//这时右侧显示:DOMStringMap{id:'1',spm:'不知道;}id:'1',spm:'不知道';
console.log(one.dataset.id)//1
console.log(one.dataset.spm)//不知道
</script>
</body>定时器间歇函数
网页的倒计时
setInterval(函数,间隔时间)
//每隔一段时间调用函数
2. 定时器返回的是一个id数字
//间隔单位是mslet 变量名 = setInterval(函数, 间隔时间)
clearInterval(变量名)<script>
//setInterval(函数,间隔时间)
setInterval(function (){
console.log('一秒执行一次')
},1000)
function fn() {
console.log('一秒执行一次')
}
// setInterval(函数名,间隔时间) 函数名不要加小括号!!!!!!
let n = setlnterval(fn, 1000)这是自动生成的一个定时器ID，后面用来移除定时器用
// setIntervaL('fn()', 1000)
console.log(n)
//关闭定时器 定时器返回的是一个id数值
clearInterval(n)
Let m = setlntervaL (function () {
consoLe.Log(ll)
}, 2000)
consoLe.Log(m)
// const num = 10
// num = 10
// consoLe.Log(num)，重新赋值是错误的
</script>阅读注册 协议
<body>
<textarea name="" id="" cols="30" rows="10">
用户注册协议
欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
</textarea>
<br>
<button class="btn" disabled>我已经阅读用户协议(5)</button>
<script>
// 1. 获取元素
const btn = document.querySelector('.btn')
// console.log(btn.innerHTML) butto按钮特殊用innerHTML
// 2. 倒计时
let i = 5
// 2.1 开启定时器
let n = setInterval(function () {
i--
btn.innerHTML = `我已经阅读用户协议(${i})`
if (i === 0) {
clearInterval(n) // 关闭定时器
// 定时器停了，我就可以开按钮
btn.disabled = false
btn.innerHTML = '同意'
}
}, 1000)
</script>
</body>轮播图定时版
<!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>
// 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)' },
]
// 1. 获取元素
const img = document.querySelector('.slider-wrapper img')
const p = document.querySelector('.slider-footer p')
let i = 0 // 信号量 控制图片的张数
// 2. 开启定时器
setInterval(function () {
i++
// ！无缝衔接位置！ 一共八张图片，到了最后一张就是 8， 数组的长度就是 8
if (i >= sliderData.length) {
i = 0
}
// 更换图片路径
img.src = sliderData[i].url
// 把字写到 p里面
p.innerHTML = sliderData[i].title
// 小圆点
// 先删除以前的active
document.querySelector('.slider-indicator .active').classList.remove('active')
// 只让当前li添加active,不能颠倒！！！
document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
}, 1000)
//时代在变化 不用循环排他了
</script>
</body>
</html>
Comments NOTHING