BOM简介以及基本使用

BOM简介以及基本使用

BOM概念：浏览器对象模型，独立于内容而与浏览器窗口进行交互的对象，其核心是window
window包含了document , location , navigation , screen , history
定义在全局作用域中的变量，函数都会变成window对象的属性和方法。
window.name是window中的一个特殊属性

window.load事件等页面内容全部加载完毕，包含页面dom元素 图片 flash css 等等
DOMContentLoaded 是DOM加载完毕，不包含图片 flash css等就可以执行 加载速度比load更快

调整窗口大小事件：window.onresize = function（）{} 是调整窗口大小加载事件，当触发时就调用的处理函数。
注意：窗口大小发生像素变化，就会触发这个事件
用它完成响应式布局，window.innerWidth当前屏幕的宽度

两种定时器：
1、window.setTimeout(调用函数，[延迟的毫秒数]); 用于设置一个定时器，该定时器在定时器到期后执行调用函数。单位ms，可以省略不写
window.setTimeout(调用函数，[延迟的毫秒数]); 这个调用函数我们称为回调函数callback。
2、window.setInterval(调用函数，[间隔的毫秒数]); 此方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。

区别：setTimeout延迟时间道理就去调用这个回调函数，只调用一次就结束这个定时器。 -------------- setInterval 每个这个延迟时间，就去调用这个回调函数，会调用很多次，重复调用这个函数。

this的指向问题：谁调用它this就指向谁。
1、在全局作用域下的函数或者全局作用域中的this指向全局对象window（注意定时器里面的this指向window）
2、在方法调用中谁调用了这个方法，则this就指向谁。
3、构造函数中的this指向构造函数的实列。

js执行机制：先执行执行栈中的同步任务 ---- 异步任务的回调函数放入任务队列里面 ---- 一旦执行栈中的所有同步任务执行完毕，系统会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待庄涛，进入执行栈，开始执行。
同步与异步
同步任务：同步任务放在主线程的执行栈里面，形成一个执行栈
异步任务：js的异步是通过回调函数实现的。异步任务有三种类型：1、普通事件：click，resize 2、资源加载：load，error 3、定时器：包括setinterval、settimeout。
异步任务相关回调函数添加到任务队列中（消息队列）

事件循环：由于主线程不断的重复获得任务，执行任务，再获取任务，再执行，所以这种机制被称为事件循环

location对象：window对象提供的一个属性用于获取或设置窗体url，并且解析url，这个属性返回的是一个对象，所以叫做location对象。

location.href 获取或者设置整个url
location.host 返回主机（域名）
location.port返回端口号 如果未写返回空字符串
location.pathname 返回路径
location.search 返回参数
location.hash 返回片段 #后面内容 常见于链接 锚点
substr(‘起始位置’，截取几个字符串)； ------ 这个方法可以截取字符串
split(’=’) ; 这个方法表示利用=把字符串分割为数组。

表单放在form作用域里才可以跳转，并且表单里面的name一定要写好，不然提交不了。

location对象的方法：
location.assgin() 跟href一样，可以跳转页面 记录浏览记录，所以可以实现后退功能
location.replace() 替换当前页面，因为不记录历史，所以不能后退页面
location.reload() 重新加载页面，相当于刷新按钮或f5 如果参数为true强制刷新ctrl+f5

navigator对象：包含浏览器的信息，它有很多属性，常用的是userAgent ，该属性可以返回由客户机发送服务器的user-agent头部的值。

history对象：在OA系统中见到
history.back() 可以后退功能
history.forward() 前进功能
history.go(参数)前进后退功能，参数如果是1前进1个页面如果是-1后退1个页面

元素偏移量offset系列：可以动态的得到该元素的位置，大小
1、获得元素距离带有定位父元素的位置
2、获得元素自身的大小（宽度高度）
3、返回的数值都不带有单位

element.offsetParent 返回该元素带有定位的父级元素，父级都没有定位则返回body
element.offsetTop 返回元素相对带有定位父元素上方的偏移

element.offsetLeft 返回元素相对带有定位父元素左边框的偏移 父级都没有定位则以body为准

element.offsetWidth 返回自身包括padding，边框，内容区的宽度，返回数值不带单位
element.offsetHeight 返回自身包括padding，边框，内容区的高度，返回数值不带单位

offset和style的区别：
offset 可以得到任意样式表中的样式表值
offset系列获得的数值没有单位
offsetWidth包含padding+border+width
offsetWidth属性是只读属性，只能获取不能赋值
我们想要获取元素大小位置，用offset更合适

style只能得到行内样式表中的样式值
style.width获得是带有单位的字符串
style.width获得不包含padding和border的值
style.width是可读写属性，可以获取也可以赋值
我们想要给元素更改值，需要用style改变

mousemove鼠标移动事件
cursor: move;移动的图标
mouseover 鼠标经过
mouseout 鼠标离开

元素可视区client系列：
element.clientTop 返回元素上边框的大小

element.offsetLeft 返回元素左边框的大小

element.clientWidth 返回自身包括padding，不含边框，内容区的宽度，返回数值不带单位
element.clientHeight 返回自身包括padding，不含边框，内容区的高度，返回数值不带单位

client宽度和我们offsetwidth最大的区别是包不包含边框

立即执行函数 (function(){})() 或者 (function(){}())
主要作用：创建一个独立的作用域，里面所有的变量都是局部变量，不会命名冲突；不需要调用，立马自己能够执行
如果有多个立即执行函数需要用分号隔开才可以 ；

document.documentElement 获取的html的根元素，方便用于rem配置
window.devicePixelRatio || 1 拿到的物理像素比
document.addEventListener(‘DOMContentLoaded’,function(){})等我们页面主要的DOM元素加载完毕
load是我们重新加载页面触发的事件 ，但是在火狐中不适用
pageshow是我们重新加载页面触发的事件 ，里面的e.persisted返回是true就是说如果这个页面是从缓存取过来的页面，也需要重新执行一下里面的函数体

元素scroll系列属性
element.scrollHeight 返回自身实际的高度，不含边框，返回数值不带单位 ；scrollHeight是真正的内容大小
element.scrollWidth 返回自身实际的宽度，不含边框，返回数值不带单位 ；
element.scrollTop 返回被卷去的上测距离，返回数值不带单位（元素）
element.scrollLeft 返回被卷去的左测距离，返回数值不带单位（元素）

scroll滚动事件当我们滚动条发生变化会触发事件
页面被卷去的头部 ：可以通过window.pageYOffset获得
页面被卷去的左侧 ：可以通过window.pageXOffset获得（有兼容问题）（声明DTD ,使用document.documentElement.scrollTop）

他们主要用法：
1、offset系列经常用于获得元素位置 offsetLeft offsetTop
2、client经常用于获得元素大小 clientWidth clientHeight
3、scroll经常用于获得滚动距离 scrollTop scrollLeft

mouseenter 和 mouseover的区别：
mouseenter鼠标事件：mouseover鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter只会经过自身盒子触发（不会冒泡）搭配鼠标离开mouseleave同样不会冒泡。

动画实现原理：通过定时器setinterval（）不断移动盒子位置 。
1、获得盒子当前位置
2、让盒子在当前位置加上1个移动距离
3、利用定时器不断重复这个操作
4、加一个结束定时器的条件
5、注意此元素需要添加定位，才能使用element.style.left

简单动画函数封装一般需要传入两个参数 obj目标对象，target目标位置

缓动动画原理：让元素运动速度有所变化，最常见让速度慢慢停下来
思路：
1、让盒子每次移动的距离慢慢变小，速度也就是慢慢落下来了
2、缓动动画公式：（目标值 - 现在的位置） / 10
3、到目标位置就停止定时器
向上取整： Math.ceil( );
向下取整：Math.floor( );

回调函数原理：函数可以作为一个参数。将这个函数作为一个参数传到另外一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。