BOM学习2

navigator对象

• 包含有关浏览器的信息，它有很多属性，我们最常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值下面前端代码可以判断用户那个终端打开页面，实现跳转

history对象

• 与浏览器历史记录进行交互，该对象包含用户（在浏览器窗口中）访问过的URL
  back() 可以后退功能
  forward() 前进功能
  go(参数) 前进后退功能 参数如果是1 前进1个页面如果是-1后退1个页面

PC端网页特效

• 元素偏移量offset系列
  我们使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。
  获得元素距离带有定位父元素的位置
  获得元素自身的大小（宽度高度）
  注意:返回的数值都不带单位 常用属性
  element.offsetParent 返回作为该元素带有定位的父级元素 如果父级都没有定位则返回body
  element.offsetTop 返回元素相对带有定位父元素上方的偏移
  element.offsetLeft 返回元素相对带有定位左边框的偏移
  element.offsetWidth 返回自身包括padding、边框、内容区的宽度，返回值不带单位
  element.offsetHeight 返回自身包括padding、边框、内容区的高度，返回值不带单位 offset与style区别
  主要offset只读 style可写

元素可视区 client系列

• 我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态得到该元素的边框大小、元素大小等。
  系列属性
  clientTop:返回元素上边框的大小
  clientLeft:返回元素左边框的大小
  clientWidth:返回自身包括padding、内容区的宽度，返回值不带单位
  clientHeight:返回自身包括padding、内容区的宽度，返回值不带单位

立即执行函数 （function(){}）

• 1 不需要调用，立马能够自己执行的函数
  2 写法 (function(){})(参数) 其中第二个()可以看作是调用函数，可以在里面添加参数 或者 (function(){}(参数));
  3 主要作用：创建一个独立的作于域，里面所有的变量都是局部变量，不会有命名冲突的情况
  pageshow 是重新加载页面触发的事件
  触发load事件的三种情况 a标签的超链接 F5或者刷新按钮 前进后退按钮
  但是 火狐中，有个特点 ，有个往返缓存，这个缓存不仅保存着页面数据还保存了DOM和js的状态，实际上是将整个页面都保存在内存中了，所以后退不能刷新页面
  此时可以用pageshows事件来触发，pageshow会在load事件后触发；根据事件对象中的persisted来判断是否缓存中的页面触发的pageshow事件，注意这个事件是给window添加
  元素滚动scroll系列 相关属性可以动态的得到该元素的大小、滚动距离等 系列属性
  scrollTOP 返回被卷去的上侧距离，返回数值不带单位
  scrollLeft 返回被卷去的左侧距离，返回数值不带单位
  scrollWidth 返回自身实际的宽度，不含边框不带单位
  scrollHeight 返回自身实际的高度，不含边框不带单位
  scroll滚动事件 mouseenter和mouseover的区别 mouseover经过自身会触发，经过子盒子也会触发，mouseenter只经过自身盒子触发
  之所以这样是因为mouseenter不会冒泡 mouseleave同样不会冒泡

动画函数封装

• 动画实现原理 核心原理:通过定时器setInterval()不断移动盒子位置 实现步骤
  1获得盒子当前位置
  2 让盒子在当前位置上加上一个移动距离
  3 利用定时器不断重复这个动作
  4 加一个结束定时器的条件
  5 注意 此元素需要添加定位，才能使用element.style.left 动画函数的封装

动画函数给不同元素记录不同的定时器

• 当前缺点 如果多个函数都调用这个动画函数，每次var声明定时器。我们可以给不同元素使用不同的定时器（自己专门用自己的定时器）
  核心原理:利用js是一门动态语言，可以很方便的给当前对象添加属性
  缓动动画原理 让元素运动速度有所变化，最常见的是让速度慢慢停下来
  思路 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来
  核心算法: (目标值-现在的位置)/10 做为每次移动的距离步长 缓动动画添加回调函数
  回调函数：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程叫回调
  回调函数写的位置:定时器结束的位置 动画函数封装到单独的js文件里面

节流阀

• 目的 当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。
  核心思路:利用回调函数，添加一个变量来控制，锁住函数和解锁函数
  开始设置一个变量 var flag=true;
  if(flag){flag=false;do something} 关闭水龙头
  利用回调函数 动画执行完毕，flag=true 打开水龙头