BOM随笔

window对象

页面加载事件

• window.onload = function(){}
• window.addEvevtListener("load",function(){})

窗口大小事件

• 窗口大小发生变化时触发
• window.onresize
• window.addEvebtListener("resize",function(){}

定时器

• setTimeout(调用函数,时间//毫秒)
  • setTimeout(function(){},1000)
  • setTimeout(callback,1000)
• clearTimeout(timeoutid) 清除定时器

  var timer = setTimeout(function(){},1000);
   clearTimeout(timer)

• setInterval(回调函数,间隔毫秒数)//重复调用
• 给对象添加同名定时器前，通常需先清除定时器

    clearInterval(obj.timer);
    obj.timer=setInterval(){}

同步异步

• 同步任务
  • 主线程上执行，形成执行栈
• 异步任务
  • js异步任务通过回调函数实现//任务队列
  • 一般有三种类型
    • 普通事件，click，resize等
    • 资源加载，load，error等
    • 定时器，包括setTimeout,setInterval等
      • 同步任务只有定时器
        • setTimeout(fn,0)
      • 回调函数属于异步任务
        • function()
• 执行机制
  • 先执行执行栈中的同步任务
  • 异步任务(回调函数)放入任务队列
  • 一旦执行栈中的同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行
    • 异步进程处理: 处理异步任务，等待其满足条件时，将其放入任务队列
      

location对象

属性

• location.href //地址
  • location.href = "###"//改变地址
• location.search//参数数据 /// "?name=xxx...."

方法

• location.assign("")//页面跳转(href) (重定向页面) 记录浏览历史 可以实现后退功能//
  • 页面刷新时直接调用，不记录浏览历史
• location.replace("")//替换页面 不记录浏览历史 不可后退
• location.reload();//重新加载页面(F5) 如果参数为true强制刷新(ctrl+F5)

navigator

• 包含有关浏览器的信息
  • navigation.userAgent

history

• back()
• forward()
• go(1)//-1

PC网页特效

offset 常用于 元素位置

• offsetLeft offsetTop获取元素偏移
  • 以带有定位的父亲为准，如果没有父亲或父亲没有定位 则以body为准
• offsetWidth offsetHeight
  • 得到元素的大小 宽度和高度 （包含 padding+border+width)
• offsetParent
  • 返回带有定位的父亲，否则返回的是body
  • parentNode //返回最近一级的父亲（不论有无定位）
• offset style区别
  • offset获取任意样式表 style只能获取行内样式表
  • offset没有单位
  • offsetWidth包含padding+border+width，style.width不包含padding border
  • offsetWidth等属性是只读属性 不能赋值
    • 获取元素大小位置-offset
    • 给元素更改值-style

client 常用于 元素大小

• element.clientWidth//返回自身包括padding,内容区的宽度 不含边框 无单位
• element.clientHeight//
• element.clientTop //返回元素上边框的大小
• element.clientLeft//左边框

scroll 常用于 滚动距离

• element.scrollHeight//自身实际的高度，不含边框，不带单位
• element.scrollTop//滚动时 element被卷去的上侧距离
  • window.pageYOffset //doc页面被卷去的头部 （兼容性问题）
  • window.pageXOffset
    • 声明DTD document.documentElement.srcollTop
    • 未声明DTD document.body.scrollTop
• element.scollWidth
• element.scrollLeft

scroll事件

mouseover mouseenter

• mouseover 鼠标经过自身盒子会触发，经过子盒子也会触发(mouseout); mouseenter 只会经过自身盒子触发（mouseenter不会冒泡）//mouseleave

动画

• setInterval

缓动动画

• 匀速 //步长 固定
• 步长 ：(目标值 - 现在的位置) / 10//若为整数 至少为1
  • 正值向上取整 Math.ceil() //0.3 -> 1;
  • 负值向下取整 Math.floor()//-0.3 -> -1

回调函数

• 回调：函数作为一个参数 传到另一个函数里面，当那个函数执行完之后 再执行传进去的这个函数。

function animate(obj,callback){
  /*...*/
  callback();
}
animate(obj, function(){})

轮播图 无缝滚动

• 复制第一张图片到最后，滚动到最后时，无动画复原为初始状态
• 节流阀
  • 利用回调函数控制 动画执行与否

animateTo(ul, -400 * i, function() {
                        flag = true;
                    });

移动端

touch触摸事件

• touchstart
• touchmove
• touchend

触摸事件对象TouchEvent

• e.touches//正在触摸屏幕的所有手指列表
• e.targetTouches //正在触摸当前dom元素的手指列表e.targetTouches[0]
• e.changedTouches //手指状态发生了改变的列表 从无到有/从有到无

ClassList 类名操作

• ele.classList[1]//获取类名
• ele.classList.add('three);//添加类名 追加不覆盖
• ele.classList.remove('one);//删除类名
• ele.classList.toggle('bg')//切换类
  • 有'bg'类->删除'bg'
  • 无'bg'类->添加'bg'

transitionend 事件

• 过渡结束时触发

click延时解决方案

• 原因: 移动端双击屏幕会缩放页面，300ms延时等待
• 方法: 禁止用户缩放屏幕
  • content="user-scalable=no"
• 利用touch事件自己封装事件解决300ms延迟
• fastclick.js

swiper

本地存储

• window.sessionStorage
  • 生命周期为关闭浏览器窗口
  • 存储数据
    • sessionStorage.setItem(key,value)
  • 获取数据
    • sessionStorage.getItem(key)
  • 删除数据
    • sessionStorage.removeItem(key)
• window.localStorage
  • 生命周期永久生效，除非手动删除，否则关闭页面也存在
  • 多窗口共享（同一浏览器）
  • 存储数据
    • localStorage.setItem(key,value)
  • 获取数据
    • localStorage.getItem(key)
  • 删除数据
    • localStorage.removeItem(key)
  • 清除所有数据
    • localStorage.clear()