★ webapi
元素获取
document.querySelector 获取满足条件的第一个元素 获取到的元素是dom元素，可以直接调用dom的api 如果没有获取到，返回null document.querySelectorAll 获取满足条件的所有元素，返回一个伪数组 伪数组中成员都是dom元素 伪数组不能直接操作，必须遍历获取到里面的dom元素来进行操作
定时器
作用：每隔一段时间重复做一个事情 语法：setInterval(处理函数，时间间隔) setInterval会返回一个句柄(标识id) clearInterval可以清除定时器，传递的参数是句柄
事件
事件：用户操作所触发的行为 为用户操作添加一个事件监听，当用户真正进行某个操作的时候，就会触发某个行为 语法：dom.addEventListener(事件类型，处理函数) 常见事件类型 click:单击事件 mouseenter:鼠标进入，当鼠标进入到该元素的范围就会自动触发 mouseleave:鼠标离开，鼠标离开该元素的范围就会自动触发 input:文本输入框内容变化所触发的事件，只要内容变化就会触发 fcous:文本框聚焦事件，文本框获取焦点，焦点就是光标点 change:文本框失焦事件，前提是内容改变了 blur:文本框的失焦事件，只要失焦就会触发，不关注内容是否变化 keydown:键按下时自动触发 keyup:键松开时自动触发 change:对于表单元素file而言，它 是用户选择好文件之后触发 排他思想 先清除其它兄弟元素的样式
关闭二维码案例：
<div class="erweima">
<img src="images/code.png" alt="" />
<span> X </span>
</div>
<script>
// 获取元素
let qrcode = document.querySelector('.erweima')
let span = document.querySelector('span')
// 关闭按钮绑定单击事件
span.addEventListener('click', function () {
// 将二维码隐藏，通过样式可以实现
qrcode.style.display = 'none'
})
</script>
随机点名：
<p>这里显示名字</p>
<button>随机点名</button>
<script>
// 模拟数据
let arr = ['1', '2', '3 '4', '5', '6',]
// 获取元素
let p = document.querySelector('p')
let btn = document.querySelector('button')
// 绑定单击事件
btn.addEventListener('click', function () {
// 生成索引，随机值
let index = parseInt(Math.random() * arr.length)
// 获取索引位置对应的名字
let name = arr[index]
// 删除当前索引名字
arr.splice(index, 1)
// 填充名字到指定元素
p.innerText = name
// 数组长度为零 禁用按钮
if (arr.length === 0) {
btn.disabled = true
}
})
</script>
全选反选案例：
<script>
// 获取数据
// 全选，文本，其他复选框
let checkAll = document.querySelector('#checkAll')
let all = document.querySelector('.all')
let cks = document.querySelectorAll('.ck')
// 单击绑定事件,全选复选框的状态，赋值给下面的所有复选框
checkAll.addEventListener('click', function () {
// 获取当前复选框经过一次点击之后的状态
let state = checkAll.checked
// 赋值给其他复选框，伪数组遍历
for (let i = 0; i < cks.length; i++) {
cks[i].checked = state
}
// cks.forEach(function (ele, index) {
// ele.checked = state
// })
all.innerText = state ? '取消' : '全选'
})
// 全局标记
for (let i = 0; i < cks.length; i++) {
cks[i].addEventListener('click', function () {
// 获取当前被选中的复选框的数量，与总数比较，如果数量等于所有复选框的总数，说明全部选中，反之全部取消
// .ck:checked:找到匹配的元素，只会匹配被选中的复选框
let count = document.querySelectorAll('.ck:checked').length
if (count === cks.length) {
checkAll.checked = true
all.innerHTML = '取消'
} else {
checkAll.checked = false
all.innerHTML = '全选'
}
})
}
</script>
购物车加减:
<div>
<input type="text" id="total" value="1" />
<input type="button" value="+" id="add" />
<input type="button" value="-" id="reduce" disabled=true />
</div>
<script>
// 获取数据
let add = document.querySelector('#add')
let reduce = document.querySelector('#reduce')
let total = document.querySelector('#total')
// 绑定单击
add.addEventListener('click', function () {
// 获取输入框内数量
let count = total.value
// 自增
count++
// 重新赋值
total.value = count
// 自增导致一直大于一
reduce.disabled = false
})
// 减
reduce.addEventListener('click', function () {
// 获取输入框内数量
let count = total.value
// 自增
count--
// 重新赋值
total.value = count
// 小于一禁用
if (count == 1) {
reduce.disabled = true
}
})
</script>
表单元素属性操作
<input type="text" class="password" /> <button class="changetype">变</button>
<br />
<input type="checkbox" class="chkAll" />全选
<div class="list">
<input type="checkbox" />写代码 <input type="checkbox" />调bug
<input type="checkbox" />写文档
</div>
<button class="getChioce">获取用户选择</button>
<script>
// 获取数据
let password = document.querySelector('.password')
let changetype = document.querySelector('.changetype')
// 点击事件 密码文本框类型互换
changetype.addEventListener('click', function () {
// 判断输入框类型是否为password
password.type = password.type === 'password' ? 'text' : 'password'
})
// 创建变量绑定标签类名
let chkAll = document.querySelector('.chkAll')
// 列表复选框
let chks = document.querySelectorAll('.list input')
// btn.addEventListener('click', function () {
// let type = btn.type ===
// })
// 单击状态
chkAll.addEventListener('click', function () {
let state = chkAll.checked
// 循环所有，设置checked状态
for (let i = 0; i < chks.length; i++) {
chks[i].checked = state
}
})
</script>
定时器开关
<button>获取验证码</button>
<script>
// setInterval()
// 获取
let btn = document.querySelector('button')
// 单击事件
btn.addEventListener('click', function () {
let timeCount = 5
// 开启定时器 timeId句柄 setInterval创建定时器
let timeId = setInterval(function () {
timeCount--
btn.innerText = `倒计时${timeCount}秒`
btn.disabled = true
// 判断为0停止 clearInterval清除定时器
if (timeCount == -1) {
clearInterval(timeId)
btn.disabled = false
btn.innerText = '获取验证码'
}
}, 1000)
})
</script>
自动切换图片
<div>
<img src="./images/b01.jpg" alt="" />
<p>第1张图片</p>
</div>
<script>
// 获取元素
let img = document.querySelector('img')
let p = document.querySelector('p')
// 图片索引
let index = 1
let timeId
// 开启定时器
function starttime() {
timeId = setInterval(function () {
// 索引自增
index++
// 判断为10时 索引变为1
if (index == 10) {
index = 1
}
// 生成图片路径
let path = `./images/b0${index}.jpg`
// 图片路径赋值img
img.src = path
// p描述
p.innerText = `第${index}张图片`
}, 100)
}
starttime()
// 添加鼠标进入和离开效果
let div = document.querySelector('div')/* 获取数据 */
// 鼠标进入：停止定时器
div.addEventListener('mouseenter', function () {
clearInterval(timeId)
})
// 鼠标离开：停止定时器
div.addEventListener('mouseleave', function () {
starttime()
})
</script>
