day29_BOM_DOM
复习
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常用内置对象
string
array：有点像java的list集合
date
math
全局函数
今日内容
BOM
DOM（与xml的dom4j思想完全一样）可以实现对节点的增删改查
正则表达式：对字符的过滤校验
综合案例
BOM对象
BOM简介
BOM(browser Object Model)浏览器对象模型
JS把浏览器抽象成为一个window对象,运行我们使用js来模拟浏览器的行为.
Window对象
三种弹框方式
-
警告框: 提示信息
alert();
-
输入框: 确认信息
confirm("您确定要删除么?"); 点击确定返回值为 true, 点击取消 返回值为false
-
输入框: 输入信息
prompt(); 可以在弹出框里输入信息, 点击确定 返回值为输入的信息, 否则为null值
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS三个弹框</title>
</head>
<body>
<!--
JS三个弹框
查询手册完成
1. 警告用户网站内容可能不安全
2. 让用户确认是否删除所有数据
3. 提示用户输入银行卡密码
-->
<script >
// 1. 警告用户网站内容可能不安全
alert("您浏览器的内容可能不安全!");
// 2. 让用户确认是否删除所有数据
let boo = confirm("您确定要删除所有数据吗?");
console.log(boo);//确定 true 取消 false
// 3. 提示用户输入银行卡密码
let str = prompt("请输入密码",123);
console.log(str);//确定 用户输入的内容 取消 null
</script>
</body>
</html>
两种定时器方式
-
一次性定时器
setTimeout(函数, 毫秒数)
-
循环性定时器
setInterval(函数, 毫秒数)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS两个定时器</title>
</head>
<body>
<!--
JS两个定时器
1. 定时5秒之后在控制台打印当前时间
setTimeout(函数,毫秒数) 创建一个定时器对象,定时`毫秒数`之后,调用一次`函数`
2. 点击按钮取消打印时间
clearTimeout(定时器) 销毁定时器
3. 每隔2秒在控制台打印递增自然数
setInterval(函数,毫秒数) 创建一个定时器对象,间隔`毫秒数`调用`函数`,直到永远
4. 点击按钮取消打印自然数
clearInterval(定时器) 销毁定时器
总结:
1. setTimeout执行一次 setInterval执行无数次
2. setTimeout销毁使用clearTimeout setInterval销毁使用clearInterval
-->
<button onclick="myclearTimeout()">取消打印时间</button>
<button onclick="myclearInterval()">取消打印自然数</button>
<script >
// 1. 定时5秒之后在控制台打印当前时间
function myf1(){
console.log("当前时间");
}
let timeout = setTimeout(myf1,5000);//创建一个定时器对象,5秒后调用一次myf1
// 2. 点击按钮取消打印时间
function myclearTimeout(){
clearTimeout(timeout);//销毁定时器
}
// 3. 每隔2秒在控制台打印递增自然数
let k =1;
function myf2(){
console.log(k++);
}
let interval = setInterval(myf2,2000);//创建一个定时器对象,每隔2秒调用一次myf2,直
到永远
// 4. 点击按钮取消打印自然数
function myclearInterval(){
clearInterval(interval);//销毁定时器
}
</script>
</body>
</html>
location地址
-
获取当前窗口地址
location.href
-
刷新当前页面
location.reload();
-
跳转到指定地址的页面
location.href = "地址";
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>location地址</title>
</head>
<body>
<!--
location地址
1. 获取当前浏览器地址
location.href
2. 刷新当前页面
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对象
DOM简介
DOM(Document Object Model) 页面文档对象模型
JS把页面抽象成为一个对象,允许我们使用js来操作页面
DOM获取元素
-
第一种 : es6之前获取方式
-
获取一个
document.getElementById(id属性值)
-
获取多个
document.getElementsByTagName(标签名) 根据标签名获取, 返回数组对象
document.getElementsByClassName(标签名) 根据class属性获取, 返回数组对象
document.getElementsByName(标签名) 根据name属性获取, 返回数组对象
-
-
第二种: es6可根据CSS选择器获取
-
获取一个
document.querySelector(id选择器)
-
获取多个
document.querySelectorAll(css选择器)
-
es6之前的方式可以通过链式编程, 直接绑定 idea中会有提示, 而使用es6之后的方式, idea通过链式编程绑定事件是没有提示的
DOM操作内容
-
获取或者修改元素(标签)的纯文本内容
element.innerText;
-
获取或者修改元素的html超文本内容
element.innerHTML;
-
获取或者修改包含自身的html内容
element.outerHTML;
纯文本是指获取到的是只有文字, html超文本指获取到的包含html语法的内容
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>dom操作内容</title>
</head>
<body>
<!--
dom操作内容
1. element.innerText; 获取或者修改元素的纯文本内容
2. element.innerHTML; 获取或者修改元素的html内容
3. element.outerHTML; 获取或者修改包含自身的html内容
总结:
1. innerText 获取的是纯文本 innerHTML获取的是所有html内容
2. innerText 设置到页面中的是纯文本 innerHTML设置到页面中的html会展示出外观效果
3. innerHTML不包含自身 outerHTML包含自身的html内容
-->
<div id="d1">我是d1<br/></div>
<div id="d2">我是d2</div>
<div id="d3">我是d3</div>
<script>
// 1. 向body中追加html内容
document.write("<h1>大宝剑</h1>");//向body中追加html内容
// 2. 获取元素的纯文本,html内容对比
let d1 = document.querySelector("#d1");//获取d1标签对象
console.log(d1.innerText);//我是d1
console.log(d1.innerHTML);//我是d1<br/>
// 3. 修改元素的纯文本,html内容对比
let d2 = document.querySelector("#d2");//获取d1标签对象
d2.innerText = "<h2>小宝剑</h2>";//修改d1的纯文本内容
d2.innerHTML = "<h2>小宝剑</h2>";//修改d1的html内容
// 4. 获取或修改包含元素自身的html内容(了解)
let d3 = document.querySelector("#d3");//获取d1标签对象
d3.outerHTML = "<h3>小宝剑</h3>";//修改d1的html内容
</script>
</body>
</html>
DOM操作属性
- 获取文本框的值,单选框或复选框的选中状态
语法: element.properties 获取或者修改元素对象的原生属性
- 给元素设置自定义属性
语法: element.setAttribute(属性名,属性值) 给元素设置一个属性值,可以设置原生和自定义
- 获取元素的自定义属性值
语法: element.getAttribute(属性名) 获取元素的一个属性值,可以获取原生和自定义 - 移除元素的自定义属性
语法: element.removeAttribute(属性名)
DOM操作样式
-
设置css样式
js对象.style.样式名 = "样式值"
(样式名是驼峰式命名,如 css格式为 font-size js格式 fontSize)
-
批量设置css样式(不推荐)
-
语法
js对象.style.cssText = "css样式字符串"
-
特点
没有提示, 耦合性高
-
-
通过class设置样式(解耦性强)
-
语法
js对象.className="class选择器的名"
相当于是在css中把样式写好, 然后把这个样式的class名字绑定给需要样式的标签, 即把名字给他
-
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>dom操作样式</title>
</head>
<body>
<!--
dom操作样式
1. 设置一个css样式
语法: element.style.驼峰格式样式属性名 获取或者修改一个css样式
2. 批量设置css样式
语法: element.style.cssText 获取后者修改 标签的style属性的文本值
3. 通过class设置样式
语法: element.className 获取或者修改标签的class属性的文本值
4. 切换class样式
语法: element.classList es6特别提供的操作元素class的接口
element.classList常用方法有四个:
add() 添加一个class样式
remove() 移除一个class样式
contains() 判断是否包含某一个样式
toggle() 切换一个class样式 有则删除,无则添加
-->
<style>
#p1{ background-color: red;}
.mp{color:green}
.mpp{background-color: lightgray;}
</style>
<p id="p1">1. 设置一个css样式</p>
<p id="p2" >2. 批量设置css样式</p>
<p id="p3" class="mpp">3. 通过class设置样式</p>
<p id="p4">4. 切换class样式</p>
<script >
let p1 = document.querySelector("#p1");//获取段落标签
let p2 = document.querySelector("#p2");//获取段落标签
let p3 = document.querySelector("#p3");//获取段落标签
let p4 = document.querySelector("#p4");//获取段落标签
// 1. 设置一个css样式
p1.style.color = "white";//白色字体
p1.style.backgroundColor = "black";//黑色背景
console.log(p1.style.backgroundColor);//获取一个样式名
p1.style.display = "none";//隐藏不显示
p1.style.display = "block";//显示
// 2. 批量设置css样式
p2.style.cssText = "border:1px solid gold;color:green;font-family:'楷体';";//
批量修改样式
// 3. 通过class设置样式
console.log(p3.className);//mpp
p3.className =p3.className+ " mp";//修改class的文本值
// 4. 切换class样式
let classList = p4.classList;//p4的class样式集合
classList.add("mpp");//添加一个class样式
console.log(classList.contains("mp"));//false
classList.add("mp");//添加一个class样式
classList.remove("mp");//移除一个class样式
classList.toggle("mp");//切换,无则添加
classList.toggle("mp");//切换,有则删除
</script>
</body>
</html>
DOM操作元素
-
创建一个标签对象
document.createElement("标签名")
-
给父标签添加一个子标签
父标签对象.appendChild("子标签对象名")
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>dom操作元素</title>
</head>
<body>
<!--
dom操作元素
1. 后面添加喝酒(掌握)
innerHTML 获取或者设置标签的html内容
2. 后面添加烫头(了解)
document.createElement(标签名称) 创建一个标签对象
parentNode.appendChild(newNode) 给父标签添加一个子标签
3.移除元素(了解)
outerHTML
-->
<div id="container">
<input id="smoke" type="checkbox" name="hobby" value="抽烟">
<label for="smoke">抽烟 </label>
<!-- <input id="drink" type="checkbox" name="hobby" value="喝酒">-->
<!-- <label for="drink">喝酒 </label>-->
<!-- <input id="perm" type="checkbox" name="hobby" value="烫头">-->
<!-- <label for="perm">烫头 </label>-->
</div>
<script >
let container = document.querySelector("#container");//获取div标签对象
//1. 后面添加喝酒(掌握) innerHTML
container.innerHTML += '<input id="drink" type="checkbox" name="hobby"
value="喝酒">' +
'<label for="drink">喝酒 </label>';//添加喝酒复选框
//2. 后面添加烫头(了解)
let input = document.createElement("input");//创建一个input标签
// console.log(input);//<input/>
input.id = "perm";//添加一个id属性
input.type="checkbox";//添加一个type属性
input.name = "hobby";//添加一个name属性
input.value = "烫头";//添加一个value属性
console.log(input);//<input id="perm" type="checkbox" name="hobby" value="烫
头">
container.appendChild(input);//向container中追加input元素
let label = document.createElement("label");//创建一个label标签对象
// console.log(label);//<label></label>
label.setAttribute("for","perm");//添加一个for属性
label.innerHTML = "烫头 ";//添加html内容
console.log(label);//<label for="perm">烫头 </label>
container.appendChild(label);//向container中追加label标签对象
//3.移除元素(了解) outerHTML
// container.outerHTML = "";//删除包含自身的所有html内容
</script>
</body>
</html>
正则表达式
在js中使用正则表达式
-
创建方式
- let regExp = new RegExp("正则表达式");
- let regExp ="/正则表达式/";
-
验证方法
-
正则对象.test(字符串)
符合正则规则就返回true, 否则false
-
字符串对象.match(正则对象)
返回字符串中符合正则规则的内容
-
-
正则修饰符
i 忽视大小写
g 全局匹配
m 多行匹配
-
在线正则表达式网站
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>正则表达式</title>
</head>
<body>
<!--
正则表达式
1. 理解正则表达式语法
语法:
1. /pattern/attributes (推荐使用)
2. new RegExp(pattern, attributes); (不推荐)正则表达式中的特殊符号需要转义
pattern 正则表达式
attributes 正则表达式修饰符
i 不区分大小写 ,匹配字符串时不区分大小写
g 全局匹配 ,匹配到一个之后不停止,匹配字符串的所有内容
m 多行匹配 ,匹配字符串的所有行的内容
常用正则表达式对象的方法
test() 语法 RegExpObject.test(string)
如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回
false。
2. 会使用如下正则表达式匹配字符串
验证邮编
/\d{6}/
校验是否全由8位数字组成
/^[0-9]{8}$/
中文名称
/^[\u4E00-\u9FA5]{2,4}$/
是否带有小数
/^\d+\.\d+$/
验证身份证号
/\d{17}[\d|X]|\d{15}/
校验电话码格式
/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/
验证网址
/http(s)?:[//]{2}([\w-]+\.)+[\w-]+([/]{1}[\w- ./?%&=]*)?/
验证EMail
/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/
-->
<script >
//1. 理解正则表达式语法
let reg1 = new RegExp("\\d{3}");//需要转义符,不推荐使用.创建一个正则表达式对象,匹配
有三个数字
console.log(reg1.test("abc"));//false
console.log(reg1.test("123"));//true
let reg2 = /\d{3}/;//不需要转义符,推荐使用.创建一个正则表达式对象,匹配有三个数字
console.log(reg2.test("abc"));//false
console.log(reg2.test("123"));//true
//正则表达式修饰符(了解)
let regi = /[amn]/i;//不区分大小写匹配amn
let resi = "ABC".match(regi);//从"ABC"中匹配regi模式字符串
console.log(resi);
let regg = /\d/g;//全局查找数字
let resg = "1 plus 2 equals 3".match(regg);
console.log(resg);
let regm = /^\d/m;//多行匹配开头的数字
let resm = "abc1 plus 2 equals 3\n6abcmnk".match(regm);
console.log(resm);
//2. 会使用如下正则表达式匹配字符串
let email = /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;//创建一个正则表达式
对象,匹配邮箱格式
console.log(email.test("123abc"));//false
console.log(email.test("123abc@qq.com"));//true
let phone = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;//创建一个正则表达式,匹配电
话号码
console.log(phone.test("123456"));//false
console.log(phone.test("18312312312"));//true
</script>
</body>
</html>
重点案例
-表单校验
<!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 事件 表单提交之前触发,用法实例:
onsubmit="return 函数()" 函数返回true则表单正常提交,函数返回false则阻止表单提交
-->
</head>
<body>
<div class="regist_bg">
<div class="regist">
<form action="#" onsubmit="return judge()">
<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="loginpwdId"
type="password" name="loginpwd" size="50" /> </td>
</tr>
<tr>
<td align="right">确认密码</td>
<td colspan="2"><input id="reloginpwdId"
type="password" name="reloginpwd" size="50" /><span id="pwdwarn" class="warn">密
码不一致</span> </td>
</tr>
<tr>
<td align="right">Email</td>
<td colspan="2"><input id="emailId" 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 >
let loginpwdId = document.querySelector("#loginpwdId");//获取密码框
let reloginpwdId = document.querySelector("#reloginpwdId");//获取确认密码框
let pwdwarn = document.querySelector("#pwdwarn");//密码警告信息
let emailId = document.querySelector("#emailId");//邮件输入框
let emailwarn = document.querySelector("#emailwarn");//邮件警告信息
// 1. 两次密码输入一致
function pwd(){//校验确认密码
let boo = loginpwdId.value == reloginpwdId.value;//判断密码是否一致
if(boo){//合法,隐藏警告
pwdwarn.style.display = "none";//隐藏
}else{//不合法,显示警告
pwdwarn.style.display = "inline";//显示
}
return boo;//返回密码是否合法
}
reloginpwdId.onchange = pwd;//当确认密码值改变时调用pwd方法执行
// 2. 邮箱格式正确
function mail(){//校验邮件格式
let email = /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;//创建一个正则
表达式对象,匹配邮箱格式
let boo = email.test(emailId.value);//校验邮件格式
if(boo){//合法,隐藏警告
emailwarn.style.display = "none";//隐藏
}else{//不合法,显示警告
emailwarn.style.display = "inline";//显示
}
return boo;//返回邮件是否合法
}
emailId.onchange = mail;//当邮件输入框的值改变时调用mail方法执行
// 3. 手机号格式正确
let phone = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;//创建一个正则表达式,匹配电
话号码
//4. 提交表单时校验表单项是否合法.
function judge(){//表单提交校验
return pwd() && mail();//所有表单项都合法才返回true
}
</script>
</body>
</html>
-商品全选
<!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 >
let btn1 = document.querySelector("#btn1");//全选
let btn2 = document.querySelector("#btn2");//反选
let boxes = document.querySelectorAll('input[type="checkbox"]');//获取所以复选
框
btn1.onclick = function(){//全选
for(let b of boxes){
b.checked = true;//全选
}
}
btn2.onclick = function(){//反选
for(let b of boxes){
b.checked = !b.checked;//反选
}
}
</script>
</body>
</html>
-省市级联
<!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">
//准备省市数据
let provinceData = ["北京","河北","辽宁"];
//准备省对应的市数据
let cityData = {
"北京":["顺义区","昌平区","朝阳区"],
"河北":["保定","石家庄","廊坊"],
"辽宁":["沈阳","铁岭","抚顺"]
};
let provinceId = document.querySelector("#provinceId");//获取省下拉列
表
let cityId = document.querySelector("#cityId");//获取市下拉列表
//页面加载完成时填充省选项
window.onload = function(){//页面加载完成时
for(let p of provinceData){//迭代省选项
provinceId.innerHTML += "<option value='"+p+"'>"+p+"
</option>";//追加省选项
}
}
//当省选项值改变时
provinceId.onchange = function(){//省选项值改变时
//每天填充市数据时先初始化一次
cityId.innerHTML = '<option value="">----请-选-择-市----
</option>';
console.log(this.value);//选中的省
let citys = cityData[this.value];//当前省对应的市数据
//把市数据填充到市选项中
for(let c of citys){
cityId.innerHTML += "<option value='"+c+"'>"+c+"
</option>";//追加市选项
}
}
</script>
</body>
</html>
-隔行变色
<!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>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>
</table>
<!--
隔行变色
1. 表格奇偶行颜色不同
2. 鼠标移入颜色高亮
-->
<script >
let trs = document.querySelectorAll("table tr");//获取所有的行
for(let i=0;i<trs.length;i++){
if(i%2 == 0){//索引是偶数行
trs[i].style.backgroundColor ="#efefef";//浅灰色
}else{//索引是奇数行
trs[i].style.backgroundColor ="#ccc";//灰色
}
let oldColor = trs[i].style.backgroundColor;//原来的颜色
trs[i].onmouseover = function(){//鼠标移入的时候
this.style.backgroundColor = "pink";//粉色
}
trs[i].onmouseout = function(){//鼠标移出的时候
this.style.backgroundColor = oldColor;//回复原色
}
}
</script>
</body>
</html>
老师下午总结
1. BOM对象
弹窗
警告提示框：
alert("数据加载失败!");
确认取消框：
let flag = confirm("您确定要删除所有数据吗?");
console.log(flag);//确定返回true， 取消返回false
提示输入框：
let pwd = prompt("请输入密码");
console.log(pwd);//确定时，返回用户输入的内容；取消时返回null
定时器
设置定时器：
setInterval(函数,毫秒数);
每间隔给定的毫秒值就会执行一次函数。
setTimeout(函数,毫秒数)
到达指定的毫秒数后执行一次函数功能。
清除定时器：
clearInterval(定时器编号)
clearTimeout(定时器编号)
每一个定时器调用后都会返回一个唯一的编号，根据定时器编号可以清除对应的定时器。
两个定时器区别：
setInterval ： 每间隔一段毫秒值就会执行一次，不清除会一直执行。
setTimeout ： 到达到达指定的毫秒数之后，触发一次定时器的执行，只会执行一次。
location
1. 获取当前浏览器地址
location.href
2. 修改浏览器地址
location.href = "url地址" ;
3. 刷新当前页面
location.reload();
html css
js vuejs nodejs
2. DOM对象
操作元素
获取元素对象：
1.根据id获取标签元素: 唯一的元素
document.getElementById("ID")
document.querySelector("#ID")
2.根据class获取多个元素
document.getElementsByClassName("class属性值")
document.querySelectorAll(".class属性值")
3.根据标签名称获取多个元素
document.getElementsByTagName("标签")
document.querySelectorAll("标签")
4. 根据name属性获取多个元素
document.getElementsByName('name属性值')
document.querySelectorAll([name=name值])
5. 获取当前元素的父标签
element.parentElement //element表示当前标签对象
操作元素对象：
1. 创建一个标签对象
document.createElement("标签名称");
2. 添加一个子标签
element.appendChild(子标签对象); //element表示当前标签对象
3. 移除元素
element.outerHTML = "" //element表示要移除的标签对象
操作内容
element.innerText; 获取或者修改元素的纯文本内容
element.innerHTML; 获取或者修改元素的html内容
element.outerHTML; 获取或者修改包含自身的html内容
操作属性
1. 获取或者修改元素对象的属性
element.属性名
2. 给元素设置属性（可以设置原生和自定）
element.setAttribute(属性名,属性值)
3. 获取元素属性值
element.getAttribute(属性名)
4. 移除元素的自定义属性
element.removeAttribute(属性名)
操作样式
1. 获取或者修改一个css样式
element.style.驼峰格式样式属性名
举例：
//获取标签宽度
标签对象.style.width;
//设置标签宽度
标签对象.style.width = "400px";
2. 通过class获取或者设置样式
element.className
举例：
//获取标签的class属性
标签对象.className
//设置class属性值
标签对象.className = "新值";
3. 获取或修改style属性的所有样式 （了解）
element.style.cssText
4. 切换class样式（了解）
element.classList接口，常用方法有四个:
add() 添加一个class样式
remove() 移除一个class样式
contains() 判断是否包含某一个样式
toggle() 切换一个class样式 有则删除,无则添加
3. 正则表达式
格式
格式1：
/正则表达式/匹配模式
格式2：
new RegExp("正则表达式", "匹配模式");
注意：该格式在表示正则表达式的时候需要转义,例如\d，应表示为\\d
匹配模式：
i 不区分大小写,匹配字符串时不区分大小写
g 全局匹配 ,匹配到一个之后不停止,匹配字符串的所有内容
m 多行匹配 ,匹配字符串的所有行的内容
匹配规则
1.字符匹配
\b 匹配一个单词边界。'er\b' 可以匹配 "never" 中的 'er'，但不能匹配 "verb" 中的 'er'。
\B 匹配非单词边界。'er\B' 能匹配 "verb" 中的 'er'，但不能匹配 "never" 中的 'er'。
\d 匹配一个数字字符。等价于 [0-9]。
\D 匹配一个非数字字符。等价于 [^0-9]。
\s 匹配任何空白字符，包括空格、制表符、换页符等等。
\S 匹配任何非空白字符。
\w 匹配包括下划线的任何单词字符。等价于'[A-Za-z0-9_]'。
\W 匹配任何非单词字符。等价于'[^A-Za-z0-9_]'。
^ 限定字符串的开始位置。
$ 限定字符串的结束位置。
2.区间匹配
[xyz] 匹配xyz中的任意一个字符。
[^xyz] 匹配除了xyz外的任意一个字符。
[a-z] 匹配指定范围内的任意字符。
[^a-z] 匹配任何不在指定范围内的任意字符。
[a-zA-Z0-9] 匹配a-z或者A-Z或者0-9之间的任意一个字符。
3.数量匹配
* 0次到多次 (任意次)
? 0次到1次 (有或没有)
+ 1次到多次
{n} 重复n次
{n,} 重复n次以上 (>=n次)
{n,m} 重复n到m次
API操作
string对象
match(/正则表达式/);
作用：匹配并获取符合正则表达式的内容。
参数：正则表达式
返回：匹配成功返回匹配到的字符串数组，失败返回null。
RegExp对象
test("字符串")
作用：判断正则表达式是否匹配参数中的字符串。
参数：要匹配的字符串
返回：匹配成功返回true，否则返回false
举例：
<script>
let str = "abc123cba456aaa789";
//RegExp对象
let reg = new RegExp("\\d+","g"); //g表示全局匹配
//判断是否匹配
console.log(reg.test(str)); //true
//匹配并获取
let array = str.match(/\d+/g);
if(array != null){
for(let i in array){
console.log(array[i]); //123 456 789
}
}
</script>
4. 扩展作业
练习1
按要求在给定的HTML页面中实现指定功能。
要求：
在输入框输入信息，点击添加的时候，动态添加一行内容。
点击删除的时候，删除被勾选的行。
HTML页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习1</title>
</head>
<body>
<table width="400" border="1" id="table" align="center" style="border-collapse: collapse">
<caption><h3>用户信息列表</h3></caption>
<tr>
<th>选择</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>李四</td>
<td>女</td>
<td>20</td>
</tr>
</table>
<div align="center">
姓名<input type="text" name="name" value=""/><br/>
性别<input type="text" name="gender" value=""/><br/>
年龄<input type="text" name="age" value=""/><br/>
<button>添加</button>
<button>删除</button>
</div>
</body>
</html>
参考答案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习1</title>
<script type="text/javascript">
function addRow() {
//获取输入框的姓名
let name = document.querySelectorAll("[name=name]")[0].value;
//获取性别
let gender = document.querySelectorAll("[name=gender]")[0].value;
//获取年龄
let age = document.querySelectorAll("[name=age]")[0].value;
if(name=="" || gender=="" || age==""){
return;
}
//创建tr元素
let tr = document.createElement("tr");
//创建单元格
tr.innerHTML = `<td><input type="checkbox"/></td><td>${name}</td><td>${gender}</td><td>${age}</td>`;
//往表格中添加tr元素
let table = document.querySelector("#table");
table.appendChild(tr);
//清空输入框
document.querySelectorAll("[name=name]")[0].value = "";
document.querySelectorAll("[name=gender]")[0].value = "";
document.querySelectorAll("[name=age]")[0].value = "";
}
function deleteRows() {
//选择所有checkbox元素
let ckElements = document.querySelectorAll("[type=checkbox]");
//遍历获取所有被勾选的
for(let ckbox of ckElements){
//判断是否选中
if(ckbox.checked){
//得到tr元素
let tr = ckbox.parentElement.parentElement;
//删除tr元素
tr.outerHTML = "";
}
}
}
</script>
</head>
<body>
<table width="400" border="1" id="table" align="center" style="border-collapse: collapse">
<caption><h3>用户信息列表</h3></caption>
<tr>
<th>选择</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>李四</td>
<td>女</td>
<td>20</td>
</tr>
</table>
<div align="center">
姓名<input type="text" name="name" value=""/><br/>
性别<input type="text" name="gender" value=""/><br/>
年龄<input type="text" name="age" value=""/><br/>
<button onclick="addRow()">添加</button>
<button onclick="deleteRows()">删除</button>
</div>
</body>
</html>
练习2
根据给出的HTML页面，实现以下功能。
要求：
点击 “获取验证码” 按钮之后，按钮被禁用，鼠标变为不可用图标，30秒之后取消禁用。
按钮上显示 ”n秒后重新获取“，n从30开始倒数显示。
( 提示：鼠标显示禁用图标的css语法 ： cursor: not-allowed )
效果：
HTML页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取验证码按钮</title>
<script type="text/javascript">
</script>
</head>
<body>
<!--点击按钮后，按钮被禁用，倒数60秒后可重新点击-->
<button id="btn">获取验证码</button>
</body>
</html>
参考答案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取验证码按钮</title>
<script type="text/javascript">
function getVarCode() {
//将按钮禁用
let btn = document.querySelector("#btn");
btn.disabled = true;
btn.style.cursor = "not-allowed"; //鼠标显示禁用图标
//按钮显示60秒倒计时
let second = 30;
let counter = setInterval(function () {
second--;
if(second>0){
btn.innerText = second+"秒后重新获取";
}
},1000);
//60秒时间间隔到了之后清除倒计时，按钮恢复点击功能
setTimeout(function () {
//清除倒计时定时器
clearInterval(counter);
//按钮恢复
btn.innerHTML = "获取验证码";
btn.disabled = false;
btn.style.cursor = "";
},30000);
}
</script>
</head>
<body>
<!--点击按钮后，按钮被禁用，倒数60秒后可重新点击-->
<button id="btn" onclick="getVarCode()">获取验证码</button>
</body>
</html>
