文章目录

  • 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 是匹配的组。

  1. ​​基本语法​​
    const regex = /pattern/flags;
    • ​​/pattern/​​:两个斜杠之间的内容是正则表达式的模式(pattern)。
    • ​​flags​​(可选):跟在最后一个斜杠后面的标志(如 g、i、m等),用于修改匹配行为。Regex 对此有一个标志 - i 标志,代表“不敏感”。

  2. ​​与 RegExp构造函数的区别​​
    JavaScript 支持两种方式创建正则表达式:
    • ​​字面量形式​​(使用 /…/):
    const regex = /ab+c/i; // 匹配 “ab+c”,忽略大小写
    • ​​构造函数形式​​(使用 new RegExp()):
    const regex = new RegExp(“ab+c”, “i”); // 同上
    ​​区别​​:
    • 字面量形式 (/…/) 在​​代码解析时​​编译,适合静态模式。
    • RegExp构造函数在​​运行时​​编译,适合动态生成的正则表达式。

  3. ​​斜杠 /在正则模式中的转义​​
    如果正则表达式本身需要匹配 /字符,必须用 ``转义:
    const regex = /https://example.com/; // 匹配 “https://example.com”
    • 在 RegExp构造函数中,由于模式是字符串,斜杠不需要额外转义:
    const regex = new RegExp(“https://example\.com”); // 同上

  4. ​​总结​​
    形式 | 语法 | 适用场景
    —|—|—
    ​​正则字面量​​ | /pattern/flags | 固定模式,代码更简洁
    ​​RegExp构造函数​​ | new RegExp(“pattern”, “flags”) | 动态模式(如用户输入)

​​关键点​​:
• /…/是正则表达式的​​字面量表示法​​,类似于字符串的 "…"或 ‘…’。
• 斜杠 /本身不是正则语法的一部分,只是 JavaScript 的语法标记。
• 如果模式包含 /,必须转义为 /。

注意需要使用反斜杠字符 \ 来转义 + 符号,因为它在正则表达式中具有特殊含义。

在正则表达式中,简写字符类允许你匹配特定字符,而无需在模式中写下这些字符。
速记字符类前面带有反斜杠(\)。
字符类 \s 将匹配任何空白字符。

举例

const regex = /±\s/; 按顺序匹配特定字符
将你的 ±\s 模式转变为字符类。const regex = /[±\s]/; 匹配特定字符中的一个

const regex = /±\s/;
const regex = /[±\s]/;
这两个 JavaScript 正则表达式看起来相似但有重要区别:

  1. const regex = /±\s/;
    • 匹配确切的字符序列:加号 +后跟连字符 -后跟一个空白字符
    • 例如会匹配 "± "这样的字符串
    • 这里的 +是转义加号,-是普通连字符,\s是空白字符

  2. 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 元素,而是将标签和内容显示为原始文本。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/bicheng/94823.shtml
繁体地址,请注明出处:http://hk.pswp.cn/bicheng/94823.shtml
英文地址,请注明出处:http://en.pswp.cn/bicheng/94823.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

本地搭建 Redis/MySQL 并配置国内镜像加速(Docker/原生安装 | macOS/Linux/Windows)

适用人群&#xff1a;前端/后端/数据/测试工程师&#xff1b;需要在单机上快速搭建 Redis 与 MySQL 的开发环境&#xff1b;同时在国内网络环境下加速下载&#xff08;容器镜像、系统包仓库&#xff09;。文章结构&#xff1a;一图流 → TL;DR → Docker 方式 → 原生安装&…

SynClub-百度在海外推出的AI社交产品

本文转载自&#xff1a;SynClub-百度在海外推出的AI社交产品 - Hello123工具导航 ** 一、&#x1f916; SynClub 是什么&#xff1f; SynClub 是百度出海的 AI 社交产品&#xff0c;主打 "打造专属 AI 朋友" 的创新概念&#xff0c;让你在虚拟世界拥有真正懂你的贴…

Easy Rules规则引擎:轻量级Java规则处理实践指南

引言:业务规则与代码解耦的艺术 在现代软件开发中,业务规则频繁变更与核心逻辑稳定性之间的矛盾日益突出。传统硬编码的if-else语句在面对复杂业务场景时会导致: 代码臃肿:成百上千的条件分支难以维护 耦合度高:业务逻辑与系统架构深度绑定 变更成本高:微小规则调整需要…

机器人 - 无人机基础(5) - 飞控中的传感器

目录 一、加速度计 1.1 加速度计原理 1.2 加速度计校准 1.2.1 误差模型 1.2.2 关于MPU6050校准方式 与 代码思路 二、陀螺仪 2.1 陀螺仪原理 2.1.1 科里奥利力 2.1.2 陀螺仪原理 2.2 陀螺仪校准 三、加速度计与陀螺仪滤波部分 四、磁力计 4.1 磁力计原理 4.2 磁力…

PHP - 线程安全 - 疑问与答案

线程安全问题&#xff08;多线程环境需加锁&#xff09; 怎么理解 php有线程安全问题吗要理解 PHP 中的线程安全问题&#xff0c;需要结合 PHP 的运行模式和线程安全的本质来分析&#xff1a;1. 线程安全的本质线程安全问题的核心是&#xff1a;当多个线程同时访问共享资源&…

使用脚本进行监测以nginx状态页为例

1、首先打开nginx的状态页 location /nginx_status {stub_status on;}2、进行访问测试 curl http://127.0.0.1/nginx_statusActive connections: 1 server accepts handled requests1 1 1 Reading: 0 Writing: 1 Waiting: 03、在客户端编写脚本进行数据采集 编写脚本方便采集不…

prettier、eslint、stylelint在项目中使用

prettier 1&#xff09;vscode中使用 a. 安装插件(Prettier)安装成功后&#xff0c;在你打开支持的文件时&#xff0c;下方文件信息状态栏会有prettier标致&#xff1a;双击它或者直接在输出命令窗口那里查看prettier的日志信息&#xff1a;从日志这里可以看出&#xff0c;它是…

【C++】类对象内存布局与大小计算

1. 计算类对象的大小类实例化的对象中只存储成员变量&#xff0c;不存储成员函数&#xff0c;函数要用是通过 this 指针拿的。因为一个类可以实例化出 N 个对象&#xff0c;每个对象的成员变量都可以存储不同的值&#xff0c;但是调用的函数却是同一个。如果每个对象都成员函数…

容易忽视的TOS无线USB助手配网和接入USB使用: PC和TOS-WLink需要IP畅通,

引言&#xff1a;我们常常把重心放在了TOS-WLink的加入路由器&#xff0c;获取IP&#xff1b;常常忽视了其实是要求PC和TOS-WLink需要IP畅通TOS无线USB助手首次蓝牙配网, 无线接入USB设备到电脑, 分为是两个过程&#xff1a;1, 蓝牙连接TOS-WLink&#xff0c;如果配置的WIF…

学习Python中Selenium模块的基本用法(7:元素操作-1)

定位网页元素后&#xff0c;Selenium模块支持点击、发送文本或按键、清除内容等操作。本文以百度网站为例学习并测试这几类操作的基本用法。首先是发送文本或按键&#xff0c;主要用到send_keys函数&#xff0c;如果是发送文本&#xff0c;则直接将文本内容作为函数入参即可&am…

使用MP4视频格式链接地址的自适应视频弹窗实现方案HTML代码

以下是使用MP4视频格式链接地址的自适应视频弹窗实现方案&#xff1a;视频弹窗播放器 使用原生MP4视频格式链接&#xff0c;直接通过HTML5 video元素播放 响应式设计适配不同屏幕尺寸&#xff0c;16:9视频比例保持不变 底部视频列表可横向滚动&#xff0c;点击缩略图切换不同视…

中农具身导航赋能智慧农业!AgriVLN:农业机器人的视觉语言导航

作者&#xff1a;Xiaobei Zhao, Xingqi Lyu, Xiang Li单位&#xff1a;中国农业大学论文标题&#xff1a;AgriVLN: Vision-and-Language Navigation for Agricultural Robots论文链接&#xff1a;https://arxiv.org/pdf/2508.07406v1代码链接&#xff1a;https://github.com/Al…

Zynq开发实践(Verilog、仿真、FPGA和芯片设计)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】zynq最大的优势&#xff0c;就是把arm和fpga结合在一起了。这样一颗soc里面&#xff0c;就可以用软件去驱动外设ip&#xff0c;这是之前没有过的体验…

LabVIEW刺激响应测量解析

​该 LabVIEW 程序用于刺激 - 响应测量&#xff0c;实现测试信号生成、响应采集及测量分析&#xff0c;涵盖信号同步、并行处理等概念&#xff0c;用于设备总谐波失真&#xff08;THD&#xff09;等电信号特性测量场景&#xff0c;借助 LabVIEW 图形化编程优势&#xff0c;将复…

Boosting(提升法)详解

一、引言在集成学习&#xff08;Ensemble Learning&#xff09;中&#xff0c;Boosting&#xff08;提升法&#xff09; 是一种非常经典且强大的方法。它通过将多个弱学习器&#xff08;Weak Learners&#xff09;进行迭代组合&#xff0c;逐步提升整体的预测性能&#xff0c;从…

宠物智能手机PetPhone技术解析:AI交互与健康监测的系统级创新

当你的宠物通过AI自主接听视频通话&#xff0c;背后是计算机视觉与边缘计算的技术融合。全球首款宠物智能手机正在重新定义跨物种人机交互。近日&#xff0c;亚洲宠物展览会上亮相的PetPhone引发了技术社区的广泛关注。这款专为宠物设计的智能设备集成了多项技术创新&#xff0…

智慧零售商品识别误报率↓74%!陌讯多模态融合算法在自助结算场景的落地优化

原创声明&#xff1a;本文为原创技术解析文章&#xff0c;核心技术参数与架构设计引用自 “陌讯技术白皮书”&#xff0c;禁止未经授权的转载与篡改。文中算法逻辑与实战方案均基于陌讯视觉算法 v3.2 版本展开&#xff0c;所有实测数据均来自智慧零售场景下的真实部署环境。一、…

ArcGIS学习-9 ArcGIS查询操作

前置操作加载数据修改坐标系修改单位属性查询单条件查询打开安徽省县界的属性表多条件查询值得注意的是&#xff0c;不加括号和前面加括号&#xff0c;查出来的结果一致&#xff08;35条记录&#xff09;而后面加括号&#xff0c;查询结果与之前的不一致&#xff08;25条记录&a…

A-Level物理课程全解析:知识点、学习计划与培训机构推荐

A-Level物理课程是国际教育体系中的重要科目&#xff0c;不仅为大学理工科专业打下基础&#xff0c;也培养学生的科学思维与实验能力。本文将从核心知识点解析、高效学习计划制定&#xff0c;以及优质培训机构推荐三个方面&#xff0c;为学生和家长提供全面、实用的指南。一、A…

Linux 进阶之性能调优,文件管理,网络安全

一、系统性能调优系统性能调优是 Linux 管理中的关键技能&#xff0c;它能显著提升系统在不同应用场景下的表现。通过针对性的调优&#xff0c;可以解决资源瓶颈问题&#xff0c;提高服务响应速度&#xff0c;优化资源利用率。&#xff08;一&#xff09;CPU 性能调优知识点详解…