- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

WEB APIs ( BOM )

卢衍飞发表于 2022/11/19 15:54:37 2022/11/19

【摘要】 WEB APIs ( BOM )BOM- 操作浏览器Window对象BOM(Browser Object Model ) 是浏览器对象模型。BOM(浏览器对象模型)定时器-延时函数JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout语法：setTimeout(回调函数,等待毫秒数)setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时...

WEB APIs ( BOM )

BOM- 操作浏览器

Window对象

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

BOM(浏览器对象模型)

定时器-延时函数

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

语法：setTimeout(回调函数,等待毫秒数)

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

清除延时函数：

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

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

需求：5秒钟之后，广告自动消失

分析：

①：设置延时函数

②：隐藏元素

<body>
    <img src="./images/ad.png" alt="">
    <script>
        let img = document.querySelector('img');
        setTimeout(function () {
            img.style.display = 'none';
        },5000)
    </script>
</body>

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

let clock = document.querySelector(.colck)
function myInterval(){
    let d = new Date();
    clock.innerText = d.toLocaleString();       //事件格式化为   YYYY/M/D  上午or下午 h:m:s
    setTimeout(myInterval,1000);             //递归函数，自己调用自己
                                             //（递归函数容易进入死递归，所以部分函数需要添加退出函数）
}
myInterval();

两种定时器对比：

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

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

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

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

JS执行机制

经典面试题

console.log(1111)
setTime(function(){
    console.log(2222)
},1000)
console.log(3333)

//输出结果：111133332222

console.log(1111)
setTime(function(){
    console.log(2222)
},0)
console.log(3333)

//输出结果：111133332222

JS 是单线程

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

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

同步和异步

同步前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。异步你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。

同步任务

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

异步任务

JS 的异步是通过回调函数实现的。

一般而言，异步任务有以下三种类型:

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

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

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

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

location对象

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

常用属性和方法：

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

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

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

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

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

<body>
    <script>
        console.log(location.href)  // 得到 url地址   可读写
        // 给的地址是字符串  可以利用js 的方式跳转页面
        location.href = 'http://www.luomoe.com';
    </script>
</body>

案例：5秒钟之后跳转的页面

需求：用户点击可以跳转，如果不点击，则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>
        span {
            color: red;
        }
    </style>
</head>

<body>
    <a href="https://www.luomoe.com/">支付成功，<span>5</span> 秒之后跳转首页</a>
    <script>

        let span = document.querySelector('span');
        let num = 5;
        let timer = setInterval(fn,1000);

        function fn() {
            num--;
            span.innerHTML = num;
            if (num === 0){

                location.href = 'https://www.luomoe.com/';
                clearInterval(timer);
            }
        }
    </script>
</body>

</html>

location.href：网页链接，对其赋值时，可以用于地址的跳转

location.search：得到符号？后面部分，可以用于数据传递

location.hash：得到符号 # 后面部分，地址路由的使用

console.log(location.hash)

 后期vue路由的铺垫，经常用于不刷新页面，显示不同页面，比如网易云音乐

location.reload：传入参数 true 时表示强制刷新

reload(true);   //刷新 本地缓存  F5
location.reload(true)//强制刷新 直接从服务器获取 CTRL + F5

navigator对象

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'
}
})()

histroy对象

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

<body>
    <button class="forward">前进</button>
    <button class="back">后退</button>
    <script>
        let qianjin = document.querySelector('.forward')
        let houtui = document.querySelector('.back')
        qianjin.addEventListener('click', function () {
            // history.forward()
            history.go(1)
        })
        houtui.addEventListener('click', function () {
            // history.back()
            history.go(-1)
        })
    </script>
</body>

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

本地存储

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

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

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

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

localStorage

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

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

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

存储数据：

localStorage.setItem(key, value)

获取数据：

localStorage.getItem(key)

删除数据：

localStorage.removeItem(key)

存储复杂数据类型存储

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

JSON.stringify(复杂数据类型)

设置的对象，复杂数据类型：

let OBJ = [
        {uname: '刘德华',age: 17,address: '黑马程序员'},
        {uname: '刘德华',age: 17,address: '黑马程序员'},
        {uname: '刘德华',age: 17,address: '黑马程序员'}
        ],

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

JSON.stringify(对象) //将对象转为 JSON格式的值

localStorge.setItem(obj,JSON.stringify(OBJ)) ;                //obj是key值，OBJ是要转换存储的对象
                                            //JSON.stringify(OBJ) 是value值

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

localStorge.getItem('obj') //是取出本地存储的JSON数据，obj是key值

JSON.parse( localStorge.getItem('obj') ) //是将取出的JSON数据转换为对象

let arr = JSON.parse(localStorge.getItem('obj'))  ;             ////obj是key值
                    //如果原先的存入的对象是数组，现在取出获得的数据经过转换之后得到的arr也是数组

案例

<!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>
        // 存储数据 localStorage.setItem('键', '值')
        // localStorage.setItem('uname', 'pink老师')
        // localStorage.setItem('age', 18)
        // 获取数据
        // localStorage.getItem('键')
        // console.log(localStorage.getItem('uname'))
        // 删除数据
        // localStorage.removeItem('uname')
        // 1. 存储复杂数据类型（引用数据类型）
        let obj = {
            uname: '刘德华',
            age: 17,
            address: '黑马程序员'
        }
        // console.log(JSON.stringify(obj))
        //（1） 复杂数据类型一定要转换为json字符串在进行存储 （因为本地存储只能存储字符串）
        localStorage.setItem('obj', JSON.stringify(obj))
        // AJAX
        // JSON 属性和值都是双引号进行包含
        // let obj = {
        //     "uname": "刘德华",
        //     "age": "17",
        //     "address": "黑马程序员"
        // }
        // （2） 取数据  可以使用 JSON.parse()  将json字符串转换为对象
        // console.log(typeof localStorage.getItem('obj'))    //字符串
        //  JSON.parse() 将json字符串转换为对象
        console.log(JSON.parse(localStorage.getItem('obj')));

        let object = {
            age: 18
        }

        // 本地存储只能存储字符串 所以我要转换  转换为JSON格式的字符串
        localStorage.setItem('key', JSON.stringify(object))
        // 获取的过来的值是字符串，不是对象了没有办法直接使用，因此我们首先吧字符串转换为对象
        // JSON.parse()
        console.log(JSON.parse(localStorage.getItem('key')))

    </script>
</body>

</html>

sessionStorage（了解）

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

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

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

4、用法跟localStorage 基本相同

本地存储学习信息案例

需求：改为本次存储版本的学习信息表

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

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

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

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

<!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>Document</title>
  <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>
      <!-- <tr>
        <td>1001</td>
        <td>欧阳霸天</td>
        <td>19</td>
        <td>男</td>

        <td>15000</td>
        <td>上海</td>
        <td>
          <a href="javascript:">删除</a>
        </td>
      </tr> -->
    </tbody>
  </table>
  <script>

    // 读取本地存储的数据  封装为函数 
    // 需求①：读取本地存储数据（封装函数）
    //   如果本地存储有数据，则返回 JSON.parse() 之后的对象
    //   如果本地存储没有数据，则默认写入三条数据，注意存储的利用JSON.stringify() 存 储JSON 格式的数据
    function getLocalData() {
      let data = localStorage.getItem('data')
      if (data) {
        //   如果本地存储有数据，则返回 JSON.parse() 之后的对象
        return JSON.parse(data)  //   {xxxxx}
      } 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))
      }
    }
    // 先调用一次
    getLocalData()
    // 获取父元素 tbody
    let tbody = document.querySelector('tbody')
    // 添加数据按钮 
    // 获取录入按钮
    let add = document.querySelector('.add')
    // 获取各个表单的元素
    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 render() {
      // 需求②：渲染模块
      // 先读取本地存储数据，然后渲染
      let arr = getLocalData()

      // 先干掉以前的数据  让tbody 里面原来的tr 都没有
      tbody.innerHTML = ''
      // 在渲染新的数据
      // 根据数据的条数来渲染增加 tr  
      for (let i = 0; i < arr.length; i++) {
        // 1.创建tr  
        let tr = document.createElement('tr')
        // 2.tr 里面放内容
        tr.innerHTML = `
        <td>${arr[i].stuId}</td>
        <td>${arr[i].uname}</td>
        <td>${arr[i].age}</td>
        <td>${arr[i].gender}</td>
        <td>${arr[i].salary}</td>
        <td>${arr[i].city}</td>
        <td>
          <a href="javascript:"  data-id="${i}">删除</a>
        </td>
        `
        // 3.把tr追加给 tobdy  父元素.appendChild(子元素)
        tbody.appendChild(tr)

      }
    }
    // 页面加载就调用函数
    render()

    add.addEventListener('click', function () {
      // 需求③：添加模块
      // 注意，先取的最新的本地存储数据，然后追加
      let arr = getLocalData()
      // 新增了数据，要把新数据存储到本地存储别，忘记转换

      // alert(11)
      // 获得表单里面的值   之后追加给 数组 arr  用 push方法
      arr.push({
        // 得到数组最后一条数据的学号 1003    + 1
        stuId: arr[arr.length - 1].stuId + 1,
        uname: uname.value,
        age: age.value,
        gender: gender.value,
        salary: salary.value,
        city: city.value
      })
      // console.log(arr)

      // 存储到仓库里面 
      localStorage.setItem('data', JSON.stringify(arr))

      // 重新渲染我们的函数
      render()
      // 复原所有的表单数据
      uname.value = age.value = salary.value = ''
      gender.value = '男'
      city.value = '北京'
    })

    // 删除操作， 删除的也是数组里面的数据 ， 但是我们用事件委托
    tbody.addEventListener('click', function (e) {
      // 读取本地存储里面的数据
      let arr = getLocalData()
      // alert(11)
      // 我们只能点击了链接 a ，才会执行删除操作
      // 那我们怎么知道你点击了a呢？
      // 俺们只能点击了链接才能做删除操作
      // console.dir(e.target.tagName)
      if (e.target.tagName === 'A') {
        // alert('你点击了链接')
        // 删除操作  删除 数组里面的数据  arr.splice(从哪里开始删，1)
        // 我要得到a的id 需要
        // console.log(e.target.id)
        //console.log(e.target.dataset.id)

        //不允许删除第一条数据
        if (e.target.dataset.id === '0'){
          alert('该数据不允许删除');
          return;
        }
        arr.splice(e.target.dataset.id, 1)

        // 存到本地里面
        localStorage.setItem('data', JSON.stringify(arr))

        // 重新渲染我们的函数
        render()
      }
    })
  </script>
</body>

</html>

拓展：自定义属性

固有属性:

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

自定义属性:

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

    let box.document.querySelector(.box);

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

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

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

    //举例
    let box.document.querySelector(.box);
    box.setAttribute('myID', '1001');
    box.getAttribute('myID');
    box.removeAttribute('myID');

data-自定义属性:

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

在标签上一律以data-开头

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

<div class="box" data-id="10"></div>
<sccipt>
    let box.document.querySelector(.box);
    consloe.log(box.dataset.id)    // 10
</script>

正则表达式

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

通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式。

正则表达式在 JavaScript中的使用场景：

例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文(匹配)

比如用户名: /^[a-z0-9_-]{3,16}$/

过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等。

语法

正则语法分为两步： 1. 定义规则 2. 查找

JavaScript 中定义正则表达式的语法有两种，我们先学习其中比较简单的方法：

定义正则表达式语法：

let 变量名 = /表达式/  ;             //例子： let reg = /前端/

其中 / / 是正则表达式字面量

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

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

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

//例子：
let str = '我要学前端，月薪过万'
let reg = /前端/  ;
let re = reg.test(str);
console.log(re);    //true

如果正则表达式与指定的字符串匹配，返回true，否则false （返回布尔值）

检索（查找）符合规则的字符串

exec() 方法在一个指定字符串中执行一个搜索匹配

//regObj.exec(被检测的字符串);

//例子：
let str = '我要学前端，月薪过万'
let reg = /前端/  ;
let re = reg.exec(str);
console.log(re);    //返回的是一个数组

如果匹配成功，exec() 方法返回一个数组，否则返回null

元字符

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

元字符(特殊字符）：

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

1. 比如，规定用户只能输入英文26个英文字母，普通字符的话 abcdefghijklm…..

2. 但是换成元字符写法： [a-z]

参考文档：

MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions

正则测试工具: http://tool.oschina.net/regex

为了方便记忆和学习，我们对众多的元字符进行了分类：

        1. **边界符**（表示位置，开头和结尾，必须用什么开头，用什么结尾） 
        2. **量词** （表示重复次数）
        3. **字符类** （比如 \d 表示 0~9）

边界符

正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符

如果 ^ 和 $ 在一起，表示必须是精确匹配，只匹配单个字符

    <script>
        // console.log(/哈/.test('哈哈'))
        // console.log(/哈/.test('二哈'))
        // ^ 开头
        console.log(/^哈/.test('二哈'))  // false 
        console.log(/^哈/.test('我开心的哈哈大笑'))  // false
        // $结尾
        //以 哈开头   以 哈 结尾
        console.log(/^哈$/.test('我开心的哈哈大笑'))  // false 
        console.log(/^哈$/.test('哈哈'))  // false 
        console.log(/^哈$/.test('哈'))  // true  精确匹配

    </script>

量词

量词用来设定某个模式出现的次数。

逗号左右两侧千万不要出现空格

<!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>
        // console.log(/a/.test('a'))
        // // * 量词 n >= 0 
        // console.log(/a*/.test(''))         //true
        // console.log(/a*/.test('a'))        //true
        // console.log(/a*/.test('aa'))
        // console.log(/a*/.test('aaaaaaaa'))
        // console.log(/a*/.test('b'))         //true

        // console.log('--------------------------')

        // // + 量词 n >= 1
        // console.log(/a+/.test(''))           //false
        // console.log(/a+/.test('a'))          //true
        // console.log(/a+/.test('aa'))         //true
        // console.log(/a+/.test('aaaaaaaa'))       //true
        // console.log(/a+/.test('b'))          //false
        // console.log('--------------------------')
        // // ? 出现 0次 或者 1次
        // console.log(/^a?$/.test(''))    //true
        // console.log(/^a?$/.test('a'))   //true
        // console.log(/^a?$/.test('aa'))  //false

        // {n}   只能出现 n次   符号之间不要加空格
        console.log(/^a{3}$/.test('aa'))    //false
        console.log(/^a{3}$/.test('aaa'))   //true
        console.log(/^a{3}$/.test('aaaa'))  //false

        // {n,}   >= n 
        console.log(/^a{3,}$/.test('aa'))    //false
        console.log(/^a{3,}$/.test('aaa'))   //true
        console.log(/^a{3,}$/.test('aaaa'))  //true
        console.log('--------------------------')
        // {n,m}   >= n  <= m 
        console.log(/^a{3,6}$/.test('aa'))     //false
        console.log(/^a{3,6}$/.test('aaa'))    //true
        console.log(/^a{3,6}$/.test('aaaa'))    //true
        console.log(/^a{3,6}$/.test('aaaaa'))     //true
        console.log(/^a{3,6}$/.test('aaaaaaaa'))    //false
    </script>
</body>

</html>

字符类

[] 匹配字符集合，后面的字符串只要包含 abc 中任意一个字符，都返回 true

连字符 -

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

console.log(/^[a-z]$/.test('c'))

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

<!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>
        // console.log(/abc/.test('abc'))       //true
        // console.log(/abc/.test('ab'))        //false
        // 字符类 []
        // console.log(/[abc]/.test('abc'))         //true
        // console.log(/[abc]/.test(''))            //false
        // console.log(/[abc]/.test('andy'))        //true
        // console.log(/[abc]/.test('baby'))        //true
        // console.log(/[abc]/.test('cry'))         //true
        // console.log(/[abc]/.test('die'))         //false

        // 字符类 [-] 连字符
        console.log(/^[abc]$/.test('abc'))      //false
        console.log(/^[abc]$/.test('a'))        //true
        console.log(/^[abc]$/.test('b'))        //true
        console.log(/^[abc]$/.test('c'))        //true
        console.log(/^[abc]$/.test('cc'))       //false

        // 26个英文字母选其中的一个
        console.log(/^[a-zA-Z]$/.test('d'))         //true
        console.log(/^[a-zA-Z]$/.test('D'))         //true
        console.log(/^[a-zA-Z]$/.test('DD'))        //false
        console.log(/^[a-zA-Z0-9]$/.test('6'))      //true
        console.log(/^[a-zA-Z0-9-_]$/.test('6'))    //true   匹配识别，字母大小写和下划线，  ^ $ 多选一

        console.log(/^abc+$/.test('cc'))

    </script>
</body>

</html>

案例：用户名验证案例

需求：用户名要求用户英文字母,数字,下划线或者短横线组成，并且用户名长度为 6~16位

分析：

①：首先准备好这种正则表达式模式 /^[a-zA-Z0-9-_]{6,16}$/

②：当表单失去焦点就开始验证.

③：如果符合正则规范, 则让后面的span标签添加 right 类.

④：如果不符合正则规范, 则让后面的span标签添加 wrong 类

<body>
    <input type="text">
    <span></span>
    <script>
        let input = document.querySelector('input');
        let span = input.nextElementSibling;
        input.addEventListener('blur',function () {
            if (/^[a-zA-Z0-9-_]{6,16}$/.test(input.value)){
                span.className = 'right';
                span.innerHTML = '输出正确';
            }else {
                span.className = 'error';
                span.innerHTML = '只能输入6-16位字符'
            }
        })
    </script>
</body>

取反符号 ^

[ ] 里面加上 ^ 取反符号， . 匹配除换行符之外的任何单个字符

比如：

[^a-z] 匹配除了小写字母以外的字符
注意要写到中括号里面

^\d{4}-\d{1,2}-d{1,2}       //日期格式  YYYYMMDD

修饰符

修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等

  /表达式/修饰符

i 是单词 ignore 的缩写，正则匹配时字母不区分大小写

g 是单词 global 的缩写，匹配所有满足正则表达式的结果

console.log(/a/i.test('a'))     //true
console.log(/a/i.test('A'))     //true    i正则匹配时字母不区分大小写

替换 replace 替换

字符串.replace(/正则表达式/,'替换文本')

<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布</button>
    <div></div>
    <script>
        let btn = document.querySelector('button');
        let textarea = document.querySelector('textarea');
        let div = document.querySelector('div');

        btn.addEventListener('click',function () {
            div.innerHTML = textarea.value.replace(/草/g,'口');
        })
    </script>
</body>

综合案例

change 事件

当表单里面的值发生变化的时候触发，和 blur 不一样

blur 事件，blur事件类型表示在元素失去焦点时响应（点击输入框后，离开时候触发）

input 事件只要输入就会触发
change 事件是离开表单时候才触发并且值有变化

<body>
    <input type="text">
    <input type="password">
    <script>
        let input = document.querySelector('input')
        // 当表单里面的值发生变化的时候触发，和 blur 不一样 
        // input 事件  只要输入就会触发
        // change 事件 是 离开表单时候才触发  并且值有变化
        input.addEventListener('change', function () {
            console.log(111)
        })
    </script>
</body>

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入

WEB APIs ( BOM )

WEB APIs ( BOM )

BOM- 操作浏览器

Window对象

BOM(浏览器对象模型)

定时器-延时函数

JS执行机制

同步和异步

location对象

navigator对象

histroy对象

swiper 插件

本地存储

localStorage

JSON.stringify(复杂数据类型)

sessionStorage（了解）

本地存储学习信息案例

需求：改为本次存储版本的学习信息表

拓展：自定义属性

正则表达式

语法

元字符

边界符

量词

字符类

连字符 -

取反符号 ^

修饰符

综合案例

change 事件

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

WEB APIs ( BOM )

WEB APIs ( BOM )

BOM- 操作浏览器

Window对象

BOM(浏览器对象模型)

定时器-延时函数

JS执行机制

同步和异步

location对象

navigator对象

histroy对象

swiper 插件

本地存储

localStorage

JSON.stringify(复杂数据类型)

sessionStorage（了解）

本地存储学习信息案例

需求：改为本次存储版本的学习信息表

拓展： 自定义属性

正则表达式

语法

元字符

边界符

量词

字符类

连字符 -

取反符号 ^

修饰符

综合案例

change 事件

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

推荐阅读

相关产品

拓展：自定义属性