window对象-本地存储-自定义属性-数据类型方法等等室友的学习笔记，涉及内容有： window对象-延时器-swip

一、window对象

1.BOM

BOM是浏览器对象模型

1650108765642

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

2.定时器-延时函数

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

语法：

1650110006041

注意：

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

消除延时函数

1650110277874

<script>
      // 延时器 - 只会执行一次而已
      let timeid = setTimeout(function () {
        console.log('猜猜我是谁');
      }, 5000);
      // 取消延时器
      clearTimeout(timeid);

    </script>

3.递归

递归就是一个函数调用自己

语法：

function func（）{

	func（）

}

func()

延时器实现定时器功能（使用递归）

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

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

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


      // 递归 自己调用自己  函数自己调用自己 
        let index=0
        function func(){
            document.write(++index)
            setTimeout(func,1000)
        }
        func()
    </script>

4.location对象

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

常用的属性和方法：

href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转
search属性获取地址中携带的参数，符号？后面部分
hash 属性获取地址中的啥希值，符号 # 后面部分
reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新

location.href='地址' 实现网页跳转

刷新功能

location.reload( )
location.href=location.href

强制刷新 location.reload( true )

location.search 获取URL上？后面的一串字符

location.hash 获取URL上#后面的一串字符

<!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>
    <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   //?a=1&b=2 
      // 6 hash 学习到了vue阶段就会用到了 获取 # 后面一串字符 /17-location.html#/index  #/index
        let btn=document.querySelector('button')
        btn.addEventListener('click',function(){
           //location.reload()//刷新页面
        //    location.reload(true)//强制刷新
        console.log(location.hash)
        console.log(location.search)
        })

    </script>
</body>
</html>

5.navigator对象

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

常用属性和方法

通过 userAgent 检测浏览器的版本及平台 window.navigator. userAgent

6.history对象

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

常用属性和方法

back（）后退功能

forward（）前进功能

go（）前进后退功能如：go（1）前进一个页面，go（-1）后退一个页面

<!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>
        let forward=document.querySelector('.forward')
        let back=document.querySelector('.back')
        forward.addEventListener('click',function(){
            //history.forward() 前进一个页面
            history.go(1)
        })
        back.addEventListener('click',function(){
           // history.back() 后退一个页面
           history.go(-1)
        })
    </script>
</body>
</html>

二、swiper插件

1650113465738

三、本地储存

1.localStorage(常用)

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

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

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

存储数据：

localStorage.setItem(key, value）

获取数据： localStorage.getItem(key）

删除数据：

localStorage.removeItem(key)

localStorage.clear( ) 清空整个存储

4.注意：

key的值，必须是字符串的格式，可自定义 'key' 、'color'等
本地存储，存储数据类型，不管是什么都转换成字符串类型

5.存储复杂类型数据、引用类型数据会发生数据丢失如：对象、数组等存储会发生数据丢失

此时就要将对象、数组转换成字符串

JSON.stringify(复杂数据类型)

将复杂数据（对象）转换成JSON字符串存储在本地存储中

JSON.parse(JSON字符串)

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

<!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>对象转换成字符串 再取出来使用</title>
  </head>
  <body>
    <script>
      const obj = {
        name: "路飞",
        height: 100,
        weight: 200,
      };
      //1.先将对象转换成字符串
      let objStr = JSON.stringify(obj);
      console.log(objStr);
      console.log(typeof objStr);//字符串类型 string
      //2.将转换成字符串的对象存入到本地存储中
      localStorage.setItem("obj", objStr);
       //3.从本地存储中取出 
      let newObjStr=localStorage.getItem('obj')
      console.log(newObjStr)
      //4.将取出的字符串对象转换成原来的对象类型
      let newObj=JSON.parse(newObjStr)
      console.log(newObj)
      console.log(typeof newObj)//对象类型 object
    </script>
  </body>
</html>

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

2.sessionStorage（了解）

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

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

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

4.用法跟localStorage 基本相同

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

        //存储数据
        sessionStorage.setItem('abc',123)
        //获取存储
        sessionStorage.getItem('abc')
        console.log(sessionStorage.getItem('abc'))
        //删除存储
        sessionStorage.removeItem('abc')
        //清空存储
        sessionStorage.clear()
    </script>

四、自定义属性

1.固有属性

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

2.自定义属性

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

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

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

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

1650119216950

3.data-自定义属性

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

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

1650119311770

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

自定义属性使用

<!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');
          // alert(
          //   // `你想要去做的事情，要花这么多钱哦 ${event.target.dataset.price}`
          // );
        }
      });
    </script>
  </body>
</html>

五、事件绑定与取消

绑定： addEventListener 可以绑定多个同名事件

取消绑定：removeEventListener 可以取消对应的事件类型和事件处理函数

注意：无法取消 addEventListener 事件对应的匿名函数

<!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>
    <button>点击我</button>
    <!-- <button>点击我 输出时间</button> -->
    <script>
        let btn=document.querySelector('button')
        let body=document.querySelector('body')
        function data(){
            body.innerText='叫声你好'
            // console.log('你好')
        }
        function bgc(){
            body.style.backgroundColor='pink'
        }
        btn.addEventListener('click',data)
        btn.addEventListener('click',bgc)

        // const btn = document.querySelector('button');

      // // 普通函数
      // function func() {
      //   console.log('2022-04-15 14:32:26');
      // }
      // function func2() {
      //   console.log("func2");
      // }

      // // 绑定事件
      // btn.addEventListener('click', func);

      // // addEventListener 可以绑定多个同名事件
      // btn.addEventListener('click', func2);

      // setTimeout(function () {
      //   // 取消这个事件绑定
      //   btn.removeEventListener('click', func);
      // }, 5000);


      /* 
      1 addEventListener 可以绑定多个同名事件
      2 removeEventListener 可以取消对应的事件类型和事件处理函数

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

    //    const btn=document.querySelector("button");
       
    //    btn.addEventListener("click",function () {
    //      console.log("你好");
    //    })

    //   //  想要取消 这个 输出你好的行为
    //   btn.removeEventListener("click",???);
    </script>
</body>
</html>

六、字符串方法

1.英文字母转换大小写

转大写：变量名.toUpperCase( )

转小写：变量名：toLowerCase( )

1650120968454

2.字符串转成数组

语法：变量名.split(' ') 按照什么来分割你的字符串变成数组

1650120787363

<!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 msg='ASDFWGF'
        // console.log(msg.toUpperCase()) //转换成大写
        // console.log(msg.toLowerCase()) //转换成小写
        // let str='abcfwe'
        // console.log(str.split(''))
        let str2='a-b-c-d-e-f-g'
        console.log(str2.split('-'))

         // 我们在实际开发过程中，有很多需求要针对字符串做处理
      // js 帮我们封装了很多大量和实用 字符串方法
      // 先介绍一些

      // 转大写 转小写。
      // let msg = 'HELLODFDFDFDFDFD';

      // 广告 msg 大写
      // msg="HELLO";// 搞定  楼下大妈也会！！！  low 低级 不堪入目
      // console.log(msg.toUpperCase());

      // 转小写
      // console.log(msg.toLowerCase()); //转成小写

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

      // console.dir(str);

      /* 
      1 转大写  toUpperCase()

      2 转小写 toLowerCase()

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

七、补充数组方法

1650121327913

1650121350764

<!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-数组方法.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      // 数组 补充 常用
      //
      // const arr = ['a', 'b', 'c', 'd'];

      // console.log(arr.join('')); // abcd 数组转字符串
      // console.log(arr.join('-')); // a-b-c-d 数组转字符串

      // 连接  数组和数组之间连接
      // const arr1 = ['1', '2', '3'];
      // const arr2 = ['a', 'b', 'c'];
      // 将两个数组合并成一个数组
      // console.log(arr1.concat(arr2));

      //字符串也有一个 concat 也是表示合并
      const str1 = '123';
      const str2 = 'abc';
      // console.log(str1.concat(str2));// 很少用  有什么用？ 当你的键盘 + 键坏  使用它 
      console.log(str1 + str2); // 更加简单好理解
    </script>
  </body>
</html>

思维导图-jsAPI-第六天第七天