Web APIs（八）

Nobita
180 阅读7分钟

web APIS

一、案例-更换皮肤

1.标签关键代码

<input type="color" />

2.js关键代码

<script>
   const colorInput = document.querySelector("input");
      colorInput.addEventListener("click", function () {
        console.log(this.value);
        document.body.style.backgroundColor = this.value;
      });
</script>

二、本地储存

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

2.本地储存特性

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

3.localStorage

①生命周期永久生效，除非手动删除 否则关闭页面也会存在 ②可以多窗口（页面）共享（同一浏览器可以共享） ③以键值对的形式存储使用

4.localStorage语法

①储存数据

localStotage.setItem(key,value)

②获取数据

localStorage.getItem(key)

③删除数据

localStorage.removeItem(key)

④清除数据

localStorage.clear()

<!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>
    <input type="color" />
    <script>
      // 页面刷新   代码重新执行
      document.body.style.backgroundColor = localStorage.getItem("bgColor");

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

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

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

②JSON.stringify(复杂数据类型)：将复杂数据转换成JSON字符串 存储 本地存储中

③JSON.parse(JSON字符串)：将JSON字符串转换成对象 取出 时候使用

 <script>
      const strArr = localStorage.getItem("arr");
      //   let arr = [];
      if (strArr) {
        arr = JSON.parse(strArr);
      } else {
        let arr = [];
      }
      let arr = [];
     
     ...
     
       // 给数组插入新的元素
        arr.push(data);
        const strArr = JSON.stringify(arr);
        localStorage.setItem("arr", strArr);
     
       // 执行数组删除元素
        arr.splice(index, 1);
        const strArr = JSON.stringify(arr);
        localStorage.setItem("arr", strArr);
 </script>

6.sessionStorage

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

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

三、自定义属性

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

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

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

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

getAttribute('属性名') // 获取自定义属性
setAttribute('属性名', '属性值') // 设置自定义属性
removeAttribute('属性名') // 删除自定义属性


// 获取 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") );

3.data-自定义属性

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

②语法

h5建议 data- xxx
      <a  data-abc="123" >  
      获取（a.dataset.abc）  设置（a.dataset.abc=456）;

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

四、高阶函数

1.把一个函数 看成是个普通数据，应用在 参数 或者返回值 技术

2.语法

      //  function f1(callback) {
      //    callback();
      //  }

      //  function f2() {
      //    console.log("我就是高阶函数");
      //  }

      //  f1(f2);// f2 当成是一个普通的参数来使用（形参来使用）

五、事件取消与绑定

1.绑定事件

元素.addEventListener(事件类型，函数)

2.取消事件

元素.removeEventListener(事件类型，函数)

3.总结

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

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

③无法取消 addEventListener 事件 对应的匿名函数

      const btn = document.querySelector("button");

      btn.addEventListener("click", function () {
        console.log("你好");
      });

      //  想要取消 这个 输出你好的行为
      btn.removeEventListener("click", function () {
        console.log("你好");
      });

六、事件流补充（目标阶段(补充)、冒泡阶段、捕获阶段）

<!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>16-事件流动.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      div {
        width: 300px;
        height: 300px;
        padding: 20px;
        overflow: hidden;
      }
      .a {
        background-color: red;
      }
      .b {
        background-color: salmon;
      }
      .c {
        background-color: seagreen;
      }
    </style>
  </head>
  <body>
    <div class="a">
      爷爷
      <div class="b">
        爸爸
        <div class="c">儿子</div>
      </div>
    </div>
    <script>
      /* 
      事件流动  3个阶段  
      1 最重要的冒泡阶段
      2 知道  捕获阶段 
        addEventListener 第三个参数  true|false 来进行切换
      3 目标阶段 了解一下 

       */
      const a = document.querySelector(".a");
      const b = document.querySelector(".b");
      const c = document.querySelector(".c");
      a.addEventListener("click", function () {
        console.log("爷爷");
      });
      b.addEventListener("click", function () {
        // 这个c 是最底层的元素
        console.log("爸爸");
      });
      c.addEventListener("click", function () {
        // 这个c 是最底层的元素
        console.log("儿子 目标阶段");
      });
    </script>
  </body>
</html>

七、字符串方法

1.大写转小写

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

2.小写转大写

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

3.字符串转数组

      // 字符串和数组很相似
      // 能不能把字符串 转成数组？
      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);

4.总结

      1 转大写  toUpperCase()

      2 转小写 toLowerCase()

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

八、数组方法

1.数组转字符串

      const arr = ["a", "b", "c", "d"];
      // console.log(arr.join("")); // join 数组转字符串
      // console.log(arr.join("-")); // a-b-c-d 数组转字符串

2.数组之间连接

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

3.字符串之间连接

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

九、正则表达式

1.正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象。通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式。

2.语法

let 变量名 = /表达式/
let reg = /前段/

3.判断是否有符合规则的字符串

test() 方法 用来查看正则表达式与指定的字符串是否匹配

regObj.test(被检测的字符串)

如：
    <script>
      /* 
      正则的作用 寻找字符串  检测 这个字符串这有没有我想要的文字
       */
      //   const str = `金钱对你意味着什么？你有梦想吗？等等等等。一下子都让我陷入了沉思。真的需要好好的想想，然后写下来`;

      // 判断一下这个字符串中有没有 梦想 两个字

      // 定义规则
      //   const reg = /刘同学/;

      // 规则和字符串 匹配  test
      //   console.log(reg.test(str)); // 有 返回true 没有返回false

      const div = document.querySelector("div");
      const str = `你个傻嗨嗨，日日傻嗨嗨，食shi啊梁非凡`;
      const reg = /傻嗨嗨/ && /非凡/;
      if (reg.test(str)) {
        div.innerText = `你个***，日日***，食shi啊梁**`;
        alert("系统提醒：请注意言行举止，营造良好聊天环境");
      } else {
        div.innerText = str;
      }
    </script>

4.检索（查找）符合规则的字符串： exec() 方法 在一个指定字符串中执行一个搜索匹配，找到返回数组，否则为 null

5.元字符

（1）普通字符:大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。 也就是说普通字符只能够匹配字符串中与它们相同的字符。

（2）元字符：是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。

例如：普通字符的话 abcdefghijklm…..但是换成元字符写法： [a-z]

（3）边界符：

① ^ 表示匹配行首文本（以谁开头）

② $ 表示匹配行尾文本（以谁结束）

    <script>
      const str = `金来123`;
      // const reg = /梦想/; // 只要字符串中 包含有 梦想  返回true

      // 你检测的字符串 必须要以 “梦” 开头  以 “想” 结尾
      //
      // const reg = /^金来$/; // 只能匹配 "金来"
      const reg = /^金来/; // `金来123`;
      // const reg = /金来$/; //  `1234323金来`;
      // console.log(reg.test(str));

      /* 
      边界符 
      开头 ^ 
      结尾 $ 
       */
    </script>

（4）量词：

① * 重复零次或者更多次

// const reg=/路飞/;    

// console.log(/^路*$/.test('')); // true
// console.log(/^路*$/.test('路')); // true
// console.log(/^路*$/.test('路路')); // true
// console.log(/^路*$/.test('路路路')); // true

② + 重复一次或者更多次

// const reg=/路飞/;   

// console.log(/^路+$/.test(''));
// console.log(/^路+$/.test('路'));
// console.log(/^路+$/.test('路路'));
// console.log(/^路+$/.test('路路路'));

③ ？ 重复零次或者一次

// const reg=/路飞/;    

// console.log(/^路?$/.test(''));// true
// console.log(/^路?$/.test('路')); // true
// console.log(/^路?$/.test('路路')); // false
// console.log(/^路?$/.test('路路路')); // false

④ {n} 重复n次

// const reg=/路飞/;    

// console.log(/^路{2}$/.test('')); // false
// console.log(/^路{2}$/.test('路')); // false
// console.log(/^路{2}$/.test('路路')); // true
// console.log(/^路{2}$/.test('路路路')); // false

⑤ {n,} 重复n次或者更多次

// const reg=/路飞/;    

// console.log(/^路{2,}$/.test('')); // true
// console.log(/^路{2,}$/.test('路')); // true
// console.log(/^路{2,}$/.test('路路'));// true
// console.log(/^路{2,}$/.test('路路路')); // true

⑥ {n,m} 重复n到m次

// const reg=/路飞/;    

// console.log(/^路{0,2}$/.test("")); // true
// console.log(/^路{0,2}$/.test("路")); // true
// console.log(/^路{0,2}$/.test("路路")); // true
// console.log(/^路{0,2}$/.test("路路路")); // false

（5）字符类

①匹配字符集合[]

后面的字符串只要包含[ ] 中任意一个字符，都返回 true 。

比如：
[a-z]  表示 a 到 z 26个英文字母都可以
[a-zA-Z]   表示大小写都可以
[0-9]  表示 0~9 的数字都可以

②[ ] 里面加上 - 连字符 :使用连字符 - 表示一个范围

③[ ] 里面加上 ^ 取反符号 ：匹配除了小写字母以外的字符

④ . 匹配除换行符之外的任何单个字符

⑤预定义：指的是某些常见模式的简写方式

1650133553557.png

    <script>
      //  . 表示除了（换行符之外）任意字符
      // console.log(/路/.test('飞')); // false
      // console.log(/./.test('飞')); // true
      // console.log(/路.飞/.test('路大飞')); // true
      // console.log(/路.飞/.test('路小飞')); // true
      // console.log(/路.飞/.test('路中飞')); // true
      // console.log(/路.飞/.test('路不飞')); // true
      // console.log(/路.飞/.test('路飞')); // false
      // console.log(/路.飞/.test('路 飞')); // false

      // \d 表示数字
      // console.log(/\d/.test("路飞"));// false

      // console.log(/\d/.test("1路飞"));// true
      // console.log(/\d/.test("路3飞"));// true

      // \D 不是数字之外的任意1个字符
      // console.log(/\D/.test("123"));// false
      // console.log(/\D/.test("12a3"));// true
      // console.log(/\D/.test("12a3"));// true

      // \w  字母、数字、下划线
      // console.log(/\w/.test("123"));//  true
      // console.log(/\w/.test("%%"));//  false
      // console.log(/\w/.test("%1%"));//  true
      // console.log(/\w/.test("%a%"));//  true
      // console.log(/\w/.test("%_%"));//  true

      // \W  除去了 字母 、数字、下划线 之外字符
      // console.log(/\W/.test("123"));// false
      // console.log(/\W/.test("1%23"));// true

      // \s  匹配空格
      // console.log(/\s/.test("123"));// false
      // console.log(/\s/.test("1 23"));// true

      // \S 除了空格之外的字符
      // console.log(/\S/.test('123'));// true
      // console.log(/\S/.test(' '));// false
      // console.log(/\S/.test('   '));// false
    </script>

（6）测试正则

<script>
      // 注册账号  填写用户名 规则 必须是字母，范围 3-8
      // console.log(/[a-zA-Z]/);// 一个字母
      // console.log(/[a-zA-Z]/.test("a"));// true
      // 3-8
      // {3,8} 修饰前面[]
      // console.log(/[a-zA-Z]{3,8}/.test("ab"));// false
      // console.log(/[a-zA-Z]{3,8}/.test("abc"));// true
      // console.log(/[a-zA-Z]{3,8}/.test("111222 abc 333444"));// true
      // 边界符
      // console.log(/^[a-zA-Z]{3,8}$/.test("111222 abc 333444"));// false
      // console.log(/^[a-zA-Z]{3,8}$/.test("abc"));// true

      // 手机号码 验证  知道手机号码的验证规则 不懂去百度
      // 规则 以数字1开头 第二位数字可以是 35789  其他9位数字 （11位数组）
      // console.log( /^1[35789]\d{9}$/.test("dd")  );// false
      // console.log( /^1[35789]\d{9}$/.test("12345678901")  );// false
      // console.log( /^1[35789]\d{9}$/.test("13345678901"));// false
      // console.log( /^1[35789]\d{9}$/.test("15345678901"));// false
      // console.log( /^1[35789]\d{9}$/.test("17345678901"));// false
      // console.log( /^1[35789]\d{9}$/.test("18345678901"));// false
      // console.log( /^1[35789]\d{9}$/.test("19345678901"));// false

      // 邮箱  yeah123@dsfdf.com
      //  邮箱名称  yeah123   可以是字母或者数字  最少要有一个 {1,} 或者 +
      // 分隔符  @
      // 字母或者数字
      // 匹配一个.   => \.
      // 规定 com  com

      // console.log(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+$/.test("yeah123@dsfdf"));// true
      // console.log(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+$/.test("@dsfdf"));// false
      // console.log(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+$/.test("sdfd@"));// false
      // console.log(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+$/.test("sdfd@3"));// true

      // console.log(/./.test('a'));
      // 就想要表示. 本身   加一个反斜杠
      // console.log(/\./.test('a'));// false
      // console.log(/\./.test('.'));// true
      // console.log(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.com$/.test('sdfd@3')); // false
      // console.log(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.com$/.test('sdfd@3.com')); // true

      // 感受 代码不多 贼难！
      //
      // console.log(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.c(om|n)$/.test('sdfd@3.com')); // true
      // console.log(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.c(om|n)$/.test('sdfd@3.cn')); // true
      // c om
      // c n
    </script>
avatar
文章
阅读
粉丝
相关推荐
Java 11中的新字符串APIs详解
509阅读
 · 
2点赞
尝试实现了国外大佬用Web做出来跨窗口渲染动画效果
55k阅读
 · 
792点赞
Day8 【工程视角】ESlint 再谈 CLI 与 APIS
1.2k阅读
 · 
1点赞
Web前端监控的方案
21k阅读
 · 
248点赞
Web版Photoshop来了，用到了哪些前端技术？
48k阅读
 · 
486点赞