JavaScript之BOM操作及简单动画入门 | 青训营笔记

用户2937961978697
63 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的第4天

BOM

  • 概念：BOM(Browser Object Model)，即浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象为window

  • 注意：

    • 全局的对象和函数均为window的属性和方法
    • 不同的浏览器window对象内的属性和方法会有不同，这里只写了较为通用的一些方法与属性

杂项

  • this的指向：始终指向调用的对象（全局情况下则指向window）

  • JS任务执行过程：

    • 任务：

      • 同步任务：所有主线程的任务

      • 异步任务：通过回调函数实现的任务，主要有以下类型

        • 普通事件：click、resize等
        • 资源加载：load、error等
        • 定时器

    • 过程：

      • 先执行同步栈中的同步任务
      • 执行过程中遇到的回调函数时，由异步进程处理在其应当执行时，放入任务队列
      • 同步任务执行完成后，将任务队列中的任务依次放入执行栈开始执行

window对象

  • window对象的成员可以通过window.xxx访问，也可直接通过xxx使用

  • 常用事件：

    事件名触发条件
    load页面内容全部加载完毕
    DOMContentLoadedDOM加载完毕（不包含css、图片、flash等）
    resize浏览器窗口大小变化

  • 常用方法：

    • 回调函数相关

      方法名说明
      setTimeout(func,time)在time(ms)后执行一次func（单次执行）
      clearTimeout(timeoutID)取消一个timeout定时器
      setInterval(func,time)产生一个定时器，每time(ms)后执行一次func（反复执行）
      clearInterval(intervalID)取消一个interval定时器

location对象

  • url格式：

    protocol://host[:port]/path/[?query]#fragment
    • protocol： 通信协议，如http、ftp等
    • host：主机域名
    • port：端口号
    • path：主机上的一个地址
    • query：参数，以key=value的键值对的形式书写，不同键值对之间以&分隔
    • fragment：片段，#后面的内容常见于链接锚点

  • location对象常用属性：

    属性名说明
    location.href完整url
    location.host主机域名
    location.port端口号，为空时值为空字符串
    location.pathname路径
    location.search参数（?query）
    location.hash片段（#fragment）

  • location对象常用方法：

    方法名说明
    location.assign(url)跳转页面到url
    location.replace(url)替换当前页面，不记录历史（不可回退）
    location.reload()重新加载页面（刷新），可添加参数true改为强制刷新

navigator对象

  • 包含浏览器的信息
  • userAgent的值返回客户端向服务器发送的user-agent头部的值

history对象

  • 常用方法：

    方法名说明
    history.back()后退
    history.forward()前进

简单动画入门

PC端网页特效

offset系列属性

  • offset系列相关属性可以动态获得元素的偏移量、大小等信息

    • 注意：返回值均不带单位(px)

  • 常用属性：

    属性名说明
    element.offsetParent该元素最近的带有定位的父级元素（如无带定位的父级元素则返回body）
    element.offsetTop/offsetLeft元素相对于带有定位的父级元素上方/左方的偏移量（边框间的距离）
    elment.offsetWidth/offsetHeight元素的宽度和高度（包含border及以内的区域）

  • 与style的区别

offsetstyle
可以得到任意样式表内的内容只能得到行内样式表的内容
得到无单位的数字得到带单位的字符串
offsetWidth/Height包含padding和borederstyle的width不包含padding和border
只读属性可读写属性
适用于获取元素样式适用于更改元素样式

client系列

  • client系列相关属性可以动态获取元素可视区的相关信息

  • 常用属性：

    属性名说明
    element.clientTop/clientLeft上边框/左边框的宽度
    element.clientWidth/clientHeightborder以内(padding和内容区)的宽度和高度

scroll系列

  • scroll系列相关属性可以动态获取元素的实际大小、滚动距离

  • 常用属性

    属性名说明
    element.scrollWidth/scrollHeight内容的实际宽度、高度）
    element.scrollTop/scrollLeft内容的卷去的上侧/左侧距离
    window.pageXOffSet/pageYOffset页面的卷去左侧和上侧的距离

  • 常用事件

    事件名说明
    scroll在页面滚动时触发

三大系列总结

  • 主要用途分别是：

    • offset用于获取元素位置
    • client用于获取元素大小
    • scroll用于获取滚动距离

立即执行函数

  • 定义：不需要调用就会立即执行一次

  • 写法：

    (function() {})();// method 1
(function(){}());// method 2
    • 第二个小括号传入参数

  • 作用：创建一个独立的作用域

动画

  • 基本原理：通过SetInterval()定时器不断移动元素

  • 注意事项：

    • 移动盒子需给盒子添加定位position: absolute

    • 封装动画函数时，建议添加定时器存储时存储为一个动画对象的属性

      obj.timer = SetInterval(...)

    • 封装动画函数，最初先清除定时器，防止同时存在多个定时器

缓动动画

  • 定义：速度有变化的动画，如慢慢停下

  • 减速算法：步长=(目标值-当前值)/const

    • 注意步长需要取整，正值去ceil，负值取floor

  • 添加回调函数

    function(callback) {
    if(now == target){
        if(callback)
            callback();//如果传入回调函数，则执行
    }
}

节流阀

  • 目的：防止操作过快

  • 模板：

    flag = true;
xxx.addEventLister(op,function(){
    if(flag){
        flag = false;
        do something;
        flag = 
    }
})

\

avatar
文章
阅读
粉丝