补充概念

URL，参考链接 ：https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions/What_is_a_URL
HTTP，参考链接 ：https://developer.mozilla.org/zh-CN/docs/Web/HTTP
互联网常识概念：https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions

1. 客户端 Web API

全称Client side Web API

w3c官方介绍页：https://www.w3.org/standards/webdesign/script

mozilla Web 介绍首页：https://developer.mozilla.org/zh-CN/docs/learn

mozilla WebAPI参考页：https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs

JavaScript组成部分回顾

  1. ECMAScript， 语法结构组成
  2. BOM (Browser Object Model) ， 浏览器对象模型
  3. DOM (Document Object Model) ， 文档对象模型

1.1 什么是浏览器对象模型

Internet Explore 3 和 Netspace Navigator3 有一个共同的特色，那就是支持可以访问和操作浏览器窗口的浏览器对象模型(BOM)。开发人员使用BOM可以控制浏览器显示的页面以外的部分。而BOM真正与众不同的地方，还是他作为JavaScript实现的一部分却没有相关的标准。这个问题在HTML5中得到了解决，HTML5致力于把很多BOM功能写入正式规范。

本质上讲，BOM只处理浏览器窗口和框架；但大家习惯上也把所有针对浏览器的JavaScript扩展算作BOM的一部分。算入扩展的内容.

  • 弹出新浏览器窗口的功能
  • 移动、缩放和关闭浏览器的功能
  • 提供浏览器详细的navigator对象
  • 提供浏览器所加载页面的详细信息的location对象
  • 提供用户显示器分辨率详细信息的screen对象
  • 对cookies的支持
  • 像XMLHttpRequest和ActiveObject这样的自定义对象。

上述内容来源于：《Professional JavaScript for Web Developers》 4th Edition , [JavaScript 高级程序设计] 第10~11页。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EQ6Yos5e-1612058179267)( https://lao-jiu-jun.gitee.io/xuetang9-markdown-graph-bed/Java实训/JavaScript/JavaScript高级/JavaScript书.png )]

1.2 什么是文档对象模型

参考链接: https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents

在浏览器标签中当前载入的文档用文档对象模型来表示。这是一个由浏览器生成的“树结构”，使编程语言可以很容易的访问HTML结构 — 例如浏览器自己在呈现页面时，使用它将样式和其他信息应用于正确的元素，而页面呈现完成以后，开发人员可以用JavaScript操作DOM

HTML文档中每个元素或子元素都是一个节点：

  • 整个文档是一个文档节点
  • 每个HTML元素是一个元素节点
  • 包含在HTML元素中的文本是文本节点
  • 每个HTML属性是一个属性节点
  • 注释属于注释节点
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>DOM节点的示例</title>
</head>
<body>
<img src="./img/lanqiu.jpg" alt="篮球" id="1" />
<h1>篮球</h1>
<p>DOM应用</p>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m3cPvDuR-1612058179269)( https://lao-jiu-jun.gitee.io/xuetang9-markdown-graph-bed/Java实训/JavaScript/JavaScript高级/HTML节点关系.png )]

2. 浏览器对象模型

2.1 常见BOM

  1. window : 表示浏览器窗口对象，提供了一系列的函数、属性、可绑定事件。https://developer.mozilla.org/zh-CN/docs/Web/API/Window
  2. location: 表示其链接到的对象的位置（URL）。所做的修改反映在与之相关的对象上。window与document对象都将location对象作为属性。https://developer.mozilla.org/zh-CN/docs/Web/API/Location
  3. history：是一个只读属性，用来获取History 对象的引用，History 对象提供了操作浏览器会话历史（浏览器地址栏中访问的页面，以及当前页面中通过框架加载的页面）的接口。https://developer.mozilla.org/zh-CN/docs/Web/API/History

2.2 window 对象

2.2.1 常用函数

**参考地址:**https://developer.mozilla.org/zh-CN/docs/Web/API/Window

说明:

js内置函数在属于ECMAScript语言与WebAPI无关，不过对于浏览器而言函数直接绑定在window对象上。内置函数地址： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects

函数说明
alert(消息)弹出消息警告窗，包含一个“确认”按钮，传入的任何消息都会转化为文本
confirm(消息)弹出消息确认窗，包含“确定”、“取消"两个按钮，选择确定返回true，否则返回false
prompt(消息,默认值)弹出输入消息窗,当用户确认时返回用户输入内容，否则返回null
parseInt(字符串,进制)js内置函数,将输入字符串转化为整数，进制表示字符串表示字符串的进制单位，默认为10进制
parseFloat(字符串)js内置函数,将输入数据转化为浮点数
isNaN(内容)js内置函数,判断传入内容是否不是一个数字
open(地址,窗口名称,窗口特征)打开一个新的窗口，窗口特征包括 大小，位置，滚动条等
addEventListener(事件名,事件函数)给窗体添加一个指定的事件
removeEventListener(事件名)移除添到窗体的一个指定的事件
setTimeout(函数,延时,参数)在指定延时毫秒单位之后，执行传入函数。函数参数在第三个从参数传递，返回值为定时器编号，可以根据该编号取消执行定时器函数
clearTimeout(编号)取消执行定时器函数，参数为setTimeout()函数返回的编号
setInterval(函数,延时,参数)根据给定的时间周期执行传入的函数，第三个参数为函数执行需要的参数，返回值为定时器编号，可以根据该编号取消执行该函数
clearInterval(编号)取消执行setInterval()启动的定时器，参数会setInterval函数的返回值
getComputedStyle(element)用于计算指定元素的样式信息，只读
2.2.2 常用事件属性

说明：

  1. 事件属性赋值通常直接赋值一个事件回调函数，即事件发生时需要执行的操作
  2. 对于事件而言，参数为事件在执行时，事件执行对象传递给事件指定函数的参数列表,即可以**在方法中接收到的数据**
  3. 未列出事件查看：https://developer.mozilla.org/zh-CN/docs/Web/API/Window
属性名说明
onload在文档装载完成后会触发 load 事件。此时，在文档中的所有对象都在DOM中，所有图片，脚本，链接以及子框都完成了装载
onclose关闭窗体时触发的事件
onresize窗体尺寸发生变化时触发的事件
onscroll窗体页面内容滚动时触发的事件
onkeydown全局监听键盘按下的事件
onkeyup全局监听键盘松开的事件
onkeypress全局监听键盘按下并产生字符时的事件（ctrl、shift之类的键不会触发）
2.2.3 示例
window.onload = function () {
    //将字符转为数字
    let money = "1838";
    console.log(typeof parseInt(money));
    //判断内容是否为数字
    console.log(isNaN("￥1835.00"));

    //添加一个键盘按下事件
    window.addEventListener('keydown',function (e) {
        console.log(e);
    });

    //监听页面滚动事件
    window.onscroll = function (e) {
        console.log(e);
    }
}

2.3 location 对象

2.3.1 常用属性与函数

**参考地址：**https://developer.mozilla.org/zh-CN/docs/Web/API/Location

类别名称说明
属性href表示url的字符串，可以修改用于加载新的页面
属性protocol当前页面的协议
属性host当前页面的域名，域名、端口号
属性hostname当前页面域名，无端口号
属性port当前页面端口号
方法reload()刷新当前页面
方法replace(页面地址)加载一个指定地址的页面
2.3.2 示例
window.onload = function () {
    console.log(`当前页面的连接为：${location.href}`);
    console.log(`当前页面所使用的协议为：${location.protocol}`);
    //按下回车键，页面跳转至百度
    window.addEventListener('keydown',e => {
        if(e.key === 'Enter') {
            //location.href = "http://www.baidu.com";
            location.replace("http://www.baidu.com");
        }
    });
}

2.4 history 对象（了解）

2.4.1 常用属性与函数

**参考地址:**https://developer.mozilla.org/zh-CN/docs/Web/API/History

类别名称说明
属性length当前历史记录中页面的个数，包括当前页面
方法back()回退一个页面，当没有页面的时候不报错
方法forward()前进一个页面，当没有页面的时候不报错
方法go(前进或后退的数值)根据数值前进或者后退，正数前进、负数后退、0刷新
2.4.2 示例

起始页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>history对象起始页面</title>
</head>
<body>
<h2>起始页面</h2>
<a href="./2.4-history-html2.html">前往目标页面</a>
<script type="text/javascript">
    window.addEventListener('keydown',e => {
        //前往下一个
        if(e.key === 'Enter') {
            history.forward();
        }
    });
</script>
</body>
</html>

目标页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>history对象目标页面</title>
</head>
<body>
<h2>目标页面</h2>
<script type="text/javascript">
    window.addEventListener('keydown',e => {
        //返回上一个页面
        if(e.key === 'Enter') {
            history.back();
        }
    });
</script>
</body>
</html>

3. 文档对象模型

3.1 常见DOM

**参考网址：**https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model

  1. Document(文档对象), 表示加载到浏览器的页面文件。提供一系列对页面中标签、标签属性、文本、注释等操作的对象与方法。将页面标签、标签属性、文本、注释放在一颗树结构中进行操作
  2. Node、NodeList、ChildNode、ParentNode(节点对象)，页面解析成的树中的所有成员都可以用节点来表示
  3. Element、HTMLElement(元素对象)，表示HTML页面上的标签
  4. Attr(属性对象)，表示添加在标签上的属性
  5. Text(文本对象), 表示HTML页面上的文本
  6. Comment(注释对象)，表示HTML页面上的注释
  7. Event(事件对象)，表示为标签、窗体等添加的事件。

3.2 document对象(重要)

3.2.1 常见属性与方法

参考地址: https://developer.mozilla.org/zh-CN/docs/Web/API/Document

类别名称说明
属性body获得页面的body标签对象
属性forms获得页面的表单列表
属性cookie用分号分隔的 cookie 列表，或设置 cookie。HTML5新加
属性referrer获取页面的来源url
属性title获取页面标题字符串
属性defaultView获取界面绑定的window对象
方法getElementById(名称)根据id名称查找一个元素
方法getElementsByClassName(名称)根据样式名称查找元素
方法getElementsByName(名称)根据名称属性名查找元素
方法getElementsByTagName(名称)根据标签名查找元素
方法querySelector(CSS选择器)根据选择器字符串查找单个元素，存在多个取第一个
方法querySelectorAll(CSS选择器)根据选择器字符串查找元素
方法createElement(元素名)根据元素名在内存中创建元素对象
方法write(文本)输出文本到页面上，可以输出标签文本会被解析
方法writeln(文本)输出文本到页面上，可以输出标签文本会被解析，产生换行符

document.write() 系列方法会覆盖原有的代码内容，因此建议少用或者不用

3.2.2 示例
window.onload = function () {
    document.cookie = "name=张三";
    document.cookie = "age=18";
    console.log(document.cookie);
    
    console.log(document.querySelector("p"));
    console.log(document.querySelectorAll("p"));
    console.log(document.createElement("a"));
}

3.3 Node节点对象

说明:

对于Node而言，最重要的是nodeType。主要根据nodeType判断当前是什么节点，用的比较少。

参考链接：https://developer.mozilla.org/zh-CN/docs/Web/API/Node

3.3.1 常见属性
属性说明
nodeType节点类型
nodeName节点名称
nodeValue节点值
childNodes所有的子节点对象数组
parentNode父节点
parentElement父元素节点
firstChild第一个子节点
lastChild最后一个子节点
nextSibling下一个兄弟节点
previousSibling前一个兄弟节点
innerHTML输出或设置HTML代码文本
outerHTML将节点以字符串形式输出
innerText输出或设置源码文本
3.3.2 nodeType对应表
中文名节点类型名Value
元素节点ELEMENT_NODE1
属性节点ATTRIBUTE_NODE2
文本节点TEXT_NODE3
CDATA节点CDATA_SECTION_NODE4
实体引用节点ENTITY_REFERENCE_NODE5
实体节点ENTITY_NODE6
处理指令节点PROCESSING_INSTRUCTION_NODE7
注释节点COMMENT_NODE8
文档节点DOCUMENT_NODE9
文档类型节点DOCUMENT_TYPE_NODE10
文档判断节点DOCUMENT_FRAGMENT_NODE11
符号节点NOTATION_NODE12
3.3.3 示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>演示Node节点对象</title>
</head>
<body>
<div class="container">
    <h2>内容标题</h2>
</div>
<script type="text/javascript">
    window.onload = function () {
        let container = document.querySelector(".container");
        console.log(container.nodeType);    //节点类型
        console.log(container.nodeName);    //节点名称
        console.log(container.nodeValue);   //节点值
        console.log(container.childNodes);  //所有子节点
        console.log(container.innerHTML);
        console.log(container.outerHTML);
    }
</script>
</body>
</html>

3.4 Element节点对象(重要)

**Element节点对象参考链接：**https://developer.mozilla.org/zh-CN/docs/Web/API/Element

3.4.1 常见属性
名称说明
attributes所有属性列表
children子元素列表
style行内样式属性对象
className内部或者外部样式名称
classList样式列表：
add(class1[,class2,…])给元素添加一个或多个类样式名，如果指定的类样式名已存在，则不会添加
remove(class1[,class2,…])移除元素中一个或多个类样式名
contains(className)返回布尔值，判断指定的类名是否存在
id获取元素的id
firstElementChild第一个子元素节点（不兼容IE）
lastElementChild最后一个子元素节点（不兼容IE）
nextElementSibling下一个兄弟节点（不兼容IE）
previousElementSibling上一个兄弟节点（不兼容IE）
clientWidth边框内的宽度：包括了内容的宽度和panding，但不包含滚动条宽度
clientHeight边框内的高度
clientLeft内容左侧距离
clientTop内容顶部距离
scrollTop读取或设置元素滚动条到元素顶部的距离（元素的内容没有产生垂直方向的滚动条，那么它的scrollTop值为0）
scrollLeft读取或设置元素滚动条到元素左边的距离（元素的内容没有产生水平方向的滚动条，那么它的scrollLeft值为0）
3.4.2 常见方法
名称说明
appendChild(node)将节点拼接在当前节点内部的最后面
insertBefore(newNode, referenceNode)将节点拼接在当前节点内部的最前面
referenceNode表示父节点的指定子节点，如果传入null表示将newNode添加到父节点的内部最后面
removeChild(node)删除节点中的指定子节点
replaceChild(newNode, oldChild)将节点的指定子节点(oldChild)替换为新的节点(newNode)
getAttribute(name)获取节点指定的name属性
hasAttribute(name)判断节点是否存在指定的name属性
setAttribute(name,value)为节点添加指定的name属性并且值为value
3.4.4 示例

节点拼接

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>演示Element节点对象</title>
</head>
<body>
<table>
    <thead>
    <tr>
        <th><input type="checkbox" /></th>
        <th>商品编号</th>
        <th>商品简称</th>
        <th>单位</th>
        <th>规格</th>
        <th>商品分类</th>
        <th>采购单价</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox" /></td>
        <td>00001</td>
        <td>青岛啤酒纯度8度</td>
        <td>青岛纯生</td>
        <td>箱</td>
        <td>600mlx24</td>
        <td>32.00</td>
        <td>
            <button>上架</button>
            <button>编辑</button>
            <button>删除</button>
            <button>一店一价</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>00002</td>
        <td>青岛啤酒纯度8度</td>
        <td>青岛纯生</td>
        <td>箱</td>
        <td>600mlx24</td>
        <td>32.00</td>
        <td>
            <button>上架</button>
            <button>编辑</button>
            <button>删除</button>
            <button>一店一价</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>00003</td>
        <td>青岛啤酒纯度8度</td>
        <td>青岛纯生</td>
        <td>箱</td>
        <td>600mlx24</td>
        <td>32.00</td>
        <td>
            <button>上架</button>
            <button>编辑</button>
            <button>删除</button>
            <button>一店一价</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>00004</td>
        <td>青岛啤酒纯度8度</td>
        <td>青岛纯生</td>
        <td>箱</td>
        <td>600mlx24</td>
        <td>32.00</td>
        <td>
            <button>上架</button>
            <button>编辑</button>
            <button>删除</button>
            <button>一店一价</button>
        </td>
    </tr>
    </tbody>
</table>
<script type="text/javascript">
    window.onload = function () {
        //移除第二个tr
        let tr = document.querySelector('table tr:nth-child(2)');
        tr.parentNode.removeChild(tr);
        
        //给最后一个tr的最后一个td添加一个属性data-id，值为4
        document.querySelector('table tr:last-child td:last-child').setAttribute('data-id','4');

        //给tbody再添加一个tr
        let trNode = document.createElement('tr');
        trNode.innerHTML = `
            <td><input type="checkbox" /></td>
            <td>00005</td>
            <td>青岛啤酒纯度8度</td>
            <td>青岛纯生</td>
            <td>箱</td>
            <td>600mlx24</td>
            <td>32.00</td>
            <td>
                <button>上架</button>
                <button>编辑</button>
                <button>删除</button>
                <button>一店一价</button>
            </td>
        `;
        document.querySelector('table tbody').appendChild(trNode);
    }
</script>
</body>
</html>

3.5 HTMLElement节点

HTMLElement节点参考链接： https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement

3.5.1 常见属性
名称说明
offsetWidth布局宽度：包含元素的边框、水平线上的内边距、竖直方向滚动条以及CSS设置的宽度的值
offsetHeight布局高度
offsetTop获取当前DOM节点元素距离浏览器顶部的距离，单位是像素
offsetLeft获取当前DOM节点元素距离浏览器左侧的距离，单位是像素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0fCCwieR-1612058179277)( https://lao-jiu-jun.gitee.io/xuetang9-markdown-graph-bed/Java实训/JavaScript/JavaScript高级/box.png )]

3.5.2 常见鼠标事件
名称说明
click单击
dbclick双击
mousedown按下
mouseup松开
mouseenter光标移入元素时触发
mouseleave光标移出元素时触发
mouseover光标移入元素时触发，进入子元素也会触发
mouseout光标移出元素时触发，离开子元素也会触发
mousemove光标在元素上移动时触发
3.5.3 常见键盘事件
名称说明
keydown键盘按下
keyup键盘松开
keypress键盘按下并产生字符时的事件（ctrl、shift之类的键不会触发）
3.5.4 特殊事件
名称说明
focus输入框获取焦点
blur输入框失去焦点
select内容选中
input输入框输入内容
change元素内容发生改变
3.5.5 示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>演示HTMLElement节点对象</title>
    <style type="text/css">
        table {
            border-collapse: collapse;
        }
        table.border th,table.border td {
            border: 1px solid black;
        }
    </style>
</head>
<body>
<table>
    <thead>
    <tr>
        <th><input type="checkbox" /></th>
        <th>商品编号</th>
        <th>商品简称</th>
        <th>单位</th>
        <th>规格</th>
        <th>商品分类</th>
        <th>采购单价</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox" /></td>
        <td>00001</td>
        <td>青岛啤酒纯度8度</td>
        <td>青岛纯生</td>
        <td>箱</td>
        <td>600mlx24</td>
        <td>32.00</td>
        <td>
            <button>上架</button>
            <button>编辑</button>
            <button>删除</button>
            <button>一店一价</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>00002</td>
        <td>青岛啤酒纯度8度</td>
        <td>青岛纯生</td>
        <td>箱</td>
        <td>600mlx24</td>
        <td>32.00</td>
        <td>
            <button>上架</button>
            <button>编辑</button>
            <button>删除</button>
            <button>一店一价</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>00003</td>
        <td>青岛啤酒纯度8度</td>
        <td>青岛纯生</td>
        <td>箱</td>
        <td>600mlx24</td>
        <td>32.00</td>
        <td>
            <button>上架</button>
            <button>编辑</button>
            <button>删除</button>
            <button>一店一价</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td>00004</td>
        <td>青岛啤酒纯度8度</td>
        <td>青岛纯生</td>
        <td>箱</td>
        <td>600mlx24</td>
        <td>32.00</td>
        <td>
            <button>上架</button>
            <button>编辑</button>
            <button>删除</button>
            <button>一店一价</button>
        </td>
    </tr>
    </tbody>
</table>
<button class="border-btn">表格边框</button>
<script type="text/javascript">
    window.onload = function () {
        let table = document.querySelector('table');
        //点击“表格边框”按钮，实现添加或移除表格边框的样式
        document.querySelector('button.border-btn').addEventListener('click',e => {
            if(table.classList.contains('border')) {
                table.classList.remove('border');
            }else {
                table.classList.add('border');
            }
        });
    }
</script>
</body>
</html>

4. 表单验证

输入元素参考链接: https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLInputElement

**表单元素参考链接:**https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLFormElement

4.1 获取输入元素值

  1. 使用元素value属性

4.2 表单对象验证事件与方法

类型名称说明
方法submit()提交表单
方法reset()重置表单
事件submit表单提交时执行,当事件执行函数返回false时，
会阻止表单向服务器提交数据，表示数据验证不通过
事件reset表单重置时执行
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>演示表单验证基础</title>
</head>
<body>
<form method="post">
    <label>
        <input type="text" name="account" placeholder="请填写账号" />
    </label>
    <button>普通按钮</button>
    <input type="submit" value="表单提交按钮" />
</form>
<script type="text/javascript">
    //普通按钮执行表单提交方法
    document.querySelector('button').addEventListener('click',e => {
        console.log('手动执行表单提交');
        document.querySelector('form').submit();
    });

    //表单提交事件
    document.querySelector('form').addEventListener('submit',e => {
        console.log('触发表单提交事件');
        //阻止表单提交(e.preventDefault()的作用是阻止默认的行为)
        e.preventDefault();
    });
</script>
</body>
</html>

4.3 正则表达式

**参考链接:**https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions

4.3.1 什么是正则表达式

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

4.3.2 js中创建正则表达式
let reg = /^[a-zA-Z\d_]{6,10}$/;	//快速创建正则表达式方式

let reg2 = new RegExp('^[a-zA-Z\d_]{6,10}$');	//通过对象创建正则表达式
4.3.3 字符元字符
字符含义
\转义字符，可以将特殊符号转移为普通字符，
例如+，代表一个’+‘号，\代表’'本身。特殊情况：\n代表一个换行符
^匹配字符串开始的位置，与后面紧邻的字符进行配合
$匹配字符串结束的位置，与前面紧邻的字符进行配合
*匹配前面的字符或者表达式出现0次或多次，等价于{0,}
+匹配前面的字符或者表达式出现一次或多次，等价于{1,}
?匹配前面的字符或者表达式出现零次或一次，等价于{0,1}
.匹配除换行符\n之外的任何单个字符
|或者的意思。例如，/green|red/匹配“green apple”中的‘green’和“red apple”中的‘red’
()将表达式组合起来，括号中的内容可以被上面的特殊符号修饰
4.3.4 表达式元字符
字符含义
{n}匹配前面的字符或者表达式，指定匹配次数为n次
{n,}匹配前面的字符或者表达式，指定匹配次数至少为n次
{n,m}匹配前面的字符或者表达式，指定匹配次数至少n次，最多m次
[xyz]字符合集，匹配里面包含的任意一个字符。例如[abcd]代表abcd中的任意一个字符，也可以用-来进行范围约束，例如[a-z]、[0-9]、[A-z]、[A-z0-9]、[A-z0-9_]、[\u4e00-\u9fa5]等
[^xyz]匹配不包含里面字符的其他任意一个字符。例如[^abcd]代表除了abcd以外的任意一个字符
\d匹配0-9中任意一个阿拉伯数字，相当于[0-9]。
\D匹配一个非阿拉伯数字，等价于[^0-9]。
\f匹配一个换页符(U+000C)。
\n匹配一个换行符(U+000A)。
\r匹配一个回车符(U+000D)。
\s匹配一个空白字符，包括空格、制表符、换页符和换行符。等价于[ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]。
\S匹配一个非空白字符。等价于 [^ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]。
\t匹配一个水平制表符 (U+0009)。
\v匹配一个垂直制表符 (U+000B)。
\w匹配一个单字字符（字母、数字或者下划线）。等价于 [A-Za-z0-9_]。
\W匹配一个非单字字符。等价于 [^A-Za-z0-9_]。
4.3.6 正则表达式方法
字符含义
exec查找字符串中满足规则的字符串，它返回一个数组（未匹配到则返回 null）。每次只匹配一个，其会返回lastIndex来表示下一个匹配的起始索引值，当我们再次执行exec时，自动从这里开始继续搜索，知道为null为止
test测试字符串是否匹配规则，它返回 true 或 false
4.3.7 高级搜索标志
字符含义
g全局搜索
i不区分大小写搜索
let str = 'a1c240eabc0abc1';
let result;
let reg = /[A-z0-9]{3}/;
//通过循环来查找所有能够匹配的字符串
while ((result = reg.exec(str)) !== null) {
    console.log(result);
}
let reg2 = /[A-z0-9]{3}/g;
while ((result = reg2.exec(str)) !== null) {
    console.log(result);
}
4.3.8 贪婪模式与非贪婪模式

贪婪模式的元字符包括：{n,}、{n,m}、?、*、+

贪婪模式的特性：匹配尽可能多的字符

非贪婪模式的特性：匹配尽量少的字符

在贪婪模式元字符后面加上?即可将其变为非贪婪模式：{n,}?、{n,m}?、??、*?、+?

//贪婪模式
let str = 'd131adafdae';
let reg = /d\w+/;       //\w+将会匹配d之后所有的字符，有多少匹配多少
console.log(reg.exec(str));
let reg2 = /d\w+d/;     //虽然\w中包含有d，但是为了使整个表达式匹配成功，\w会让出最后一个匹配的d
console.log(reg2.exec(str));

//非贪婪模式
let reg3 = /d\w+?/;     //\w+?只会匹配d之后的1个字符
console.log(reg3.exec(str));
let reg4 = /d\w+?d/;     //尽可能少的匹配字符，为了让整个表达式匹配成功，不得不多匹配几个字符才能让后面的d匹配
console.log(reg4.exec(str));

4.4 表单验证示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>演示表单验证</title>
</head>
<body>
<form method="post">
    <label>
        <input type="text" name="account" autocomplete="off" placeholder="请填写账号" />
        <p class="tip"></p>
    </label>
    <label>
        <input type="password" name="pwd" autocomplete="off" placeholder="请填写密码" />
        <p class="tip"></p>
    </label>
    <input type="submit" value="表单提交按钮" />
</form>
<script type="text/javascript">
    //表单提交事件
    document.querySelector('form').addEventListener('submit',e => {
        //校验账号是否符合规则
        let accountValidate = false;
        let accountIpt = document.querySelector('input[name="account"]');
        let accountTip = accountIpt.nextSibling.nextSibling;
        let accountVal = accountIpt.value;
        //账号要求： 1.不能为空 2.6~10位字母或者数字
        let iptReg = /^[a-zA-Z0-9]{6,10}$/;
        if(accountVal.length === 0) {
            accountTip.innerHTML = '账号不能为空';
        }else if(!iptReg.test(accountVal)) {
            accountTip.innerHTML = '账号格式不正确，请输入6~10位字母或者数字';
        }else {
            accountTip.innerHTML = '';
            accountValidate = true;
        }

        //校验密码是否符合规则
        let pwdValidate = false;
        let pwdIpt = document.querySelector('input[name="pwd"]');
        let pwdTip = pwdIpt.nextSibling.nextSibling;
        let pwdVal = pwdIpt.value;
        //账号要求： 1.不能为空 2.6~10位字母或者数字或者下划线
        let pwdReg = /^\w{6,10}$/;
        if(pwdVal.length === 0) {
            pwdTip.innerHTML = '密码不能为空';
        }else if(!pwdReg.test(pwdVal)) {
            pwdTip.innerHTML = '密码格式不正确，请输入6~10位字母或者数字或者下划线';
        }else {
            pwdTip.innerHTML = '';
            pwdValidate = true;
        }
        //如果校验不通过，那么禁止提交表单
        if(!accountValidate || !pwdValidate) e.preventDefault();
    });
</script>
</body>
</html>

5.承诺 Promise

Promise 是异步编程的一种解决方案。简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息

参考链接：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

5.1 Promise的三种状态

待定（pending）: 初始状态，既没有被兑现，也没有被拒绝

已兑现（fulfilled）: 意味着操作成功完成

已拒绝（rejected）: 意味着操作失败

5.2 Promise的特点

待定状态的 Promise 对象要么会通过一个值被兑现（fulfilled），要么会通过一个原因（错误）被拒绝（rejected），它不会受到外界因素的影响

如果一个 promise 已经被兑现（fulfilled）或被拒绝（rejected），那么我们可以说它处于已敲定（settled）状态，一旦已敲定，就不会再被更改。

我们还会听到一个经常跟 promise 一起使用的术语：已决议（resolved），它表示 promise 已经处于已敲定(settled)状态，或者为了匹配另一个 promise 的状态被"锁定"了

5.3 Promise方法

方法名描述
then(onFulfilled, onRejected)添加兑现(fulfillment)和拒绝(rejection)回调到当前 promise, 返回一个新的 promise。当这个回调函数被调用，新 promise 将以它的返回值来resolve，否则如果当前promise 进入fulfilled状态，则以当前promise的完成结果作为新promise的完成结果
onFulfilled表示：当 Promise 变成已兑现（fulfilled）时调用的函数
onRejected表示：当 Promise 变成拒绝状态（rejected）时调用的函数
catch(onRejected)添加一个拒绝(rejection) 回调到当前 promise, 返回一个新的promise，将以回调的返回值来resolve
finally加一个事件处理回调于当前promise对象，并且在原promise对象解析完毕后，返回一个新的promise对象。回调会在当前promise运行完毕后被调用，无论当前promise的状态是完成(fulfilled)还是失败(rejected)

因为then、catch、finally都会返回一个新的Promise对象，因此它们是可以串联使用的。

5.3 示例

5.3.1 普通示例
/**
  * 创建一个Promise对象
  * resolve：Promise逻辑执行成功时调用
  * reject：Promise逻辑执行失败时调用
  */
let divisionPromise = new Promise(function (resolve, reject) {
    let num = parseInt(prompt('请输入一个值，用于与100相除'));
    if(isNaN(num)) {
        reject('输入的不是数字');
    }else if(num === 0) {
        reject('除数不能为0');
    }else {
        let end = 100 / num;
        resolve(end);
    }
});
//添加兑现和拒绝的回调到当前Promise
divisionPromise.then(function (endNum) {
    alert(`除法成功，最终值为：${endNum}`);
},function (message) {
    alert(`除法失败：${message}`);
});
5.3.2 模拟数据统计
window.onload = function () {
    new Promise(resolve => {
        alert('下面进行一个数据统计，每个人说一个数：');
        resolve();
    })
        .then(() => {
            return new Promise((resolve, reject) => {
                let num = parseInt(prompt('我是张三，我说的数字是：'));
                isNaN(num) ? reject('输入的不是数字') : resolve(num);
            });
    	})
        .then((num) => {
            return new Promise((resolve, reject) => {
                let num2 = parseInt(prompt('我是李四，我说的数字是：'));
                isNaN(num2) ? reject('输入的不是数字') : alert(`两个数的总和是：${num + num2}`);
            });
        })
        .catch(message => {
            alert(message);
        })
        .finally(() => {
            alert('数据统计结束!');
        })
}
5.3.3 使用串联方式连续实现动画
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Promise连续动画</title>
    <style type="text/css">
        div {
            width: 200px;
            height: 200px;
            background-color: #17a2b8;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 1s linear;
        }
        div.start {
            border-radius: 50%;
        }
        div.move-right {
            left: calc(100vw - 200px);
        }
        div.color {
            background-color: #c69500;
        }
        div.move-bottom-right {
            top: calc(100vh - 200px);
            left: 0;
        }
    </style>
</head>
<body>
<div></div>
<script type="text/javascript">
    window.onload = function () {
        let div = document.querySelector('div');
        new Promise(resolve => {
            setTimeout(() => {
                div.classList.add('start');
                resolve();
            },1500)
        })
            .then(() => {
                return new Promise(resolve => {
                    setTimeout(() => {
                        div.classList.add('move-right');
                        resolve();
                    },1500);
                });
            })
            .then(() => {
                return new Promise(resolve => {
                    setTimeout(() => {
                        div.classList.add('color');
                        resolve();
                    },1000);
                });
            })
            .then(() => {
                return new Promise(resolve => {
                    setTimeout(() => {
                        div.classList.add('move-bottom-right');
                        resolve();
                    },1000);
                });
            })
    }
</script>
</body>
</html>
# javascript # 前端
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

cover

用 OpenAI Assistants 做大模型应用开发

avatar CSDN学习社区
cover

1 小时解读鸿蒙 10 大热点问题

avatar CSDN学习社区
cover

1 小时解读鸿蒙 10 大热点问题

avatar CSDN学习社区