BOM对象
浏览器对象模型
js把浏览器抽象成为一个
Windows对象
JS三种弹框
- 警告框：提示信息 alert()
- 确认框：确认信息 confirm()
- 输入框：输入信息 prompt()
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>弹框操作</title>
</head>
<body>
<script>
//警告
alert('中国')
//确认框
let result = confirm("确定要删除吗");
if (result == true) {
console('单击了确定');
} else {
console('单击了取消');
}
//输入框
let result = prompt('请输入您的年龄')
if (result!= null) {
console.log('用户输入的值：${result}');
} else {
console.log('单击了取消');
}
</script>
</body>
</html>
JS两个定时器
1、一次性定时器 创建：let 定时器对象=setTimeout(‘函数名()’,毫秒) 关闭:clearTimeout(定时器对象)【登录弹框成功，只提示一次】
2、循环性定时器：无限循环 创建：let 定时器对象=setInterval(函数，毫秒) 关闭：clearInterval（定时器对象）【轮播图】
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>定时器</title>
</head>
<body>
<!--
1、一次性定时器 创建：let 定时器对象=setTimeout(‘函数名()’,毫秒) 关闭:clearTimeout(定时器对象)【登录弹框成功，只提示一次】
2、循环性定时器：无限循环 创建：let 定时器对象=setInterval(函数，毫秒) 关闭：clearInterval（定时器对象）【轮播图】
-->
<button id="btn1"> 取消打印时间</button>
<button id="btn2"> 取消打印自然数</button>
<script>
//定时五秒，在控制台打印当前时间
function fun1() {
console.log(new Date().toLocaleString());
}
let timout = setTimeout('fun1()', 5000)
//取消打印时间
document.getElementById('btn1').onclick = function () {
clearTimeout(timout);
}
//每隔2秒递增
let num = 1;
function fun2() {
console.log(num++);
}
let interval=setInterval(fun2,2000)
//点击按钮取消打印自然数
document.getElementById('btn2').onclick = function () {
clearInterval(fun2());
}
</script>
</body>
</html>
location地址
1、获取当前窗口地址 location.href
2、刷新页面 location.reload()
3、跳转页面 location.href=‘新页面地址’
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>location</title>
</head>
<body>
<!--
1、获取当前窗口地址 location.href
2、刷新页面 location.reload()
3、跳转页面 location.href='新页面地址'
-->
<button onclick="addr()">获取当前浏览器地址</button>
<button onclick="refresh()">刷新当前页面</button>
<button onclick="jump()"> 跳转页面</button>
<script>
function addr() {
console.log(location.href);
}
function refresh() {
console.log(location.reload());
}
function jump() {
location.href='https://www.jd.com';
}
</script>
</body>
</html>
DOM对象
简介
DOM(Document Object Model) 页面文档对象模型
作用：JS把页面抽象成为一个对象,允许我们使用js来操作页面
dom获取元素
document.getElementById(id属性值)
document.querySelectorAll(css选择器)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>获取元素</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>
//获取id=username的标签对象
//console.log(document.getElementById('username'));
console.log(document.querySelector('#username'));
//获取class=radio的标签对象数组
console.log(document.querySelectorAll('.radio'));
//获取所有的option标签对象数组
console.log(document.querySelectorAll('option'));
//获取name=hobby的input标签对象数组
console.log(document.querySelectorAll('input[name=hobby]'));
//获取文件上传选择框
console.log(document.querySelectorAll('form input[type="file"]'));
</script>
</body>
</html>
dom操作内容
-
获取或者修改元素（标签）的纯文本内容
语法：
js对象.innerText; -
获取或者修改元素的html超文本内容
语法：
js对象.innerHTML; -
获取或者修改包含自身的html内容（了解）
语法：
js对象.outerHTML;
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>操作内容</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>';
</script>
</body>
</html>
dom操作属性
- 获取文本框的值,单选框或复选框的选中状态 语法: element.properties 获取或者修改元素对象的原生属性
- 给元素设置自定义属性 语法: element.setAttribute(属性名,属性值) 给元素设置一个属性值,可以设置原生和自定义
- 获取元素的自定义属性值 语法: element.getAttribute(属性名) 获取元素的一个属性值,可以获取原生和自定义
- 移除元素的自定义属性 语法: element.removeAttribute(属性名)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>操作属性</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); // text
console.log(username.name); // username
console.log(username.value); // 德玛西亚
// 2.给文本框设置自定义属性[新增、修改]
username.setAttribute('自定义','我是自定义属性');
// 3.获取文本框自定义属性
console.log(username.getAttribute('自定义'));
// 4.移出文本框自定义属性
username.removeAttribute('自定义')
username.removeAttribute('value')
</script>
</body>
</html>
dom操作样式
-
设置一个css样式【会用】
语法:
js对象.style.样式名=‘样式值’
特点：样式名按照驼峰式命名
css格式：font-size
js格式：fontSize -
批量设置css样式（了解）
语法:
js对象.style.cssText=‘css样式字符串’
缺点：让开发者痛苦，有耦合性 -
通过class设置样式【重点】
语法:
js对象.className=‘class选择器名’
特点：解耦
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>操作样式</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>
dom操作元素（标签）
-
创建一个标签对象
语法：
document.createElement(标签名称) -
给父标签添加一个子标签
语法：
父标签对象.appendChild(子标签对象)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>操作元素</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中使用正则表达式
1.创建方式
1）let rege = new RegExp(“正则表达式字符串”);
2）let rege = /正则表达式/;
2.验证方法
1）正则对象.test(字符串)
符合正则规则就返回true，否则false
2）字符串对象.match(正则对象)
返回字符串中符合正则规则的内容。
3. 了解下正则修饰符
4. 在线正则表达式
https://tool.oschina.net/regex/#
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>正则表达式</title>
</head>
<body>
<script>
// 1.创建正则对象
let reg1 = new RegExp('\\d+'); // 规则只能是纯数字
console.log(reg1.test('abc')); // false
console.log(reg1.test('123321')); // true
// 2.直接使用正则表达式【推荐】
let reg2 = /\d+/;
console.log(reg2.test('abc')); // false
console.log(reg2.test('123321')); // true
console.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')); // false
console.log(emailReg.test('[email protected]')); // true
// 以手机号举例
let phoneReg = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
console.log(phoneReg.test('123123')); // false
console.log(phoneReg.test('18312332199')); // 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 事件 表单提交之前触发
-->
</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"/><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>
// 1. 两次密码输入一致
//通过id属性获得密码框、确认密码框标签对象
let pwd1 = document.getElementById('pwd1');
let pwd2 = document.getElementById('pwd2');
//比较两次输入的密码是否一致
function checkPwd() {
let boo = pwd1.value == pwd2.value;
if (boo == true) {
//密码一致的时候，提示信息不出来
document.getElementById('pwdwarn').style.display = 'none';
} else {
//span信息显示出来
document.getElementById('pwdwarn').style.display = 'inline';
}
return boo;
}
//给确认密码框绑定失去焦点的事件
pwd2.onblur = checkPwd;
// 2. 邮箱格式正确,使用正则表达式
let emailR = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
//获取邮箱的对象
let email = document.getElementById('email');
function checkEmail() {
let boo = emailR.test(email.value);
if (boo == true) {
//邮箱格式正确时候，提示信息不出来
document.getElementById('emailwarn').style.display = 'none';
} else {
//span信息显示出来
document.getElementById('emailwarn').style.display = 'inline';
}
return boo;
}
//绑定失去焦点事件
email.onblur = checkEmail;
// 3. 手机号格式正确
//获取手机号的js对象
let phone = document.getElementById('phone');
//定义正则表达式
let phoneT = /^1[3456789]\d{9}$/;
function checkPhone() {
let boo = phoneT.test(phone.value);
if (boo == true) {
document.getElementById('phonewarn').style.display = 'none';
} else {
//span信息显示出来
document.getElementById('phonewarn').style.display = 'inline';
}
return boo;
}
//绑定失去焦点事件
phone.onblur = checkPhone;
//提交表单时，会触发onsubmit事件
document.getElementById('myForm'), onsubmit = function () {
return checkPwd() && checkPhone() && checkEmail();
}
</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 data = new Array();
data['北京'] = ['顺义区', '昌平区', '朝阳区'];
data['河北'] = ["保定", "石家庄", "廊坊"];
data['辽宁'] = ["沈阳", "铁岭", "抚顺"];
let provinceId = document.getElementById("provinceId");//获取省下拉列表
let cityId = document.getElementById("cityId");//获取市下拉列表
//页面加载成功后，初始化省份数据
window.onload = function () {
//遍历省份【索引for】
for (let index in data) {
//获取或者修改元素的html超文本内容
provinceId.innerHTML += `<option value="${index}">${index}</option>`;
}
}
//给省份绑定onchange事件
provinceId.onchange = function () {
//清空上一次的信息
cityId.innerHTML = `<option value="">----请-选-择-市----</option>`;
//获得省份后面的城市
let citys = data[this.value];
//遍历【增强for】
for (let city of citys) {
cityId.innerHTML += `<option value="${city}">${city}</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>
</table>
<!--
隔行变色
1. 表格奇偶行颜色不同
2. 鼠标移入颜色高亮
-->
<script>
let oldcolor;
//获得所有的tr的js对象，返回是一个数组
let arr = document.querySelectorAll('table tr');
//遍历该数组
for (let i = 0; i < arr.length; i++) {
//偶数索引，奇数行
if (i % 2 == 0) {
arr[i].style.backgroundColor = 'pink';
} else {
arr[i].style.backgroundColor = 'skyblue'
}
//鼠标移入移出事件
arr[i].onmouseover = function () {
oldcolor= arr[i].style.backgroundColor;
arr[i].style.backgroundColor = 'blue';
}
arr[i].onmouseout = function () {
arr[i].style.backgroundColor = oldcolor;
}
}
</script>
</body>
</html>
