APIs
申明变量const优先
对于变量申明，常见的申明方式包括：var、let、conts。由于var老旧，我们避免使用和var进行变量声明。
那么在定义变量时如何判断使用let还是const？
对于常量（后续不会改变）变量，使用const进行申明。对于会发生变化的变量，使用let进行声明。常见情景有以下：
-
for循环中，我们一般使用let来定义一个自增的变量i。
-
对于不会发生改变的字符串或其他数据，我们一般使用const来进行声明。
考虑以下情况：若使用const定义一个数组，使用push增加元素，是否会报错？
const arr = [1,2]
arr.push(3)
答案是不会报错。由于对数组进行push操作不会改变数组的内存地址，可以对arr进行push操作。但如果令arr=[3,4]，则会报错，因为这个操作需要开辟新的内存空间，将arr变成一个新的对象，即修改了arr对象。
const对象里面存储的不是值，而是地址
DOM树和DOM对象
作用：使用JS去操作html和浏览器
分类：DOM（文档对象模型），BOM（浏览器对象模型）
DOM——文档对象模型
DOM是浏览器提供的一套专门用来操作网页内容的功能。用于开发网页特效和实现用户交互。（如改变p标签中的内容来实现随机点名）
DOM树——文档树
将HTML文档以树状结构直观地表示出来，称为DOM树
作用：直观地体现标签与标签之间的关系
DOM对象
dom对象是浏览器根据html标签生成的JS对象，所有的标签属性都可以在这个对象上面找到，修改这个对象的属性可以自动映射到标签上。
const div = document.querySelector('div') // div就是一个dom对象
console.dir(div) // div中有属性和方法
document对象
是DOM里提供的一个对象，可以用来访问和操作网页内容。如：document.write()
获取操作DOM对象
获取第一个对象
<p id="nav">导航栏</p>const nav = document.querySelector('#nav') // 获取id为nav的document对象
nav.style.color = 'red' // 修改颜色
获取全部对象，返回值为一个数组（伪数组，有长度有索引，但是无pop、push等数组方法）
const list = document.querySelectorAll("div")
这两种获取方法都是使用css选择器来进行对象的获取，里面写css选择器，必须加上引号。
其他获取
其他获取方法：如document.getDocument.getElementById()等等，但已经不再使用
修改对象属性
可以通过JS设置或者修改标签元素属性，比如通过src更新图片链接
最常见的属性有herf、scr、title等
<img src="./images/1.webq" alt="">
const img = document.quertSelector('img') // 获取元素图片
img.src = '/images/2.webp'
操作属性中的样式
1、使用document对象进行样式的修改，生成的是行内样式表，权重比较高
对象.style.样式 -> 更改属性样式，样式使用小驼峰命名法
const box = document.querySelector('.box')
box.style.width = '300px' //对于有单位的属性样式，需要加'',否则不会生效// 更换背景图片
document.body.style.backgroudImage = "url()"
2、操作类名操作CSS
当需要修改的样式很多时，可以通过添加类名来操作样式 简洁。
className是用新值换旧值，若之前有设置类名，则将会覆盖原类名
// 获取元素
const div = document.querySelector('div')
// 添加类名 class是个关键字，我们使用className
// 即给该元素添加类名
div.className = 'box'
// 若还需要原来的类 则
div.className = "nav box"
3、通过classList操作类控制CSS
为了解决className直接覆盖原类名的问题，我们可以通过classList方式来追加和删除类名
语法：三个方法，注意加()，不替换以前的类名，只追加或者删除
元素.classList.add('类名') 注意：类名不加"."
元素.classList.remove(''类名')
元素.classList.toggle('类名')
// 获取元素
const box = document.querySelector('box')
// 追加类名
box.classList.add('active')
// 切换类 toggle() 有就删掉，没有就加上
box.classList.toggle('active')
修改对象内容
获取document对象的内容：
1、元素.innerText对文本修改，不解析标签，以下情况会对文字进行加粗
<div class = "box">我是文字内容</div>
const box = document.querySelector('.box')
box.innerText = "<strong>我是一个盒子</strong>"
2、元素.innerHtml对元素进行修改，会对标签进行解析
<div class = "box">我是文字内容</div>
const box = document.querySelector('.box')
box.innerHtml = "<strong>我是一个盒子</strong>"
轮播图实战
// 对象数组，存放着轮播图对象，包括title、color等属性
const sliderData = [{},{}]
// 生成一个随机数
const random = parseInt(Math.random()*sliderData.length)
// 将对应数据渲染到标签里面
// 1、获取图片
const img = document.querySelector('.slider-wrapper img')
// 2、修改图片路径 = 对象.url
img.src = sliderData[random].url
// 3、将p里面的文字内容更换
const p = document.querySelector('.slider-footer p')
// 4、修改p的title
p.innerHTML = sliderData[random].title
// 5、修改背景颜色
const footer = document.querySelector('.slider-footer')
footer.style.backgroundColor = sliderData[random].color
// 6、小圆点颜色 使用反引号简化字符串拼接
const li = document.querySelector(`.slider-indicator li:nth-child(${random + 1})`)
// 7、给当前的小li添加类
li.classList.add('active')
定时器——间歇函数
定时器常见于倒计时效果。或其他需要每隔一段时间自动执行的代码，不需要手动触发
间歇函数
开启定时器：
setInterval(函数, 间隔时间)：作用是每隔一段时间调用该函数，间隔时间单位是毫秒
setInterval(函数名, 间隔时间)
// 简单的间歇函数，可以使用匿名函数
setInterval(finction(){console.log('一秒打印一次')
},1000)function fn(){}
setInterval(fn,1000)获取定时器的Id
关闭计时器：
// 获取定时器id m是定时器的id
let m = setInterval(function(){},1000);
m.clearInterval(m)
关闭后重新开启定时器，定时器ID会改变
事件监听
事件监听的概念以及简单案例
-
事件事件指的是系统内发生的动作或发生的事情，如：用户单机一个按钮、用户鼠标在轮播图上悬停
-
事件监听让程序检测是否有事件发生，一旦有事件触发就调用一个函数来做出响应，也称为绑定事件或者注册事件。如：鼠标经过时显示下拉菜单，鼠标悬停在轮播图上时轮播图暂停自动切换
语法：元素对象.addEventListener('事件类型', 要执行的函数)
事件监听的三要素：
1、事件源：dom元素
2、事件类型：如鼠标点击click、鼠标经过mouseover
3、事件处理程序：要做什么事
鼠标事件
鼠标触发
-
click 鼠标点击
-
mouseenter 鼠标经过
-
mouseleave 鼠标离开
const btn = document.querySelector('.btn')
btn.addEventListener('click',function(){
alter('点击了')
})
焦点事件
表单获取光标
-
focus 获取焦点
-
blur 失去焦点
键盘事件
键盘触发
-
keydown 键盘按下
-
keyup 键盘弹起
文本事件
表单输入触发
-
input 表单输入事件
// 用户输入文本事件
const input = document.querySelector('input')
input.addEventLisener('input',function(){
// 打印用户的输入内容
console.log(input.value)
})
案例：统计输入框字数，判断是否超过最大长度。不断获取输入框内的字符数，并更新显示
// 获取文本域
const tx = document.querySelector("#tx")
// 获取字符统计total
const total= document.querySelector(".total")
// 当文本域活得焦点，将total显示出来（显示当前字符数）
tx.addEventListener('focus',function(){// 将透明度改为1 即显示total.style.opacity = 1
})
// 当文本域失去焦点，将total隐藏起来
tx.addEventListener('blur',function(){// 将透明度改为0 即隐藏total.style.opacity = 0
})
// 检测用户输入
tx.addEventListener('input',function(){total.innerHTML = `${tx.value.length}/200字`
})
