持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第21天，点击查看活动详情
BOM
浏览器对象模型
提供了独立于内容耳语浏览器窗口进行交互的对象
核心对象是window
alert() prompt()
window页面窗口加载事件
当文档内容完全加载完成会触发该事件(图像,脚本文件,css文件)
只能写一次
window.onload = function () {
}
没有限制
window.addEventListener("load", function () {
})
DOMContentLoaded事件触发时,仅当DOM加载完成,不包括样式表图片,flash ie9以上才支持
document.addEventListener('DOMContentLoaded',function () {})
调整窗口大小事件
window.onresize = function() {}
window.addEventListener('resize', function() {})
window.innerWidth 当前屏幕的宽度
91.this指向问题
1.全局作用域或者普通函数中this指向全局对象window 定时器指向window
2.方法调用中谁调用this指向谁
3.构造函数中this指向构造函数的实例
location对象
获取和设置窗体的url,用于解析url
location.href 获取或者设置整个URL
host 主机
port 端口
pathname 路径
search 返回参数
hash 返回片段 #后面内容,常见于链接 锚点
对象方法
location.assign() 跟href一样,可以跳转页面(重定向页面)
location.repalce()替换当前页面,因为不记录历史,所以不能后退页面
location.reload() 重新加载页面,相当于刷新或者f5,参数为true,强制刷新ctrl+f5
获取url参数
// ?id=1
var params = location.search.substr("1");
var arr = params.split('=');
history
back()后退功能
forward()前进功能
go(参数) 参数为1,前进1个页面,如果是-1,后退1个页面
元素偏移量offse系列
element.offsetParent 返回该元素带有定位的父级元素,没有返回body
offsetTop 返回元素相对带有定位父元素上方的偏移
offsetLeft
offsetWidth padd ing+border+width 不带单位
offsetHeight
模态框拖拽,
元素可视区client
element.clientTop 返回元素上边框的大小
element.clientLeft
clientWidth padding+width 不带单位
clientHeight
立即执行函数
(function() {})() 或者(function(){}())
主要作用:创建一个独立的作用域,,所有变量都是局部变量避免了命名冲突
三个事件会触发load事件
a标签的链接
f5或者刷新按钮(强制)
前进后退按钮(火狐不可以,有个往返缓存,内存中还保存着DOM和javascript的状态)
windwo.addEventListener('load', function () {
})
window.addEventListener('pageshow',function (e) {
if(e.persisted) {
//是否来自于缓存
}
})
元素scroll系列
scrollTop 返回被卷去的上侧距离
scrollLeft 返回被卷去的左侧距离
scrollWidth 返回自身实际的宽度,不包含边框
scrollHeight 文章实际的高度,包括超出部分
window.pageYoffset 页面被卷去的头部
100.mouseenter和mouseover的区别 鼠标经过触发
mouseover 经过自身盒子会触发,经过子盒子还会触发 mouseout
mouseenter 只经过自身盒子会触发 mouseleave鼠标离开 不冒泡
mousedown 鼠标按下触发
mouseup 鼠标弹起触发
mousemove 鼠标按下触发
