BOM浏览器对象模型
1.BOM概念
• BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可
以与浏览器窗口进行互动的对象结构。BOM 由多个对象组成，其中代表浏览器窗口的 Window
对象是 BOM 的顶层对象，其他对象都是该对象的子对象。
• 我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，比如：刷新浏览器、后退、前
进、在浏览器中输入URL等。
2.window对象
• window 是浏览器的顶级对象，当调用 window 下的属性和方法时，可以省略 window。
• 注意：window下两个特殊的属性 window.name、window.top
<body>
<script>
// window 对象是 BOM 中的一个顶层对象，其他的对象都是 window 的子对象。
// document 对象就是 window 的一个子对象
// console.dir(window.document);
// 输出 window 对象
console.dir(window);
// window 对象在调用属性和方法时，可以省略 window 不写
// alert(1);
// window.alert(2);
// 在全局作用域定义的全局变量，都是 window 的一个属性
var age = 18;
console.log(window.age);
// window 中 的特殊属性 name,如果定义新的变量，只会在原来的 name 属性上进行赋值，并且只能是字符串格式的值
// var name = 123;
// console.log(window.name);
// top 属性 在 window 中，属性值指向的就是顶层对象 window,这个属性是只读的，不能后期更改。
// var top = 23;
// console.dir(window.top);
</script>
</body>
3.对话框
alert()
prompt()
confirm()
<body>
<input type="button" value="alert" id="btn1">
<input type="button" value="prompt" id="btn2">
<input type="button" value="confirm" id="btn3">
<script>
// 获取元素
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');
// 警示框
btn1.onclick = function () {
alert("hello");
};
// 提示框
btn2.onclick = function () {
var num = prompt("请输入一个数字",12);
console.log(num);
};
// 让用户进行确认或者取消选择的对话框
// confirm 方法有返回值，根据按钮点击情况，如果点击确定 返回 true，如果点击取消 返回 false
btn3.onclick = function () {
var isSure = confirm("请问，您确定要删除这条数据吗？");
console.log(isSure);
};
</script>
</body>
4.加载事件
我们可以给 window 对象或者 等元素添加 onload 加载事件，表示只有绑定事件的元
素加载完毕才能触发事件，才能执行事件函数。
• 其中 window 对象加载完毕：指的是所有HTML结构加载完，并且外部引入资源（js、css、img、
视频）也加载完毕。
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 440px;
border: 10px solid #f00;
}
#box img {
display: block;
width: 440px;
}
</style>
</head>
<body>
<div id="box">
<img src="images/lunbo/01.jpg" alt="">
<img src="images/lunbo/02.jpg" alt="">
<img src="images/lunbo/03.jpg" alt="">
<img src="images/lunbo/04.jpg" alt="">
<img src="images/lunbo/05.jpg" alt="">
</div>
<script>
var box = document.getElementById("box");
var pics = document.getElementsByTagName("img");
// Chrome 浏览器渲染加载的机制，由于图片加载时间过长，避免等待，图片在加载过程中，会先执行后面的 js 代码
// 后续需要使用到 图片的宽度或高度等尺寸，在 js 中可能获取不到
// console.log(box.clientHeight);
// 图片的加载事件,只要图片加载完毕渲染成功后，就能够立即执行事件函数
// pic.onload = function () {
// // 在这里已经保证图片加载成功
// console.log(box.clientHeight);
// };
// 计数器
// var sum = 0;
// for (var i = 0 ; i < pics.length ; i++) {
// pics[i].onload = function () {
// sum++;
// // 判断这一次是否加载所有图片完毕
// if (sum >= pics.length) {
// console.log(box.clientHeight);
// }
// };
// }
window.onload = function () {
console.log(box.clientHeight);
};
</script>
</body>
应用
• 利用 window.onload 事件，可以将 js 代码提前到 html 结构之前。
• 注意：一个页面中只能有一个 window.onload 事件。
5.延时器
• 延时器是 window 对象的一个方法，类似于定时炸弹
• 语法：window.setTimeout(func,time);
• 第一个参数：延时执行的函数，可以是匿名函数定义，或者是一个函数名的引用，注意不要
加 () 。
• 第二个参数：延时的时间，以毫秒计数，1000 毫秒等于 1 秒。
• 功能：在指定的时间后，延迟执行一个函数。
<body>
<script>
// 延时器
// 异步语句
// 延时器为了保证后期能够被清除，需要定义赋值给一个变量
var timeout = window.setTimeout(function () {
console.log("boom");
},2000);
// 同步语句
console.log(1);
console.log(2);
console.log(3);
console.log(4);
// 清除延时器
window.clearTimeout(timeout);
</script>
</body>
• window 对象的一个方法
• 语法：window.clearTimeout(timeout);
• 参数：指定的延时器变量名引用。
• 功能：清除指定的延时器。
• 注意：清除的延时器需要存储到一个变量中，便于后期清除调用。
6.函数节流
<body>
<input type="button" id="btn" value="点击按钮">
<script>
// 点击输出 随机数
var btn = document.getElementById("btn");
// 绑定事件
// 函数节流操作
// 定义一个开关，给函数上一把锁，true 表示锁住状态，不能执行后面的代码，false 表示打开状态，可以执行后面的代码
// 初始状态锁是打开的
var lock = false;
btn.onclick = function () {
// 函数内部需要判断，是否在指定的时间之外触发事件
// 如果锁是打开的，可以往后执行，
// 如果锁是锁住的，不能执行后面的代码
if (lock) {
return;
}
console.log(Math.random());
// 执行完毕后，锁应该被锁住
lock = true;
// 隔 2秒 后，锁再次打开
setTimeout(function () {
lock = false;
},2000);
};
</script>
</body>
7.定时器
• 定时器是 window 对象的一个方法，相当于定时闹钟，每隔固定的时间响一次
• 语法：window.setInterval(func,interval);
• 第一个参数：每次执行的函数，可以是匿名函数定义，或者是一个函数名的引用，注意不要
加 () 。
• 第二个参数：时间间隔，以毫秒计数，1000 毫秒等于 1 秒。
• 功能：每隔一个指定的时间，周期性的执行一个函数。
<body>
<script>
var i = 1;
// 定时器也是异步语句
// 开启定时器：每隔 0.5 秒输出一次 i，并且让 i 每次自加
// 程序执行到定时器代码部分就相当于开启了一个定时器，不需要进行其他的打开操作
// 第一次执行函数时是在第一个时间间隔之后
// window.setInterval(function () {
// console.log(i++);
// },500);
// 要想清除定时器，在定义的时候必须存到一个变量中
var timer = setInterval(function () {
console.log(i++);
},500);
// 清除定时器
window.clearInterval(timer);
</script>
</body>
清除定时器
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: absolute;
top: 100px;
left: 0;
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<input type="button" value="开始" id="start">
<input type="button" value="结束" id="end">
<div class="box" id="box"></div>
<script>
// 简单运动
// 获取元素
var start = document.getElementById("start");
var end = document.getElementById("end");
var box = document.getElementById("box");
// 信号量
var nowLeft = 0;
// 全局定义一个变量存储定时器
var timer;
// 定时器
start.onclick = function () {
timer = setInterval(function () {
// 信号量进行自加
nowLeft += 5;
// 将最新的 nowLeft 的值赋值给元素的 css 属性
box.style.left = nowLeft + "px";
},100);
};
// 清除定时器
end.onclick = function () {
clearInterval(timer);
};
</script>
</body>
8.简单运动
简单运动：是一种视觉暂留效果，只要元素变化过程时间够短，给人眼造成的效果就是一个
运动的效果，人眼的视觉残留的时间 0.1-0.4 秒之间。
• 制作方法：通过定时器，实现每隔一个极短的时间（50-100 毫秒左右），执行函数，函数
内部让运动的属性值发生变化。
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: absolute;
top: 100px;
left: 0;
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<input type="button" value="开始" id="start">
<div class="box" id="box"></div>
<script>
// 简单运动
// 获取元素
var start = document.getElementById("start");
var box = document.getElementById("box");
// 点击开始按钮，让 box 向右运动
// 全局变量存储 left 的属性值，会每次发生变化
// 信号量,初始值必须与属性初始值保持一致
var nowLeft = 0;
// 定时器，制作运动过程
start.onclick = function () {
setInterval(function () {
// 信号量进行自加
nowLeft += 5;
// 将最新的 nowLeft 的值赋值给元素的 css 属性
box.style.left = nowLeft + "px";
},100);
};
</script>
</body>
提高运动速度的方法
• 1、缩短时间间隔，增加了每秒移动的次数。
• 2、加大步长，让每一次走的步长增加。
9.清除定时器的问题
问题 1-设表先关
将定时器的开始和停止过程书写在不同的事件函数内部，容易出现用户错误点击情况
1、多次点击开始，会造成加速
2、多次点击开始，不能够再停止
解决方法
• 设表先关
• 每次开启新定时器之前，都清除一次前面的定时器
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: absolute;
top: 100px;
left: 0;
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<input type="button" value="开始" id="start">
<input type="button" value="结束" id="end">
<div class="box" id="box"></div>
<script>
// 简单运动
// 获取元素
var start = document.getElementById("start");
var end = document.getElementById("end");
var box = document.getElementById("box");
// 信号量
var nowLeft = 0;
// 全局定义一个变量存储定时器
var timer;
// 定时器
// 定时器写在事件函数内部，会由于事件多次被触发，导致定时器累积
// 解决方法：设表先关，每次重新开启一个定时器之前都先关闭一下之前的定时器
start.onclick = function () {
// 先清除定时器
clearInterval(timer);
timer = setInterval(function () {
// 信号量进行自加
nowLeft += 5;
// 将最新的 nowLeft 的值赋值给元素的 css 属性
box.style.left = nowLeft + "px";
},100);
};
// 清除定时器
end.onclick = function () {
clearInterval(timer);
};
</script>
</body>
问题 2-拉终停表
• 需求：要求元素走到指定位置停止，例如让元素停止在 500px 的位置.
• 问题：如果步长设置的不合理，停止的位置可能不是正好在 500 处。
解决方法
• 拉终停表
• 在定时器内部每次都要判断是否走到了终点，要不要停止定时器
• 如果走到或超过了终点，强行拉到重点，并停止定时器
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: absolute;
top: 100px;
left: 0;
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<input type="button" value="开始" id="start">
<div class="box" id="box"></div>
<script>
// 简单运动
// 获取元素
var start = document.getElementById("start");
var box = document.getElementById("box");
// 信号量
var nowLeft = 0;
// 全局定义一个变量存储定时器
var timer;
// 定时器
start.onclick = function () {
// 先清除定时器
clearInterval(timer);
timer = setInterval(function () {
// 信号量进行自加
nowLeft += 37;
// 判断这一次的运动是否走到了500 的位置
// 拉终停表，走到规定的终点位置
if (nowLeft >= 500) {
// 将变量的值强制赋值为 500
nowLeft = 500;
// 清除定时器
clearInterval(timer);
}
// 将最新的 nowLeft 的值赋值给元素的 css 属性
box.style.left = nowLeft + "px";
},50);
};
</script>
</body>
问题 3-步标整除
• 需求：在规定时间内让元素走到规定的结束位置，时间间隔可以更改
• 例如：让元素在 2 秒钟内，left 属性从 0 走到 500px.
解决方法
• 步标整除
• 总距离 = 步长 * 次数；
• 时间间隔自定义，总时长固定
• 求出总次数 = 总时间 / 时间间隔
• 定义计数器变量，每执行一次定时器函数增加计数 1，直到执行达到总次数，停止定时器
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: absolute;
top: 100px;
left: 200px;
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<input type="button" value="开始" id="start">
<div class="box" id="box"></div>
<script>
// 简单运动
// 获取元素
var start = document.getElementById("start");
var box = document.getElementById("box");
// 已知 开始位置、结束位置、总时长、时间间隔
// 总距离 = 步长 * 总次数
// 总距离 = 结束位置 - 起始位置 ，已知可以求出来
// 总次数 = 总时长 / 时间间隔 ，已知可以求出来
// 步长 = （结束位置 - 起始位置） / （总时长 / 时间间隔）
// 信号量 ,也相当于初始值
var nowLeft = 200;
// 结束位置
var endLeft = 500;
// 总时长
var time = 1000;
// 时间间隔
var interval = 50;
// 运算总次数
var maxcount = time / interval;
// 运算出每一次的步长
var step = (endLeft - nowLeft) / maxcount;
// console.log(step);
// 定义一个次数的累加器
var count = 0;
// 准备条件结束可以开始定时器了
var timer;
start.onclick = function () {
timer = setInterval(function () {
// 让元素的属性每一次变化一个步长
nowLeft += step;
// 每运动一次让次数累加器加 1
count++;
// 停止定时器
if (count >= maxcount) {
// 拉终停表
nowLeft = endLeft;
clearInterval(timer);
}
// 给属性赋值
box.style.left = nowLeft + "px";
},interval);
};
</script>
</body>
10.多属性动画
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: absolute;
top: 100px;
left: 0;
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<input type="button" value="开始" id="start">
<div class="box" id="box"></div>
<script>
// 简单运动
// 获取元素
var start = document.getElementById("start");
var box = document.getElementById("box");
// 已知 开始位置、结束位置、总时长、时间间隔
// 总距离 = 步长 * 总次数
// 总距离 = 结束位置 - 起始位置 ，已知可以求出来
// 总次数 = 总时长 / 时间间隔 ，已知可以求出来
// 步长 = （结束位置 - 起始位置） / （总时长 / 时间间隔）
// 信号量 ,也相当于初始值
var nowLeft = box.offsetLeft;
var nowWidth = box.offsetWidth;
// console.log(nowLeft);
// 结束位置
var endLeft = 500;
var endWidth = 200;
// 总时长
var time = 1000;
// 时间间隔
var interval = 50;
// 运算总次数
var maxcount = time / interval;
// 运算出每一次的步长
var stepLeft = (endLeft - nowLeft) / maxcount;
var stepWidth = (endWidth - nowWidth) / maxcount;
// 定义一个次数的累加器
var count = 0;
// 准备条件结束可以开始定时器了
var timer;
start.onclick = function () {
timer = setInterval(function () {
// 让元素的属性每一次变化一个步长
nowLeft += stepLeft;
nowWidth += stepWidth;
// 每运动一次让次数累加器加 1
count++;
// 停止定时器
if (count >= maxcount) {
// 拉终停表
nowLeft = endLeft;
nowWidth = endWidth;
clearInterval(timer);
}
// 给属性赋值
box.style.left = nowLeft + "px";
box.style.width = nowWidth + "px";
},interval);
};
</script>
</body>
11.封装动画函数
简单无缝滚动
<style>
*{
margin: 0;
padding: 0;
}
.scroll{
position: relative;
width: 830px;
height: 130px;
border: 10px solid #000;
margin: 100px auto;
overflow: hidden;
}
.scroll ul{
position: absolute;
top: 0;
left: 0;
width: 5000px;
height: 130px;
}
.scroll ul li{
float: left;
width: 200px;
height: 130px;
margin-right: 10px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="scroll" id="scroll">
<ul id="munit">
<li><img src="images/shuzi/0.png" alt="" /></li>
<li><img src="images/shuzi/1.png" alt="" /></li>
<li><img src="images/shuzi/3.png" alt="" /></li>
<li><img src="images/shuzi/4.png" alt="" /></li>
<li><img src="images/shuzi/5.png" alt="" /></li>
<li><img src="images/shuzi/6.png" alt="" /></li>
<li><img src="images/shuzi/7.png" alt="" /></li>
<li><img src="images/shuzi/0.png" alt="" /></li>
<li><img src="images/shuzi/1.png" alt="" /></li>
<li><img src="images/shuzi/3.png" alt="" /></li>
<li><img src="images/shuzi/4.png" alt="" /></li>
<li><img src="images/shuzi/5.png" alt="" /></li>
<li><img src="images/shuzi/6.png" alt="" /></li>
<li><img src="images/shuzi/7.png" alt="" /></li>
</ul>
</div>
<script src="common.js"></script>
<script>
// 1.获取元素
var scroll = my$("scroll");
var munit = my$("munit");
// 2.自己进行滚动播放
var nowLeft = 0;
// 关键点：找到 ul 元素的运动的折返点
// 耦合性比较强，只适用于一部分程序
var back = -1470;
var timer;
timer = setInterval(run,10);
// 3.鼠标移上 scroll 元素，让运动停止
scroll.onmouseover = function () {
clearInterval(timer);
};
// 4.鼠标离开 scroll 元素，让运动重新开始
scroll.onmouseout = function () {
timer = setInterval(run,10);
};
// 运动函数
function run() {
// nowLeft 进行自减
nowLeft -= 2;
// 每次都要判断，是否走到了折返点，如果走到了，让他瞬间切换到 0
if (nowLeft <= back) {
nowLeft = 0;
}
// 给ul 赋值
munit.style.left = nowLeft + "px";
}
</script>
</body>
高级无缝滚动
<style>
* {
margin: 0;
padding: 0;
}
.scroll {
position: relative;
width: 830px;
height: 130px;
border: 10px solid #000;
margin: 100px auto;
overflow: hidden;
}
.scroll .inner {
position: relative;
width: 5000px;
}
.scroll ul {
position: absolute;
top: 0;
left: 0;
height: 130px;
list-style: none;
}
.scroll ul li {
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="scroll" id="scroll">
<div class="inner">
<ul id="munit">
<li><img src="images/shuzi/0.png" alt="" /></li>
<li><img src="images/shuzi/1.png" alt="" /></li>
<li><img src="images/shuzi/2.png" alt="" /></li>
<li><img src="images/shuzi/3.png" alt="" /></li>
<li><img src="images/shuzi/4.png" alt="" /></li>
<li><img src="images/shuzi/5. png" alt="" /></li>
<li><img src="images/shuzi/6.png" alt="" /></li>
</ul>
</div>
</div>
<script src="common.js"></script>
<script>
// 获取元素
var scroll = my$("scroll");
var munit = my$("munit");
// 2.折返点计算需要通过 js 自动计算
var back = -munit.offsetWidth;
console.log(back);
// 1.自动生成另一组对应的图片结构 li
munit.innerHTML = munit.innerHTML + munit.innerHTML;
// 自己进行滚动播放
var nowLeft = 0;
var timer;
timer = setInterval(run,5);
// 3.鼠标移上 scroll 元素，让运动停止
scroll.onmouseover = function () {
clearInterval(timer);
};
// 4.鼠标离开 scroll 元素，让运动重新开始
scroll.onmouseout = function () {
timer = setInterval(run,5);
};
// 运动函数
function run() {
// nowLeft 进行自减
nowLeft -= 1;
// 每次都要判断，是否走到了折返点，如果走到了，让他瞬间切换到 0
if (nowLeft <= back) {
nowLeft = 0;
}
// 给ul 赋值
munit.style.left = nowLeft + "px";
}
</script>
</body>
点击切换的轮播图
<style>
*{
margin: 0;
padding: 0;
}
ul,ol{
list-style: none;
}
.carousel{
position: relative;
width: 880px;
height: 550px;
border: 1px solid #333;
margin: 50px auto;
}
.pic li{
position: absolute;
left: 0;
top: 0;
width: 880px;
height: 550px;
display: none;
}
.pic li.current{
display: block;
}
.btn a{
position: absolute;
top: 50%;
width: 80px;
height: 80px;
margin-top: -40px;
background-color: rgba(255,255,255,0.3);
text-decoration: none;
color: #444;
text-align: center;
line-height: 80px;
font-size: 60px;
font-family: "SimSun";
}
.btn .left{
left: 10px;
}
.btn .right{
right: 10px;
}
.btn a:hover{
background-color: rgba(255,255,255,0.7);
}
.sub{
position: absolute;
bottom: 30px;
left: 50%;
width: 200px;
height: 40px;
margin-left: -100px;
border-radius: 20px;
background-color: rgba(255,255,255,0.3);
}
.sub li{
float: left;
width: 20px;
height: 20px;
margin: 10px;
border-radius: 50%;
background-color: #ccc;
cursor: pointer;
}
.sub li.current{
background-color: #0ff;
}
</style>
</head>
<body>
<div class="carousel" id="carousel">
<ul class="pic" id="pic">
<li class="current"><img src="images/lunbo/01.jpg" alt=""></li>
<li><img src="images/lunbo/02.jpg" alt=""></li>
<li><img src="images/lunbo/03.jpg" alt=""></li>
<li><img src="images/lunbo/04.jpg" alt=""></li>
<li><img src="images/lunbo/05.jpg" alt=""></li>
</ul>
<div class="btn" id="btn">
<a href="javascript:;" class="left" id="leftbtn"><</a>
<a href="javascript:;" class="right" id="rightbtn">></a>
</div>
<ol class="sub" id="sub">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<script src="common.js"></script>
<script>
// 编程思路：信号量编程，通过一个全局变量的信号量，在不同的事件函数中进行信息传递，让多个事件进行协同作业
// 1.获取元素
var carousel = my$("carousel");
var ul = my$("pic");
var ulLis = ul.children;
var leftbtn = my$("leftbtn");
var rightbtn = my$("rightbtn");
var ol = my$("sub");
var olLis = ol.children;
// 全局信号量，存储的是要展示的图片所在 li 的下标
var idx = 0;
// 2.右按钮事件，切换到下一张
rightbtn.onclick = rightHandle;
// 3.左按钮事件，切换到上一张
leftbtn.onclick = function () {
// 信号量自减
idx--;
// 判断 idx 是否是超过最小的下标，如果是，就相当于从第一张要切换到最后一张
if (idx < 0) {
idx = ulLis.length - 1;
}
// 调用一个切换函数
change();
};
// 4.下标小圆点事件，点哪个小圆点，对应展示图片
for (var i = 0 ; i < olLis.length; i++) {
// 存储自己的下标
olLis[i].index = i;
// 给每个小圆点添加点击事件，然后获取对应下标，赋值给信号量
olLis[i].onclick = function () {
// 获取当前点击的元素的下标
// this.index
idx = this.index;
// 调用一个切换函数
change();
};
}
// 5.轮播图自动播放,执行类似右按钮的事件
var timer;
timer = setInterval(rightHandle,3000);
// 6.鼠标移上轮播图，停止自动轮播
carousel.onmouseover = function () {
clearInterval(timer);
};
// 7.鼠标离开轮播图，重新开始自动轮播
carousel.onmouseout = function () {
timer = setInterval(rightHandle,3000);
};
// 定义 右按钮事件函数
function rightHandle() {
// 信号量自加
idx++;
// 判断 idx 是否是超过最大的下标，如果是，就相当于从最后一张要切换到第一张
if (idx > ulLis.length - 1) {
idx = 0;
}
// 调用一个切换函数
change();
}
// 定义切换函数
function change() {
// 排他思想
// 对应控制
// 让所有 li 标签清除类名
for (var i = 0 ; i < ulLis.length ; i++) {
ulLis[i].className = "";
olLis[i].className = "";
}
// 保留自己
ulLis[idx].className = "current";
olLis[idx].className = "current";
}
</script>
</body>
返回顶部
12.location 对象
• location 对象是 window 对象下的一个属性，使用的时候可以省略 window 对象
• location 可以获取或者设置浏览器地址栏的 URL
<body>
<input type="button" value="跳转" id="btn">
<script>
var btn = document.getElementById("btn");
btn.onclick = function () {
// 输出URL地址
// console.log(location.href);
// 重新赋值，可以跳转到新页面，并且记录历史
// location.href = "http://www.lagou.com";
// assign 委派
// assign() 方法的作用 与 href 属性一样，可以设置页面跳转的地址
// location.assign("http://www.lagou.com");
// replace 替换
// 功能：替换掉地址栏中当前的网址，但是不记录历史
// location.replace("http://www.lagou.com");
// reload 重新加载
// 类似 键盘中 f5 功能,类似于false效果， ctrl+f5 强制刷新，从服务器获取页面，相当于 true 的效果
// 参数：true 强制从服务器获取页面，false 如果浏览器有缓存网页的话，会直接从缓存中获取页面
location.reload(true);
};
</script>
</body>
location 对象的成员
• 使用 chrome 的控制台查看
• 查 MDN：developer.mozilla.org/zh-CN/
• 成员：
• assign()/reload()/replace()
• hash/host/hostname/search/href……
13.URL
• 统一资源定位符 (Uniform Resource Locator, URL)
• URL的组成：scheme://host:port/path?query#fragment
• 例如：www.lagou.com:80/a/b/index.h…
• scheme:通信协议，常用的http,ftp,maito等
• host:主机，服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。
• port:端口号，整数，可选，省略时使用方案的默认端口，如http的默认端口为80。
• path:路径，由零或多个'/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。
• query:查询，可选，用于给动态网页传递参数，可有多个参数，用'&'符号隔开，每个参数
的名和值用'='符号隔开。例如：name=zs
• fragment:信息片断，字符串，锚点.
14.history 对象
• history 对象是 window 对象下的一个属性，使用的时候可以省略 window 对象
• history 对象可以与浏览器历史记录进行交互，浏览器历史记录是对用户所访问的页面按时
间顺序进行的记录和保存。
• back()
• forward()
• go()
