JS高级
# 今日目标1. BOM2. DOM（与xml的dom4j思想完全一样）可以实现对节点的增删改查3. js中正则表达式：对表单内容进行校验4. 综合案例
# js的语法构成:
1. ECMAScrpit 基础语法 (es)
es6/es5
2. BOM : browser object model (浏览器对象模型)
3. DOM : document object model(文档对象模型)
# js 基于对象的语言 (面向对象)
1. 跟java类似, 用对象来描述事物的.
2. js中有些对象不需要创建,已经提前准备好了
一 BOM对象
1.1 BOM简介
浏览器对象模型（Browser Object Model ）
作用：把浏览器抽象成为一个对象模型,我们可以使用js模拟浏览器的一些功能。
1.2 Window对象
① 三种弹框方式
1. 警告框：提示信息
alert()
2. 确认框：确认信息
confirm()
3. 输入框：输入信息
prompt()
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01-js三个弹框</title>
</head>
<body>
<!--
JS三个弹框
-->
</body>
<script>
/*
BOM 浏览器对象模型
1. window对象
2. location对象
# window : 表示浏览器中的窗口对象
1. 三种弹出框
1). alert(msg) : 警告框
确定: 表示用户已看
2). boolean result = confirm(msg) : 确认框
I. 确定 : 返回true
II. 取消 : 返回false
3). string result = prompt(msg,defaultValue) : 提示框
I.参数
msg : 交互信息,问题
defaultValue : 是文本框中的默认值(可以不填)
II. 返回值
确定 : 返回文本框中的内容
取消 : null
2. 两种计时器
*/
//弹框是window调用的(弹框是浏览器的window提供的)
// window.alert("要下雨啦,大家回家收衣服啦!!")
//window对象可以省略不写
// alert("要下雨啦,大家回家收衣服啦2!!")
// let result = confirm("你满18岁了吗?");
// console.log(result);
let result = prompt("安全问题: 你女朋友是?")
console.log(result);
</script>
</html>
② 二种定时器方式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>02-js二个定时器</title>
</head>
<body>
<input type="button" value="按钮">
<button id="btn1">取消计时器</button>
</body>
<script>
/*
* window对象两种计时器
* 1. setInterval(函数名,时间)
* 每隔指定的时间执行一次函数 , 无限
*
* 2. setTimeout(函数名,时间)
* 超过指定的时间执行一次函数 , 就一次
*
* 上面两个函数,都会返回一个计时器对象
*
* 取消:
* 1. clearInterval(计时器对象)
* 2. clearTimeout(计时器对象)
* */
function method01(){
console.log("hehe");
}
var timer = window.setInterval(method01,1000)
// var timer = window.setTimeout(method01,3000)
var btn1 = document.getElementById("btn1");
btn1.onclick = function () {
// clearTimeout(timer)
clearInterval(timer)
}
</script>
</html>
1.3 Location对象
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>03-location对象</title>
</head>
<body>
<!--
TODO location地址 : 地址栏对象
1. href属性 : 表示url (网址)
2. reload() 函数 : 重新加载当前网址
-->
<button onclick="addr()">获取当前浏览器地址</button>
<button onclick="refresh()">刷新当前页面</button>
<button onclick="jump()"> 跳转页面(重点)</button>
<hr>
<!--
扩展:
1. a标签本质上是一个按钮, 默认进行点击事件的注册 (点击会修改网址)
2. a标签的默认点击事件的注册可以修改的
href="javascript:method01()"
点击当前a标签,会执行js的method01函数
-->
<a href="http://www.baidu.com">百度一下</a> <br>
<a href="javascript:method01()">点击控制台打印hello</a> <br>
<a href="javascript:void(0)">点击没效果</a>
</body>
<script>
function addr(){
//获取当前浏览器地址
let str = location.href;
console.log(str);
}
function jump(){
// 跳转页面(重点)
location.href = "http://www.baidu.com"
}
function refresh(){
location.reload()
}
</script>
<script>
function method01(){
console.log("hello");
}
</script>
</html>
二 DOM对象【重点】
1.1 DOM简介
dom4j : dom for java
文档对象模型（Document Object Model）
作用：把所有页面标签抽象成为一个document对象，我们可以使用js动态修改标签及属性等内容。
1.2 DOM获取元素
元素 (element): 开标签到闭标签之间的所有内容
* 第一种：es6之前获取方式
1）获取一个
document.getElementById(id属性值) -> 推荐
2）获取多个（了解）
document.getElementsByTagName(标签名) 根据标签名获取，返回数组对象
document.getElementsByClassName(class属性值) 根据class属性获取，返回数组对象
document.getElementsByName(name属性值) 根据name属性获取，返回数组对象
* 第二种：es6可根据CSS选择器获取
1）获取一个
非数组变量 = document.querySelector(id选择器)
2）获取多个
数组变量 = document.querySelectorAll(css选择器) -> 推荐
标签
class
属性
多层级
并集
单层级
....
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>04-dom获取元素</title>
</head>
<body>
<form action="#" method="get">
姓名 <input type="text" name="username" id="username" value="德玛西亚"/> <br/>
密码 <input type="password" name="password"> <br/>
生日 <input type="date" name="birthday"><br/>
性别
<input type="radio" name="gender" value="male" class="radio">男 
<input type="radio" name="gender" value="female" class="radio"/>女<br/>
爱好
<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头<br/>
头像 <input type="file" name="pic"><br/>
学历
<select name="edu">
<option value="0">请选择</option>
<option value="1">入门</option>
<option value="2">精通</option>
<option value="3">放弃</option>
</select><br/>
简介
<textarea name="userIntro" cols="30" rows="10">默认值</textarea><br/>
<input type="reset" value="清空按钮"/>
<input type="submit" value="提交按钮"/><br/>
</form>
<script>
/*
TODO
第一种：es6之前获取方式
1）获取一个
document.getElementById(id属性值) -> 推荐
2）获取多个（了解）
document.getElementsByTagName(标签名) 根据标签名获取，返回数组对象
document.getElementsByClassName(class属性值) 根据class属性获取，返回数组对象
document.getElementsByName(name属性值) 根据name属性获取，返回数组对象
* 第二种：es6可根据CSS选择器获取
1）获取一个
非数组变量 = document.querySelector(id选择器)
2）获取多个
数组变量 = document.querySelectorAll(css选择器) -> 推荐
* */
// 1.获取id="username"的标签对象 (id选择器)
//因为id值是唯一的,必然只会找到一个标签对象
let username = document.getElementById("username");
// console.log(username);
let username2 = document.querySelector("#username");
// console.log(username2);
// 2.获取class="radio"的标签对象数组 (类选择器)
let radioArray = document.querySelectorAll(".radio");
// console.log(radioArray);
for(let element of radioArray){
// console.log(element);
}
// 3.获取所有的option标签对象数组 (标签选择器)
let optionArray = document.querySelectorAll("option");
console.log(optionArray);
// 4.获取name="hobby"的input标签对象数组 (属性选择器)
// 属性选择器 -> 标签名[属性名='值']
let hobbyArray = document.querySelectorAll("input[name='hobby']");
console.log(hobbyArray);
</script>
</body>
</html>
1.3 DOM操作内容
1. 获取或者修改元素（标签）的纯文本内容
语法：
js对象.innerText;
2. 获取或者修改元素的html超文本内容
语法：
js对象.innerHTML;
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>05-dom操作内容</title>
<style>
#myDiv{
border: 1px solid red;
}
</style>
</head>
<body>
<div id="myDiv">
程序猿最讨厌的四件事：<br>写注释、写文档……
</div>
<script>
/*
String a = "abc"; //初始值
//a = "def"; // 重置a的值
//追加
a += "def" //a = a + "def"
* TODO dom操作内容
* 1. innerText : 标签内的文本
* 1). = 重置标签内的文本
2). += 追加标签内的文本
2. innerHTML : 标签内的超文本 (用的多)
1). innerText是纯文本,不识别超文本,不认识标签
2). innerHTML认识标签
*
* */
let myDiv = document.getElementById('myDiv');
//获取div标签内的文本
console.log(myDiv.innerText);
//重置div标签内的文本
// myDiv.innerText = "改bug,熬夜"
//追加文本
// myDiv.innerText += "改bug,熬夜"
//不认识 <br>标签,当纯文本
// myDiv.innerText += "<br>改bug,熬夜"
//认识<br>标签
myDiv.innerHTML += "<br>改bug,熬夜"
</script>
</body>
</html>
1.4 DOM操作属性
1. 获取文本框的值(string),单选框或复选框的选中状态(boolean)
语法:
js对象.属性名 获取属性值
js对象.属性名='新属性值'
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>06-dom操作属性</title>
</head>
<body>
<form action="#" method="get">
姓名 <input type="text" name="username" id="username" value="德玛西亚"/> <br/>
爱好
<input type="checkbox" name="hobby" value="smoke" checked="checked">抽烟
<input type="checkbox" name="hobby" value="drink" checked>喝酒
<input type="checkbox" name="hobby" value="perm">烫头<br/>
<input type="reset" value="清空按钮"/>
<input type="submit" value="提交按钮"/><br/>
</form>
<input type="button" value="全不选" id="btn1">
<script>
/*
* js属性 -> js对象.属性名
* 1. 文本属性
* js的文本属性值跟html是一样的
* 2. 状态属性
* 1). 比如checked : 表示radio,checkbox的选中状态的
* selected : 表示select标签option选中状态的
* 2).js的状态属性值是boolean: true/false
* html中状态属性可以简写
*
* */
let username = document.getElementById("username");
console.log(username.value); // 德玛西亚
console.log(username.type); // text
username.value = "马尔扎哈"
</script>
<script>
let btn1 = document.getElementById("btn1");
btn1.onclick = function (){
let hobbyArray = document.querySelectorAll("input[name='hobby']");
for(element of hobbyArray){
element.checked = false //checked=true选中,false为不选
}
}
</script>
</body>
</html>
1.5 DOM操作样式
1. 设置一个css样式【会用】 行内样式,优先级高
语法:
js对象.style.样式名='样式值'
特点：样式名按照驼峰式命名
css格式：font-size
js格式：fontSize
2. 批量设置css样式（了解） 行内样式
语法:
js对象.style.cssText='css样式字符串'
缺点：让开发者痛苦，有耦合性
3. 通过class设置样式【重点】 内部样式,外部样式,优先级低
语法:
js对象.className='class选择器名'
特点：解耦
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>07-dom操作样式</title>
<style>
/* id选择器 */
/* #p1{ background-color: red;}*/
/* 类选择器 */
.mp {
color: green;
font-size: 40px;
}
.mpp {
background-color: lightgray;
}
/*
优先级关系 : id选择器 > 类选择器 > 标签选择器
*/
</style>
</head>
<body>
<!--<p id="p1" style="font-size: 30px;color:orange">1. 设置一个css样式</p>-->
<p id="p1" >1. 设置一个css样式</p>
<p id="p2" class="mp" >2. 批量设置css样式</p>
<p id="p3">3. 通过class设置样式</p>
<script>
/*
TODO:
1. 设置一个css样式【会用】 行内样式,优先级高
语法:
js对象.style.样式名='样式值'
特点：样式名按照驼峰式命名
css格式：font-size
js格式：fontSize
2. 批量设置css样式（了解） 行内样式
语法:
js对象.style.cssText='css样式字符串'
缺点：让开发者痛苦，有耦合性 (css语法写在js中了)
3. 通过class设置样式【重点】 内部样式,外部样式,优先级低
语法:
js对象.className='class选择器名'
特点：解耦
css优先级:
行内样式 > 内部 = 外部
id选择器 > class选择器 > 标签选择器
*/
let p1 = document.getElementById("p1");//获取段落标签
let p2 = document.getElementById("p2");//获取段落标签
let p3 = document.getElementById("p3");//获取段落标签
// let p4 = document.getElementById("p4");//获取段落标签
// 1. 设置一个css样式
// p1.style.fontSize = "30px"
// p1.style.color = "blue"
// 2. 批量设置css样式
// p1.style.cssText = "font-size: 30px;color:orange"
// 3. 通过class设置样式
p1.className = "mp mpp"
//优先级关系
p2.style.color = "red" // 行内样式 > 内部样式
</script>
</body>
</html>
三 正则表达式【了解】
作用：根据定义好的规则，过滤文本内容；这里我们用于校验表单
package com.itheima.regex;
/*
TODO 正则表达式(regular expression) regex
0. 表达式
1). 正则表达式
2). lambda表达式
() -> {}
以符号表达某种规则,含义
1. 正则表达式
1. [abc] : 表示 abc中任意一个 (范围)
2. {1,3} : 至少1次,至多3次 (次数)
3. + : 表示一次至多次
4. \r\n : 回车换行
5. \t : 制表符
6. \d : 等价于[0-9]
2. 爬虫
*/
public class Demo {
public static void main(String[] args) {
//手机号的正则 : 第一位必须是1,第二位可以是34578中任一一个,第三位开始只要是0-9的任一数字即可(出现9次)
// String regex = "1[34578][0-9]{9}";
String regex = "1[34578]\\d{9}";
String phone = "138001380001";
//phone匹配regex,返回true,否则返回false
boolean result = phone.matches(regex);
System.out.println(result);
}
}
今天我们学习如何在js中使用正则表达式
强调：我们只需要学会正则表达式的赋值和校验即可….
* 在js中使用正则表达式
1.创建方式
1）let regex = new RegExp(“正则表达式字符串”);
2）let regex = /正则表达式/;
2.验证方法
正则对象.test(字符串)
符合正则规则就返回true，否则false
3.在线正则表达式
https://tool.oschina.net/regex/#
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>08-正则表达式</title>
</head>
<body>
<script>
/*
* * 在js中使用正则表达式
1.创建方式
1）let regex = new RegExp(“正则表达式字符串”);
2）let regex = /正则表达式/;
2.验证方法
正则对象.test(字符串)
符合正则规则就返回true，否则false
3.在线正则表达式
https://tool.oschina.net/regex/#
* */
// let regex1 = new RegExp("abc")
// let regex = /abc/ // java中的规则精准匹配,js中的规则模糊匹配
// let regex = /^abc/ // ^ 以...开头
// let regex = /abc$/ // $ 以...结尾
let regex = /^abc$/ // 精准匹配
let str = "abc"
//str符合regex规则,返回true
var result = regex.test(str);
console.log(result);
</script>
<script>
// 以邮箱举例
let emailReg = /^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/;
// 以手机号举例
let phoneReg = /^1[34578]\d{9}$/;
</script>
</body>
</html>
四 综合案例【作业】
4.1 表单校验
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>案例-表单校验</title>
<style type="text/css">
.regist_bg {
width: 100%;
height: 600px;
padding-top: 40px;
background-image: url(../img/bg.jpg);
}
.regist {
border: 7px inset #ccc;
width: 700px;
padding: 40px 0;
padding-left: 80px;
background-color: #fff;
margin-left: 25%;
border-radius: 10px;
}
input[type="submit"] {
background-color: aliceblue;
width: 100px;
height: 35px;
color: red;
cursor: pointer;
border-radius: 5px;
}
.warn {
color: red;
font-size: 12px;
display: none;
}
</style>
<!--
表单校验
1. 两次密码输入一致
2. 邮箱格式正确
3. 手机号格式正确
4. 提交表单时校验表单项是否合法.
总结:
form表单的 onsubmit 事件 表单提交之前触发
-->
</head>
<body>
<div class="regist_bg">
<div class="regist">
<form action="http://www.baidu.com" id="myForm">
<table width="700px" height="350px">
<tr>
<td colspan="3">
<font color="#3164af">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td align="right">用户名</td>
<td colspan="2"><input id="loginnameId" type="text" name="loginname" size="50"/><span
id="loginnamewarn" class="warn">用户名不能为空</span></td>
</tr>
<tr>
<td align="right">密码</td>
<td colspan="2"><input id="pwd1" type="password" name="pwd1" size="50"/></td>
</tr>
<tr>
<td align="right">确认密码</td>
<td colspan="2"><input id="pwd2" type="password" name="pwd2" size="50"/><span
id="pwdwarn" class="warn">密码不一致</span></td>
</tr>
<tr>
<td align="right">Email</td>
<td colspan="2"><input id="email" type="text" name="email" size="50"/> <span id="emailwarn"
class="warn">邮箱格式有误</span>
</td>
</tr>
<tr>
<td align="right">姓名</td>
<td colspan="2"><input name="text" name="username" size="50"/></td>
</tr>
<tr>
<td align="right">性别</td>
<td colspan="2">
<input type="radio" name="gender" value="男" checked="checked"/>男
<input type="radio" name="gender" value="女"/>女
</td>
</tr>
<tr>
<td align="right">电话号码</td>
<td colspan="2"><input id="phone" type="text" name="phone" size="50"/> <span id="phonewarn"
class="warn">手机格式有误</span>
</td>
</tr>
<tr>
<td align="right">所在地</td>
<td colspan="3">
<select id="provinceId" onchange="selectCity(this.value)" style="width:150px">
<option value="">----请-选-择-省----</option>
<option value="0">北京</option>
<option value="1">辽宁</option>
<option value="2">江苏</option>
</select>
<select id="cityId" style="width:150px">
<option>----请-选-择-市----</option>
</select>
</td>
</tr>
<tr>
<td width="80" align="right">验证码</td>
<td width="100"><input type="text" name="verifyCode"/></td>
<td><img src="../img/checkMa.png"/></td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input id="rebtn" type="submit" value="注册"/>
</td>
</tr>
</table>
</form>
</div>
</div>
<script>
/*
* TODO 两个事件
* 1. onblur : 失去焦点事件(鼠标的焦点离开之后触发)
* 2. onsubmit : 表单提交事件
* 1). form表单专属事件 : 当此表单提交的时候触发
* 2). boolean返回值
* I. return true : 允许表单提交
* II. return false : 不允许表单提交
* */
/* let loginName = document.getElementById("loginnameId");
loginName.onblur = function (){
console.log("hello");
}
let myForm = document.getElementById("myForm");
myForm.onsubmit = function (){
console.log("hi");
return true;
}*/
</script>
<script>
/*
1. 两次密码输入一致
1). 事件: 确定密码框的失去焦点事件
2). 逻辑:
I. 获取pwd1和pwd2的输入内容,进行比较
II. 如果一致,提示密码正确, 如果不一致,提示密码有问题
*/
let pwd2 = document.getElementById("pwd2");
let checkPwd = function (){
//显示效果
let pwdSpan = document.getElementById("pwdwarn");
if(pwd2.value == ""){
pwdSpan.style.color = "red"
pwdSpan.innerText = "密码不能为空"
pwdSpan.style.display = "inline" //css : 不换行显示
return false;
}
let pwd1 = document.getElementById("pwd1");
if(pwd1.value == pwd2.value){
// console.log("两次密码一致");
pwdSpan.style.color = "green"
pwdSpan.innerText = "两次密码一致"
pwdSpan.style.display = "inline" //css : 不换行显示
return true;
}else{
// console.log("两次密码不一致");
pwdSpan.style.color = "red"
pwdSpan.innerText = "两次密码不一致"
pwdSpan.style.display = "inline" //css : 不换行显示
return false;
}
}
pwd2.onblur = checkPwd
// 2. 邮箱格式正确
let emailReg = /^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/;
let email = document.getElementById("email");
let checkEmail = function (){
let emailSpan = document.getElementById("emailwarn");
if(emailReg.test(email.value)){
console.log("邮箱格式正确");
emailSpan.style.color = "green"
emailSpan.innerText = "邮箱格式正确"
emailSpan.style.display = "inline" //css : 不换行显示
return true;
}else{
console.log("邮箱格式不正确");
emailSpan.style.color = "red"
emailSpan.innerText = "邮箱格式不正确"
emailSpan.style.display = "inline" //css : 不换行显示
return false;
}
}
email.onblur = checkEmail
/*
TODO 表单提交事件
1. 在表单点击提交的时候,检查每一项选项是否符合规则
如果都符合规则就允许提交,否则不允许
*/
let myForm = document.getElementById("myForm");
myForm.onsubmit = function (){
// console.log("hi");
return checkPwd() && checkEmail();
}
</script>
</body>
</html>
4.2 商品全选
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>案例-商品全选</title>
</head>
<body>
<!--
商品全选
1. 全选 点击全选按钮,所有复选框都被选中
2. 反选 点击反选按钮,所有复选框状态取反
-->
<button id="btn1">1. 全选</button>
<button id="btn2">2. 反选</button>
<br/>
<input type="checkbox">电脑
<input type="checkbox">手机
<input type="checkbox">汽车
<input type="checkbox">别墅
<input type="checkbox" checked="checked">笔记本
<script >
/*
* # 全选
* 1. 事件驱动: btn1按钮被点击
* 2. 触发:
* 1). 找到所有的type=checkbox的input标签
* 2). 遍历所有的标签,把checked=true (选中)
* # 反选
* 1. 事件驱动: btn1按钮被点击
* 2. 触发:
* 1). 找到所有的type=checkbox的input标签
* 2). 遍历所有的标签,把checked=!checked (反选)
* */
let btn1 = document.getElementById("btn1");
btn1.onclick = function (){
//dom获取元素
let cbArray = document.querySelectorAll("input[type='checkbox']");
for(let cb of cbArray){
cb.checked = true
}
}
let btn2 = document.getElementById("btn2");
btn2.onclick = function (){
//dom获取元素
let cbArray = document.querySelectorAll("input[type='checkbox']");
for(let cb of cbArray){
cb.checked = !cb.checked
}
}
</script>
</body>
</html>
4.3 隔行换色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>案例-隔行变色</title>
</head>
<body>
<table id="tab1" border="1" width="800" align="center">
<tr>
<th width="100px"><input type="checkbox">全/<input type="checkbox">反选</th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>5</td>
<td>牛奶制品</td>
<td>牛奶制品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>6</td>
<td>大豆制品</td>
<td>大豆制品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>7</td>
<td>海参制品</td>
<td>海参制品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>8</td>
<td>羊绒制品</td>
<td>羊绒制品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>9</td>
<td>海洋产品</td>
<td>海洋产品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>10</td>
<td>奢侈用品</td>
<td>奢侈用品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>11</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
<script>
/*
* todo 隔行换色 (奇数行和偶数行的背景色不同)
* 1. 获取所有的行
* 2. 遍历这些行, 奇数行的背景色设置绿色
*
* todo 触摸换色
* 1. 事件:
* 1). onmouseover : 鼠标移上去
* 2). onmouseout : 鼠标移出去
* 2. 触摸换色逻辑
* 1). 找到所有的行
* 2). 遍历这些行,注册相应的事件,实现鼠标移上去黄色高亮
* */
let trArray = document.querySelectorAll("tr");
for (let i = 0; i < trArray.length; i++) {
//隔行换色
if(i % 2 != 0){
trArray[i].style.backgroundColor = "green"
}
let oldColor; //原来的颜色
//移上去换色
trArray[i].onmouseover = function (){
//换色之前,记录原来的颜色
oldColor = this.style.backgroundColor
//this表示当前触发事件的标签
this.style.backgroundColor = "yellow"
}
//移出去恢复原来的颜色
trArray[i].onmouseout = function (){
//this表示当前触发事件的标签
this.style.backgroundColor = oldColor
}
}
</script>
</body>
</html>
若有收获，就点个赞吧
0 人点赞
