JS高级
# 今日目标1. BOM2. 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>
</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>
断点调试
若有收获，就点个赞吧
0 人点赞
