Web APIs 第六天（BOM- 操作浏览器）

因帅被叛流放
741 阅读5分钟

Window对象

BOM(浏览器对象模型)

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

image.png

  • window 是浏览器内置中的全局对象，我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的
  • window 对象下包含了 navigator、location、document、history、screen 5个属性，即所谓的 BOM (浏览器对象模 型)
  • document 是实现 DOM 的基础，它其实是依附于 window 的属性。
  •  注:依附于 window 对象的所有属性和方法，使用时可以省略 window

定时器-延时函数

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

image.png

  • setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window
  • 清除延时函数: image.png
  • 补充知识点：递归函数：函数内部调用函数自己

image.png

image.png

  • 一次性定时器和递归函数结合

image.png

  • 两种定时器对比:
  1. setInterval 的特征是重复执行，首次执行会延时
  2. setTimeout 的特征是延时执行，只执行 1 次
  3. setTimeout 结合递归函数，能模拟 setInterval 重复执行
  4. clearTimeout 清除由 setTimeout 创建的定时任务

JS执行机制

同步和异步

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

  • 同步 前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步 做法:我们要烧水煮饭，等水开了(10分钟之后)，再去切菜，炒菜。
  • 异步 你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事 情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。
    他们的本质区别: 这条流水线上各个流程的执行顺序不同。

执行机制

  • 同步任务 同步任务都在主线程上执行，形成一个执行栈。 异步任务
  • JS 的异步是通过回调函数实现的。 一般而言，异步任务有以下三种类型: 1、普通事件，如 click、resize 等
    2、资源加载，如 load、error 等
    3、定时器，包括 setInterval、setTimeout 等 异步任务相关添加到任务队列中(任务队列也称为消息队列)

image.png

image.png

location对象

  • location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分
  • 常用属性和方法:
  1. href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转 href 属性用于修改地址路径，点击跳转作用相当于a链接 image.png image.png
  2. search 属性获取地址中携带的参数，符号 ?后面部分

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

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

image.png

navigator对象

  • navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息
  • 常用属性和方法: 通过 userAgent 检测浏览器的版本及平台

image.png

histroy对象

  • history 的数据类型是对象，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等
  • 常用属性和方法:（记住go即可）

image.png

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

swiper插件

  • 插件: 就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果
  • 官网www.swiper.com.cn/

本地存储

本地存储特性

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

localStorage

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

  • 代码 1.存储数据: localStorage.setItem(key, value)\
  1. 获取数据: localStorage.getItem(key)\
  2. 删除数据: localStorage.removeItem(key)

存储复杂数据类型--JSON

  • 本地只能存储字符串,无法存储复杂数据类型.需要将复杂数据类型转换成JSON字符串,在存储到本地
  • JSON.stringify(复杂数据类型) 将复杂数据转换成JSON字符串存储本地存储中
    装换完成后键变成双引号：'{"键":"值"}'
  • JSON.parse(JSON字符串) 将JSON字符串转换成对象取出时候使用

sessionStorage(了解)

1、生命周期为关闭浏览器窗口
2、在同一个窗口(页面)下数据可以共享
3. 以键值对的形式存储使用
4. 用法跟localStorage 基本相同

补充知识点：自定义属性

固有属性:

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

自定义属性:

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

image.png

data-自定义属性:

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

image.png

综合案例

image.png

image.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>Document</title>
  <link rel="stylesheet" href="css/user.css">
</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="stuId">
    薪资：<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>

  <!-- <div id="box1" 属性="值" title="box" ></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>1001</td>
        <td>欧阳霸天</td>
        <td>19</td>
        <td>男</td>

        <td>15000</td>
        <td>上海</td>
        <td>
          <a href="javascript:">删除</a>
        </td>
      </tr> -->
    </tbody>
  </table>
  <script>
    //  1. 准备好数据后端的数据**************
    // 封装函数、获取数据
    function getLocalDate() {
      // 获取数据
      let data = localStorage.getItem('data');

      // 条件判断
      if (data) {
        return JSON.parse(data);
      } else {
        // 如果没有数据我们就添加三条假数据
        let arr = [
          { stuId: 1001, uname: '欧阳霸天', age: 19, gender: '男', salary: '20000', city: '上海' },
          { stuId: 1002, uname: '令狐霸天', age: 29, gender: '男', salary: '30000', city: '北京' },
          { stuId: 1003, uname: '诸葛霸天', age: 39, gender: '男', salary: '2000', city: '北京' },
        ];
        localStorage.setItem('data', JSON.stringify(arr));
      }
    }


    // 2.获取元素*******************
    let uname = document.querySelector('.uname');
    let age = document.querySelector('.age')
    let gender = document.querySelector('.gender');
    let stuId = document.querySelector('.stuId');
    let salary = document.querySelector('.salary');
    let city = document.querySelector('.city');
    let add = document.querySelector('.add');
    let tbody = document.querySelector('tbody');



    // 3.显示数据函数***********************
    // ①获取数据→②排他→③for循环遍历数组，逐个显示数据(创建元素并追加到文档节点中)
    function showMessage() {
      // 去本地获取数据
      let arr = getLocalDate();
      // 在显示数据之前要清空tbody
      tbody.innerHTML = '';
      for (let i = 0; i < arr.length; i++) {
        // console.log( arr[i] );
        // 创建tr
        let tr = document.createElement('tr');
        // 追加到tbody里面
        tbody.appendChild(tr);
        // 设置tr内容
        tr.innerHTML = `
                        <td>${arr[i].stuId}</td>
                        <td>${arr[i].uname}</td>
                        <td>${arr[i].age}</td>
                        <td>${arr[i].gender}</td>
                        <td>${arr[i].salary}</td>
                        <td>${arr[i].city}</td>
                        <td>
                          <a href="javascript:;" id="${i}">删除</a>
                        </td>
                    `;
      }
    }



    // 4.在所有触发事件前先展示已经有的数据
    getLocalDate();  //这里的主要主要目的是把初始数据存一下，否则后面展示数据无数据可读取
    showMessage();   //展示初始数据



    // 5.录入触发事件*******************
    // ①触发事件→②获取本地数据→③把新对象添加进去→④保存到本地···（以上过程把数据都处理好了，取、加、存）···
    //  →⑤展示数据→⑥清除输入框
    add.addEventListener('click', function () {
      // 获取数据
      let arr = getLocalDate();

      if (arr.length === 0) {
        stuId = '1001';
      } else {
        stuId = arr[arr.length - 1].stuId + 1;
      }

      // 往数组中添加新的对象
      arr.push({
        stuId: stuId,
        uname: uname.value,
        age: age.value,
        gender: gender.value,
        salary: salary.value,
        city: city.value,
      });
      // console.log(arr);
      // 保存到本地
      localStorage.setItem('data', JSON.stringify(arr));
      // 展示数据
      showMessage();
      // 清除输入框
      uname.value = '';
      age.value = '';
      gender.value = '男';
      stuId.value = '';
      salary.value = '';
      city.value = '北京';
    });




    // 6.点击删除数据*******************
    // ①触发事件→②动态创建的元素，不准直接获取，需要事件委托，if判断点击的地方是否正确，正确的话再执行
    // →③获取本地数据→④删除数据→⑤保存到本地→⑥展示数据
    tbody.addEventListener('click', function (e) {

      if (e.target.nodeName === 'A') {
        // 获取数据
        let arr = getLocalDate();
        // 删除数据
        arr.splice(e.target.id, 1);
        // 保存数据
        localStorage.setItem('data', JSON.stringify(arr));
        // 展示数据
        showMessage();
      }

    });



  </script>
</body>

</html>

疑问点

1、object即对象{ 属性:属性值 属性:属性值 属性:属性值 } 属性值可能是function即方法/函数 2、

let num=4 let a=num++ 输出结果：num=5;a=4 let num=4 let b=++num 输出结果：num=5;a=5 ++和+不一样，+是常规的运算符，++是特殊的运算符

avatar
文章
阅读
粉丝