06-BOM- 操作浏览器

回溯

 关注

阅读 45

2022-04-15

06-BOM- 操作浏览器

window对象

BOM(浏览器对象模型)

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

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jlup6WqG-1650025584363)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1649993396853.png)]

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

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

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

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

定时器-延时函数

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

语法

设置延时函数

  • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-75nrSVq9-1650025584364)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1650023277529.png)]

        <script>
        setTimeout(fun,1000)
    </script>

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

清除延时函数
  • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DRSEL4Fm-1650025584364)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1650023509663.png)]

案例

1.广告倒计时5秒关闭

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: aqua;
            text-align: center;
            line-height: 300px;
            font-size: 20px;
            color: white;
        }
    </style>
</head>

<body>
    <div>这是一个硬核广告</div>
    <script>
        setTimeout(() => {
            document.querySelector('div').style.display = 'none'
        }, 2000);


        setTimeout(fun,1000)
    </script>
</body>

</html>
2.结合递归函数使用

递归函数：自己调用自己的函数

结合递归函数可以使用 setTimeout 实现 setInterval 一样的功能

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1vC3ZmVy-1650025584365)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1650023661429.png)]

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let index = 0
        getSum()
        function getSum() {
            ++index;
            let time = setTimeout(() => {
                getSum()
            }, 1000);
            console.log(index);
        }
    </script>
</body>

</html>

JS执行机制

JS 是单线程

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

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

同步和异步

同步

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

异步

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

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

同步任务

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

异步任务

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

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

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9q7eWv8b-1650025584365)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1650023923651.png)]

JS执行机制
  1. 先执行执行栈中的同步任务。
  2. 异步任务放入任务队列中。
  3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-njmXP6b6-1650025584365)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1650023997312.png)]

小结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YnyVnOoN-1650025584365)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1650024020961.png)]

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（ event loop）。

location对象

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

常用属性和方法

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

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QdVFmush-1650025584366)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1650024163249.png)]

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

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oaFOOWu4-1650025584366)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1650024148218.png)]

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

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VVWMIRPt-1650025584366)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1650024196592.png)]

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

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t1eRNyg9-1650025584366)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1650024221119.png)]

navigator对象

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

常用属性和方法

  • 通过 userAgent 检测浏览器的版本及平台
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lqwweDlG-1650025584367)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1650024292631.png)]

histroy对象

history 的数据类型是对象，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等

常用属性和方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MOJkGL37-1650025584367)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1650024339489.png)]

history 对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body><a href="http://www.baidu.com">百度</a>
    <button class="forward">前进</button>
    <button class="back">后退</button>
    <script>
        const btn1 = document.querySelector('.forward')
        const btn2 = document.querySelector('.back')
        btn1.addEventListener('click', function () {
            // history.forward(); //前进一个记录
            history.go(1)  //(想前进几个位置,就写及)前进一个位置

        })
        btn2.addEventListener('click', function () {
            // history.back();  //后退一个记录
            history.go(-1)
        })
    </script>
</body>

</html>

swiper插件

  • 插件: 就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果
  • 学习插件的基本过程
    • 熟悉官网,了解这个插件可以完成什么需求 https://www.swiper.com.cn/
    • 看在线演示,找到符合自己需求的demo https://www.swiper.com.cn/demo/index.html
    • 查看基本使用流程 https://www.swiper.com.cn/usage/index.html
    • 查看APi文档,去配置自己的插件 https://www.swiper.com.cn/api/index.html
      注意: 多个swiper同时使用的时候, 类名需要注意区分
  • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CCwyL5xf-1650025584367)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1650024451522.png)]

本地存储

1.初识本地存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。

  1. 数据存储在用户浏览器中
  2. 设置、读取方便、甚至页面刷新不丢失数据
  3. 容量较大，sessionStorage和localStorage约 5M 左右

2.localStorage

特性
  1. 生命周期永久生效，除非手动删除 否则关闭页面也会存在
  2. 可以多窗口（页面）共享（同一浏览器可以共享）
  3. 以键值对的形式存储使用（‘key’，value）
使用

  1. 存储数据

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gSEXczz3-1650025584367)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1649992592374.png)]

    localStorage.setItem(key, value)

  2. 获取数据

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ERWegfVv-1650025584368)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1649992672651.png)]

    localStorage.getItem(key)

  3. 删除数据

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ahhAXArl-1650025584368)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1649992719878.png)]

    localStorage.removeItem(key)

  4. 清空数据

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-igsx6omC-1650025584368)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1649992773271.png)]

    localStorage.clean()
特点

  • 存储复杂数据类型存储

    本地只能存储字符串,无法存储复杂数据类型.需要将复杂数据类型转换成JSON字符串,在存储到本地

  • JSON.stringify(复杂数据类型)

    将复杂数据转换成JSON字符串 存储 本地存储中

  • JSON.parse(JSON字符串)

    将JSON字符串转换成对象 取出 时候使用

案例

本地存储学习信息案例

需求：改为本次存储版本的学习信息表

分析：

  • 需求①：读取本地存储数据（封装函数）
    如果本地存储有数据，则返回 JSON.parse() 之后的对象
    如果本地存储没有数据，则默认写入三条数据，注意存储的利用JSON.stringify() 存 储JSON 格式的数据
  • 需求②：渲染模块
    先读取本地存储数据，然后渲染
  • 需求③：添加模块
    注意，先取的最新的本地存储数据，然后追加。新增了数据，要把新数据存储到本地存储别，忘记转换

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zpTzOy5s-1650025584368)(06-BOM-%20%E6%93%8D%E4%BD%9C%E6%B5%8F%E8%A7%88%E5%99%A8.assets/1649989015586.png)]

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>08-学生就业薪资-本地存储版本-同学自己去补充</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    a {
      text-decoration: none;
      color: #721c24;
    }

    h1 {
      text-align: center;
      color: #333;
      margin: 20px 0;
    }

    table {
      margin: 0 auto;
      width: 800px;
      border-collapse: collapse;
      color: #004085;
    }

    th {
      padding: 10px;
      background: #cfe5ff;

      font-size: 20px;
      font-weight: 400;
    }

    td,
    th {
      border: 1px solid #b8daff;
    }

    td {
      padding: 10px;
      color: #666;
      text-align: center;
      font-size: 16px;
    }

    tbody tr {
      background: #fff;
    }

    tbody tr:hover {
      background: #e1ecf8;
    }

    .info {
      width: 900px;
      margin: 50px auto;
      text-align: center;
    }

    .info input {
      width: 80px;
      height: 25px;
      outline: none;
      border-radius: 5px;
      border: 1px solid #b8daff;
      padding-left: 5px;
    }

    .info button {
      width: 60px;
      height: 25px;
      background-color: #004085;
      outline: none;
      border: 0;
      color: #fff;
      cursor: pointer;
      border-radius: 5px;
    }

    .info .age {
      width: 50px;
    }
  </style>
</head>

<body>
  <h1>新增学员</h1>
  <div class="info">
    姓名：<input type="text" class="uname" /> 年龄：<input type="text" class="age" />
    性别:
    <select name="gender" id="" class="gender">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    薪资：<input type="text" class="salary" /> 就业城市：<select name="city" id="" class="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="曹县">曹县</option>
    </select>
    <button class="add">录入</button>
  </div>

  <h1>就业榜</h1>
  <table>
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>薪资</th>
        <th>就业城市</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- <tr>
          <td>1</td>
          <td>这是名称</td>
          <td>这是年龄</td>
          <td>这是性别</td>
          <td>这是工资</td>
          <td>这是所在城市</td>
          <td>
            <a href="javascript:" class="del">删除</a>
          </td>
        </tr> -->
    </tbody>
  </table>
  <script>
    // 1.1 定义数组 负责存放表格要显示的数据
    // 获取本地存储中的数组（字符串格式）  转成 数组格式

    // 第一次打开页面的时候 ，本地存储里面会有数据吗
    const strArr = localStorage.getItem('arr')
    if (strArr) {
      arr = JSON.parse(strArr)
    } else {
      arr = []
    }


    const tbody = document.querySelector('tbody');
    // 2  给 录入绑定点击事件
    const add = document.querySelector('.add');
    const uname = document.querySelector('.uname');
    const age = document.querySelector('.age');
    const gender = document.querySelector('.gender');
    const salary = document.querySelector('.salary');
    const city = document.querySelector('.city');

    // 1.2 根据数组渲染页面
    renderTableByArr();

    // 2  按钮绑定点击事件
    add.addEventListener('click', function () {
      // 2.1 创建一个新的对象 把表单数据都合并到对象中
      const data = {
        // 学号
        id: Date.now(),
        // 姓名
        uname: uname.value,
        // 年龄
        age: age.value,
        // 性别
        gender: gender.value,
        // 薪资
        salary: salary.value,
        // 就业城市
        city: city.value,
      };

      // 老师打了一个 断点 来验证 上面的代码 没有写错
      // 2.2 给数组插入新的元素
      arr.push(data);

      // 将新元素存储到本地中
      // 将元素转成字符串
      const strArr = JSON.stringify(arr)
      localStorage.setItem('arr', strArr)

      // 2.3 数组发生改变  重新调用渲染页面的函数
      renderTableByArr();

      // 2.4 表单数据清空
      uname.value = '';
      age.value = '';
      gender.value = '男';
      salary.value = '';
      city.value = '北京';
    });

    // 3 tbody绑定点击事件，同时判断被点击的是不是 del 删除标签
    tbody.addEventListener('click', function (event) {
      // 3.1 判断当前点击的是不是a标签
      if (event.target.nodeName === 'A') {
        // <a data-index="2" href="javascript:" class="del">删除</a>

        // 获取到a标签 上存放的 index
        // event.target =  a标签的dom元素
        // console.dir(event.target.dataset.index)
        const index = event.target.dataset.index;

        // 3.3 执行数组删除元素
        arr.splice(index, 1);


        const strArr = JSON.stringify(arr)
        localStorage.setItem('arr', strArr)
        // 3.4 调用根据数组渲染页面的函数
        renderTableByArr();
      }
    });
    // 根据数组渲染表格
    function renderTableByArr() {
      let html = ``;
      for (let index = 0; index < arr.length; index++) {
        html += `
         <tr>
          <td>${arr[index].id}</td>
          <td>${arr[index].uname}</td>
          <td>${arr[index].age}</td>
          <td>${arr[index].gender}</td>
          <td>${arr[index].salary}</td>
          <td>${arr[index].city}</td>
          <td>
            <a data-index="${index}" href="javascript:" class="del">删除</a>
          </td>
        </tr>
         `;
      }

      // 把生成的tr插入到 tbody中
      tbody.innerHTML = html;
    }
  </script>
</body>

</html>

3.sessionStorage（了解）

特性
  1. 生命周期为关闭浏览器窗口
  2. 在同一个窗口(页面)下数据可以共享
  3. 以键值对的形式存储使用
  4. 用法跟localStorage 基本相同
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>11-sessionStorage.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      /* 
      本地存储的技术 sessionStorage  会话（打开页面到关闭页面之间过程 一次会话  ajax node）存储
      登录的时候 
      它的用法和 localStorage 用法一样 
      区别只有一个 
      sessionStorage 关闭页面后 数据就丢失 
      localStorage 除非是用户主动删除 否则一直存在 直到天荒地老
       */

      //  存数据
      // sessionStorage.setItem("ss",123);
      //  取数据
      // console.log(sessionStorage.getItem("ss"));
      // 删除一个
      // sessionStorage.removeItem("ss")
      // 清空
      // sessionStorage.clear();
    </script>
  </body>
</html>

相关推荐

Web APIs-BOM- 操作浏览器

兽怪海北 36 0 0

BOM 浏览器对象模型

Resin_Wu 61 0 0

BOM:浏览器对象模型

全栈顾问 72 0 0

BOM浏览器对象模型

mm_tang 68 0 0

BOM 浏览器对象大全

心存浪漫 105 0 0

Web APIs BOM- 操作浏览器-Window对象

归零者245号 109 0 0

Web APIs BOM- 操作浏览器：本地存储

_karen 130 0 0

BOM-浏览器对象模型

以前干嘛去了 64 0 0

JS之浏览器对象BOM

吴陆奇 194 0 0

JS BOM浏览器对象模型

Ewall_熊猫 81 0 0

精彩评论（0）

0 0 举报