WebApi

作者: 云木杉 | 来源:发表于2020-05-29 18:27 被阅读0次

    DOM树

    • document

      • html根元素
        • head 标签
        • body
          • a
          • p
          • h1 ...
    • 文档: document 一个页面就是一个文档,DOM中使用document标识

    • 元素:页面中所有的标签都是元素,DOM中使用element标识

    • 节点:网页中所有的内容,都是节点。

    • 因为我们文档页面是从上往下加载,所以script写到标签下面(先有标签再使用)

    • console.dir() 查看元素对象属性及方法

    • this关键字的使用(当前对象的调用者)

      • 全局作用域或者普通函数的this 指向全局对象window

      • 方法调用中,谁调用this指向谁

      • 构造函数中 this指向构造函数的实例

        function fun(){
            // 执行方法
        }
        
        var f = new fun(); // 开辟了一个新的方法空间
        

    BOM 浏览器对象模型

    • DOM属于BOM的一部分

    • BOM的顶级对象是window

    window对象的常见事件

    window.onload = function(){
        // 页面加载完执行的方法
    }
    
    window.addEventListener('load',function(){
        // 页面加载完执行
    })
    
    window.addEventListener('DOMContentLoaded',function(){
        // DOM树加载完执行
    })
    
    window.addEventListener('resize',function(){
        // 页面变化时执行
        window.innerWidth() // 屏幕宽度
    })
    

    定时器

    // 1.setTimeOut 延时调用,只调用一次
    setTimeOut(fun,2000) = window.setTime(fun,2000)
    // 1.直接调用
    var f = setTimeOut(function(){},2000);
    // 关闭定时器
    chearTimeOut(f);
    
    
    // 2.调用方法
    function fun(){
        //方法调用
    }
    setTimeOut(fun,2000);
    
    // 2.间隔调用 setInterval()
    var f = setInterval(fun,2000); // 2000毫秒执行一次,一直执行
    // 关闭interval
    clearInterval(f)
    

    JS执行队列

    当主线程任务执行完后,会去异步任务列表轮训是否有任务,如果有则执行,前提是主线程任务执行完毕后。

    • JS是单线程
    • js分为两个线程
      • 主线程 同步任务 从上到下执行
      • 任务队列 异步任务 (点击事件,资源加载,方法回调)
    • 先执行同步任务(主线程),后执行异步任务(任务队列)

    location对象

    获取URL对象数据,其实可以直接console.dir(location) 去查看location对象属性

    • location.href 可以获取域名地址,也可以赋值 跳转新的页面

    • location.host 域名

    • location.port 端口号

    • location.path 路径

    • location.search 参数

    • location.hash 锚点

    • location.assign('url') // 记录历史,具有后退功能

    • location.replace('url') // 不记录历史,不具有后退功能

    • location.reload('url') / 重新加载页面 也可以强制刷新 比较常用

    **navigator对象 **

    • 包含浏览器的信息,常用的是userAgent,该属性可以返回由客户端发送至服务端的user-agent头部的值 了解就好

    history对象

    与浏览器历史记录进行交互,该对象包含用户访问过的URL

    • back 后退功能
    • forward 前进功能
    • go 前进后退功能 go(1)前进一步 go(-1)后退一步

    界面使用 用的不多

    • 元素偏移量offset系列
    • 元素可视区client系列
    • 元素滚动 scroll系列

    本地存储

    • window.sessionStorage

      • 容量大小 5M

      • 生命周期 为关闭浏览器窗口

      • 在同一个窗口下数据可以共享

      • 以键值对存储

        // 存储数据
        sessionStorage.setItem('key','value')
        // 获取数据
        sessionStorage.getItem('key')
        // 移除数据
        sessionStorage.remove('key')
        // 清除所有
        sessionStorage.clear()
        
    • window.localStorage

      • 容量大小20M

      • 生命周期,永久生效,除非手动删除,否则一直存在

      • 可以多个窗口共享 同一浏览器使用

      • 也是以键值对存在

        // 存储数据
        localStorage.setItem('key','value')
        // 获取数据
        localStorage.getItem('key')
        // 移除数据
        localStorage.remove('key')
        // 清除所有
        localStorage.clear()
        

    相关文章

      网友评论

          本文标题:WebApi

          本文链接:https://www.haomeiwen.com/subject/xryfzhtx.html