DOM-事件基础

一、事件

1.事件监听

什么是事件？

事件是在编程时系统内发生的动作或者发生的事情

比如用户在网页上单击的一个按钮
什么是事件监听？

就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为注册事件
语法

事件监听三要素

事件源：哪个dom元素被事件触发了，要获取dom元素

事件：用什么方式触发，比如鼠标单击click，鼠标经过 mouseover 等

事件调用的函数：要做什么事

 <title>事件初体验</title>
  </head>
  <body>
    <button class="btn1">开始抽奖</button><br />
    <button class="btn2">抽奖结束</button><br />
  </body>
  <script>
     
      // 获取button 对象-事件源
      let btn1 = document.querySelector('.btn1') //类选择器

      // 注册事件
      //btn1.addEventListener（事件类型，要处理的函数）
      // 事件类型  click 鼠标单击  mouseover s鼠标移入到什么区域内
     btn1.addEventListener('click',function () {
       console.log('开始抽奖');
     })
     
     let btn2 = document.querySelector('.btn2') 
     btn2.addEventListener('click',function () {
       console.log('抽奖结束');
     })
     
   </script>
  </body>

注意：事件类型要用引号；函数是“点击” 之后再去执行，每次“点击” 都会执行一次

关闭div事件小案例

<title>关闭div事件</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div ></div>
  <script>
    // 获取div dom元素
    let div = document.querySelector('div')

    // 注册事件
    div.addEventListener('click',function(){
     div.style.display = 'none'
    })
  </script>
</body>

事件

2.事件类型

鼠标事件（鼠标触发）	焦点事件（表单获得光标）	键盘事件（键盘触发）	光标事件（表单输入触发）
click（鼠标点击）	focus（获得焦点）	keydown (键盘按下触发)	input （用户输入框触发）
mouseenter（鼠标经过）	blur（失去焦点）	keyup （键盘抬起触发）
mouseleave（鼠标离开）

小米搜索框

<!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>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      ul {
        list-style: none;
        display: none;
      }

      .mi {
        position: relative;
        width: 223px;
        margin: 100px auto;
      }

      .mi input {
        width: 223px;
        height: 48px;
        padding: 0 10px;
        font-size: 14px;
        line-height: 48px;
        border: 1px solid #e0e0e0;
        outline: none;
      }

      .mi .search {
        border: 1px solid #ff6700;
      }

      .result-list {
        position: absolute;
        left: 0;
        top: 48px;
        width: 223px;
        border: 1px solid #ff6700;
        border-top: 0;
        background: #fff;
        /* display: none; */
      }

      .result-list a {
        display: block;
        padding: 6px 15px;
        font-size: 12px;
        color: #424242;
        text-decoration: none;
      }

      .result-list a:hover {
        background-color: #eee;
      }
    </style>
  </head>

  <body>
    <div class="mi">
      <input type="search" placeholder="小米笔记本" />
      <ul class="result-list">
        <li><a href="#">全部商品</a></li>
        <li><a href="#">小米11</a></li>
        <li><a href="#">小米10S</a></li>
        <li><a href="#">小米笔记本</a></li>
        <li><a href="#">小米手机</a></li>
        <li><a href="#">黑鲨4</a></li>
        <li><a href="#">空调</a></li>
      </ul>
    </div>

    <script>
     /* 需求：当表单得到焦点，显示下拉菜单，失去焦点隐藏下来菜单
       */
      // 获取input表单 dom元素
      let input = document.querySelector('input')
      //  console.log(input);
      // 获得ul dom元素
      let ul = document.querySelector('ul')
      // console.log(ul);
      // 事件监听input 表单获得焦点 
     input.addEventListener('focus',function () {
      // console.log('获得焦点');
      // ul 显示
      ul.style.display = 'block'
      }) 
      //  表单失去焦点 
      input.addEventListener('blur',function () {
      // console.log('失去焦点');
      // ul 隐藏
       ul.style.display = 'none'
      })
    </script>
  </body>
</html>

微博输入案例

<!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>微博输入案例</title>
    <link rel="stylesheet" href="../day2/发布微博案例/css/weibo.css" />
  </head>

  <body>
    <div class="w">
      <div class="controls">
        <img src="../day2/发布微博案例/images/tip.png" alt="" /><br />
        <textarea
          placeholder="说点什么吧..."
          id="area"
          cols="30"
          rows="10"
          maxlength="200"
        ></textarea>
        <div>
          <span class="useCount">0</span>
          <span>/</span>
          <span>200</span>
          <button id="send">发布</button>
        </div>
      </div>
      <div class="contentList">
        <ul></ul>
      </div>
    </div>
    <script>
      /* 需求：用户输入文字，可以计算用户输入的字数
              思路：要绑定文本域的事件
                    统计文字个数，字符串有数组的长度length */
      // 获取文本域dom元素
      let textarea = document.querySelector('textarea')
      // console.log(textarea);
      // 获取o dom元素
      let useCount = document.querySelector('.useCount')
      // console.log(useCount);
      // 事件监听文本域内容长度等于o的值
      textarea.addEventListener('input',function () {
        // console.log('文字有显示');
         useCount.innerHTML = textarea.value.length
         
      })
    </script>
  </body>
</html>

全选文本框-点击全选按钮，所有的复选框按钮都勾上

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>全选商品-优化</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      table {
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #c0c0c0;
        width: 500px;
        margin: 100px auto;
        text-align: center;
      }

      th {
        background-color: #09c;
        font: bold 16px "微软雅黑";
        color: #fff;
        height: 24px;
      }

      td {
        border: 1px solid #d0d0d0;
        color: #404060;
        padding: 10px;
      }

      .allCheck {
        width: 80px;
      }
    </style>
  </head>

  <body>
    <table>
      <tr>
        <th class="allCheck">
          <input type="checkbox" name="" id="checkAll" />
          <span class="all">全选</span>
        </th>
        <th>商品</th>
        <th>商家</th>
        <th>价格</th>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="check" class="ck select" />
        </td>
        <td>小米手机</td>
        <td>小米</td>
        <td>￥1999</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="check" class="ck" />
        </td>
        <td>小米净水器</td>
        <td>小米</td>
        <td>￥4999</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="check" class="ck" />
        </td>
        <td>小米电视</td>
        <td>小米</td>
        <td>￥5999</td>
      </tr>
    </table>
    <script>
      /* 需求：用户点击全选，则下面复选框全部选择
         
      1 获取 全选标签 绑定点击事件
        checkAll

      2 点击事件触发后 获取 复选框的选中属性  checkAll.checked

      3 把全选按钮的选中状态 设置到每一个 其他复选框中 

      4 数组和循环思想  解决重复工作的
        
       */

      // 获取全选按钮的 dom元素
      let checkAll = document.querySelector("#checkAll");
      // 获取符合选择器要求的数组
      let checkboxList = document.querySelectorAll(".ck");
      console.log(checkboxList )

      // 事件监听
      checkAll.addEventListener("click", function () {
        for (let index = 0; index < checkboxList.length; index++) {
          checkboxList[index].checked = checkAll.checked;
        }
      });
    </script>
  </body>
</html>

全选文本框-点击复选框控制全选框

 <script>
    /* 
    1 获取全选按钮和 一组 商品复选按钮
    2 给全选按钮绑定点击事件
    3 给一组商品 绑定点击事件 
     */

    let checkAll = document.querySelector('#checkAll');

    let checkboxList = document.querySelectorAll('.ck');

    // 商品全选点击 功能
    checkAll.addEventListener('click', function () {
      for (let index = 0; index < checkboxList.length; index++) {
        checkboxList[index].checked = checkAll.checked;
      }
    });

    // 一组商品的 点击功能
    // 给每一个商品绑定点击事件
    for (let index = 0; index < checkboxList.length; index++) {
      checkboxList[index].addEventListener('click', function () {
        // 判断是否达到了全选 条件
        let checked = isAllChecked();
        // 设置全选按钮即可
        checkAll.checked = checked;
      });
    }

    // 函数来判断
    function isAllChecked() {
      // 1 存放选中的商品的数量
      let checkedNum = 0;
      // 2 商品数组做循环
      for (let index = 0; index < checkboxList.length; index++) {
        // 3  判断每一商品的选中状态
        if (checkboxList[index].checked) {
          checkedNum++;
        }
      }
      // 4 循环结束了 判断 选中商品的数量和 商品总数量之间的关系
      if (checkedNum === checkboxList.length) {
        // console.log('全选');
        return true;
      } else {
        // console.log('不全选');
        return false;
      }
    }
  </script>

3.拓展知识

不同方式绑定点击事件

addEventListener 对一个事件类型绑定多个处理函数

on+事件对一个事件类型只能绑定一个处理函数

数组和伪数组

真正的数组，简单判断，有一个方法filter

通过document.querySelectorAll 获取到的数组，就是伪数组，可以使用for循环，但是数组的一些方法，伪数组不支付，比如说（map，some，every，filter）

二、高阶函数

一个函数a 可以把另外一个函数 b当成参数来接收处理，或者返回另外的一个新函数c。函数a就是高阶函数

1.函数表达式

函数表达式和普通函数本质是一样的，函数表达式必须先声明再调用

换句话说：函数也是数据，把函数赋值给变量

2.回调函数

函数A作为参数传给函数B时，函数A就是回调函数

回调函数本质还是函数，只不过是把它作为参数使用。使用匿名函数作为回调函数最常见

三、环境对象

1.this

环境对象指的是函数内部特殊的变量this，它代表着当前函数运行的环境

谁调用，this就是谁

使用全局变量和函数，都属于window对象的属性。

window是 js提供的大大的全局变量，在它身上有很多方法或者属性。比如window.console.log(123)；window.alert(123)

只不过window比较特殊，可以省略不写window这个关键字，就可以直接使用它的属性和方法

四、编程思想

1.排他思想

概念：当前元素为A状态，其他元素为B状态

使用：1.干掉所有人（使用for循环）

2.复合他自己（通过this或者下标找到自己或者对应的元素）

<!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>
    <style>
      ul {
        list-style: none;
        /* width: 100px;
      height: 100px;
      background-color: aqua;
      display: flex; */
      }
    </style>
  </head>
  <body>
    <ul>
      <li>动画片</li>
      <li>恐怖片</li>
      <li>战争片</li>
      <li class="record">记录片</li>
      <li>爱情片</li>
    </ul>
    <script>
      // 获取li dom元素
      let lis = document.querySelectorAll("li");
      // console.log(lis);
      // 再对所有的li标签，开始绑定点击事件
      for (let index = 0; index < lis.length; index++) {
        lis[index].addEventListener("click", function () {
          for (let i = 0; i < lis.length; i++) {
            // 对每个li标签样式设置为白色
            lis[i].style.backgroundColor = "white";
          }
          // 最后再单独设置被点击的li标签  变成红色
          this.style.backgroundColor = 'red'
        });
        
      }
    </script>
  </body>
</html>

2.Tab栏切换案例

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }

      ul {
        list-style: none;
      }

      .wrapper {
        width: 1000px;
        height: 475px;
        margin: 0 auto;
        margin-top: 100px;
      }

      .tab {
        border: 1px solid #ddd;
        border-bottom: 0;
        height: 36px;
        width: 320px;
      }

      .tab li {
        position: relative;
        float: left;
        width: 80px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        cursor: pointer;
        border-top: 4px solid #fff;
      }

      .tab span {
        position: absolute;
        right: 0;
        top: 10px;
        background: #ddd;
        width: 1px;
        height: 14px;
        overflow: hidden;
      }

      .products {
        width: 1002px;
        border: 1px solid #ddd;
        height: 476px;
      }

      .products .main {
        float: left;
        /* 隐藏 */
        display: none; 
      }

      .products .main.active {
        /* 显示 */
        display: block;
      }

      .tab li.active {
        border-color: red;
        border-bottom: 0;
      }
    </style>
  </head>

  <body>
    <div class="wrapper">
      <ul class="tab">
        <li class="tab-item active">国际大牌<span>◆</span></li>
        <li class="tab-item">国妆名牌<span>◆</span></li>
        <li class="tab-item">清洁用品<span>◆</span></li>
        <li class="tab-item">男士精品</li>
      </ul>
      <div class="products">
        <div class="main active">
          <a href="###"><img src="imgs/guojidapai.jpg" alt="" /></a>
        </div>
        <div class="main">
          <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt="" /></a>
        </div>
        <div class="main">
          <a href="###"><img src="imgs/qingjieyongpin.jpg" alt="" /></a>
        </div>
        <div class="main">
          <a href="###"><img src="imgs/nanshijingpin.jpg" alt="" /></a>
        </div>
      </div>
    </div>

    <script>
    /* 
      1 给标题标签 给他们绑定点击事件
      2 事件触发 开始使用排他思想
        1 获取所有的要设置标题样式的标签  遍历他们，移除掉 上边框 红色效果
        2 通过 this  给自己单独添加上 上边框红色的效果 

        3 获取到所有的main标签（决定图片显示）  遍历他们 移除掉 一个class active
        4 再获取到要设置的 main标签 让它 添加上一个class active

      
       */
      // 获取所有li标签 dom元素
      let lis = document.querySelectorAll("li");
      // console.log(lis);
      // 获取所有图片的 dom元素
      let mainList = document.querySelectorAll(".main");
      // 给每个标题标签 遍历注册事件
      for (let index = 0; index < lis.length; index++) {
        // console.log(lis);
        lis[index].addEventListener("click", function () {
          // 让每一个标题移除 样式类
          for (let j = 0; j < lis.length; j++) {
            lis[j].classList.remove("active");
          }
          // 单独对我自己 添加一个类
          this.classList.add("active");
          // 处理图片显示部分
          // 先遍历所有的main标签，让他们移除掉active
          for (let j = 0; j < mainList.length; j++) {
            mainList[j].classList.remove("active");
          }
          // 设置给对应的标签，添加上active
          // 单独对我自己添加一个类
          //  mainList[index] 就是和被点击li标签的下标相等
          mainList[index].classList.add("active");
        });
      }
    </script>
  </body>
</html>

节点操作

一、DOM节点

1.节点定义

Dom 树里每一个内容都称之为节点

2.节点类型

元素节点 ：所有的标签，比如body，div。html是根节点
属性节点：所有的属性，比如href
文本节点：所有的文本
其他

3.查找节点

3.1 父节点查找

子元素.parentNode

注意：返回最近一级的父节点，找不到就返回null

<!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>
    <div class="erweima" >
      <img class="guanbi" src="./images/279adfdd8c281be0aa1b6a8b8f217eb.png" alt="">
      <img src="./images/49294b3bd95494c25f971c60fd851ad.png" alt="" />
    </div>
    <script>
      let guanbi = document.querySelector(".guanbi");
      // console.log(guanbi);
      guanbi.addEventListener("click", function () {
        // console.log('关闭');
        guanbi.parentNode.style.display = "none";
      });
    </script>
  </body>
</html>

3.2 子节点查找

childNodes ：获得所有的子节点，包括文本节点(空格，换行)，注释节点

children：仅获得所有元素节点，返回的一个伪数组

父元素.children

3.3 兄弟节点查找

上一个兄弟 previousElementSibling 属性

下一个兄弟 nextElementSibling 属性

4.增加节点

4.1创建元素节点

即创造出一个新的网页元素，再添加到网页中，一般先创建节点。然后再插入节点

4.2创建文本节点

document.createtextNode

4.3追加节点

append可以插入多个元素
appendChild 把目标元素放到父元素的最后一个位置只能插入一个元素

另外：appendchild还有剪切功能

appendchild（元素），如果该元素是已经存在网页中，appendchild作用是剪切

appendchild（元素），如果该元素新创建，那appendchild作用是插入

insertBefore 设置目标元素放在父元素指定的一个子元素的前面

insertBefore 和 appendchild功能是类似的

如果该元素是已经存在网页中，那么insertBefore剪切

如果该元素新创建，那insertBefore作用是插入

4.4克隆节点

在相同的布局下，可以直接复制一个原有的节点，把复制的节点放入到指定的元素内部

应用场景

注意点：

cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
若为true，则代表克隆时会包含后代节点一起克隆--深拷贝
若为false，则代表克隆时不包含后代节点--浅拷贝
默认为false

 <title>克隆节点</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: aqua;
    }
  </style>
</head>
<body>
  <div class="box">
    <button>按钮</button>
  </div>
  <script>
    // 获取div dom对象
    let box = document.querySelector('.box')
    // console.log(box);
    // 开始克隆
    // let newBox = box.cloneNode(true) //深拷贝。可以把后代一起拷贝
    let newBox = box.cloneNode() //浅拷贝，不会把后代一起拷贝
    // 追加到body身上
    document.body.appendChild(newBox)
  </script>

5.删除节点

在js 原生dom操作中，要删除元素，必须是通过父元素删除。

注意点

如不存在父子关系则删除不成功
删除节点和隐藏节点（display:none）有区别的：隐藏节点还是存在的，但是删除，则从html中删除节点

   <title>删除节点</title>
  </head>
  <body>
    <button>指定删除ul中的某一个li</button>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <script>
      // 获取button dom对象
      let button = document.querySelector('button')
      // 获取ul dom对象
      let ul = document.querySelector('ul')
      // 给button注册事件监听
      button.addEventListener('click',function () {
        // 指定删除ul中的某一个 li
        // 获取第一个li 
        let li = document.querySelector('li:nth-child(1)')
        ul.removeChild(li)
        // 删除自己
        ul.remove()
      })
    </script>

二、时间对象

时间对象：用来表示时间的对象

作用：可以得到当前的系统的时间

1.实例化

在代码中发现有new关键字时，一般将这个操作称为实例化

创建一个时间对象并获取时间

获得当前时间

let date = new Date（）

获得指定时间

let date = new Date（"1990-10-1"）

2.时间对象方法

3.时间戳

3.1介绍

返回当前时间至1970年1月1日0时0分0秒之间毫秒

3.2获取时间戳的方法

使用getTime方式
简写+new Date ()

注意点：只有日期对象，可以使用 + 将整个对象转成时间戳
使用Date.now（）

3.3 作用

来快速生成一个不会重复的数字，和随机数一起搭配用

三、重绘和回流（重排）

重绘：指的是重新修改字体颜色，或者背景颜色。性能损坏比较低

回流（重排）：指的是重新修改字体大小，位置（边框，内外边距，宽高），定位+浮动

尽量减少回流，这样才能提高性能

回流（重排）一定会影响到重绘，重绘不一定能影响回流（重排）

最理想的情况不要出现重排重绘

正则表达式

一、介绍

1.概念：什么是正则表达式

正则表达式是用于匹配字符串中字符组合的模式。在js中，正则表达式也是对象

2.作用

通常用来查找，替换那些符合正则表达式的文本

3.使用场景

验证表单：用户名表单只能输入英文字母，数字，或者下划线，昵称输入框中可以输入中文（匹配）
过滤掉页面内容中的一些敏感词（替换）
从字符串中获取我们想要的特定部分（提取）等

二、语法

1.定义正则表达式

注意点：/ / 是正则表达式的字面量

2.检测查找是否匹配

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

注意：如果正则表达式与指定的字符串匹配，那就返回true ，否则false

    <script>
      const str =
        "金钱对你意味着什么？你有梦想吗？等等等等。一下子都让我陷入了沉思。真的需要好好的想想，然后写下来";
      // 定义规则
      const reg = /梦想/;
      // 规则和字符匹配  test
      console.log(reg.test(str));
    </script>

三、元字符

1.介绍

普通字符

大多数的字符仅能够描述它们本身，这些字符就被称作普通字符，例如所有的字母和数字

也就是说普通字符只能够匹配字符串中与它们相同的字符
元字符

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

2.分类

2.1 边界符

表示位置，开头和结尾，必须是用什么开头，用什么结尾

如果 ^ 和 $ 在一起，表示必须是精准匹配

 <body>
    <script>
      const str = "123金来";
      // const reg = /^梦想$/;
      // console.log(reg.test(str)); //false。要找"梦" 开头。“想”为结尾
      // const reg1 = /^金来$/; //只能是金来
      // const reg1 = /^金来/ //金开头，后面的都不管
      const reg1 = /123金来$/; //来做结尾，开头都不管
      console.log(reg1.test(str));
    </script>
  </body>

2.2 量词

量词	说明
*	表示放在它前面那一个字符，可以出现0次或者多次
+	表示放在它前面那一个字符，可以出现1次或者多次
？	表示放在它前面那一个字符，可以出现0次或者1次
{n}	表示放在它前面那一个字符，可以出现n次
{ n，}	表示放在它前面那一个字符，最少出现n次
{ n，m }	表示放在它前面那一个字符，最少出现n次，最多出现m次

<body>
  <script>
    // console.log(/^路飞$/.test('路飞'));
    // * 表示放在它前面的那一个字符，可以0次或者多次
    // console.log(/^路*$/.test(''))     //true 
    // console.log(/^路*$/.test('路'))   //true 
    // console.log(/^路*$/.test('路路'))  //true 
    // console.log(/^路*$/.test('路路路'))  //true 

    // + 表示放在它前面的那一个字符，可以1次或者多次
    // console.log(/^路+$/.test(''))     //false
    // console.log(/^路+$/.test('路'))   //true 
    // console.log(/^路+$/.test('路路'))  //true 
    // console.log(/^路+$/.test('路路路'))  //true 

    // ? 表示放在它前面的那一个字符，可以0次或者1次
    // console.log(/^路?$/.test(''))     //true
    // console.log(/^路?$/.test('路'))   //true 
    // console.log(/^路?$/.test('路路'))  //false 
    // console.log(/^路?$/.test('路路路'))  //false 

    // {n}表示放在它前面的那一个字符，可以n次
    // console.log(/^路{2}$/.test(''))     //false
    // console.log(/^路{2}$/.test('路'))   //false
    // console.log(/^路{2}$/.test('路路'))  //true
    // console.log(/^路{2}$/.test('路路路')) //fasle

    // {n,}表示放在它前面的那一个字符，最少n次
    // console.log(/^路{2,}$/.test(''))     //false
    // console.log(/^路{2,}$/.test('路'))   //false
    // console.log(/^路{2,}$/.test('路路'))  //true
    // console.log(/^路{2,}$/.test('路路路')) //true

    // {n,m}表示放在它前面的那一个字符，最少n次,最多m次
    console.log(/^路{0,3}$/.test(''))     //true
    console.log(/^路{0,3}$/.test('路'))   //true
    console.log(/^路{0,3}$/.test('路路'))  //true
    console.log(/^路{0,3}$/.test('路路路')) //true
  </script>
</body>

2.3 字符类

1、字符类 . 表示除了（换行符\n 之外）任意字符都是true

// 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('路 飞')); // true

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

 // // \d 表示0-9之间任一数字是true
      // console.log(/\d/.test('路大飞')); // false
      // console.log(/\d/.test('路1飞')); // true
      // console.log(/\d/.test('2路飞')); //true

      // \D 表示除了所有0-9以外的字符都是true，把引号里面作为一个整体来看
      // console.log(/\D/.test('路大飞')); // true
      // console.log(/\D/.test('路1飞')); //  true
      // console.log(/\D/.test('2路飞')); // true
      // console.log(/\D/.test("123"));// false
      // console.log(/\D/.test("12a3")); //true

      // \w 字母，数字，下划线都是true
      // 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 除了字母，数字，下划线之外的字符都是true
      // console.log(/\W/.test("123")); // false
      // console.log(/\W/.test("1%23")); //true

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

      // \S 除了空格之外的字符都是true
      console.log(/\S/.test("123")); // true
      console.log(/\S/.test(" ")); // false
      console.log(/\S/.test("   ")); //false

3、字符类 [ ] 匹配字符集合

后面的字符串只要包含a b中任意的一个字符，都返回true
[] 里面加上-连字符，表示一个范围

[a-z]=>表示a-z任意的一个小写字母

[0-9] =>表示0-9任意的一个数字

[A-Z]=>表示A-Z任意的一个大写字母

[0-9a-zA-Z]=>表示数字大小写字母

```js
  // [ab]=>可以匹配 a 或者 b 都是true
  // console.log(/[ab]/.test('a')); //true
  // console.log(/[ab]/.test('b')); //true
  // console.log(/[abc]/.test('c')); //true

  // [a-z]表示a-z 任意的一个字母 都是true
  // console.log(/[a-z]/.test('c'));// true
  // console.log(/[a-z]/.test('d'));// true
  // console.log(/[a-z]/.test('123'));// false
  // console.log(/[a-d]/.test('a'));// true
  // console.log(/[a-d]/.test('g'));// false

  // [0-9]表示0-9任意的一个数字 都是true
  // console.log(/[0-9]/.test("1")); // true
  // console.log(/[0-9]/.test("2")); // true
  // console.log(/[0-9]/.test("10")); // true

  // [A-Z]表示A-Z 任意的一个字母都是true
  // console.log(/[A-Z]/.test("a"));// false
  // console.log(/[A-Z]/.test("B"));// true

  // [0-9a-zA-Z] 同时满足0-9 a-z A-Z 都是true
  console.log(/[0-9a-zA-Z]/.test('1'));// true
  console.log(/[0-9a-zA-Z]/.test('a'));// true
  console.log(/[0-9a-zA-Z]/.test('A'));// true
  console.log(/[0-9a-zA-Z]/.test(' '));// false
```

DOM事件基础&节点操作&正则表达式