补充概念
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组成部分回顾
- ECMAScript, 语法结构组成
- BOM (Browser Object Model) , 浏览器对象模型
- 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页。
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>
2. 浏览器对象模型
2.1 常见BOM
- window : 表示浏览器窗口对象,提供了一系列的函数、属性、可绑定事件。https://developer.mozilla.org/zh-CN/docs/Web/API/Window
- location: 表示其链接到的对象的位置(URL)。所做的修改反映在与之相关的对象上。window与document对象都将location对象作为属性。https://developer.mozilla.org/zh-CN/docs/Web/API/Location
- 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 常用事件属性
说明:
- 事件属性赋值通常直接赋值一个事件回调函数,即事件发生时需要执行的操作
- 对于事件而言,参数为事件在执行时,事件执行对象传递给事件指定函数的参数列表,即可以**在方法中接收到的数据**
- 未列出事件查看: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
- Document(文档对象), 表示加载到浏览器的页面文件。提供一系列对页面中标签、标签属性、文本、注释等操作的对象与方法。将页面标签、标签属性、文本、注释放在一颗树结构中进行操作
- Node、NodeList、ChildNode、ParentNode(节点对象),页面解析成的树中的所有成员都可以用节点来表示
- Element、HTMLElement(元素对象),表示HTML页面上的标签
- Attr(属性对象),表示添加在标签上的属性
- Text(文本对象), 表示HTML页面上的文本
- Comment(注释对象),表示HTML页面上的注释
- 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_NODE | 1 |
属性节点 | ATTRIBUTE_NODE | 2 |
文本节点 | TEXT_NODE | 3 |
CDATA节点 | CDATA_SECTION_NODE | 4 |
实体引用节点 | ENTITY_REFERENCE_NODE | 5 |
实体节点 | ENTITY_NODE | 6 |
处理指令节点 | PROCESSING_INSTRUCTION_NODE | 7 |
注释节点 | COMMENT_NODE | 8 |
文档节点 | DOCUMENT_NODE | 9 |
文档类型节点 | DOCUMENT_TYPE_NODE | 10 |
文档判断节点 | DOCUMENT_FRAGMENT_NODE | 11 |
符号节点 | NOTATION_NODE | 12 |
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 获取输入元素值
- 使用元素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>