JS高级
# 今日目标
1. BOM
2. DOM（与xml的dom4j思想完全一样）可以实现对节点的增删改查
3. js中正则表达式：对表单内容进行校验
4. 综合案例
js的语法构成:
1. ECMAScrpit 基础语法 (es)
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>
</body>
<script>
/*
* # BOM: browser object model 浏览器对象模型
*
* # window对象
* 三种弹出框
*
* 1. alert 警告
* alert(msg)
* 2. confirm 确认
* boolean result = confirm(msg)
* 1). msg : 问题
* 2). result : 用户点击确认返回true,取消返回false
*
* 3. prompt 提示
* string result = prompt(msg,defaultValue)
* 1). msg : 问题
* 2). defaultValue : 默认值
* 3). result : 点击确定返回输入框中的内容,点击取消返回null
*
* 关于window对象
* window调用的内容,在语法上window可以省略
* */
// window.alert("待会要下雨了,记得打伞")
// var result = window.confirm("你满18岁了吗?");
// console.log(result);
// var result = window.prompt("你女朋友是?","高圆圆");
var 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>
<button onclick="addr()">获取当前浏览器地址</button>
<button onclick="refresh()">刷新当前页面</button>
<button onclick="jump()"> 跳转页面(重点)</button>
<hr>
<!--
a标签本质就是按钮,只不过提前绑定好事件
扩展:
a.href = javascript:函数调用
当a标签被点击的时候,函数就会执行
-->
<a href="http://www.baidu.com">百度</a>
<a href="javascript:method01()">我是一个按钮</a>
</body>
<script>
/*
* location对象: 表示地址栏
* 1). href 属性: 表示地址栏中的网址
* 2). reload 函数: 重新加载
* */
function addr() {
console.log(location.href);
}
function jump() {
location.href = "http://www.baidu.com"
}
function method01() {
console.log("hehe");
}
function refresh() {
location.reload()
}
</script>
</html>
二 DOM对象【重点】
1.1 DOM简介
dom4j : dom for java
文档对象模型（Document Object Model）
作用：把所有页面标签抽象成为一个document对象，我们可以使用js动态修改标签及属性等内容。
1.2 DOM获取元素
* 第一种：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>
// 1.获取id="username"的标签对象
var a = document.getElementById("username");
console.log(a);
var b = document.querySelector("#username");
console.log(b);
// 2.获取class="radio"的标签对象数组
var array1 = document.getElementsByClassName("radio");
console.log(array1);
var array2 = document.querySelectorAll(".radio");
console.log(array2);
// 3.获取所有的option标签对象数组
var array3 = document.getElementsByTagName("option");
console.log(array3);
var array4 = document.querySelectorAll("option");
console.log(array4);
// 4.获取name="hobby"的input标签对象数组
var array5 = document.getElementsByName("hobby");
console.log(array5);
var array6 = document.querySelectorAll("input[name='hobby']");
console.log(array6);
</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">程序猿最讨厌的四件事：写注释、写文档…… </div>
<script>
/*
* # dom操作内容
* 1. 内容: 开标签到闭标签之间的所有东西
* 2. innerText : 文本内容 (不识别标签)
* 3. innerHTML : 超文本内容 (识别标签)
*
* = : 重置
* += : 追加
* */
let myDiv = document.getElementById('myDiv');
console.log(myDiv.innerText);
//重置,覆盖
// myDiv.innerText = "改bug,项目上线"
//追加
// myDiv.innerText = myDiv.innerText + "改bug,项目上线"
// myDiv.innerText += "改bug,项目上线"
//文本
// myDiv.innerText += "<br>改bug,项目上线"
//超文本
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" id="smoke">抽烟
<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>
<script>
/*
* 标签属性
* 1. 文本属性
*
* 2. 状态属性
* 1). 在html中,状态属性基本都可以书写
* eg. checked = "checked" 缩写成 checked
* 2). 在js中,状态属性值是用boolean来表示的
*
* html 中的checked 相当于 js.checked = true
* html 不写checked 相当于 js.checked = false
* */
var username = document.getElementById("username");
//获取
console.log(username.value); // 德玛西亚
console.log(username.type); // text
//设置
username.value = "张三"
var smoke = document.getElementById("smoke");
smoke.checked = true
</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>
#p1{ background-color: red;}
.mp {
color: pink;
font-size: 20px;
}
.mpp {
background-color: lightgray;
}
</style>
</head>
<body>
<p id="p1">1. 设置一个css样式</p>
<p id="p2">2. 批量设置css样式</p>
<p id="p3">3. 通过class设置样式</p>
<p id="p4">4. 优先级</p>
<!--
js操作css
1. 行内样式
element.style.css属性 = "css属性值"
font-size -> fontSize
2. 行内样式(批量) 不推荐
element.style.cssText = "css样式"
3. 内部/外部 样式
element.className = "class选择器的值"
注意优先级问题: api尽量不要混用
行内 > 内部/外部
-->
<script>
let p1 = document.getElementById("p1");//获取段落标签
let p2 = document.getElementById("p2");//获取段落标签
let p3 = document.getElementById("p3");//获取段落标签
let p4 = document.getElementById("p4");//获取段落标签
// 1. 设置一个css样式
p1.style.color = "green"
p1.style.fontSize = "50px"
// 2. 批量设置css样式
p2.style.cssText = "color:blue;font-size : 30px"
// 3. 通过class设置样式
p3.className = "mp"
//4. 优先级
p4.style.color = "green"
p4.className = "mp"
</script>
</body>
</html>
三 正则表达式【了解】
作用：根据定义好的规则，过滤文本内容；这里我们用于校验表单
package com.itheima.regex;
/*
* 正则表达式: regular expression (regex)
* 0. 用一些符号表示指定的规则
* 1. [abc] : 表示 abc中任意一个 (范围)
* 2. {1,3} : 至少1次,至多3次 (次数)
* 3. + : 表示一次至多次
* 4. \r\n : 回车换行
* 5. \t : 制表符
* 6. \d : 等价于[0-9]
* */
public class Demo {
public static void main(String[] args) {
// abc中的任意一个
// String regex = "[abc]{1,3}";
String regex = "abc";
String str = "abcd";
//str是否匹配regex,如果匹配返回true
boolean result = str.matches(regex);
System.out.println(result);
String phoneRegex = "1[34578]\\d{9}";
String phone = "13800138000";
System.out.println(phone.matches(phoneRegex));
}
}
今天我们学习如何在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>
/*
* 已学事件:
* onclick
* 事件
* 1. onblur 失去焦点时触发
*
* 2. onsubmit 当表单提交的时候
* 1). 注册位置
* 注册在form标签上,由form表单中onsubmit按钮触发
* 2). 返回值
* return true : 表示允许提交
* return false : 表示不允许提交
* */
/* var loginName = document.getElementById("loginnameId");
loginName.onblur = function () {
console.log("hehe");
}
var myForm = document.getElementById("myForm");
myForm.onsubmit = function () {
console.log("xixi");
return true;
}*/
</script>
<script>
// 1. 两次密码输入一致
let checkPwd = function () {
var pwd2 = document.getElementById("pwd2");
var pwd1 = document.getElementById("pwd1");
var pwdWarn = document.getElementById("pwdwarn");
if(pwd2.value == "" || pwd1.value != pwd2.value){
// console.log("两次密码不一致")
pwdWarn.style.display = "inline"
return false;
}else{
pwdWarn.style.display = "none"
return true;
}
}
pwd2.onblur = checkPwd
// 2. 邮箱格式正确
let emailReg = /^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/;
var email = document.getElementById("email");
let checkEmail = function () {
var emailwarn = document.getElementById("emailwarn");
if(!emailReg.test(email.value)){
//邮箱格式有误
emailwarn.style.display = "inline"
return false;
}else{
emailwarn.style.display = "none"
return true;
}
}
email.onblur = checkEmail
//当表单提交的时候,需要再次校验
var myForm = document.getElementById("myForm");
myForm.onsubmit = function () {
//校验所有的规则: 密码, 邮箱
var result = checkPwd();
var result2 = checkEmail();
return result && result2;
}
</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. 找到所有的checkbox
* 3. 然后进行遍历,修改每一个checkbox的checked = true
*
* 反选
* 1. btn2上注册一个点击事件
* 2. 找到所有的checkbox
* 3. 然后进行遍历,修改每一个checkbox.checked = !checkbox.checked
* */
document.getElementById("btn1").onclick = function () {
var cbs = document.querySelectorAll("input[type='checkbox']");
for(let cb of cbs){
cb.checked = true
}
}
document.getElementById("btn2").onclick = function () {
var cbs = document.querySelectorAll("input[type='checkbox']");
for(let cb of cbs){
cb.checked = !cb.checked
}
}
</script>
</body>
</html>
4.3 省市联动
<!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: 600px;
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;
}
</style>
</head>
<body>
<div class="regist_bg">
<div class="regist">
<form action="#">
<table width="600" 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="60" /> </td>
</tr>
<tr>
<td align="right">密码</td>
<td colspan="2"><input id="loginpwdId" type="password" name="loginpwd" size="60" /> </td>
</tr>
<tr>
<td align="right">确认密码</td>
<td colspan="2"><input id="reloginpwdId" type="password" name="reloginpwd" size="60" /> </td>
</tr>
<tr>
<td align="right">Email</td>
<td colspan="2"><input id="emailId" type="text" name="email" size="60" /> </td>
</tr>
<tr>
<td align="right">姓名</td>
<td colspan="2"><input name="text" name="username" size="60" /> </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 type="text" name="phone" size="60" /> </td>
</tr>
<tr>
<td align="right">所在地</td>
<td colspan="3">
<select id="provinceId" 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 value="">----请-选-择-市----</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 type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
<script>
/*
* 省市联动 : 省的选项改变,市也会随之改变
* 1. 准备省对应的市数据,建立省和市的联系
* 二维数组: 每个元素都是一维数组的数组 (List<String> , List<List<String>>)
* 索引0 -> fj , 1 -> js , 2 -> sh
* 2. 事件
* onchange : 当内容改变时触发
*
* 3. 从二维数组中取出省对应的市数据
*
* 4. 遍历市数据,循环追加到市下拉框中
*
* 5. 注意: 在遍历追加之前,将市下拉框中的数据清空
* */
var fj = ["福州市","泉州市","三明市"]
var js = ["南京市","苏州市","无锡市"]
var sh = ["浦东新区","航头区","青浦区"]
var cityDatas = [fj,js,sh]
var province = document.getElementById("provinceId");
province.onchange = function () {
// console.log(province.value);
var cityData = cityDatas[province.value]
// console.log(cityData);
var city = document.getElementById("cityId");
city.innerHTML = `<option value="">----请-选-择-市----</option>`
for(let element of cityData){
city.innerHTML += `<option value="">${element}</option>`
}
}
</script>
</html>
4.4 隔行换色
<!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>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
<script>
/*
* 隔行换色: 奇数行和偶数行背景色不一致
* 1. 找到所有的行
* 2. 遍历, 给奇数行设置背景色=pink
*
* 触摸换色: 鼠标移上去高亮,鼠标移出去恢复原来的颜色
* 1. 事件
* 1). onclick
* 2). onsubmit
* 3). onblur
* 4). onchange
* 2. 新事件
* onmouseover : 当鼠标移上去的时候
* onmouseout : 当鼠标移出去的时候
* */
var trs = document.querySelectorAll("tr");
for(let i=0; i<trs.length;i++){
if(i % 2 == 1){
trs[i].style.backgroundColor = "pink"
}
let oldColor;
//给每一行设置鼠标移上去的事件,当某一行该事件触发,当前行高亮
trs[i].onmouseover = function () {
//记录原来的颜色
oldColor = this.style.backgroundColor;
this.style.backgroundColor = "yellow"
}
//鼠标移出去必然在鼠标移上去之后
trs[i].onmouseout = function () {
this.style.backgroundColor = oldColor
}
}
</script>
</body>
</html>
断点调试
```html
/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>
</table>
<script>
/*
* 隔行换色: 奇数行和偶数行背景色不一致
* 1. 找到所有的行
* 2. 遍历, 给奇数行设置背景色=pink
*
* 触摸换色: 鼠标移上去高亮,鼠标移出去恢复原来的颜色
* 1. 事件
* 1). onclick
* 2). onsubmit
* 3). onblur
* 4). onchange
* 2. 新事件
* onmouseover : 当鼠标移上去的时候
* onmouseout : 当鼠标移出去的时候
* */
var trs = document.querySelectorAll("tr");
for(let i=0; i<trs.length;i++){
if(i % 2 == 1){
trs[i].style.backgroundColor = "pink"
}
let oldColor;
//给每一行设置鼠标移上去的事件,当某一行该事件触发,当前行高亮
trs[i].onmouseover = function () {
//记录原来的颜色
oldColor = this.style.backgroundColor;
this.style.backgroundColor = "yellow"
}
//鼠标移出去必然在鼠标移上去之后
trs[i].onmouseout = function () {
this.style.backgroundColor = oldColor
}
}
</script>
</body>
</html>
断点调试
4.5 js实现点赞按钮功能的实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--评论1-->
<!--content n.所容纳之物; 所含之物; 内容; (书的)目录-->
<div class="content1">
<div class="content1box1" >
<img src="images/001.jpeg" >
<br>
<font class="content1box1font">网络用户</font>
<br>
<br>
<br>
<br>
<!--position n.位置; 地方; 恰当位置; 正确位置; (坐、立的)姿态，姿势; 放置方式 -->
<!--relative n.相对-->
<span id="tixing1" style="font-size:30px;color:red;position:relative;left:0px;top:40px;"></span>
<div class="dianzan1">
<div class="dianzan1font">
<center><span id="cishu1">18</span></center>
</div>
<button class="btn" id="1" onclick=""></button>
</div>
</div>
<div class="content1box2">
<font>阿斯达四大撒大所，爱仕达撒所大所所大所，阿斯达萨达萨达！阿斯达四大撒大所
奥术大师大所！啊啊撒大所大所</font>
</div>
</div>
<!--评论2-->
<div class="content2">
<div class="content2box1">
<img src="images/001.jpeg" >
<font class="content2box1font">网络用户</font>
<br>
<br>
<br>
<br>
<span id="tixing2" style="font-size:60px;color:red;position: relative;left:120px;top:40px;"></span>
<br>
<br>
<br>
<br>
<div class="dianzan2">
<div class="dianzan2font">
<center><span id="cishu2"></span>19</center>
</div>
<button class="btn" id="2" onclick=""></button>
</div>
</div>
<div class="content2box2">
<font>阿斯达四大撒大所，爱仕达撒所大所所大所，阿斯达萨达萨达！阿斯达四大撒大所
奥术大师大所！啊啊撒大所大所</font>
</div>
</div>
</body>
<script>
//初始化
var i=2;//评论条数
var Atixing=new Array(); //存储提醒字的id名
var Acishu=new Array(); //存储次数的id名
var count=new Array();//限制每次按钮只可以单击一次
window.onload = function(){//页面加载出来后实现下列方法
bianliButtonCount();//获取所有按钮id
chushizhi();//将数据初始化
button();//根据button 不同id进入不同标签
}
function bianliButtonCount(){
for(var j = 1;j<=i;j++){
Atixing[j] = String("tixing"+j);
Acishu[j] = String("cishu"+j);
//alert(Atixing[j]);
}
}
function chushizhi(){
for(var m =1;m<=i;m++){
document.getElementById(Atixing[m]).innerHTML="adad";
document.getElementById(Acishu[m]).innerHTML="13";
}
}
function button(){
var arr = document.getElementsByTagName('button');
for(var i = 1;i<arr.length+1;i++){
arr[i].onclick = function(){
var btn = document.getElementById(this.id);
btn.style.background="red";
change(this.id);//根据button id，通过这个函数改变次数、提醒字
}
}
}
function change(id){
if(count[id]!=1){
document.getElementById(Acishu[id]).innerHTML="14";
count[id]=1;
}else{
document.getElementById(Atixing[id]).innerHTML="亲，您的赞太多了~";
setTimeout(function(){document.getElementById(Atixing[id]).innerHTML="";},3000);//提示字三秒消失
}
}
</script>
</html>
展示结果：
images：
扫一扫
2409
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
