![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
PHPzCorrection status：qualified
Teacher's comments：
Collection
Collection
<!DOCTYPE html><html lang="zh-CN"><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>js操作class</title><style>.title {border: 1px solid blue;}.fontColor {color: orangered;}.bgc {background-color: cyan;}.bgc2 {background-color: wheat;}.fontColor2 {color: blueviolet;}</style></head><body><h2 class="title">用js操作class</h2><script>const h2 = document.querySelector(".title");// 方法：classList// 添加：add()// 修改字体颜色和背景// h2.classList.add("fontColor");// h2.classList.add("bgc");h2.classList.add("fontColor", "bgc");// 判断:contains(),是否具有”active“属性:如果有返回：true,没有返回：falseconsole.log(h2.classList.contains("fontColor"));console.log(h2.classList.contains("bgc2"));// 移除：romove()// 移除背景色h2.classList.remove("bgc");// 替换：replace()// 把"fontColor"替换成 "fontColor2"h2.classList.replace("fontColor", "fontColor2");// 动态切换class：toggle()// 如果之前没有’bgc2‘这个样式就加上，如果有就取消// h2.classList.add("bgc2");h2.classList.toggle("bgc2");</script></body></html>
<!DOCTYPE html><html lang="zh-CN"><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>表单事件</title><link rel="stylesheet" href="style.css" /></head><body><!-- 2.禁用表单提交行为： onsubmit="return false;" --><form action="" method="post" id="login"><label class="title">用户登录</label><label for="email">邮箱:</label><input type="email" id="email" name="email" value="" autofocus /><label for="password">密码:</label><input type="password" id="password" name="password" /><!-- 1.禁用表单提交行为： type="button" 来表示这是一个普通按钮,没有提交行为 --><button name="submit" onclick="check(this)">登录</button></form><script>function check(ele) {// console.log(ele);// 3.(推荐动作1)禁用默认表单提交行为：preventDefaultevent.preventDefault();// (推荐动作2)防止冒泡event.stopPropagation();// (推荐动作3)非空验证// 每一个表单控件input, 都有一个form属性;console.log(ele.form);// 通过form属性可以获取到表单中所有元素的值;// console.log(ele.form.email);let email = ele.form.email;let password = ele.form.password;// if (email.value.length === 0) {// alert("邮箱不能为空，请输入");// email.focus();// return false;// } else if (password.value.length === 0) {// alert("密码不能为空，请输入");// email.focus();// return false;// } else {// alert("验证通过，正在提交");// }}// 失去焦点时触发document.forms.login.email.onblur = function () {if (this.value.length === 0) {alert("邮箱不能为空");return false;}};document.forms.login.password.onblur = function () {if (this.value.length === 0) {alert("密码不能为空");return false;}};//change值发生改变且失去焦点时触发document.forms.login.email.onchange = function () {console.log("邮箱已改变");};//input值发生改变时触发document.forms.login.password.oninput = function () {console.log(this.value);};</script></body></html>