1、初识BOM
- BOM(Browser Object Model):浏览器对象模型
- 其实就是操作浏览器的一些能力
- 我们可以操作哪些内容
获取一些浏览器的相关信息(窗口大小)
操作浏览器进行页面跳转
获取当前浏览器地址栏的信息
操作浏览器的滚动条
浏览器的信息(浏览器的版本)
让浏览器出现一个弹出框(alert、confirm、prompt)
- BOM的核心就是window对象
- window是浏览器内置的一个对象,里面包含着操作浏览器的方法
2、浏览器可视窗口的尺寸
innerHeight和innerWidth
这两个方法分别是用来获取浏览器窗口的宽度和高度(包含滚动条的)
<script> var windowHeight=window.innerHeight console.log(windowHeight) var windowWidth=window.innerWidth console.log(windowWidth) </script>
3、浏览器的弹出层
1、alert
返回值没意义
<button id="btn">点一点</button> <script> btn.onclick=function(){ alert("你好") } </script>
2、询问框confirm
返回值是true或false
<button id="btn">点一点</button> <script> btn.onclick=function(){ var res=confirm("你好") console.log(res) } </script>
3、输入框prompt
返回值是你输入的内容
如果没有输入则返回值是null
<button id="btn">点一点</button> <script> btn.onclick=function(){ var res=prompt("请输入你的密码") console.log(res) } </script>
不常用这三个,因为容易产生线程阻塞
js是单线程
4、浏览器的地址栏
- 浏览器的地址信息
- 在window中有一个对象叫做location
- 就是专门用来存储浏览器的地址栏内的信息的
location.href
- location.href这个属性存储的是浏览器内URL地址的信息
console.log(window.location.href)
会把中文变成url编码的格式
- location.href这个属性也可以给他赋值
window.location.href='./index.html'
//这个就会跳转页面到后面你给的那个地址
location.reload
<button id="btn">点一点</button> <button id="btn2">刷新</button> <script> //拿到地址信息 console.log(location.href) // 解码 // console.log(decodeURI(拿到的码)) // 跳转页面 btn.onclick=function(){ location.href="http://www.baidu.com" } // reload btn2.onclick=function(){ location.reload() } </script>
5、浏览器的常见事件
浏览器的onload事件
- 这个不再是对象了,而是一个事件
- 是在页面所有资源(图片、视频、dom节点)加载完毕后执行的
window.οnlοad=function(){
console.log('资源已经加载完毕')
}
</head> <script> window.onload=function(){ console.log("加载完成") console.log(btn) } </script> </head> <body> <button id="btn"></button> </body>
onresize
<script> // 窗口大小每次发生改变就执行该代码 window.onresize=function(){ console.log("resize") } </script>
onscroll
<style> body{ height: 2000px; } </style> <script> // 滚动条滚动的时候执行该函数 window.onscroll=function(){ console.log("scroll") } </script>
6、浏览器的滚动距离
一、纵向滚动条
<style> body{ height: 3000px; } </style> <script> window.onscroll=function(){ // 开头必须写<!DOCTYPE html> // 低版本浏览器不支持 console.log(document.documentElement.scrollTop) } </script>
<style> body{ height: 3000px; } </style> <script> window.onscroll=function(){ // 低版本浏览器使用 // 不用写<!DOCTYPE html> console.log(document.body.scrollTop) } </script>
综合以上两个最好写
<style> body{ height: 3000px; } </style> <script> window.onscroll=function(){ console.log(document.documentElement.scrollTop || document.body.scrollTop) } </script>
二、横向滚动条
<style> body{ width: 3000px; } </style> <script> window.onscroll=function(){ console.log(document.documentElement.scrollLeft || document.body.scrollLeft) } </script>
小案例:
<style> body{ height: 3000px; width: 3000px; } </style> </head> <body> <div style="height: 300px;width: 100px;"></div> <button id="btn">回到顶部</button> <script> window.onscroll=function(){ console.log(document.documentElement.scrollTop || document.body.scrollTop) if((document.documentElement.scrollTop || document.body.scrollTop)>100){ console.log("显示回到顶部按钮") } else{ console.log("隐藏回到顶部按钮") } } btn.onclick=function(){ // 写法一 // window.scrollTo(0,0) //1、两个数字 x轴y轴方向上 // 写法二 // 2、对象 window.scrollTo({ left:0, top:0 }) } </script>
7、浏览器打开标签页
<button id="btn">click</button> <button id="btn2">close</button> <script> // open打开新的页面 btn.onclick=function(){ window.open("http://www.baidu.com") } // close关闭当前页面 btn2.onclick=function(){ window.close() } </script>
8、浏览器的历史记录
浏览器中的历史记录
- window中有一个对象叫history
- 是专门用来存储历史记录信息的
history.back
- history.back是用来回退历史记录的,就是回到前一个页面
- window.history.back()
- 前提是你要有上一条记录,不然就是一直在这个页面,也不会回退
history.forword
- history.forward是去到下一个历史记录里面,也就是去到下一个页面
- window.history.forward()
- 前提是你要之前有过回退操作,不然的话你现在就是最后一个页面,没有下一个
history.go()
- 参数有正负数
- history.go(1) 前进一个页面
- history.go(-1) 后退一个页面
9、浏览器本地存储
- localStorage只能存字符串
- localStorage 永久存储
- sessionStorage 会话存储,关闭页面就丢失
<button id="btn1">存</button>
<button id="btn2">取</button>
<button id="btn3">删</button>
<button id="btn4">清空</button>
<script>
btn1.onclick=function(){
//localStorage.setItem("obj",JSON.stringify({name:"jack",age:100}))
localStorage.setItem("name","jack")
localStorage.setItem("age","100")
}
btn2.onclick=function(){
console.log(localStorage.getItem("name"))
}
btn3.onclick=function(){
localStorage.removeItem("name")
}
btn4.onclick=function(){
localStorage.clear()
}
</script>
<button id="btn1">存</button>
<button id="btn2">取</button>
<button id="btn3">删</button>
<button id="btn4">清空</button>
<script>
btn1.onclick=function(){
sessionStorage.setItem("obj",JSON.stringify({name:"jack",age:100}))
sessionStorage.setItem("name","jack")
sessionStorage.setItem("age","100")
}
btn2.onclick=function(){
console.log(sessionStorage.getItem("obj"))
}
btn3.onclick=function(){
sessionStorage.removeItem("name")
}
btn4.onclick=function(){
sessionStorage.clear()
}
</script>
10、案例-记住用户名
<div>
用户名:
<input type="text" id="username">
</div>
<div>
密码:
<input type="password" id="password">
</div>
<button id="login">登录</button>
<script>
// 先获取用户名 密码信息进行存储
var uservalue=localStorage.getItem("username")
var passvalue=localStorage.getItem("password")
username.value=uservalue
password.value=passvalue
login.onclick=function(){
// 获取输入框的内容
console.log(username.value,password.value)
localStorage.setItem("username",username.value)
localStorage.setItem("password",password.value)
}
</script>