• BOM- 操作浏览器

    一、Window对象

    1、BOM(浏览器对象模型)

    • BOM(Browser Object Model ) 是浏览器对象模型
      在这里插入图片描述
    • window 是浏览器内置中的全局对象，我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的
    • window 对象下包含了 navigator、location、document、history、screen 5个属性，即所谓的 BOM （浏览器对象模型）， navigator可以检测浏览器版本，location可以实现自动跳转，history可以让浏览器前进和后退，screen可以拿到屏幕的信息。
    • document 是实现 DOM 的基础，它其实是依附于 window 的属性。
    • 注：依附于 window 对象的所有属性和方法，使用时可以省略 window

    2、定时器-延时函数

    • JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout
    • 语法
      在这里插入图片描述
    • setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window
    • 清除延时函数
      在这里插入图片描述
    • 结合递归函数可以使用 setTimeout 实现 setInterval 一样的功能
      在这里插入图片描述

    案例–5秒钟之后消失的广告

    需求：5秒钟之后，广告自动消失
    分析：
    ①：设置延时函数
    ②：隐藏元素
    在这里插入图片描述

    两种定时器对比（间歇、延时）

    • setInterval 的特征是重复执行，首次执行会延时
    • setTimeout 的特征是延时执行，只执行 1 次
    • setTimeout 结合递归函数，能模拟 setInterval 重复执行

    3、JS执行机制

    在这里插入图片描述
    // 132

    • JS 是单线程
      JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。 应该先进行添加，之后再删除。
      单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

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

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

    • 异步
      你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。
      他们的本质区别： 这条流水线上各个流程的执行顺序不同。
      在这里插入图片描述

    • JS执行机制
      在这里插入图片描述

    在这里插入图片描述
    可能是1234也可能是1243

    • 事件循环

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

    异步API负责将异步任务放进异步队列，先放进的先执行。如 ‘三秒后打印3’ 和 ‘点击打印4’ ，3s时如果还没有点击事件，就将打印3放入异步队列；3s内如果有点击事件，则点击后就将打印4放入异步队列，3s到了将打印3放入异步队列。

    4、location对象

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

    常用属性和方法：

    ① href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转
    在这里插入图片描述

    5秒钟之后跳转的页面

    需求：用户点击可以跳转，如果不点击，则5秒之后自动跳转，要求里面有秒数倒计时

    分析：
①：目标元素是链接
②：利用定时器设置数字倒计时
③：时间到了，自动跳转到新的页面

    • 1
    • 2
    • 3
    • 4
    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>Documenttitle>
head>
<body>
    <a href="https://www.baidu.com"><span>5span>s后跳转页面a>
    <script>
        let a = document.querySelector('a')
        let n = 5
        let timer = setInterval(function(){
            n--
            a.innerHTML = `${n}s后跳转页面`
            if (n === 0){
                clearInterval(timer)
                // 跳转页面
                location.href='https://www.baidu.com'
            }
        },1000)
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    在这里插入图片描述

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

    在这里插入图片描述
    在这里插入图片描述

    运行左边可以将输入数据（abc）传入右边的网页，target.html可以得到输入的abc，因为location.search可以获得？之后的内容

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

    在这里插入图片描述
    后期vue路由的铺垫，经常用于不刷新页面，显示不同页面

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

    刷新方法 有本地缓存 强制刷新 ctrl + f5 直接更新最新内容从网上拉去，不走本地缓存

    在这里插入图片描述

    5、navigator对象

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

    常用属性和方法 : 通过 userAgent 检测浏览器的版本及平台
    在这里插入图片描述

    6、histroy对象

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

    常用属性和方法：
    在这里插入图片描述
    在这里插入图片描述

    二、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同时使用的时候, 类名需要注意区分

    使用步骤

    • 1）下载swiper 插件，
      在这里插入图片描述

    • 2）选择想要的实例，新窗口打开，并查看其源代码，根据官网的使用方法复制黏贴
      在这里插入图片描述
      首先加载插件，需要用到的文件有swiper-bundle.min.css和swiper-bundle.min.js文件（在package里）
      然后添加Css、HTML、script 内容，注意script 要加在swiper-bundle.min.js 后面添加

    • 3）可以在API文档中配置自己的插件，修改代码，达到不同的效果

    • 4）如果想要多个轮播图，复制相应的代码多份，只要给他们再加个类名，以示区分，下面js调用额外的类名即可，注意不能修改原来的类名
      第一个轮播图：
      在这里插入图片描述
      在这里插入图片描述
      第二个轮播图：
      在这里插入图片描述
      在这里插入图片描述

    三、本地存储

    1、本地存储特性

    随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。
    1）数据存储在用户浏览器中
    2）设置、读取方便、甚至页面刷新不丢失数据
    3）容量较大，sessionStorage和localStorage约 5M 左右

    2、localStorage

    1）生命周期永久生效，除非手动删除 否则关闭页面也会存在
    2）可以多窗口（页面）共享（同一浏览器可以共享）
    3）以键值对的形式存储使用
    在这里插入图片描述

    注意：key 和 value 是具体的值，不是变量，要加引号。

    简单数据类型：

     // 存储数据
localStorage.setItem('name','pink老师')
// 获取数据
console.log(localStorage.getItem('name'))
// 删除数据
console.log(localStorage.removeItem('name'))

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    复杂数据类型

    • 简单数据类型只能存储键值对，信息有限，还需存储对象等复杂数据类型
    • 本地只能存储字符串,无法存储复杂数据类型.需要将复杂数据类型转换成JSON字符串,再存储到本地

      • 将复杂数据转换成JSON字符串 存储在本地存储中
        在这里插入图片描述
        在这里插入图片描述

      • 将JSON字符串转换成对象 取出时候使用
        在这里插入图片描述
        在这里插入图片描述

    // JSON 属性和值都是双引号进行包含
    let obj = {
    “uname”: “刘德华”,
    “age”: “17”,
    “address”: “黑马程序员”
    }

    3、 sessionStorage（了解）

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

    四、综合案例–本地存储学习信息

    需求：改为本地存储版本的学习信息表
    在这里插入图片描述

    新增流程：
    读取本地数据—>增加新数据—>存储—>渲染
    删除流程：
    读取本地数据—>删除数据—>存储—>渲染
    渲染也要先读取本地数据

    分析：
需求①：读取本地存储数据（封装函数）
如果本地存储有数据，则返回 JSON.parse() 之后的对象
如果本地存储没有数据，则默认写入三条数据，注意存储的利用JSON.stringify() 存储JSON 格式的数据

需求②：渲染模块
先读取本地存储数据，然后渲染

需求③：添加模块
注意，先取的最新的本地存储数据，然后追加
新增了数据，要把新数据存储到本地存储别，忘记转换

需求④：删除模块
注意，先取的最新的本地存储数据，然后追加
新增了数据，要把新数据存储到本地存储别忘记转换

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    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>Documenttitle>
  <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="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>

    tbody>
  table>
  <script>

    // 需求①：读取本地存储数据（封装函数）
    // 如果本地存储有数据，则返回 JSON.parse() 之后的对象
    // 如果本地存储没有数据，则默认写入三条数据，注意存储的利用JSON.stringify() 存储JSON 格式的数据
    function read() {
      let data = localStorage.getItem('data')
      if (data) {
        //   如果本地存储有数据，则返回 JSON.parse() 之后的对象
        return JSON.parse(data)
      }
      else {
        // 如果本地存储没有数据，则默认写入三条数据，注意存储的利用JSON.stringify() 存储JSON 格式的数据
        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))
      }
    }




    //需求②：渲染模块
    // 先读取本地存储数据，然后渲染
    let tbody = document.querySelector('tbody')
    let uname = document.querySelector('.uname')
    let age = document.querySelector('.age')
    let gender = document.querySelector('.gender')
    let salary = document.querySelector('.salary')
    let city = document.querySelector('.city')

    function xuan() {
      // 1、读取
      let arr = read()
      //2、先删除原来的数据,后面重新渲染数据
      tbody.innerHTML = ''
      for (let i = 0; i < arr.length; i++) {
        //① 创建节点
        let tr = document.createElement('tr')

        //② 节点添加内容
        tr.innerHTML = `
            ${arr[i].stuId}
            ${arr[i].uname}
            ${arr[i].age}
            ${arr[i].gender}
            ${arr[i].salary}
            ${arr[i].city}
            
              ${i}>删除
            
        `
        //③ 追加节点
        tbody.appendChild(tr)
      }
    }
    xuan()

    // 需求③：添加模块
    // 注意，先取的最新的本地存储数据，然后追加
    // 新增了数据，要把新数据存储到本地存储别，忘记转换
    // 录入数据
    let add = document.querySelector('.add')
    add.addEventListener('click', function () {
      // 获得表单里面的值   之后追加给 数组 arr  用 push方法
      //1、读取
      let arr = read()
      //2、添加
      arr.push({
        stuId: arr[arr.length - 1].stuId + 1,
        uname: uname.value,
        age: age.value,
        gender: gender.value,
        salary: salary.value,
        city: city.value
      })
      //3、存
      localStorage.setItem('data', JSON.stringify(arr))
      //4、重新渲染数据
      xuan()
      //复原所有的表单数据
      uname.value = ''
      age.value = ''
      gender.value = '男'
      salary.value = ''
      city.value = '北京'


    })

    //     需求④：删除模块
    // 注意，先取的最新的本地存储数据，然后追加
    // 新增了数据，要把新数据存储到本地存储别忘记转换
    tbody.addEventListener('click', function (e) {
      // 1、读取
      let arr = read()
      // 2、删除
      //只有点击了删除链接a ，才会执行删除操作
      // 那我们怎么知道你点击了a呢？e.target.tagName
      if (e.target.tagName === 'A') {
        // 删除操作  删除 数组里面的数据  arr.splice(从哪里开始删，1)
        // 要得到被删除a的id 
        arr.splice(e.target.id, 1)
        //3、保存
        localStorage.setItem('data',JSON.stringify(arr))
        //4、重新渲染
        xuan()
      }
    })
  script>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165

    数据就会保存在浏览器中，刷新、关闭都不会消失

    存在问题：
    当数据都删除后不能新增（stuId没办法顺下去），可以让第一条数据不能被删除
    >

    五、自定义属性

    1、固有属性:

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

    2、自定义属性:

    由程序员自己添加的属性,在DOM对象中找不到, 无法使用点语法操作,必须使用专门的API (当默认的属性都被用了的时候，定义来可以做更多的事)

    getAttribute('属性名') // 获取自定义属性

setAttribute('属性名', '属性值') // 设置自定义属性

removeAttribute('属性名') // 删除自定义属性

    • 1
    • 2
    • 3
    • 4
    • 5

    在这里插入图片描述

    • data-自定义属性:
      传统的自定义属性没有专门的定义规则,开发者随意定值,不够规范,所以在html5中推出来了专门的data-自定义属性 在标签上一律以data-开头
      在DOM对象上一律以dataset对象方式获取
      在这里插入图片描述
  • 相关阅读:
    从助力跨境互通到保障农民工，区块链在大湾区做了什么？ | 研讨会
    数据结构与算法之美读书笔记14
    【YOLO系列】YOLOv3
    SpriteShapeProfile
    你已经应用了哪种服务注册和发现的模式呢？
    vue-cli + APIcloud
    系统服务控制
    Python3日志
    【自然语言处理概述】“海量”文件遍历
    Unity Samples和帧动画的问题
  • 原文地址：https://blog.csdn.net/qq_40832034/article/details/126001548