BOM
Brower Object Model
浏览器对象模型,浏览器的操作内容都是在对象的方法操作
浏览器的顶级对象 window
在全局中定义的变量其实就是在window身上作为属性
alert('弹弹弹')
全局中this,top指向window
全局中的name属性在window上有,属性值为字符串
浏览器的尺寸
innerWidth,innerHeight 获取浏览可视窗口的宽高(包含了滚动条)
console.log(window.innerHeight)
console.log(window.innerWidth)
弹出层
alert()
提示弹框,没有返回值
confirm()
询问弹窗
当点击确定的时候返回true
当点击取消的时候返回false
prompt()
提示输入弹窗
当点击取消的时候返回null
当输入点击确定的返回的返回输入的内容(如果啥也不填返回null)
浏览器的地址信息
location 对象中就存储而来浏览器的地址信息
console.log(location)
location.href
location对象中href属性就是浏览器访问的完整地址
// 会将地址中的中文转码为url中的编码格式
btn.onclick = function(){
location.href = 'http://1000phone.com'
}
location.reload()
重新加载页面
这个方法不要在全局中使用
btn.onclick = function(){
location.reload()
}
location中的其他属性(http://localhost/2111/location.html#12345?name=zs&age=123)
hash
地址中#后面的东西(#12345?name=zs&age=123)
host
是访问地址主机的地址
search
是浏览器中?后面的内容
?name=zs&age=123
history
前提是要有历史记录
history中的lenght属性,如果为1表示没有历史记录
history.back()
回到历史记录的上一个页面
history.forward()
去到历史记录中的下一个页面
history.go(n)
去到历史记录中指定的页面
history.go(1)
相当于history.forward()
history.go()-1
相当于history.back()
浏览器的版本信息
navigator
记录了浏览器的各种信息
appversion 浏览器的版本 不一定有效
platfor 浏览器运行的环境版本 不一定有效
userAgent 获取浏览器的版本信息
console.log(navigator.userAgent)
浏览器的事件
scroll(当滚动条动起来的时候触发的事件
scrollTop
页面垂直卷去的距离
scrollLeft
页面水平卷去的距离
document.body.scrollleft
当页面没有使用DOCTYPE声明的时候可以获取到
document.documentElement.scrollTop
当页面有使用DOCTYPE声明的时候可以获取到
/ /window.onscroll = function(){
// console.log(document.body.scrollTop);
// console.log(document.documentElement.scrollTop);
// console.log(document.body.scrollLeft);
// console.log(document.documentElement.scrollLeft);
// }
浏览器的页面加载事件 load
当浏览器页面中的内容(页面结构,文本,图片,css,js等资源)全部加载完毕后会触发的事件
// window.onload = function(){
// btn.onclick = function(){
// alert('你真棒');
// }
浏览器的页面可视窗口变化事件 resize
当浏览器窗口大小变化的时候会触发
window.onresize = function(){
console.log(window.innerWidth);
console.log(window.innerHeight);
}
定时器
间隔定时器
setInterval(函数,时间)时间单位是毫秒
每隔一段时间就运行一次函数
返回定时器标识id
// var timerId = setInterval(function(){
// alert('我又来啦');
// },5000);
// console.log(timerId);
倒计时定时器
setTimeout(函数,时间)
时间单位是毫秒
过一段时间会执行一次函数
返回定时器标识id
// var timerId = setTimeout(function(){
// console.log('爆炸');
// },3000);
// console.log(timerId);
清除定时器
clearInterval(),clearTimeout()
定时器的异步
同步执行
代码按顺序执行
异步执行
代码不按顺序执行,先执行同步代码,当所有同步代码执行完毕,才开始执行异步代码
Bom的初始
最新推荐文章于 2024-06-02 23:26:49 发布