webapi
一：如何获取元素
1.querySelector():获取满足条件的第一个元素，获取到的元素是dom元素，意味着可以直接操作
2.querySelectorAll():获取满足条件的所有元素，获取到的是伪数组，伪数组不能直接操作，需要遍历伪数组，获取里面的每一个值进行操作
3.参数：传入选择器
二：设置标签之间的文本内容
1.innerText:设置标签的文本内容，不会解析标签，如果没有赋值就是取值，取值会忽略标签
2.innerHTML:设置标签的文本内容，会解析标签，如果没有赋值就是取值，取值会返回标签内容的完整的html结构
三：设置元素的属性
- dom元素.内置属性：如果没有赋值就是取值
2.操作样式
》 style:样式属性对象。它是一个对象，包含着当前元素所有可设置的样式属性，使用时通过 dom元素.style.样式 = 值。它的作用是设置行内样式
》 设置元素的类名： className可以设置元素的类名，它会覆盖元素之前的类名样式
》 操作classList:当前元素的类样式列表
1.add:添加新样式，不会修改元素之前的类样式
2.remove:移除样式
3.toggle:切换样式
4.contains:判断元素是否包含某个样式
四：表单元素的属性
1.input: value属性可以设置和获取文本框的内容
2.checked,disabled,readonly类似的属性，也可以通过点语法可设置和获取
> 如果没有赋值就是取值，它的值是bool值，特别对于checked属性，选中就是true,否则就是false
3.button 标签的文本内容需要使用innerText/innerHTML, input/type=button需要使用value来设置
3.textarea:它的内容设置需要使用value/innerHTML
1.语法： setInterval(执行的函数，时间间隔)
2.停止定时器：
> let timeId = setinterval()
> clearInterval(timeId)
随机点名
<p>这里显示名字</p>
<button class="start">开始随机点名</button>
<button class="end">结束随机点名</button>
<script>
// 模拟数据
let arr = ['李狗蛋', '赵铁柱', '王二妞', '张翠花', '王大锤']
// 获取数据
let p = document.querySelector('p')
let start = document.querySelector('.start')
let end = document.querySelector('.end')
// 添加
let nameId, index
// 绑定单击事件
start.addEventListener('click', function () {
// 添加定时器
timeId = setInterval(function () {
// 随机索引
index = parseInt(Math.random() * arr.length)
// 根据索引或取名字
let name = arr[index]
// 渲染p
p.innerText = name
}, 100)
})
// 绑定结束单击事件
end.addEventListener('click', function () {
// 关闭定时器
clearInterval(timeId)
// 删除当前索引元素
arr.splice(index, 1)
// 判断数组长度为零禁用按钮
if (arr.length === 0) {
start.disabled = true
}
console.log(arr);
})
</script>
搜索框失焦，聚焦
<div class="mi">
<input type="search" placeholder="小米笔记本" />
<ul class="result-list">
<li><a href="#">全部商品</a></li>
<li><a href="#">小米11</a></li>
<li><a href="#">小米10S</a></li>
<li><a href="#">小米笔记本</a></li>
<li><a href="#">小米手机</a></li>
<li><a href="#">黑鲨4</a></li>
<li><a href="#">空调</a></li>
</ul>
</div>
<script>
// 获取数据
let input = document.querySelector('input')
let ul = document.querySelector('ul')
// 为输入框添加聚焦事件
input.addEventListener('focus', function () {
ul.style.display = 'block'
})
// 为输入框添加失焦事件
input.addEventListener('blur', function () {
ul.style.display = 'none'
})
</script>
tab栏效果
<script>
// 实现tab栏效果
// 1.获取元素
// 1.1 获取所有选项卡标签
let lis = document.querySelectorAll('.tab > li')
let mains = document.querySelectorAll('.products > .main')
// 2.为元素绑定事件
// forEach的回调函数有两个参数：第一个是当前遍历的元素，第二个当前元素的索引
lis.forEach(function(ele, i) {
// 为第一个li元素绑定事件
ele.addEventListener('click', function() {
// 对于li元素： 去除其它有active样式的元素的active样式，为当前元素当前active样式
// for (let i = 0; i < lis.length; i++) {
// lis[i].classList.remove('active')
// }
document.querySelector('.tab > .active').classList.remove('active')
ele.classList.add('active')
// 对于main:清除所有main元素的active样式，为对应的main加active
document
.querySelector('.products > .active')
.classList.remove('active')
mains[i].classList.add('active')
})
})
</script>
