06-BOM- 操作浏览器

阿良_C
82 阅读6分钟

BOM- 操作浏览器

window对象

BOM(浏览器对象模型)

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

    1649993396853

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

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

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

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

定时器-延时函数

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

语法

设置延时函数

  • 1650023277529

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

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

清除延时函数
  • 1650023509663

案例

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 一样的功能

1650023661429

<!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 等

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

1650023923651

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

1650023997312

小结

1650024020961

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

location对象

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

常用属性和方法

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

    1650024163249

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

    1650024148218

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

    1650024196592

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

    1650024221119

navigator对象

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

常用属性和方法

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

histroy对象

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

常用属性和方法

1650024339489

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插件

本地存储

1.初识本地存储

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

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

2.localStorage

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

  1. 存储数据

    1649992592374

    localStorage.setItem(key, value)

  2. 获取数据

    1649992672651

    localStorage.getItem(key)

  3. 删除数据

    1649992719878

    localStorage.removeItem(key)

  4. 清空数据

    1649992773271

    localStorage.clean()
特点

  • 存储复杂数据类型存储

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

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

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

  • JSON.parse(JSON字符串)

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

案例

本地存储学习信息案例

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

分析：

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

1649989015586

<!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>
avatar
文章
阅读
粉丝