BOM- 操作浏览器：

Window对象：

BOM(浏览器对象模型)：

• BOM(Browser Object Model ) 是浏览器对象模型

• window 是浏览器内置中的全局对象，我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的

• window 对象下包含了 navigator、location、document、history、screen 5个属性，即所谓的 BOM （浏览器对象模型）

• document 是实现 DOM 的基础，它其实是依附于 window 的属性。

• 注：依附于 window 对象的所有属性和方法，使用时可以省略 window

定时器-延时函数：

• JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout

      <script>
          //语法
          setTimeout(回调函数，等待毫秒数)
          // 清除延时函数：
          let timer=setTimeout(回调函数，等待毫秒数)
          clearTimeout(timer)
      </script>
  

• setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window

• 两种定时器对比：

  • setInterval 的特征是重复执行，首次执行会延时
  • setTimeout 的特征是延时执行，只执行 1 次
  • setTimeout 结合递归函数，能模拟 setInterval 重复执行
  • clearTimeout 清除由 setTimeout 创建的定时任务
    • 创建的定时器应该由clearInterval来清除
    • 创建的延迟器应该由clrearTimeout来清除

JS执行机制：

• JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。 应该先进行添加，之后再删除

• 单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

• 同步和异步：

  • 为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程。于是，JS 中出现了同步和异步。

• 同步

  • 前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。

• 异步

  • 你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。

他们的本质区别： 这条流水线上各个流程的执行顺序不同

• 同步任务

  • 同步任务都在主线程上执行，形成一个执行栈

• 异步任务

  • JS 的异步是通过回调函数实现的。

  • 一般而言，异步任务有以下三种类型:

    • 1、普通事件，如 click、resize 等
    • 2、资源加载，如 load、error 等
    • 3、定时器，包括 setInterval、setTimeout 等

• 异步任务相关添加到任务队列中（任务队列也称为消息队列）

  ​

  1.先执行执行栈中的同步任务。

  2. 异步任务放入任务队列中。

  3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队

  4. 列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

location对象：

location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分

• 常用属性和方法：

  • href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转

        <script>
            // 可以得到当前文件URL地址
            console.log(location.href);
            // 可以通过js方式跳转到目标地址
            location.href=`https://www.baidu.com`
        </script>
    

• 常用属性和方法：

  • search 属性获取地址中携带的参数，符号 ？后面部分

        <script>
            console.log(location.search)
        </script>
    

  • hash 属性获取地址中的哈希值，符号 # 后面部分

        <script>
            console.log(location.hash)
        </script>
    

  • reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新

        <button class="btn">刷新</button>
        <script>
            let btn = document.querySelector(".btn").addEventListener("click", function () {
                location.reload(true)
                //强制刷新 类似ctrl+F5
            })
        </script>
    

navigator对象：

• navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息

• 常用属性和方法：

  • 通过 userAgent 检测浏览器的版本及平台

           // 检测 userAgent（浏览器信息）
            !(function () {
                const userAgent = navigator.userAgent
                // 验证是否为Android或iPhone
                const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
                const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
              // 如果是Android或iPhone，则跳转至移动站点
                if (android || iphone) {
                    location.href = 'http://m.itcast.cn'
                }
             })()
    
    

histroy对象：

• history 的数据类型是对象，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等
• 常用属性和方法：
  • back（） 可以后退功能
  • forward（）前进功能
  • go（参数）前进后退功能 参数如果是1前进一个页面 ，如果是-1 后退一个页面
  • history 对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。

swiper 插件：

• 插件: 就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果
• 学习插件的基本过程
  • 熟悉官网,了解这个插件可以完成什么需求 www.swiper.com.cn/
  • 看在线演示,找到符合自己需求的demo www.swiper.com.cn/demo/index.…
  • 查看基本使用流程 www.swiper.com.cn/usage/index…
  • 查看APi文档,去配置自己的插件 www.swiper.com.cn/api/index.h…
  • 注意: 多个swiper同时使用的时候, 类名需要注意区分

本地存储：

localStorage：

• 语法
  • 存: localStorage.setItem(‘键’，’值‘)（key，value）
  • 取： localStorage.getItem(‘键’) （key）
  • 删： localStorage.removeItem(‘键’) （key）
• 删除全部 loaclStorage.clear( )

存储复杂数据类型

• 本地只能存储字符串，无法存储复制数据类型，需要将复制数据类型转换成JSON字符串，再存储到本地

• 转换成JSON字符串的语法

  • JSON.stringify (复制数据类型) 将复杂数据类型转换成JSON字符串 存储 本地存储中
  • JSON.paser(JSON字符串) 将JSON字符串转换成对象 取出 时候使用

sessionStorage（了解）：

• 在同一个窗口(页面)下数据可以共享

• 以键值对的形式存储使用

• 用法跟localStorage 基本相同

      <script>
          /* 
          本地存储 四个api 
          1 存  localStorage.setItem(key,value)
          2 取  localStorage.getItem(key)
          3 删除一个 localStorage.removeItem(key)
          4 清空 localStorage.clear(); 
           */
          // for (let index = 0; index <100; index++) {
          //   localStorage.setItem(`abc${index}`,index);
          // }
          localStorage.clear();
  
      </script>
         <script>
          /* 
          本地存储的技术 sessionStorage  会话（打开页面到关闭页面之间过程 一次会话  ajax node）存储
          登录的时候 
          它的用法和 localStorage 用法一样 
          区别只有一个 
          sessionStorage 关闭页面后 数据就丢失 
          localStorage 除非是用户主动删除 否则一直存在 直到天荒地老
           */
    
          //  存数据
          // sessionStorage.setItem("ss",123);
          //  取数据
          // console.log(sessionStorage.getItem("ss"));
          // 删除一个
          // sessionStorage.removeItem("ss")
          // 清空
          // sessionStorage.clear();
        </script>
  

自定义属性：

固有属性:

• 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作

自定义属性:

• 由程序员自己添加的属性,在DOM对象中找不到, 无法使用点语法操作,必须使用专门的API
• getAttribute('属性名') // 获取自定义属性
• setAttribute('属性名', '属性值') // 设置自定义属性
• removeAttribute('属性名') // 删除自定义属性

<body>
    <div class="box"></div>
    <script>
        const box = document.querySelector(".box")
       box.setAttribute('index',1)
       console.log(box.getAttribute(`index`));
    </script>
</body>

data-自定义属性:

• 传统的自定义属性没有专门的定义规则,开发者随意定值,不够规范,所以在html5中推出来了专门的data-自定义属性 在标签上一律以data-开头
• 在DOM对象上一律以dataset对象方式获取

<body>
    <div class="box" data-id="10"></div>
    <script>
        const box = document.querySelector(".box")
        console.log(box.dataset.id)  //10
    </script>
</body>