1.Window对象

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

BOM对象.png

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

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

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

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

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

2.定时器-延时函数

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

2.语法

setTimeout(回调函数,等待的毫秒数)

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

4.清除延时函数：

let timer = setTimeout(回调函数,等待的毫秒数)
clearTimeout(timer)

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

   <script>
      // 定时器 不主动清除，定时器永远执行下去
      // 延时器 只会执行一次

      // 延时器实现定时器的功能

      // 在延时器 又开启一个延时器，


      // 递归 自己调用自己  函数自己调用自己 
      let index=0;
      function func() {
        console.log(++index);
        setTimeout(func,1000);
      };
      func();

    </script>

6.案列

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>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .box {
            width: 300px;
            height: 500px;
            background-color: pink;
            border-radius: 10px;
            font-size: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: red;
        }
    </style>
</head>
<body>
    <div class="box">潮吧</div>
    <script>
        let div = document.querySelector('.box')
        let timer = 5
        setTimeout(function(){
            timer--
            div.style.display = 'none'
        },5000)
    </script>
</body>
</html>

7.两种定时器对比：

1.setInterval 的特征是重复执行，首次执行会延时

2.setTimeout 的特征是延时执行，只执行 1 次

3.setTimeout 结合递归函数，能模拟 setInterval 重复执行

clearTimeout 清除由 setTimeout 创建的定时任务

3.JS执行机制

1.经典面试题

1.面试题一

  console.log(1);
      setTimeout(function () {
          console.log(2);
      },0)
      console.log(3);
//输出结果是什么
132

2.面试题二

  console.log(1);
      setTimeout(function () {
          console.log(2);
      },1000)
      console.log(3);
//输出结果是什么
132

2.JS 是单线程

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

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

3.同步和异步

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

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

1.同步

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

2.异步

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

3.同步任务

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

4.异步任务

异步任务.png

JS 的异步是通过回调函数实现的。一般而言，异步任务有以下三种类型:

1.普通事件，如 click、resize 等

2.资源加载，如 load、error 等

3.定时器，包括 setInterval、setTimeout 等

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

4.js执行机制

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

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

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

js执行机制.png

js执行机制2.png

4.location对象

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

2.常用属性和方法：

1.href

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

//可以得到当前文件URL地址
console.log(loaction.href)
//可以通过JS方法跳转到目标地址
loaction.href= 'http://www.baidu.com'

2.search

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

console.log(loaction.search)

3.hash

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

console.log(loaction.hash)
//后期vue路由的铺垫，经常用于不刷新页面，显示不同页面，比如 网易云音乐

4.reload

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

<button>跳转到百度</button>
<script>
    let btn = document.querySelector('button')
    btn.addEventListener('click',function(){
        location.reload(true)
        //强制刷新  类似ctrl+f5
    })
</script>

3.使用方法

<!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>17-location.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <button>跳转到百度</button>
    <script>
      // 1 使用a标签 href 属性 可以实现页面跳转
      // 2 在js中，也可以直接跳转  location.href 来跳转
      // 3 location.href 也可以实现刷新 location.href = location.href;
      // 4  location.reload(true);// true 强制刷新！
      // 5 search 后一个阶段就会用到它 了  获取 url上 ？ 后面一串字符  /17-location.html?a=1&b=2
      // 6 hash 学习到了vue阶段就会用到了 获取 # 后面一串字符 /17-location.html#/index  #/index

      const button = document.querySelector('button');
      button.addEventListener('click', function () {
        // location.href="http://www.baidu.com";  //跳转
        // console.log(location.href);// http://127.0.0.1:5500/17-location.html
        // 刷新功能
        // location.href = location.href; // 刷新功能

        
        // reload实现刷新
        // location.reload(true);// true 强制刷新！ 
        console.log(location.hash);
      });

      setTimeout(function () {
        // location.href="http://www.baidu.com";
      }, 5000);
    </script>
  </body>
</html>

5.navigator对象

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

1.常用属性和方法：

1.通过 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'
}
})()

2.检测游览器

<!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>18-navigator-useragent.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>

    <a href="#">下载软件</a>
    
    <script>
      // 作用 检测当前浏览器的版本和型号
      //  手机端来说，  安卓手机 可以直接下载apk 手机软件的 
      //               ios 手机来说 不可以直接下载手机软件 必须要回到苹果的应用商店中来下载
      // 安卓手机来说 点击 下载软件 给它下载apk
      // iphone手机来说 点击 下载软件 可能只需给苹果手机一个提示 


      // 可以识别出 当前的访问设备是 pc端还是移动端
      // 后台根据 当前用户的设备类型 来返回 对应的平台的页面
      // pc端来访问我的页面 我给你显示pc端的页面
      // 移动端来访问我的页面 我给你显示移动端的页面 
      // b站就是 


      // console.log(window.navigator.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';
      //   // }
      //   console.log(android);
      //   console.log(iphone);
      // })();
      validBrowser()
      function validBrowser() {
        var u_agent = navigator.userAgent;
        var browser_name = 'Failed to identify the browser';
        if (u_agent.indexOf('Firefox') > -1) {
          browser_name = 'Firefox';
        } else if (u_agent.indexOf('Chrome') > -1) {
          browser_name = 'Chrome';
        } else if (
          u_agent.indexOf('Trident') > -1 &&
          u_agent.indexOf('rv:11') > -1
        ) {
          browser_name = 'IE11';
        } else if (
          u_agent.indexOf('MSIE') > -1 &&
          u_agent.indexOf('Trident') > -1
        ) {
          browser_name = 'IE(8-10)';
        } else if (u_agent.indexOf('MSIE') > -1) {
          browser_name = 'IE(6-7)';
        } else if (u_agent.indexOf('Opera') > -1) {
          browser_name = 'Opera';
        } else {
          browser_name += ',info:' + u_agent;
        }
        document.write('browser_name:' + browser_name + '<br>');
        document.write('u_agent:' + u_agent + '<br>');
      }
    </script>
  </body>
</html>

6.histroy对象

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

1.常用属性和方法：

histroy对象方法	作用
back()	可以后退功能
forward()	前进功能
go(参数)	前进后退功能参数如果是1前进一个页面如果是-1后退一个页面

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

2.使用方法

<!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>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com">跳转到百度</a>
    <button class="forward">前进</button>
    <button class="back">后退</button>
    <script>
        const forward = document.querySelector('.forward')
        forward.addEventListener('click', function () {
            //history.forward()
            history.go(1)//前进一个记录
        })
        const back = document.querySelector('.back')
        back.querySelector('click' , function () {
            //history.back()
            history.go(-1)//后退一个记录
        })
    </script>
</body>
</html>

2.swiper 插件

1.插件:

就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果

2.学习插件的基本过程

熟悉官网,了解这个插件可以完成什么需求 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同时使用的时候, 类名需要注意区分

3.使用方法

<!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>
    <link rel="stylesheet" href="./swiper/swiper/swiper-bundle.min.css">
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .swiper {
            width: 1000px;
        }  
        img{
            width: 100%;
        }
    </style>
</head>
<body>
    <!-- 
  1 下载swiper对应的文件 - css + js 
  2 分布引入他们
  3 拷贝别人的固定结构
  4 拷贝写好的swiper 初始化js代码
 -->
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="./imges/1.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./imges/2.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./imges/3.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./imges/4.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./imges/5.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./imges/6.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./imges/7.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./imges/8.jpg" alt="">
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        
        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>
    <script src="./swiper/swiper/swiper-bundle.min.js"></script>
    <script>        
        var mySwiper = new Swiper ('.swiper', {
        //   direction: 'vertical', // 垂直切换选项   默认是水平切换
          loop: true, // 循环模式选项
          autoplay:true,
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
          },
          
          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          
          // 如果需要滚动条
          scrollbar: {
            el: '.swiper-scrollbar',
          },

          //3d翻转
          effect: 'coverflow',
        slidesPerView: 3,
        centeredSlides: true,
        })        
        </script>
</body>
</html>

3.本地存储

本地存储分析.png

1.本地存储特性

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

1.数据存储在用户浏览器中

2.设置、读取方便、甚至页面刷新不丢失数据

3.容量较大，sessionStorage和localStorage约 5M 左右

2.localStorage

1.生命周期永久生效，除非手动删除否则关闭页面也会存在

2.可以多窗口（页面）共享（同一浏览器可以共享）

3.以键值对的形式存储使用

4.存储数据:setItem

localStorage.setItem(key, value)

5.获取数据：getItem

localStorage.getItem(key)

<script>
      // 存储日期
      // localStorage.setItem("自定义",值-必须是字符串的格式)
      // localStorage.setItem("date","二〇二二年四月十五日 09:06:48")

      // 获取它
      const date=localStorage.getItem("date");
      console.log(date);
    </script>

6.删除数据:removeItem

localStorage.removeItem(key)

7.存储复杂数据类型存储

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

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

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

数组转换成字符串

<script>
   	 //1.定义一个数组
      let arr = ['1','2','3']
     //2.数组转字符串
      let sum =JSON.stringify(arr)
      console.log(typeof sum);
      console.log(sum);
	 localStorage.setItem('arr1',sum)
  </script>

9.JSON.parse(JSON字符串)

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

字符串转换成数组

  <script>
      //方法一:错误的转换的不是数组
     //不能直接字符串转数组
     //打印结果为  number   数字类型
      //只能结合stringify数组转换成字符串来使用
    let sum ='123456'
    let arr = JSON.parse(sum)
    console.log(typeof arr);
  </script>

  <script>
      //方法二:正确的 转换结果为数组
      //1.定义一个数组
      let arr = ['1','2','3']
      //2.数组转换成字符串
      let sum =JSON.stringify(arr)
      console.log(typeof sum);
      console.log(sum);
      //3.字符串转数组
      let arr1 = JSON.parse(sum)
      console.log(arr1);
  </script>

10.综合使用

  <script>
      //1.定义一个数组
      let arr = ['1','2','3']
      //2.数组转换成字符串
      let sum =JSON.stringify(arr)
      console.log(typeof sum);
      console.log(sum);
      //3.本地存储
      localStorage.setItem('arr1',sum)
      //4.获取本地存储
      let str= localStorage.getItem('arr1')
      console.log(str);
      //5.字符串转数组
      let str1 = JSON.parse(str)
      console.log(str1);
  </script>

3.sessionStorage（了解）

1.生命周期为关闭浏览器窗口

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

3.以键值对的形式存储使用

4.用法跟localStorage 基本相同

  <script>
      /* 
      本地存储的技术 sessionStorage  会话（打开页面到关闭页面之间过程 一次会话  ajax node）存储
      登录的时候 
      它的用法和 localStorage 用法一样 
      区别只有一个 
      sessionStorage 关闭页面后 数据就丢失 
      localStorage 除非是用户主动删除 否则一直存在 直到天荒地老
       */

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

4.综合案列

1.页面换肤功能

<!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>05-页面换肤-本地存储</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <input type="color" />
    <script>
      // 代码重新执行了 页面刷新
      document.body.style.backgroundColor = localStorage.getItem('bgcolor');

      const colorInput = document.querySelector('input');
      colorInput.addEventListener('change', function () {
        document.body.style.backgroundColor = this.value;
        // 设置颜色到本地存储中
        localStorage.setItem('bgcolor', this.value);
      });
    </script>
  </body>
</html>

2.本地存储-复杂类型

<!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>06-本地存储-localstorage.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>

      // console.log( localStorage.getItem("sdfdfdd") );// 如果没有数据的时候 本地存储会返回什么？ 
      
      // let str= localStorage.getItem("sdfdfdd");// null
      // JSON.parse(null)// 不正确了呀
      // 判断有没有数据 如果没有数据 返回一个空数组 
      // 有数据 将字符串 解析成数组 再给你返回 
      
      
      /* 
      本地存储 存储数据类型 不管你传入什么类型都好，最终都被它转换成 字符串类型

      本地存储 存储复杂类型 引用类型的数据 会出现数据丢失的问题 固定规则来着
      （我们的菜篮子 只能用来装青菜 你用来装水  我不管---）
      对象 数组 
       */

      // localStorage.setItem('test', 123);
      // localStorage.setItem('test123', true);

      // const test = localStorage.getItem('test');

      //  console.log( typeof test ); // string

      // console.log(test);

      // const test123 = localStorage.getItem('test123');

      //  console.log(typeof test123); // string
      // console.log(test123);

      // const obj = { name: '路飞' };

      // localStorage.setItem('obj', obj); // 存了一个对象数据进去 写法不对了

      // const newObj = localStorage.getItem('obj');
      // console.log(newObj);

      // 数组和对象 适合管理 比较复杂的数据
      // const obj = `{ name: '路飞', height: 100, weight: 200 }`;

      // // 丧失 对象 简洁用法的意义
      // console.log(obj.name );
      // console.log(obj.height );
      // console.log(obj.weight );

      // // 能不能 把对象格式转成 字符串格式 ， 继续使用 本地存储
      // localStorage.setItem("obj",obj);// obj 是一个长得想 对象的  字符串

      // 在行业中我们会这么做
      // // 1 还是正常定义对象
      // const obj = {
      //   name: '路飞',
      //   height: 100,
      //   weight: 200,
      // };

      // // 2 有好用的代码 ，可以帮我们快速把一个对象转成字符串
      // const objStr = JSON.stringify(obj);

      // // 3 本地存储 可以存储字符串类型的数据
      // localStorage.setItem("obj",objStr);

      // 4 把本地存储的数据重新读取出来
      // const newObjStr =  localStorage.getItem("obj");
      // // console.log(newObjStr);

      // // 5 你能不能帮 我 重新把 这个 字符串 解析成原来的对象 
      // const newObj = JSON.parse(newObjStr);

      // console.log(newObj);

      /* 
      1 本地存储无法存放 复杂类型的数据 
      2 复杂类型的数据 通过JSON对象  字符串 相互之间的转换 
       */
    </script>
  </body>
</html>

3.学生信息-本地存储

<!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');
      let 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>

5.拓展

1.if简写

  <script>
      let abc = null;
      // let abc = undefined;
      // let abc = "";
      // let abc = 0;
      // let abc = false;
      // let abc = NaN;
      // if 对代码 做隐式转换  转换成布尔类型 
      if (abc) {
        console.log(1);
      } else {
        console.log(2);
      }
    </script>

2.本地存储

1.存: localStorage.setItem(key,value)

2.取: localStorage.getItem(key)

3.删除一个 : localStorage.removeItem(key)

4.清空: localStorage.clear()

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

3.自定义属性

1.固有属性:

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

2.自定义属性:

由程序员自己添加的属性,在DOM对象中找不到, 无法使用点语法操作,必须使用专门的API

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

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

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

<div class='box'><div>
<script>
    let box =document.querySelector('.box')
    //设置自定义属性
    box.setAttribute('myid',10)
    //删除自定义属性
    console.log(box.removeAttribute('myid'))
</script>

3.data-自定义属性:

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

在DOM对象上一律以dataset对象方式获取

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

4..元素属性

<!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>12-元素属性.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <a data-index="0" id="nav" href="http://www.baidu.com" hello="no" aa="bb" >跳转</a >

    <script>
      // 获取 dom元素的固有属性  通过点语法来获取
      const a = document.querySelector('a');
      // 获取固有属性
      // console.log(a.href);
      // console.log(a.id);

      // 直接修改
      // a.href="http://www.qq.com";
      // a.id="top";

      // 自定义属性 不能直接通过点语法来获取和设置
      // 获取 getAttribute("属性名")
      // console.log(a.hello);
      // console.log(a.aa);
      // console.log( a.getAttribute("hello") );
      // console.log( a.getAttribute("aa") );

      // 设置 setAttribute(key,value)
      // a.setAttribute("hello","123");

      // 删除掉属性 removeAttribute(key)
      // a.removeAttribute("hello");

      //  自定义属性 -> h5建议的 自定义属性
      // 属性的时候 data-xxx 开头
      //  获取的时候  a.dataset.xxx
      //  设置  a.dataset.index = 3;

      // console.log(a.dataset.index);
      // a.dataset.index = 3;

      /* 
      
      小结 
      标签的属性 有两种分为
      1 固有属性  比如 id href src     点语法的方式获取和设置 方便
      2 自定义属性
        1 随机自己瞎命名  
          <a  abc="123" >  
            获取 （getAttribute） 设置 setAttribute(key,value)  删除   removeAttribute(key)
        2 h5建议 data- xxx
          <a  data-abc="123" >  
            获取（a.dataset.abc）  设置（a.dataset.abc=456）;
      3 最强大是  （getAttribute）  setAttribute removeAttribute 
            上述的这个方式，可以获取到任意的属性（固有属性和h5建议的自定义属性）
            <a data-index="0" id="nav" href="http://www.baidu.com" hello="no" aa="bb" >跳转</a >
      */
    //  console.log( a.getAttribute("data-index") );
    //  console.log( a.getAttribute("id") );
    //  console.log( a.getAttribute("href") );
    //  console.log( a.getAttribute("hello") );
    //  console.log( a.getAttribute("aa") );
    </script>
  </body>
</html>

5.自定义属性演示

<!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>13-自定义属性使用演示.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <ul></ul>
    <script>
      // 根据数组 渲染出li标签 点击li标签的时候  根据它对应的颜色 设置到 我body标签背景中

      // 数组
      let arr = [
        { price: '100', title: '去旅游', color: 'yellow' },
        { price: '200', title: '去读书', color: 'red' },
        { price: '300', title: '去吃饭', color: 'blue' },
      ];

      const ul = document.querySelector('ul');
      let html = ``;
      for (let index = 0; index < arr.length; index++) {
        html += `<li data-price="${arr[index].price}" data-color="${arr[index].color}" >${arr[index].title}</li>`;
      }
      ul.innerHTML = html;

      // 事件委托
      ul.addEventListener('click', function (event) {
        // 当前点击的是li标签
        if (event.target.nodeName === 'LI') {
          // 设置body标签的背景颜色  等于什么  =  等于当前被点击的元素（li） 身上的自定义属性 data-color
          // document.body.style.backgroundColor = event.target.dataset.color;
          document.body.style.backgroundColor =
            event.target.getAttribute('data-color');
          console.log(
            `你想要去做的事情，要花这么多钱哦 ${event.target.dataset.price}`
          );
        }
      });
    </script>
  </body>
</html>

4.取消绑定事件

1.addEventListener 添加事件

2.removeEventListener 删除事件

<!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>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <button>点击我</button>
    <script>
         /* 
      1 addEventListener 可以绑定多个同名事件
      2 removeEventListener 可以取消对应的事件类型和事件处理函数

      3 无法取消 addEventListener 事件 对应的匿名函数 
      
       */

        const btn = document.querySelector('button')
        function fun1() {
            console.log('2022年4月15日14:45:41');
        }
        function fun2() {
            console.log('大潮吧');
        }
        btn.addEventListener('click' , fun1)
        btn.addEventListener('click' , fun2)
         //  想要取消 这个 输出时间的行为
        btn.removeEventListener('click',fun1)
        
        //匿名函数
        btn.addEventListener('click',function () {
            console.log('大潮吧');
        })
    </script>
</body>
</html>

5.字符串方法

1.转大写 toUpperCase()

2.转小写 toLowerCase()

3.转数组 str.split('')按照什么来分割你的字符串变成数组

<!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>17-字符串方法.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // 我们在实际开发过程中，有很多需求要针对字符串做处理
      // js 帮我们封装了很多大量和实用 字符串方法
      // 先介绍一些

      // 转大写 转小写。
      let msg = 'dachaoba';
      //转大写
      console.log(msg.toUpperCase());
      // 转小写
      console.log(msg.toLowerCase()); //转成小写

      // 字符串和数组很相似
      // 能不能把字符串 转成数组？
      const str="abcdefg"; //=> ["a","b","c","d","e","f","g"]
      // // split("")   分割
      console.log(str.split(""));// ["a","b","c","d","e","f","g"]  数组
     
      console.log(str.split('-')); // 'a-b-c-d-e-f-g'  


      /* 
      1 转大写  toUpperCase()

      2 转小写 toLowerCase()

      3 转数组 str.split('') 按照什么来分割你的字符串变成数组
       */
    </script>
  </body>
</html>

6.数组方法

1.join('') 数组转字符串

2.join('-') 数组转字符串

3.concat 合并和 + 一样

<!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>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <script>    
      // 数组 补充 常用
      const arr = ['a','b','c']
      console.log(arr.join('')); // join 数组转字符串   'abc'
      console.log(arr.join('-')); //join a-b-c-d 数组转字符串   'a-b-c'

      // 连接  数组和数组之间连接
      const arr1 = ['大','潮','吧']
      const arr2 = ['1','2','3']
      // 将两个数组合并成一个数组
      console.log(arr1.concat(arr2));
      
      //字符串也有一个 concat 也是表示合并
      const str1 = '123';
      const str2 = 'abc';
      // console.log(str1.concat(str2));// 很少用  有什么用？ 当你的键盘 + 键坏  使用它 
      console.log(str1 + str2); // 更加简单好理解
    </script>
</body>
</html>

06-webAPI-操作游览器

1.Window对象

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

2.定时器-延时函数

2.语法

4.清除延时函数：

6.案列

7.两种定时器对比：

3.JS执行机制

1.经典面试题

2.JS 是单线程

3.同步和异步

1.同步

2.异步

3.同步任务

4.异步任务

4.js执行机制

4.location对象

2.常用属性和方法：

1.href

2.search

3.hash

4.reload

3.使用方法

5.navigator对象

1.常用属性和方法：

6.histroy对象

1.常用属性和方法：

2.使用方法

2.swiper 插件

1.插件:

2.学习插件的基本过程

3.使用方法

3.本地存储

1.本地存储特性

2.localStorage

4.存储数据:setItem

5.获取数据：getItem

6.删除数据:removeItem

7.存储复杂数据类型存储

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

9.JSON.parse(JSON字符串)

10.综合使用

3.sessionStorage（了解）

4.综合案列

1.页面换肤功能

2.本地存储-复杂类型

3.学生信息-本地存储

5.拓展

1.if简写

2.本地存储

3.自定义属性

1.固有属性:

2.自定义属性:

3.data-自定义属性:

4..元素属性

5.自定义属性演示

4.取消绑定事件

5.字符串方法

6.数组方法