概念
1 BOM -- 浏览器对象模型 -- 顶级对象 window 是JS 与浏览器进行交互的一个接口
2 全局作用域下的 变量 和 函数, 都是全局对象 window 对象的属性和方法
window 事件
1 页面加载事件
1 window.onload = function() {
} 等页面全部元素加载完毕, 才会执行这个事件
2 window.addEventListener("DOMContentLoaded", function() {
}) 等页面结构加载完毕, 就会执行这个事件
2 浏览器窗口大小发生变化触发的事件
1 window.onresize = function () {
}
2 window.innerWidth -- 当前视口宽度
3 window.innerHeight -- 当前视口高度
3 浏览器滚动条发生变化触发的事件
document.onscroll = function() {
}
window 下的元素属性
1 offset -- 常用于获取元素的位置
1 hh.offsetTop 获取距离最近的带有定位的祖先元素的顶部距离，若没有就获取元素距离浏览器视口顶部的距离
2 hh.offsetWidth 返回元素带 border 的宽度
2 client -- 常用于获元素的大小
1 hh.clientWidth 返回元素不带边框的宽度
2 html.clientHeight 返回浏览器视口的高
3 scroll -- 常用于获取滚动的距离
1 window.scrollTo(200, 200) 设置滚动条被卷去的宽高
2 window.pageXOffset 读取 document被卷去的长度
3 html.scrollLeft 读写document被卷去的左边的宽度
4 hh.scrollTop 读写hh的子元素被卷去的头部高度
window 方法
1 实现页面跳转功能
btn.onclick = function() {
window.open( "url", "_self",) } 参数二 "_blank"新页面打开
2 一次性定时器
var time1 = setsetTimeout (function() {
}, 1000)
clearTimeout( timer1 )
3 一直执行的定时器
var time2 = setInterval( test, 1000)
function test () {
console.log (" 哈哈 ")}
clearInterval(time2)
window 下的对象
1 location 对象包含当前页面的 URL 相关信息
-------------------------------------------------------------------------------------------
1 属性
1 location.href 设置或返回完整的 URL
2 location.host 返回域名和当前 URL 端口号 {
主机名 == 域名}
3 location.port 设置或返回当前 URL 的端口号
4 location.pathname 返回路径
5 location.search 返回参数
6 location.hash 返回片段
2 方法
1 location.assign() 加载新的文档
2 location.replace() 用新的文档替换当前文档
3 location.reload() 重新加载当前文档 == 刷新, 参数为true == 去缓存刷新 Ctrl+F5
-------------------------------------------------------------------------------------------
2 history 对象包含有关用户的访问历史记录
-------------------------------------------------------------------------------------------
1 history.length 返回浏览器历史列表中的 URL 数量
2 history.forward() 加载 history 列表中的下一个 URL 前进
3 history.back() 加载 history 列表中上一个 URL 后退
4 history.go() 加载 history 列表中某个具体页面, 参数如果是1前进一个页面 如果是 -1后退一个页面
-------------------------------------------------------------------------------------------
3 navigator 对象用于提供用户与浏览器相关的信息
-------------------------------------------------------------------------------------------
1 navigator.appVersion 返回浏览器的平台和版本信息
2 navigator.userAgent 返回用户浏览器发送服务器的 user-agent 头部的值
-------------------------------------------------------------------------------------------