Day09笔记 BOM
一、BOM介绍：
1、BOM（ Browser Object Model）—> 浏览器对象模型。
2、BOM 作用：主要提供了访问和操作浏览器各组件的方式。
window浏览器窗口对象是js中最大的对象。其他所有的对象，都是window的子对象
document文档对象，代表一个网页
location地址栏对象，对地址栏的操作一些方法
navigator浏览器软件对象，主要用来判断用户用的是什么浏览器，可以解决兼容性问题
screen屏幕对象，可以获取屏幕相关的信息
history历史记录对象，可以对浏览器的历史记录进行相关的操作
注意点：
1、window是全局浏览器内置顶级对象 表示浏览器中打开的窗口（没有应用于window对象的公开标准，不过所有浏览器都支持该对象）Window 对象表示一个浏览器窗口或一个框架。
2、在客户端 JavaScript 中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。
例如，可以只写 document，而不必写 window.document。
同样，可以把当前窗口对象的方法当作函数来使用，如只写 alert()，而不必写 window.alert()。
除了上面列出的属性和方法，Window 对象还实现了核心 JavaScript 所定义的所有全局属性和方法。
二、window对象常用的方法
1.prompt() 显示可提示用户输入的对话框
2.alert() 显示一个带有提示信息和一个“确定”按钮的警示对话框
3.confirm() 显示一个带有提示信息、“确定”和“取消”按钮的对话框
4.close() 关闭浏览器窗口 close()方法用于关闭浏览器窗口，语法：window.close（）;
5.定时器
a、间隔定时器setInterval（开启）clearInterval（关闭）
b、超时定时器setTimeout（开启） clearTimeout（关闭）
6. open()方法 功能：打开一个新的浏览器窗口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">按钮</button>
<script>
// confirm() 显示一个带有提示信息、“确定”和“取消”按钮的对话框
// var res = window.confirm('邓川在聊什么呢？')
// console.log(res)
// if(confirm('你确定要提交吗？')){
// alert('已经提交')
// }else{
// alert('取消成功')
// }
// 定时器
// window.setInterval(function(){
// console.log(123)
// }, 1000)
// 关闭浏览器窗口
// 注意点：有些浏览器关闭窗口的时候并不会直接给你关闭，有可能给你一个提示
// document.getElementById('btn').onclick = function(){
// // window.close()
// // close()
// }
// 打开一个窗口
document.getElementById('btn').onclick = function(){
// 参数1表示要打开那个链接窗口
// 参数2表示是否新窗口打开 _self _blank
// 参数3表示窗口打开时的样式（很多的浏览器不支持）
window.open('https://www.jd.com', '_blank', 'width=300px; height=300px')
}
</script>
</body>
</html>
三、location地址栏对象 （地址栏）
1、hostname 设置或返回当前URL的主机名
2、href：获取地址栏中完整的地址。可以实现JS的网页跳转。location.href = “http://www.sina.com.cn”;
3、pathname：文件路径及文件名
4、protocol：协议，如：http://、ftp://
5、hash：锚点名称。如：#top 哈希
6、reload([true])：刷新网页。true参数表示强制刷新 location.search 获取查询字符串
a、是网页浏览后，一般会在本地留下缓存，普通刷新的话，浏览器会优先获取缓存里的资源代替从服务器上请求，以提高访问速度。
b、强制刷新就是告诉浏览器不要获取缓存，重新从服务器请求网页上的所有资源，适用于开发测试或者某些资源更新。
7、注意：所有的属性，重新赋值后，网页将自动刷新。
<meta http-equiv = 'refresh' content = '5;url=http://www.sina.com.cn' /> 扩展
<meta name="keywords" content="" /> 向搜索引擎说明你的网页的关键词
<meta name="description" content=""/> 告诉搜索引擎你的站点的主要内容
“描述”部分应该用近乎描述的语言写下一段介绍你网站的文字，在这其中，你应该适当的对你网站的特色内容加以重复以求突出；
“关键字”部分应该列出你认为合适的，能突出网站内容的关键字就可以了，关键字不要设置太多，可设置10---8个，搜索引擎只会浏览靠前的几个关键字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <meta http-equiv = 'refresh' content = '3;url=http://www.sina.com.cn' /> -->
</head>
<body>
<button id="btn">京东</button>
<script>
// href 可以设置跳转的地址和获取地址栏的地址
// document.getElementById('btn').onclick = function(){
// location.href = 'https://www.jd.com'
// }
// hash 哈希值，可以进行网页不同的位置的跳转（锚点）
// search 可以获取查询字符串
// console.log('?username=zhangsan&password=123'.slice(1))
// reload([true])：刷新网页。true参数表示强制刷新 location.search 获取查询字符串
// document.getElementById('btn').onclick = function(){
// location.reload(true)
// }
</script>
</body>
</html>
四、navigator对象 （软件）
1、appName：浏览器软件名称 appCodeName 浏览器软件名称现在没有多大参考意义了
2、appVersion：浏览器软件的核心版本号。
3、platform：平台
4、userAgent浏览器版本信息（记住）
navigator对象：指的是浏览器软件信息
五、history对象 （历史）
1、back（） 后退
2、forward（） 前进
3、go（）
4、history.back（）=== history.go（-1） 浏览器中的 后退
5、history.forward() === history.go ( 1 ) 浏览器中的 前进
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
button{
display: block;
margin: 20px;
}
</style>
</head>
<body>
<h1>这是第一个页面</h1>
<a href="html/page1.html">去page1的页面</a>
<button>前进</button>
<script>
var aBtn = document.getElementsByTagName('button')[0]
aBtn.onclick = function(){
history.forward()
}
</script>
</body>
</html>
六、screen屏幕对象 （屏幕）
1、width：返回屏幕的宽度，只读属性。 window.screen.width
2、weight：返回屏幕的高度，只读属性。 window.screen.height
3、availWidth：屏幕的有效宽度，不含任务栏。只读属性。
4、availHeight：屏幕的有效高度，不含任务栏。只读属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
console.log(screen.width)
console.log(screen.height)
console.log(screen.availWidth)
console.log(screen.availHeight)
</script>
</body>
</html>
七、window对象事件
1、window.onload 当网页加载完成，指<body>标记的所有内容全部加载完成，才触发该事件(条件)
2、为窗口添加滚动条事件
onscroll 滚动事件
scrolltop 垂直滚动条滚动的距离
scrollleft 水平滚动条滚动的距离
window.innerHeight - 浏览器窗口的可见高度
window.innerWidth - 浏览器窗口的可见宽度
兼容写法：var scrolltop = document.documentElement.scrollTop||document.body.scrollTop;
<!-- <!DOCTYPE html> -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
height: 2000px;
}
</style>
</head>
<body>
<h1>老大哥来了</h1>
<script>
// onscroll 当滚动滚动条的时候触发
// window.onscroll = function(){}
onscroll = function(){
// 获取滚动距离
// console.log(document.documentElement.scrollTop)
// 当没有声明文档类型的时候使用
// console.log(document.body.scrollTop)
// console.log(document.documentElement.scrollLeft)
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
console.log(scrollTop)
}
</script>
</body>
</html>
3、window.onresize 事件会在窗口或框架被调整大小时发生
305
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
