回顾

1. js基础语法运算符：算数运算符可以与字符串进行数学运算，js底层进行隐式转换比较运算符：===（恒等） 特点，比较类型+内容流程控制语句if判断条件表达式：1）布尔2）数值：非0为真3）字符串：非空串为真4）变量：null 或 undefined 都为假for循环普通for循环增强for循环索引for循环2. js函数（方法）在js中方法没有重载，重名的会被覆盖3. js事件（重点）js通过事件监听用户的行为，结合函数实现页面交互常用事件单击 onclick获得焦点 onfocus失去焦点 onblur改变 onchange页面加载 window.onload事件绑定普通函数匿名函数4. js常用内置对象stringarray：有点像java的list集合datemath全局函数

JS高级

今日目标

1. BOM2. DOM（与xml的dom4j思想完全一样）可以实现对节点的增删改查3. 正则表达式：对字符的过滤校验4. 综合案例

一 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三个弹框
-->
<script>// 1. 警告框：提示信息// alert('哈哈');// 2. 确认框：确认信息/*let result = confirm('您确定要删除吗？');if(result==true){console.log('用户点击确定');}else{console.log('用户点击取消');}*/// 3. 输入框：输入信息（了解）let result = prompt('请输入你的年龄');if(result!=null){console.log(`用户输入的值：${result}`);}else{console.log('你点击了取消按钮');}
</script>
</body>
</html>

② 二种定时器方式

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>02-js二个定时器</title></head>
<body>
<!--JS两个定时器1）一次性定时器创建：let 定时器对象 = setTimeout('函数()',毫秒);关闭：clearTimeout(定时器对象)2）循环性定时器创建：let 定时器对象 = setInterval(函数,毫秒);关闭：clearInterval(定时器对象);
--><button id="btn1">取消打印时间</button>
<button id="btn2">取消打印自然数</button><script>// 1. 定时5秒之后在控制台打印当前时间function fun1() {console.log(new Date().toLocaleString());}let timeout = setTimeout('fun1()',5000);// 2. 点击按钮取消打印时间document.getElementById('btn1').onclick=function () {clearTimeout(timeout);}// 3. 每隔2秒在控制台打印递增自然数let num = 1;function fun2() {console.log(num++);}let interval = setInterval(fun2,2000);// 4. 点击按钮取消打印自然数document.getElementById('btn2').onclick=function () {clearInterval(interval)}
</script>
</body>
</html>

1.3 Location对象

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>03-location对象</title></head>
<body>
<!--
location地址1）获取当前窗口地址location.href2）刷新当前页面location.reload()3）跳转页面（重点）location.href='新页面地址'
--><button onclick="addr()">获取当前浏览器地址</button>
<button onclick="refresh()">刷新当前页面</button>
<button onclick="jump()"> 跳转页面(重点)</button><script>// 1.获取当前窗口的地址function addr() {console.log(location.href);}// 2.刷新当前页面function refresh() {location.reload();}// 3.跳转到新页面function jump() {location.href='https://www.jd.com';}
</script>
</body>
</html>

二 DOM对象【重点】

1.1 DOM简介

文档对象模型（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">男&emsp;<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"的标签对象console.log(document.getElementById('username'));console.log(document.querySelector('#username'));// 2.获取class="radio"的标签对象数组console.log(document.getElementsByClassName('radio'));console.log(document.querySelectorAll('.radio'));// 3.获取所有的option标签对象数组console.log(document.getElementsByTagName('option'));console.log(document.querySelectorAll('option'));// 4.获取name="hobby"的input标签对象数组console.log(document.getElementsByName('hobby'));console.log(document.querySelectorAll('input[name="hobby"]')); // css的属性选择器// 5.获取文件上传选择框console.log(document.querySelectorAll('form input[type="file"]'));// 补充：为什么帅哥喜欢获取id使用这种方案？//  document.getElementById('username').onclick  有提示//  document.querySelector('#username').onfo   没有提示
</script>
</body>
</html>

1.3 DOM操作内容

1. 获取或者修改元素（标签）的纯文本内容语法：js对象.innerText; 2. 获取或者修改元素的html超文本内容语法：js对象.innerHTML; 3. 获取或者修改包含自身的html内容（了解）语法：js对象.outerHTML;

<!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>let myDiv = document.getElementById('myDiv');// 1.innerText操作div内容// 1.1 获取纯文本// console.log(myDiv.innerText);// 1.2 设置纯文本// myDiv.innerText='<h1>别人不写注释，别人不写文档</h1>'; // 覆盖// myDiv.innerText+='别人不写注释，别人不写文档'; // 追加// 2.innerHTML操作div内容// 2.1 获取超文本内容console.log(myDiv.innerHTML);// 2.2 设置超文本// myDiv.innerHTML='<h1>别人不写注释，别人不写文档</h1>'; // 覆盖//  myDiv.innerHTML+='<h1>别人不写注释，别人不写文档</h1>'; // 追加// 3.outerHTML操作div （扩展）myDiv.outerHTML = '<p>我摇身一变，成了小P</p>';
</script>
</body>
</html>

1.4 DOM操作属性

1. 获取文本框的值,单选框或复选框的选中状态语法: js对象.属性名 获取属性值js对象.属性名='新属性值'2. 给元素设置自定义属性（了解）语法: js对象.setAttribute(属性名,属性值) 2. 获取元素的自定义属性值（了解）语法: js对象.getAttribute(属性名) 4. 移除元素的自定义属性（了解）语法: js对象.removeAttribute(属性名)

<!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">抽烟<input type="checkbox" name="hobby" value="drink">喝酒<input type="checkbox" name="hobby" value="perm">烫头<br/><input type="reset" value="清空按钮"/><input type="submit" value="提交按钮"/><br/>
</form><script>// 1.获取文本框预定义的属性值let username = document.getElementById('username');console.log(username);console.log(username.type); // textconsole.log(username.name); // usernameconsole.log(username.value); // 德玛西亚// 2.给文本框设置自定义属性（了解） [新增、修改]username.setAttribute('zidingyi','我是自定义属性');// 3.获取文本框自定义属性（了解）console.log(username.getAttribute('zidingyi'));// 4.移出文本框自定义属性（了解）username.removeAttribute('zidingyi')username.removeAttribute('value')</script>
</body>
</html>

1.5 DOM操作样式

1. 设置一个css样式【会用】语法: js对象.style.样式名='样式值'特点：样式名按照驼峰式命名css格式：font-sizejs格式：fontSize2. 批量设置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: green;font-size: 30px;font-family: 楷体;}.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><script>let p1 = document.getElementById("p1");//获取段落标签let p2 = document.getElementById("p2");//获取段落标签let p3 = document.getElementById("p3");//获取段落标签// 1. 设置一个css样式p1.style.backgroundColor='black';p1.style.color='white';// 2. 批量设置css样式p2.style.cssText='border:1px solid red;font-size:20px;';// 3. 通过class设置样式p3.className='mp mpp'; // 注意不要画蛇添足：不要给我加. class="mp mpp"</script>
</body>
</html>

1.6 DOM操作元素（标签）

1. 创建一个标签对象语法：document.createElement(标签名称)2. 给父标签添加一个子标签语法：父标签对象.appendChild(子标签对象)

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>08-dom操作元素</title></head>
<body><ul id="star"><li>古力娜扎</li><li>迪丽热巴</li></ul>
<script>// 添加一个新列表项    <li>马尔扎哈</li>// 方式一document.getElementById('star').innerHTML+='<li>马尔扎哈</li>';// 方式二// 1.1 创建li标签let li = document.createElement('li');li.innerText='小陈：都要'console.log(li);// 1.2 父标签添加子标签document.getElementById('star').appendChild(li);</script>
</body>
</html>

三正则表达式【了解】

作用：根据定义好的规则，过滤文本内容；这里我们用于校验表单

今天我们学习如何在js中使用正则表达式

强调：我们只需要学会正则表达式的赋值和校验即可…

* 在js中使用正则表达式1.创建方式1）let rege = new RegExp(“正则表达式字符串”);2）let rege = /正则表达式/;2.验证方法1）正则对象.test(字符串)符合正则规则就返回true，否则false2）字符串对象.match(正则对象)返回字符串中符合正则规则的内容。3. 了解下正则修饰符4. 在线正则表达式https://tool.oschina.net/regex/#

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>09-正则表达式</title></head>
<body><script>// 1.创建正则对象let reg1 = new RegExp('\\d+'); // 规则只能是纯数字console.log(reg1.test('abc')); // falseconsole.log(reg1.test('123321')); // true// 2.直接使用正则表达式【推荐】let reg2 = /\d+/;console.log(reg2.test('abc')); // falseconsole.log(reg2.test('123321')); // trueconsole.log("a1".match(reg2)); // 表示获取字符串符合正则规则那部分内容 【了解】
</script><script>//正则表达式修饰符(自学了解)let regi = /[amn]/i;//不区分大小写匹配amn  ignore 忽略大小写let resi = "ABC".match(regi);//从"ABC"中匹配regi模式字符串console.log(resi);let regg = /\d/g;//全局查找数字  global 全局let resg = "1 plus 2 equals 3".match(regg);console.log(resg);let regm = /^\d/m;//多行匹配开头的数字  （^ 限定开始  $ 限定结束） multpart 多行let resm = "abc1 plus 2 equals 3\n6abcmnk".match(regm);console.log(resm);
</script><script>console.log('-------------------------------')// 以邮箱举例let emailReg = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;console.log(emailReg.test('sadfsadf')); // falseconsole.log(emailReg.test('ys_123@163.com')); // true// 以手机号举例let phoneReg = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;console.log(phoneReg.test('123123')); // falseconsole.log(phoneReg.test('18312332199')); // true</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="#" 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"/><spanid="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"/><spanid="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>// 1. 两次密码输入一致// 1.1.获取密码框和确认密码框的js对象let pwd1 = document.getElementById('pwd1');let pwd2 = document.getElementById('pwd2');// 1.2 校验密码是否一致的方法function checkPwd() {let boo = pwd1.value == pwd2.value;if(boo == true){// 密码一致document.getElementById('pwdwarn').style.display='none';}else{// 密码不一致document.getElementById('pwdwarn').style.display='inline';}return boo;}// 1.3 给确认密码框绑定失去焦点事件pwd2.onblur=checkPwd; // 这里绑定函数，不能加括号// 2. 邮箱格式正确// 2.1 定义邮箱正则表达式let emailReg = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;// 2.2 获取邮箱的js对象let email = document.getElementById('email');// 2.3 定义校验函数（方法）function checkEmail() {let boo = emailReg.test(email.value);if(boo ==  true){ // 校验通过document.getElementById('emailwarn').style.display='none';}else{ // 校验不通过document.getElementById('emailwarn').style.display='inline';}return boo;}// 2.4 给邮箱绑定失去焦点事件email.onblur=checkEmail;// 3. 手机号格式正确 （课下作业....）// 4.表单提交时 会触发这个 onsubmit事件document.getElementById('myForm').onsubmit=function () {return checkPwd()&&checkEmail(); // 返回true可以提交，返回false表单不做任何操作}</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="null">笔记本
<script >// 获取所有的商品复选框let boxs = document.querySelectorAll('input[type="checkbox"]');// 1. 全选document.getElementById('btn1').onclick=function () {for (let b of boxs) {b.checked=true;}}// 2. 反选document.getElementById('btn2').onclick=function () {for (let b of boxs) {b.checked=!b.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></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>
<!--
省市级联1. 页面加载完成后自动装载省数据2. 当选中省时,装载该省的市数据
--><script type="text/javascript">// 准备数据var data = new Array();data['北京'] = ['顺义区', '昌平区', '朝阳区'];data['河北'] = ["保定","石家庄","廊坊"];data['辽宁'] = ["沈阳","铁岭","抚顺"];let provinceId = document.getElementById("provinceId");//获取省下拉列表let cityId = document.getElementById("cityId");//获取市下拉列表// 1.页面加载成功后，初始化省份数据window.onload=function () {for(let index in data){ // 索引forconsole.log(index);provinceId.innerHTML+=`<option value="${index}">${index}</option>`;}}// 2.给省份下拉框绑定onchange事件provinceId.onchange=function () {// 清空上一次选择城市信息cityId.innerHTML='<option value="">----请-选-择-市----</option>';console.log(this.value);// 当前用户选中的value值 ，它就是二维数组的索引console.log(data[this.value]); // 城市列表let citys = data[this.value];for(let city of citys){ // 增强forcityId.innerHTML+=`<option value="${city}">${city}</option>`;}}</script></body>
</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><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>4</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>
<!--
隔行变色1. 表格奇偶行颜色不同2. 鼠标移入颜色高亮
-->
<script>let oldColor;// 获取所有tr的js对象 数组let trs = document.querySelectorAll('table tr');  // 注意：这里使用的后代选择器  ，这里是js的一个小坑 table>tr// 普通for循环for (let i = 0; i < trs.length; i++) {if(i%2==0){//偶数索引（奇数行）trs[i].style.backgroundColor='lightgrey';}else{ // 奇数索引（偶数行）trs[i].style.backgroundColor='skyblue';}trs[i].onmouseover=function () { // 鼠标移入某一行oldColor=trs[i].style.backgroundColor// 获取当前行的颜色trs[i].style.backgroundColor='pink';}trs[i].onmouseout=function () {// 鼠标移出某一行trs[i].style.backgroundColor=oldColor;}}
</script>
</body>
</html>

4.5 经验值

var天生残疾，后期出来let

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>05-经验值分享</title></head>
<body><script>// for循环举例：var声明变量全局作用域、let声明变量是局部作用域for (var i = 0; i < 5; i++) {document.write('<h3>我是var修饰遍历的内容</h3>')}console.log(i);for (let j = 0; j < 5; j++) {document.write('<h3>我是let修饰遍历的内容</h3>')}// console.log(j);{var a = 10;let b = 5;}console.log(a); // 可以取到console.log(b); // 不能取到</script>
</body>
</html>

day04【JS高级】BOM对象、Window对象、二种定时器、 Location对象、DOM对象、DOM获取元素、DOM操作内容、DOM操作属性、DOM操作样式、DOM操作元素（标签）、正则表达式相关推荐

JS高级程序设置笔记（二）
5.4 RegExp类型用这个类来表示正则表达式. var expression = /pattern/flags; pattern部分是任何简单的或者复杂的正则:每一个正则都有一个或者多个标志. ...
js高级编程中命名空间的两种用法
第一种: // 声明一个全局对象Namespace,用来注册命名空间 Namespace = new Object(); // 全局对象仅仅存在register函数,参数为名称空间全路径,如" ...
JavaScript学习笔记之BOM篇，认识几种常见的浏览器对象
BOM(Browser Object Document)即浏览器对象模型,顾名思义就是为了控制浏览器的行为而出现的接口.浏览器可以做什么呢?比如跳转到另一个页面.前进.后退等等,程序还可能需要获取屏幕 ...
JavaScript:window.event.srcElement（指触发事件的对象）
event对象指当前触发的事件对象, window.event.srcElement是指触发事件的对象. srcelement 是事件初始目标的html元素对象引用,因为事件通过元素容器层次冒泡,可以 ...
JS开发引用HTML DOM的location和document对象
上一次提到,在报表软件FineReport的JavaScript开发中,可以访问并处理的HTML DOM对象有windows.location.document三种.这次就继续介绍后两种,locati ...
js高级：面向对象+ES6
js高级:面向对象+ES6 文章目录 js高级:面向对象+ES6 day01 一.ES6中的类和对象 1.1对象 1.2类 1.3创建类 1.4类constructor构造函数 1.5类中添加方法 1 ...
JS之BOM和DOM(来源、方法、内容、应用)
1.Javascript组成(此文为转载) JavaScript的实现包括以下3个部分: 1)核心(ECMAScript):描述了JS的语法和基本对象. 2)文档对象模型 (DOM):处理网页内容的方 ...
day03_js学习笔记_03_js的事件、js的BOM、js的DOM
day03_js学习笔记_03_js的事件.js的BOM.js的DOM ================================================================ ...
前端知识点总结——JS高级（持续更新中）
前端知识点总结--JS高级(持续更新中) 1.字符串什么是: 连续存储多个字符的字符数组相同: 1. 下标 2. .length 3. 遍历 4. 选取: slice(starti[, endi] ...

day04【JS高级】BOM对象、Window对象、二种定时器、 Location对象、DOM对象、DOM获取元素、DOM操作内容、DOM操作属性、DOM操作样式、DOM操作元素（标签）、正则表达式

回顾

JS高级

一 BOM对象

1.1 BOM简介

1.2 Window对象

① 三种弹框方式

② 二种定时器方式

1.3 Location对象

二 DOM对象【重点】

1.1 DOM简介

1.2 DOM获取元素

1.3 DOM操作内容

1.4 DOM操作属性

1.5 DOM操作样式

1.6 DOM操作元素（标签）

三正则表达式【了解】

四综合案例【作业】

4.1 表单校验

4.2 商品全选

4.3 省市联动

4.4 隔行换色

4.5 经验值

day04【JS高级】BOM对象、Window对象、二种定时器、 Location对象、DOM对象、DOM获取元素、DOM操作内容、DOM操作属性、DOM操作样式、DOM操作元素（标签）、正则表达式相关推荐

最新文章

热门文章

day04【JS高级】BOM对象、Window对象、二种定时器、 Location对象、DOM对象、DOM获取元素、DOM操作内容、DOM操作属性、DOM操作样式、DOM操作元素（标签）、 正则表达式

回顾

JS高级

一 BOM对象

1.1 BOM简介

1.2 Window对象

① 三种弹框方式

② 二种定时器方式

1.3 Location对象

二 DOM对象【重点】

1.1 DOM简介

1.2 DOM获取元素

1.3 DOM操作内容

1.4 DOM操作属性

1.5 DOM操作样式

1.6 DOM操作元素（标签）

三 正则表达式【了解】

四 综合案例【作业】

4.1 表单校验

4.2 商品全选

4.3 省市联动

4.4 隔行换色

4.5 经验值

day04【JS高级】BOM对象、Window对象、二种定时器、 Location对象、DOM对象、DOM获取元素、DOM操作内容、DOM操作属性、DOM操作样式、DOM操作元素（标签）、 正则表达式相关推荐

最新文章

热门文章

day04【JS高级】BOM对象、Window对象、二种定时器、 Location对象、DOM对象、DOM获取元素、DOM操作内容、DOM操作属性、DOM操作样式、DOM操作元素（标签）、正则表达式

三正则表达式【了解】

四综合案例【作业】

day04【JS高级】BOM对象、Window对象、二种定时器、 Location对象、DOM对象、DOM获取元素、DOM操作内容、DOM操作属性、DOM操作样式、DOM操作元素（标签）、正则表达式相关推荐