元素获取
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而言，它 是用户选择好文件之后触发
购物车加减操作
let total = document.querySelector('#total')
let add = document.querySelector('#add')
let disabled = document.querySelector('#disabled')
let count
// 给加号添加点击事件
add.addEventListener('click', function () {
// 给count赋值再取值再赋值
count = total.value
count++
total.value = count
reduce.disabled = false
})
// 给减号添加点击事件
reduce.addEventListener('click', function () {
// 给count赋值再取值再赋值
count = total.value
count--
total.value = count
// 判断减号下面数量为1,关闭按钮
if (count === 1) {
reduce.disabled = true
}
})
全选反选
// 获取下面三个元素
let checkAll = document.querySelector('#checkAll')
let all = document.querySelector('.all')
let ck = document.querySelectorAll('.ck')
// 给全选按钮添加点击事件
checkAll.addEventListener('click', function () {
let stati = checkAll.checked
console.log(stati);
// 给三个复选框遍历
ck.forEach(function (ele, index) {
ele.checked = stati
})
// 判断全选按钮是否选中，是选中判断取消，否则全选
all.innerText = stati ? '取消' : '全选'
})
// 设置一个全局的标记
for (let i = 0; i < ck.length; i++) {
// 给复选框添加点击事件
ck[i].addEventListener('click', function () {
// 获取当前被选中，复选框的数量，与总数的进行比较
let con = document.querySelectorAll('.ck:checked').length
// 判断复选框是否全选
if (con === ck.length) {
checkAll.checked = true
all.innerText = '取消'
} else {
checkAll.checked = false
all.innerText = '全选'
}
})
}
</script>
