BOM
1: 什么是bom
bom就是浏览器对象! 简单来说,就是学习一些操作浏览器窗口的方法和属性等!
2: window
window对象是BOM的核心,也是BOM里面的顶级对象
window对象也有很多内置方法(alert(1))
window对象既是ECMAScript规范中的Global对象,也是BOM中的顶级对象;
document对象既是BOM对象的一个属性,也是DOM模型中的顶级核心
location对象既是window对象的属性,同时也是dom对象的属性。
全局变量是 window 对象的属性
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是window 对象的属性之一:
3: open
open('路径','打开的方式','设置属性')
打开窗口
举例:
_self
当前窗口打开
_blank
新窗口打开
open(‘img/1.jpg’,’_self’,‘width=400,height=400,top=100,left=100’)
4: close() 关闭窗口
5: moveTo(x,y) 窗口移动到的位置 窗口移动的尺寸 moveBy(x,y)
6: resizeTo(x,y) 窗口宽高尺寸 窗口宽高变化尺寸 resizeBy(x,y)
7: location对象
提供了与当前窗口中加载的文档有关的信息以及一些导航功能;
url
统一资源定位符协议://id(域名)/:端口号/路径/?参数
location = ‘1.html’ 跳转到1.html
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 (80 或 443)
location.protocol 返回所使用的 web 协议(http:// 或 https://)
location.search设置或返回从问号 (?) 开始的 URL(查询部分)
location.hash 设置或返回从井号 (#) 开始的 URL(锚)
location.href设置或返回完整的 URL
window.location.reload()刷新
reload(true) 类似于 ctrl +F5
location.replace(url) 方法可用一个新文档取代当前文档
location.assign()加载新的文档
8: navigator 对象
用来描述浏览器本身,包括浏览器的名称、版本、语言、系统平台、用户特性字符串等信息.
判断平台类型 window.navigator.platform
判断浏览器类型 window.navigator.userAgent
9: history 对象
保存着从窗口被打开起的历史记录,每个浏览器窗口、标签页、框架都有自己的 history 对象
history.length 获取历史记录条数
history.back()
- 与在浏览器点击后退
按钮相同
history.forward()
- 与在浏览器中点击按钮向前
相同
history.go()
-1
:后退1
: 前进 0:刷新
10: 获取浏览器的可视窗口的宽高兼容写法:(主要兼容低版本的IE 8,7,6)
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
11:屏幕宽高
document.write(window.
screen.height
);//显示屏的高度
document.write(window.screen.width
);//显示屏的宽度
document.write(window.screen.availHeight
);//显示屏的可用高度
document.write(window.screen.availWidth
);//显示屏的可用宽度
12:获取滚动条的高
document.documentElement.scrollTop
document.body.scrollTop
兼容写法:
var sc = document.documentElement.scrollTop + document.body.scrollTop;
var sc = document.documentElement.scrollLeft + document.body.scrollLeft;
13:window.onscroll
onscroll:滚动事件
14: 定时器
单次定时 setTimeout
第一个参数是匿名函数
第二个参数 多少毫秒后去执行
第三 定时器有返回值 (返回的是地址)
var a = setTimeout(function(){
alert('6666')
},2000)
清除单次定时器 clearTimeout(a) a是定时器的地址
多次定时器 setInterval
setInterval(()=>console.log(1),3000)
第一个参数是匿名函数
第二个参数 每隔多少毫秒后去执行一次
第三 有返回值 (地址)
a = 0
var bb = setInterval(function(){
a++
// document.write(a)
console.log(a)
},1000)
function fun(){
clearInterval(bb)
}