文章目录
- HTML
- label 属性
- input 属性
- button 属性
- fieldset 属性
- select 属性
- option 属性
- div 属性
- script
- getElementById
- querySelectorAll
- null
- 循环
- 模版文字
- 函数
- 事件监听器
- regex
- 举例
- String
- Math
- Array
HTML
HTML 属性应该用双引号引起来。
label 属性
for=“”
input 属性
id=“”
type=“number/text/radio/checkbox/button/emial/submit”
min=“0”
max=“14”
placeholder=“”
required
button 属性
id=“”
name=“”
type=“submit”
fieldset 属性
id=“”
<fieldset id="breakfast"><legend>Breakfast</legend>
</fieldset>
select 属性
id=“”
name=“”
option 属性
id=“”
name=“”
value=“”
selected
div 属性
id=“”
class=“”
script
<script src="./script.js"></script>
getElementById
要访问具有给定 id 名称的 HTML 元素,可以使用 getElementById() 方法。
在编程中,在变量前面加上 is 或 has 是一种常见的做法,表示该变量代表布尔值。
output 变量是一个元素,它具有 classList 属性,具有 .remove() 方法,接受一个字符串,表示要从元素中删除的类。
classList 属性具有 .add() 方法,它接受一个字符串来表示要添加到元素的类。
const output = document.getElementById('output');
output.classList.remove("hide");
output.classList.add("hide");
querySelectorAll
querySelectorAll() 方法返回与选择器匹配的所有元素的 NodeList。 NodeList
是一个类似数组的对象,因此可以使用括号表示法访问其中的元素。
document.querySelectorAll 返回 NodeList,它类似于数组,但不是数组。
但是,Array 对象有一个 .from() 方法,它接受类似数组的对象并返回一个数组。
注意:HTML input 字段的值在 JavaScript 中以字符串形式接收。 在执行任何计算之前,你需要将这些字符串转换为数字。
null
JavaScript 中的 null 是一个特殊原语,表示故意缺少某个值。 在布尔上下文中,null 被认为是假的,在条件语句中其计算结果为 false。
循环
for...of
模版文字
JavaScript 具有一项称为 模板文字 的功能,它允许你直接在字符串中插入变量。 模板文字用反引号 `` 表示,而不是单引号或双引号。 可以通过用 ${} 包围变量来将变量传递到模板文字中 - 变量的值将插入到字符串中。
const templateLiteral = Hello, my name is ${name}~!
;
函数
接受参数类型的函数
function cleanInputString(str) {}
事件监听器
addEntryButton.addEventListener("click", addEntry);
calorieCounter.addEventListener("submit", calculateCalories);
regex
要匹配字符串中的特定字符,可以使用正则表达式或简称**“regex”**。
JavaScript 中的正则表达式由正斜杠包裹的模式表示。
在 JavaScript 正则表达式中,开头斜杠 /和结尾斜杠 / 是正则表达式的字面量定界符,用于表示正则表达式的开始和结束。
- 要匹配任意数字,可以使用字符类
[0-9]
。 这将匹配 0 和 9 之间的任意数字。 - 有一个简写字符类可以匹配任何数字:
\d
。 用这个简写替换你的 [0-9] 字符类。 - 正则表达式中的 + 修饰符允许你匹配出现一次或多次的模式。 要匹配数字模式一次或多次,请在每个数字字符类后添加加号。
- 字符串有一个 .match() 方法,它接受一个正则表达式参数。
- .match() 将返回匹配结果数组 - 包含第一个匹配项,如果使用全局标志,则包含所有匹配项。
- 当未找到匹配项时,match 方法返回 null。
[ ‘1e3’, index: 0, input: ‘1e3’, groups: undefined ]
match 方法返回一个包含字符串中找到的所有匹配项的数组。
以下是该信息的完整分类:
“1e3” 是与 /\d+e\d+/i 正则表达式匹配的值。
index: 0 是字符串中匹配值的索引。
input: ‘1e3’ 是匹配的原始字符串。
groups: undefined 是匹配的组。
-
基本语法
const regex = /pattern/flags;
• /pattern/:两个斜杠之间的内容是正则表达式的模式(pattern)。
• flags(可选):跟在最后一个斜杠后面的标志(如 g、i、m等),用于修改匹配行为。Regex 对此有一个标志 - i 标志,代表“不敏感”。 -
与 RegExp构造函数的区别
JavaScript 支持两种方式创建正则表达式:
• 字面量形式(使用 /…/):
const regex = /ab+c/i; // 匹配 “ab+c”,忽略大小写
• 构造函数形式(使用 new RegExp()):
const regex = new RegExp(“ab+c”, “i”); // 同上
区别:
• 字面量形式 (/…/) 在代码解析时编译,适合静态模式。
• RegExp构造函数在运行时编译,适合动态生成的正则表达式。 -
斜杠 /在正则模式中的转义
如果正则表达式本身需要匹配 /字符,必须用 ``转义:
const regex = /https://example.com/; // 匹配 “https://example.com”
• 在 RegExp构造函数中,由于模式是字符串,斜杠不需要额外转义:
const regex = new RegExp(“https://example\.com”); // 同上 -
总结
形式 | 语法 | 适用场景
—|—|—
正则字面量 | /pattern/flags | 固定模式,代码更简洁
RegExp构造函数 | new RegExp(“pattern”, “flags”) | 动态模式(如用户输入)
关键点:
• /…/是正则表达式的字面量表示法,类似于字符串的 "…"或 ‘…’。
• 斜杠 /本身不是正则语法的一部分,只是 JavaScript 的语法标记。
• 如果模式包含 /,必须转义为 /。
注意需要使用反斜杠字符 \ 来转义 + 符号,因为它在正则表达式中具有特殊含义。
在正则表达式中,简写字符类允许你匹配特定字符,而无需在模式中写下这些字符。
速记字符类前面带有反斜杠(\)。
字符类 \s 将匹配任何空白字符。
举例
const regex = /±\s/; 按顺序匹配特定字符
将你的 ±\s 模式转变为字符类。const regex = /[±\s]/; 匹配特定字符中的一个
const regex = /±\s/;
const regex = /[±\s]/;
这两个 JavaScript 正则表达式看起来相似但有重要区别:
-
const regex = /±\s/;
• 匹配确切的字符序列:加号 +后跟连字符 -后跟一个空白字符
• 例如会匹配 "± "这样的字符串
• 这里的 +是转义加号,-是普通连字符,\s是空白字符 -
const regex = /[±\s]/;
• 匹配字符类中的任意一个字符:
• +普通加号(在字符类中不需要转义)
• -连字符(因为它位于字符类的末尾,所以被解释为字面量)
• \s任何空白字符
• 例如会匹配 “+”、"-"或任何空白字符(空格、制表符等)
关键区别:
• 第一个是匹配特定序列,第二个是匹配字符类中的任意单个字符
• 在字符类 []中,+不需要转义,-如果在开头或结尾也不会有特殊含义
正则表达式还可以采用特定标志来改变模式匹配行为。
标志被添加在结束的 / 之后。 g 标志代表“全局”,它将告诉模式在找到匹配项后继续查找。
String
JavaScript 提供了 .replace()
方法,使你可以用另一个字符串替换字符串中的字符。 此方法接受两个参数。 第一个参数是要替换的字符序列,可以是字符串或正则表达式模式。 第二个参数是替换匹配序列的字符串。
由于字符串是不可变的,replace 方法返回一个替换字符后的新字符串。
字符串有一个 .match()
方法,它接受一个正则表达式参数。 .match() 将返回匹配结果数组 - 包含第一个匹配项,如果使用全局标志,则包含所有匹配项。
match 方法返回一个包含字符串中找到的所有匹配项的数组。
当未找到匹配项时,match 方法返回 null。 (JavaScript 中的 null 是一个特殊原语,表示故意缺少某个值。 在布尔上下文中,null 被认为是假的,在条件语句中其计算结果为 false。)
toLowerCase()
将字符串转换为小写时,可以使用 toLowerCase() 方法。 此方法返回转换为小写的调用字符串值。
Math
Math.abs()
是一种内置的 JavaScript 方法,它将返回数字的绝对值。
Array
Array.from()
container 的 innerHTML 属性设置为空字符串。 这将清除该输入容器的所有内容
container.innerHTML = ‘’;
清除input的值:budgetNumberInput.value = ‘’;
清除 output 元素的文本。 你可以通过将 innerText 属性设置为空字符串来实现此目的。
output.innerText = ‘’;
innerText 和 innerHTML 的区别在于 innerText 不会呈现 HTML 元素,而是将标签和内容显示为原始文本。