Web APIs
一、表单属性设置
1.设置普通的输入框 input.value ="表单的值"
2.设置 按钮的禁用
①button.disabled=true 禁用
②button.disabled=false 启用
3.设置单选框或者复选框
①radio.checked=true 选中
②checkbox.checked=false 取消选中
4.设置下拉列表 select
①option.selected=true 选中
function init() {
/*
innerText innerHTML 主要是用来设置 双标签的文本内容的
*/
// 获取一下表单 dom元素
let username = document.querySelector(".username");
// 复选框
let isarg = document.querySelector(".isarg");
// 按钮
let code = document.querySelector(".code");
// 设置文本内容
// username.innerText = '我的用户名';
// 设置输入框的文本内容
username.value = "我的用户名";
// 设置勾选上
// isarg.checked = true;
// 不勾选
// isarg.checked = false;
// 设置按钮 可以启用 可以点击
// disabled 禁用
// code.disabled = true;// 禁用
code.disabled = false; // 启用
// select 选中
let option = document.querySelector("option:nth-child(4)");
// option.select = true; // 错误的单词
option.selected = true; // 正确的单词
// checked disabled selected
5.文本域标签
// 获取 文本域标签
// 属于表单元素 又是双标签
let textarea = document.querySelector("textarea");
// 在html想要设置 文本域的内容 直接在标签内写即可
// <textarea> 你好 </textarea>
// 获取文本域中的值
// console.log(textarea.value); // 获取 OK <h1>你好</h1>
// console.log(textarea.innerText); // 获取 不OK
// console.log(textarea.innerHTML); // 获取 OK <h1>你好</h1>
// value 有区别 innerHTML
// 设置 textarea 里面文本的内容的时候
// 可以选择 在标签内写文本即可
// 想要获取 内容
// .value 原样获取内容
// .innerHTML 获取的内容如果包含html 会转移
// 通过js的方式来设置内容
// textarea.value=`<h1>标题</h1>`; // ok
// textarea.innerText=`<h1>标题</h1>`; // ok
// textarea.innerHTML=`<h1>标题</h1>`; // ok
二、事件
1.目标：能够给 DOM元素添加事件监听
2.什么是事件？
事件是在编程时系统内发生的动作或者发生的事情
3.什么是事件监听？
事件是在编程时系统内发生的动作或者发生的事情
4.语法:
元素.addEventListener('事件'，要执行的函数)
5.事件监听的三要素：
①事件源： 那个dom元素被事件触发了，要获取dom元素 ②事件： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等 ③事件调用的函数： 要做什么事
6.事件监听-案例
// 获取元素
let btn = document.querySelector('button')
// 事件监听（注册事件）
btn.addEventListener('click',function(){
alert('被点击了')
})
7.
7.事件初体验
1.鼠标事件：click鼠标点击 、mouseenter鼠标经过、mouseleave鼠标离开
<script>
/*
触发事件dom元素
事件类型
事件触发了 做业务 函数
*/
let btn1 = document.querySelector(".btn1");
// 注册事件
// btn1.addEventListener("事件类型","处理函数")
// click 鼠标单击
btn1.addEventListener("click", function () {
console.log("开始抽奖啦");
});
let btn2 = document.querySelector(".btn2");
btn2.addEventListener("click", function () {
console.log("退出抽奖啦");
});
let div = document.querySelector("div");
// mouseover 鼠标移入到 div 的区域内
div.addEventListener("mouseover", function () {
console.log("小哥快点进来");
});
</script>
8.案例---倒计时
<script>
/*
需求：
1 有一个标签里面的文本内容
60 59 0 60 59 0
2 技术
1 定时器
2 数字--
3 当我们数字减少到 0 的时候 重新设置 times=60
*/
// 定义一个时间
// 获取一下btn对象
let btn = document.querySelector("button");
let times = 60;
btn.addEventListener("click", function () {
setInterval(function () {
// console.log(times); // 打印 1
btn.innerText = times;
times--; // 0
// 当times===0 重新设置为60
if (times === -1) {
times = 60;
}
}, 100);
});
</script>
9.案例---倒计时（升级）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>05-事件初体验.html</title>
<style>
span {
display: block;
margin: 200px auto;
width: 250px;
height: 150px;
font-size: 25px;
border: 1px solid #000;
text-align: center;
line-height: 150px;
}
</style>
</head>
<body>
<div>
<span>开始计时</span>
</div>
<script>
// 触发事件
let span = document.querySelector("span");
// 注册事件
span.addEventListener("click", function () {
// 用户输入事件
let index = +prompt("请输入倒计时时间(单位：分钟)");
// 用户输入数字以分为单位，转化为秒
index = index * 60;
let timeId = setInterval(function () {
// 倒计时 每秒减少1s
index--;
// 时间转化公式（思路：取整parseInt(X) + 取余a%b）
let hour = parseInt(index / 60 / 60);
hour = hour < 10 ? "0" + hour : hour;
let minute = parseInt((index % 3600) / 60);
minute = minute < 10 ? "0" + minute : minute;
let second = index % 60;
second = second < 10 ? "0" + second : second;
arr = [hour, minute, second];
let span = document.querySelector("span");
span.innerText = `${arr[0]} 时 ${arr[1]} 分 ${arr[2]} 秒`;
}, 1000);
});
</script>
</body>
</html>
10.案例---随机点名---显示随机效果（通过数组、随机数random、定时器（间隔））
(1)分析
①按钮1效果：点击开启定时器setInterval（函数，时间）
1 注册点击事件 开启定时器
2 定时器内部
1 随机获取一个下标（提前把 名字数组定义好）
2 数组[下标] 要显示的名称
3 要显示名称 设置到 dom元素中
②按钮2效果：点击关闭定时器clearInterval（函数）
1 清除按钮1 中 定时器
③ 小结
1 老师的实现过程 不是按照现在代码的结构 上到下 一口气写完
2 给两个按钮注册了两个点击事件 分别测试他们的功能
3 再在两个按钮中 实现 一个开启 定时器 一个关闭定时器
4 再在开启的定时器中 来编写业务逻辑
5 以上代码很存在优化的地方
1.获取dom
2.声明全局变量 let 函数名；
3.注册按钮1 的 点击事件
4.注册按钮2 的 点击事件
5.结合按钮1的功能 为 随机点名且会有显示随机选择时的效果，则采用 数组random知识点和定时器的知识点 进行结合
<script>
let btn1 = document.querySelector(".btn1");
let btn2 = document.querySelector(".btn2");
let h1 = document.querySelector("h1");
let timeId;
btn1.addEventListener("click", function () {
timeId = setInterval(function () {
let arr = ["张飞", "赵云", "刘备", "吕布", "刘婵"];
let index = Math.round(Math.random() * (arr.length - 1));
h1.innerText = arr[index];
}, 100);
});
btn2.addEventListener("click", function () {
clearInterval(timeId);
});
</script>
（2）优化点名器
①原因：多次触发，导致会出现加速等bug
②处理思路：
1点击按钮1后直接禁用，清除定时器后再重新开启
2在每一次开启定时器的之前，都停止一次定时器
<!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>Document</title>
</head>
<body>
<h1></h1>
<button class="btn1">开始随机点名</button>
<button class="btn2">结束点名</button>
<script>
let btn1 = document.querySelector(".btn1");
let btn2 = document.querySelector(".btn2");
let h1 = document.querySelector("h1");
let arr = ["张飞", "赵云", "刘备", "吕布", "刘婵"];
let timeId;
// 定时器要执行的业务逻辑
function intervalDo() {
let index = Math.round(Math.random() * (arr.length - 1));
h1.innerText = arr[index];
// return undefined
}
btn1.addEventListener("click", function () {
// 先停止定时器 第一次清除 定时器的时候 timeId 是undefined
// if (timeId) {
if (timeId !== undefined) {
// timeId = 是 undefined => bool 是false
// 当timeId = undefined =false 不满足条件 不会执行 清除了
clearInterval(timeId);
}
// 禁用按钮 不让再次点击
// btn1.disabled = true;
timeId = setInterval(intervalDo, 100);
console.log("开启定时器", timeId);
});
btn2.addEventListener("click", function () {
// 重新启用 开始按钮
// btn1.disabled = false;
clearInterval(timeId);
});
</script>
</body>
</html>
11.案例---商品全选（复选框checkbox 效果：点击全选框 下列表的复选框都能选择上）
1 获取 全选标签 绑定点击事件 checkAll（全选框类名/id名）
2 点击事件触发后 获取 复选框的选中属性 checkAll.checked
3 把全选按钮的选中状态 设置到每一个 其他复选框中
4 数组和循环思想 解决重复工作的
<script>
let checkAll = document.querySelector("#checkAll");
// 获取符合选择器要求的数组
let checkboxList = document.querySelectorAll(".ck");
// console.log(checkboxList);
// 监听点击 绑定点击 注册点击 订阅点击
checkAll.addEventListener("click", function () {
// console.log('全选');
// console.log(checkAll.checked); // 获取当前全选按钮的选中状态
// 设置复选框 选中状态等于 全选框的选中状态
for (let index = 0; index < checkboxList.length; index++) {
// checkboxList[index] // 每一个复选框
checkboxList[index].checked = checkAll.checked;
}
});
</script>
12.案例---商品反选（当下列表全部复选框选择时，全选框被选上，若有一个下列表复选框为被选上，则全选框不会被选上）
①思路：判断各个复选框的状态，达到什么值时，能够让全选框选上
②做法：
1通过相同类名的多个标签，创建一个数组
let checkList = document.querySelectorAll(".ck");
2通过数组length思想：（checkbox复选框）的checked状态,设置一个函数：如果一个checkbox状态为checked,则计数1，两个则计数2，以此类推
let checkedNum = 0;
for (let index = 0; index < checkList.length; index++) {
if (checkList[index].checked) {
checkedNum++;
}
}
3.checkedNum=length时，判定全选框状态为checked
if (checkedNum === checkList.length) {
return true;
} else {
return false;
}
}
1 获取商品数组
2 遍历他们绑定点击事件
3 事件触发了 判断当前的是否达到了全选的状态
4 把 状态也设置到 全选按钮中
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>12-商品单选-控制全选</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
height: 24px;
}
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
.allCheck {
width: 80px;
}
</style>
</head>
<body>
<table>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll" />
<span class="all">全选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米手机</td>
<td>小米</td>
<td>￥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米净水器</td>
<td>小米</td>
<td>￥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米电视</td>
<td>小米</td>
<td>￥5999</td>
</tr>
</table>
<script>
let checkList = document.querySelectorAll(".ck");
let checkAll = document.querySelector("#checkAll");
// 给每一个商品绑定点击事件
for (let index = 0; index < checkList.length; index++) {
checkList[index].addEventListener("click", function () {
// 判断是否达到了全选 条件
let checked = isAllChecked();
// 设置全选按钮即可
checkAll.checked = checked;
});
}
// 函数来判断
function isAllChecked() {
// 1 存放选中的商品的数量
let checkedNum = 0;
// 2 商品数组做循环
for (let index = 0; index < checkList.length; index++) {
// 3 判断每一商品的选中状态
if (checkList[index].checked) {
checkedNum++;
}
}
// 4 循环结束了 判断 选中商品的数量和 商品总数量之间的关系
if (checkedNum === checkList.length) {
// console.log('全选');
return true;
} else {
// console.log('不全选');
return false;
}
}
</script>
</body>
</html>
13.事件监听版本
（1）DOM L0
事件源.on事件 = function() { }
btn.onclick = function () {}
（2）DOM L2
事件源.addEventListener(事件， 事件处理函数)
btn.addEventListener('事件'，函数)
（3）发展史
DOM L0 ：是 DOM 的发展的第一个版本； L：level
DOM L1：DOM级别1 于1998年10月1日成为W3C推荐标准
DOM L2：使用addEventListener注册事件
DOM L3： DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>15-不同的方式绑定点击事件.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<!-- 以下两种方式都不推荐 了解即可-->
<!-- <button onclick="console.log(123)" >点击</button> -->
<!-- <button onclick="show()">点击</button> -->
<button>点击</button>
<script>
// 1 获取dom元素
let btn = document.querySelector("button");
// 使用旧方式 L0 第一个版本的方式绑定点击事件 on+事件类型 = 匿名函数
// on也可以是在 行内 绝对不推荐
btn.onclick = function () {
console.log("事件触发啦");
};
btn.onclick = function () {
console.log("事件触发啦");
};
btn.onclick = function () {
console.log("事件触发啦");
};
btn.onclick = function () {
console.log("事件触发啦");
};
// addEventListener 对一个事件类型 绑定多个处理函数
// on+事件 对一个事件类型 只能绑定一个处理函数
// btn.onclick = show;
// function show() {
// console.log('show');
// }
// btn.addEventListener("click",function () {
// console.log("show");
// });
// btn.addEventListener("click",function () {
// console.log("show");
// });
// btn.addEventListener("click",function () {
// console.log("show");
// });
// btn.addEventListener("click",function () {
// console.log("show");
// });
</script>
</body>
</html>
14.事件类型
（1）鼠标事件（鼠标触发）：click 鼠标点击 、mouseenter 鼠标经过 、mouseleave 鼠标离开
（2）焦点事件（表单获得光标）：focus 获得焦点 、blur 失去焦点
（3）键盘事件（键盘触发）：Keydown 键盘按下触发 、Keyup 键盘抬起触发
（4）文本事件（表单输入触发）：input 用户输入事件
<script>
// 获取div元素
let div = document.querySelector("div");
let input = document.querySelector("input");
// 绑定不同的事件
// div.addEventListener("click",function () {
// console.log("click 鼠标点击事件");
// })
// 鼠标经过元素
// div.addEventListener("mouseenter",function () {
// console.log("mouseenter 鼠标经过");
// })
// 鼠标离开元素
// div.addEventListener("mouseleave",function () {
// console.log("mouseleave 鼠标离开");
// })
// 鼠标经过
// div.addEventListener("mouseover",function () {
// console.log("mouseover 鼠标经过");
// })
// 鼠标离开
// div.addEventListener("mouseout",function () {
// console.log("mouseout 离开");
// })
// 获得焦点
// input.addEventListener("focus",function () {
// console.log("输入框 获得焦点 ");
// document.body.style.backgroundColor='#000'
// })
// // 失去焦点
// input.addEventListener("blur",function () {
// console.log("输入框 失去焦点");
// document.body.style.backgroundColor='#fff'
// })
// 键盘按下事件 div不行 表单可以
// 给body标签添加比较多
// document.body.addEventListener("keydown",function () {
// console.log("keydown 按下");
// })
// 键盘抬起
// document.body.addEventListener("keyup",function () {
// console.log("keyup 抬起");
// })
// 输入事件 输入框
// input.addEventListener("input",function () {
// console.log("只要你在我的输入框输入了内容，我就触发");
// })
// 介绍了基本常见的事件 后面做到案例的时候 老师先带领大家复习一遍再去使用事件
</script>
