一 BOM对象
Browser Object Model 浏览器对象模型
我们把浏览器抽取成对象模型,可以模拟一些浏览器的功能
例如:地址栏模拟成location对象,前进后退刷新按钮模拟成history对象
1.2 window对象
模拟浏览器整个窗口
1)对话框
<script type="text/javascript">
/*
* 对话框
* 1)警告框:window.alert('消息内容');
* 2)确认框:confirm('消息内容'); 确定按钮 返回true 、取消按钮 返回false
* 3)输入框:prompt('消息内容','默认值'); 确定按钮 返回输入的值、 取消按钮 返回null
*
* 注意:window 方法和属性,window可以省略不写
* */
// window.alert('你好,传智播客');
// console.log(confirm('贺哥美不美?'));
console.log(prompt('5+4=?','请输入内容'));
</script>
2)定时器
<script type="text/javascript">
/*
* 定时器
* 1)复用性定时器
* var number = setInterval('函数名()',间隔时间); 根据间隔时间,执行指定函数,无限循环,返回值定时器编号
* var number = setInterval(函数名,间隔时间); 根据间隔时间,执行指定函数,无限循环,返回值定时器编号
* clearInterval(number); 关闭定时器
* 2)一次性定时器
* var number = setTimeout('函数名()',间隔时间); 根据间隔时间,执行指定函数,仅执行一次,返回定时器编号
* var number = setTimeout(函数名,间隔时间); 根据间隔时间,执行指定函数,仅执行一次,返回定时器编号
* clearTimeout(number); 关闭定时器
*
* */
function sing() {
console.log("单身情歌");
}
// let interval = setInterval('sing()', 1000);
// console.log("定时器编号:" + interval);
// 关闭定时器
document.getElementById('myBtn1').onclick = function () {
clearInterval(interval);
}
function dance() {
console.log("海草舞");
}
let timeout = setTimeout('dance()',2000);
// 关闭定时器
document.getElementById('myBtn2').onclick=function () {
clearTimeout(timeout)
}
</script>
c)案例:会动的时钟
需求
点击开启按钮,时间开始移动,点击暂停按钮,时间停止移动
技术分析
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div {
border: 1px solid black;
}
div #time{
color: aqua;
}
</style>
<body>
<div align="center">
<h2 id="time">我是时间</h2>
<input type="button" value="开始" id="start" onclick="start()"/>
<input type="button" value="暂停" id="pause" onclick="pause()"/>
</div>
</body>
<script type="text/javascript">
window.onload = function () {
var time = document.getElementById("time");
function timeChange() {
time.innerText = new Date().toLocaleString();
}
var number;
document.getElementById("start").onclick = function () {
clearInterval(number);
number = setInterval(timeChange,1000);
}
document.getElementById("pause").onclick = function () {
clearInterval(number);
}
}
// var time = document.getElementById("time");
// function timeChange() {
// time.innerText = new Date().toLocaleString();
// }
// var number;//获取
// function start() {
// clearInterval(number);
// number = setInterval(timeChange,1000);
// }
// function pause() {
// clearInterval(number);
// }
</script>
1.3 location对象
浏览器窗口地址栏
a)属性和方法
<script type="text/javascript">
/*
* location对象
* 1)location.href 当前窗口地址栏的属性值
* 2)location.reload() 页面刷新
* */
// 获取当前地址
console.log(location.href);
// 跳转新页面
//location.href = "https://www.baidu.com";
// 补充知识点,id是页面的唯一标识,js可以直接使用
// doucment.getElementById('myBtn');
myBtn.onclick=function () {
location.reload();
}
</script>
b)案例:页面倒计时跳转
需求
页面倒计时5秒后,跳转到百度
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div {
border: 1px solid black;
}
</style>
<body>
<div align="center">
<h2>将在<span id="addressChange">5</span>秒后跳转到百度</h2>
<input type="button" value="点击跳转" id="change">
</div>
</body>
<script type="text/javascript">
window.onload = function () {
//页面跳转
var number = 5;
function addressChange() {
var ac = document.getElementById("addressChange");
if (number>=1){
ac.innerText=number--;
}else {
window.location.href="http://www.baidu.com";
}
}
document.getElementById("change").onclick = function () {
setInterval(addressChange,1000);
}
}
1.4 history对象
浏览器窗口历史记录对象
a)属性和方法
<script type="text/javascript">
/*
* history对象
* 1)history.forward(); 前进
* 2)history.back(); 后退
* 3)history.go(1); 前进
* 4)history.go(-1);后退
* 5)history.go(0); 刷新
*
*
* */
</script>
二 DOM对象
2.1 概述
Document Object Model 文档对象模型
html标签通过浏览器加载在内存中会生成一颗DOM属性,通过js代码可以获取这颗树的任意一个节点,可以修改这个节点属性和文本内容,动态修改html标签
2.2 获取节点的方法
// 获取唯一节点(元素)
document.getElementById('id的属性值');
// 获取一组节点(元素)
document.getElementsByTagName('html标签名');
document.getElementsByClassName("class的属性值");
document.getElementsByName('name的属性值');
a)案例:查找节点
需求
根据上面所学的方法,找到相应节点元素
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="button" id="btn1" value="通过标签名设置连接">
<input type="button" id="btn2" value="通过name值赋值内容">
<input type="button" id="btn3" value="通过类名赋值内容">
</div>
<div>
<a>aaaa</a>
<a>aaaa</a>
<a>aaaa</a>
</div>
<div>
<span name="text1"></span><br>
<span name="text1"></span><br>
<span name="text1"></span>
</div>
<div>
<span class="text2"></span><br>
<span class="text2"></span><br>
<span class="text2"></span>
</div>
</body>
<script>
document.getElementById("btn1").onclick=function () {
var elementsByTagName = document.getElementsByTagName("a");
for (var i = 0;i<elementsByTagName.length;i++){
elementsByTagName[i].href="http://www.baidu.com";
}
}
document.getElementById("btn2").onclick=function () {
var elementsByName = document.getElementsByName("text1");
for (var i = 0;i<elementsByName.length;i++){
elementsByName[i].innerHTML="<font color='red'>bbbb</font>"
}
}
document.getElementById("btn3").onclick=function () {
var elementsByClassName = document.getElementsByClassName("text2");
for (var i = 0;i<elementsByClassName.length;i++){
elementsByClassName[i].innerHTML="<font color='#7fffd4'>cccc</font> "
}
}
</script>
</html>
b)案例:全选反选
需求
点击复选框,动态影响商品列表
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="checkbox" name="item" value="1500"/> 山地自行车1500<br/>
<input type="checkbox" name="item" value="200"/> 时尚女装200<br/>
<input type="checkbox" name="item" value="3000"/> 笔记本电脑3000元<br/>
<input type="checkbox" name="item" value="800"/> 情侣手表800<br/>
<input type="checkbox" name="item" value="2000"/> 桑塔纳2000<br/>
<hr/>
<input type="checkbox" id="all" onclick="selectAll(this)"/>全选/全不选
<input type="button" id="reverse" onclick="reverseSelect()" value=" 反 选 "/>
</body>
<script>
function selectAll(obj) {
var checked = obj.checked;
var elementsByName = document.getElementsByName("item");
for (var i =0;i<elementsByName.length;i++){
elementsByName[i].checked=checked;
}
}
function reverseSelect() {
var elementsByName = document.getElementsByName("item");
for (var i =0;i<elementsByName.length;i++){
elementsByName[i].checked=!elementsByName[i].checked;
}
}
</script>
</html>
c)案例:省市联动
需求
选择指定省份信息,动态加载相应的城市列表
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<select id="province">
<option value="noChange">--请选择省份--</option>
</select>
<select id="city">
<option value="noChange"> --请选择城市--</option>
</select>
</div>
</body>
<script>
var cityList = new Array();
cityList['北京市'] = ['朝阳区', '东城区', '西城区', '海淀区'];
cityList['上海市'] = ['宝山区', '黄浦区', '青浦区', '南汇区'];
cityList['广州省'] = ['广州市', '佛山市', '中山市', '东莞市'];
cityList['河北省'] = ['邯郸市', '石家庄市'];
cityList['河南省'] = ['郑州市', '洛阳市'];
cityList['湖北省'] = ['武汉市', '宜昌市'];
cityList['湖南省'] = ['湖南省', '长沙市'];
cityList['陕西省'] = ['陕西省', '西安市'];
cityList['山西省'] = ['山西省', '太原市'];
cityList['黑龙江省'] = ['黑龙江省', '哈尔滨市'];
cityList['台湾省'] = ['台北市'];
cityList['其他'] = ['其他'];
window.onload = function () {
for (var index in cityList){
document.getElementById('province').innerHTML += '<option value="' + index + '">' + index + '</option>';
}
}
document.getElementById('province').onchange = function () {
// 获取当前 option value的值
var value = this.value;
// 根据省份名称 查询城市列表
var cityArr = cityList[value];
document.getElementById('city').length = 1;
// 遍历城市列表,添加城市option
for (var index in cityArr) {
// 使用 dom内置对象
document.getElementById('city').add(new Option(cityArr[index], cityArr[index]));
}
}
</script>
</html>
2.3 使用js控制css样式
之前在html页面把css写死了,现在通过js动态修改标签的css样式
// 通过js代码直接修改 获取此标签dom元素
元素.style.样式名='样式值';
补充:
css编写中: font-size
js编写中: fontSize 小驼峰式命名
// js结合类选择器,进行修改
元素.className="类选择器";
a)案例:动态修改样式
需求
根据上面所学的方法,实现标签样式修改
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.myClass{
color: orange;
font-size: 50px;
font-family: 华文宋体;
}
</style>
</head>
<body>
<p id="first">
这是第一自然段
</p>
<p id="second">
这是第二自然段
</p>
<input type="button" value="改变几个样式" onclick="changeCss()"/>
<input type="button" value="改变类样式" onclick="changeClass()"/>
</body>
<script type="text/javascript">
// 方式一: 元素.style.样式名='样式值’ 驼峰式命名 font-size-> fontSize
function changeCss() {
var first = document.getElementById('first');
first.style.color = 'red';
first.style.fontSize = '30px';
first.style.fontFamily = '楷体';
}
// 方式二:元素.className= '类选择器'
function changeClass() {
var second = document.getElementById('second');
second.className='myClass';
}
</script>
</html>
b)案例:表格隔行换色
需求
通过js动态添加表格背景色,鼠标移入移出实现高亮的效果
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table id="tab1" border="1" width="800" align="center">
<caption><h1>商品分类</h1></caption>
<tr style="background-color: #ccc;">
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
<script>
var color;
var elementsByTagName = document.getElementsByTagName("tr");
for (var i =1;i<elementsByTagName.length;i++){
if (i%2==1){
elementsByTagName[i].style.backgroundColor="lightpink";
}else {
elementsByTagName[i].style.backgroundColor="lightblue";
}
elementsByTagName[i].onmouseover = function () {
color = this.style.backgroundColor;
this.style.backgroundColor="lightgreen";
}
elementsByTagName[i].onmouseout = function () {
this.style.backgroundColor = color;
}
}
</script>
</html>
三 表单校验
3.1 正则表达式
Regular Expression
作用:按照正确规则去匹配我们的字符串
a)js中如何正则表达式
// 方式一
var reg = new RegExp('正则表达式字符串','匹配模式'); i = ignore g=global
// 方式二
var reg = /正则表达式语句/匹配模式;
<script type="text/javascript">
var str = 'ABC123de45fgh6789qqq111';
// 校验 字符串中是否以 abc开头
// 使用正则对象
let regExp = new RegExp('^abc', 'i');
// test 方法 进行校验 成功返回 true 失败 false
console.log(regExp.test(str));
// 使用正则语句
let regExp2 = /111$/;
console.log(regExp2.test(str));
// 拓展知识点:现在想把整个数值都取出来
let regExp3 = /\d+/g;
// console.log(regExp3.matchAll(str));
// match 方法是字符串提供的
console.log(str.match(regExp3));
// js最标准的正则模板: /^正则表达式$/
/*
* 邮箱: jin.jia-de_123 @ 163 . com.cn
* cn
* com.cn
* 正则:/^ ([a-z0-9_\.-]+) @ ([\da-z\.-]+) \. ([a-z\.]{2,6})$/
*
* () 代表一组
* [] 代表任意元素
* a-z 26个英文字母
* 0-9 阿拉伯数字
* _ 下划线
* . 任意字符
* \ 转义字符
* - 减号
* + 代表一个或多个
* \d digit 0-9
* {2,6} 量词 至少2个,最多6个
*
* */
</script>
复习
- 能够使用window对象常用的方法
- 能够使用location对象常用的方法和属性
- 能够使用history对象常用的方法
- 能够使用DOM中来查找节点
- 能够使用JavaScript对CSS样式进行操作
- 能够使用正则表达式进行表单的验证