目录
简介：
BOM即浏览器对象模型（Browser Object Model），它提供了页面与浏览器窗口进行交互的对象接口。BOM由一系列的相关对象组成，window作为BOM的顶层对象，所有其他全局对象都是window的子对象，甚至DOM也是其子对象之一。学会了window对象及其子对象的常用属性方法，基本就掌握了BOM的大部分知识。
1、BOM结构
window对象作为BOM的顶级对象，本身包含一些全局属性和方法，其子对象也有其特有的属性和方法
使用window子对象时，可以使用完整语法，也可以忽略window，如：
window.alert()与alert()效果相同
2、window对象
| 名称 | 描述 |
|---|---|
open() | 打开一个新浏览器窗口 |
alert() | 显示警告框 |
close() | 关闭当前浏览器窗口 |
scrollTo() | 可把内容滑动到指定坐标 |
scrollBy() | 可将内容滑动指定的距离（相对于当前位置） |
innerWidth | 返回窗口的网页显示区域宽度 |
innerHeight | 返回窗口的网页显示区域高度 |
2.1 open(url, name, features, replace)
-
url: 打开指定页面的url，如果没有则打开空白页-
name: 指定target属性或窗口名称，支持以下值：-
_blank–- url加载到新窗口（默认） -
_parent–- url加载到父框架 -
_self–- url替换当前页面 -
_top–- url替换任何可加载的框架集 -
name-- 窗口名称
-
-
-
features: 设置新打开窗口的功能样式（如：width=500） -
replace-
true–- url替换浏览历史中的当前条目 -
false–- 在浏览历史中创建新条目
-
// 新窗口打开csdn首页
open('https://www.csdn.net/')
// 当前窗口打开csdn首页
open('https://www.csdn.net/', '_self')
// 新窗口打开csdn首页，并设置窗口宽高500px
open('https://www.csdn.net/', '_blank', 'width=500,height=500') 2.2 scrollTo(xpos, ypos)
-
xpos：距离网页左上角x坐标 -
ypos：距离网页左上角y坐标
<style>
.box { height: 3000px; }
</style>
<div class="box">
<p>我是顶部</p>
</div>
<script>
window.addEventListener('load', function() {
scrollTo(0, 500) // 页面加载后，滚动到距离顶部500px
})
</script>3、location对象
location对象包含当前url信息，经常用于网址判断，url跳转
| 名称 | 描述 |
|---|---|
href | 返回当前完整网址 |
host | 返回主机名和端口号，通常指完整域名 |
protocol | 返回网址协议 |
port | 返回端口号 |
pathname | 返回网址路径部分 |
search | 返回网址中的?及?后的字符串（查询部分），通常指查询参数 |
hash | 返回网址中的#及#后的字符串，通常指锚点名称 |
assign(url) | 在当前页面打开指定新url（增加浏览记录） |
reload() | 重新加载当前页面 |
replace(url) | 打开新url替换当前页面（替换当前浏览记录） |
3.1 获取网址信息
// 以https://www.csdn.net/nav/python?param1=111¶m2=222#first为例，
查看输出结果
console.log(location.href)
// “https://www.csdn.net/nav/python?param1=111¶m2=222#first”
console.log(location.host) // “www.csdn.net”
console.log(location.protocol) // “https://”
console.log(location.pathname) // “/nav/python”
console.log(location.search) // “?param1=111¶m2=222”
console.log(location.hash) // “#first”3.2 通过给href属性赋值url字符串的方式，可以跳转到对应url
location.href = 'https://www.csdn.net'4、history对象
history对象包含用户浏览器的历史记录，但是不可读取，经常用于页面跳转
| 名称 | 描述 | 示例 |
|---|---|---|
back() | 返回历史记录的上一个url | history.back() |
forward() | 返回历史记录的下一个url | history.forward() |
go(n) | 返回相对于当前记录的第n个url n>0，表前进；n<0，表后退；n=0，刷新当前页 | history.go(-1) history.go(1) |
5、navigator对象
navigator对象包含浏览器相关信息，经常用于判断设备类型，浏览器兼容性
| 名称 | 描述 |
|---|---|
platform | 返回操作系统类型 |
userAgent | 返回用户代理头的值 |
判断是否为谷歌内核：
navigator.userAgent.toLowerCase().indexOf('chrome')
// 返回-1时不是chrome内核，大于-1时是chrome内核6、screen对象
screen对象包含用户屏幕的信息
| 名称 | 描述 |
|---|---|
availWidth | 返回屏幕的宽度（不包括windows任务栏） |
availHeight | 返回屏幕的高度（不包括windows任务栏） |
width | 返回屏幕的总宽度 |
height | 返回屏幕的总高度 |
BOM 定时器
1、定时器方法
| 方法名 | 定义 | 清除定时器方法 |
|---|---|---|
setTimeout() | 指定的毫秒数后调用函数或计算表达式 | clearTimeout() |
setInterval() | 按照指定的周期（毫秒）来调用函数或计算表达式 | clearInterval() |
1.1 setTimeout(代码字符串或函数, 等待的毫秒数, 参数1, 参数2…)
setTimeout()可执行代码字符串，如：a+b，但不推荐使用，有安全风险;
定时器到期时，可以通过
setTimeout()的额外参数（参数1, 参数2…）给执行函数传递参数（IE9及以下浏览器不支持此语法）;
定时器清除方法
clearTimeout(id)，id为setTimeout()的返回值;
示例：
<p class="info"></p>
<button class="btn">清除定时器</button>
<script>
var info = document.querySelector('.info')
var btn = document.querySelector('.btn')
var t1 = setTimeout(function() {
info.innerHTML = '已经5秒了'
}, 5000);
// 点击按钮可清除定时器
var btn = document.querySelector('.btn')
btn.addEventListener('click', function() {
clearTimeout(t1)
info.innerHTML = '定时器已清除'
})
</script>1.2 setInterval(代码字符串或函数, 运行间隔毫秒数，参数1, 参数2…)
语法与
setTimeout()相似，区别是setInterval()第二个参数为运行间隔;
由于
setInterval()是循环执行，如果没有特殊需求，则必须限制执行次数，使用clearInterval(id)清除定时器;
示例：
<p class="info"></p>
<script>
var info = document.querySelector('.info')
var num = 0
var t1 = setInterval(function() { // 每隔1秒显示当前时间，5次后停止
info.innerHTML = '当前时间：' + String(new Date())
if (num >= 4) { clear() }
num++
}, 1000)
// 清除定时器
function clear() {
clearInterval(t1)
info.innerHTML = '定时器已清除'
}
</script>放大镜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.s_box,.b_box{width:400px;height:300px;position: absolute;top:0;}
.s_box{left:0;}
.s_box img{width: 400px;height: 300px;}
.s_box span{position: absolute;left:0;top:0;background: rgba(200,200,200,0.5);display: none}
.b_box{left:500px;display: none;overflow: hidden}
.b_box img{width: 1200px;height: 900px;position: absolute;left: 0;top: 0;}
</style>
</head>
<body>
<div class="s_box">
<img src="../../img/派大星.jpeg" alt="">
<span></span>
</div>
<div class="b_box">
<img src="../../img/派大星.jpeg" alt="">
</div>
</body>
<script>
// OOP:编程
function Magnifier(){
// 1.选元素
this.sBox = document.querySelector(".s_box");
this.span = document.querySelector(".s_box span");
this.bBox = document.querySelector(".b_box");
this.bImg = document.querySelector(".b_box img");
// 2.绑定事件
this.init()
}
Magnifier.prototype.init = function(){
var that = this;
// 进入
this.sBox.onmouseover = function(){
// 3-1.显示，计算span的宽高
that.show()
}
// 离开
this.sBox.onmouseout = function(){
// 3-2.隐藏
that.hide()
}
// 移动
this.sBox.onmousemove = function(eve){
var e = eve || window.event;
// 5.span跟随鼠标
that.move(e)
}
}
Magnifier.prototype.show = function(){
// 显示，计算span的宽高
this.span.style.display = "block";
this.bBox.style.display = "block";
this.span.style.width = this.bBox.offsetWidth / this.bImg.offsetWidth * this.sBox.offsetWidth + "px";
this.span.style.height = this.bBox.offsetHeight / this.bImg.offsetHeight * this.sBox.offsetHeight + "px";
}
Magnifier.prototype.hide = function(){
// 隐藏
this.span.style.display = "none";
this.bBox.style.display = "none";
}
Magnifier.prototype.move = function(e){
// 计算移动的距离
var l = e.clientX - this.span.offsetWidth/2;
var t = e.clientY - this.span.offsetHeight/2;
console.log(this.sBox.offsetTop);
// 边界限定
if(l<0) l=0;
if(t<0) t=0;
if(l>this.sBox.offsetWidth - this.span.offsetWidth){
l=this.sBox.offsetWidth - this.span.offsetWidth
}
if(t>this.sBox.offsetHeight - this.span.offsetHeight){
t=this.sBox.offsetHeight - this.span.offsetHeight
}
// span跟随鼠标
this.span.style.left = l + "px";
this.span.style.top = t + "px";
// 计算比例
// 当前值 / 总值，得到的就是比例
var x = l / (this.sBox.offsetWidth - this.span.offsetWidth);
var y = t / (this.sBox.offsetHeight - this.span.offsetHeight);
// 根据比例计算右边大图应该移动的距离
// 比例 * 总值，得到的就是当前应该移动的距离
this.bImg.style.left = x * (this.bBox.offsetWidth - this.bImg.offsetWidth) + "px";
this.bImg.style.top = y * (this.bBox.offsetHeight - this.bImg.offsetHeight) + "px";
}
new Magnifier();
</script>
</html>
2095
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
