当前位置: 首页 > news >正文

浏览器端的 js 包括哪几个部分

一、核心语言部分

1. 变量与数据类

变量用于存储数据,在 JavaScript 中有多种数据类型,如基本数据类型(字符串、数字、布尔值、undefined、null)和引用数据类型(对象、数组、函数)。

let name = "John"; // 字符串类型的变量let age = 30; // 数字类型的变量let isStudent = false; // 布尔类型的变量

2. 运算符

包括算术运算符(如 +、-、\*、/)、比较运算符(如 >、<、==、===)、逻辑运算符(如 &&、||、!)等。它们用于对变量和数据进行各种运算和比较。

let a = 5;let b = 3;let sum = a + b; // 使用算术运算符求和let isGreater = a > b; // 使用比较运算符比较大小

3. 控制流语句

条件语句:如`if - else`和`switch`,用于根据不同的条件执行不同的代码块。

let score = 80;if (score >= 90) {console.log("优秀");} else if (score >= 60) {console.log("及格");} else {console.log("不及格");}

4. 循环语句

包括`for`、`while`和`do - while`循环,用于重复执行一段代码。

for (let i = 0; i < 5; i++) {console.log(i);}

二、DOM(文档对象模型)操作部分

1. 节点选择与访问

可以使用多种方法选择 HTML 元素,如`getElementById`、`getElementsByClassName`、`getElementsByTagName`和更现代的`querySelector`及`querySelectorAll`。

let elementById = document.getElementById("my - element");let elementsByClass = document.getElementsByClassName("my - class");let elementsByTag = document.getElementsByTagName("p");let selectedElement = document.querySelector(".my - selector");let selectedElements = document.querySelectorAll("li");

2. 节点修改与创建

可以修改元素的属性、内容和样式。

let element = document.getElementById("my - element");element.textContent = "新的内容";

还可以创建新的元素并添加到文档中。

let newDiv = document.createElement("div");newDiv.textContent = "这是一个新的div";document.body.appendChild(newDiv);

三、BOM(浏览器对象模型)部分

1. 窗口操作

可以操作浏览器窗口,如`window.open`用于打开新的窗口,`window.close`用于关闭当前窗口(在一定条件下)。

let newWindow = window.open("https://www.example.com", "new - window");

2. 导航与历史记录

涉及`window.location`用于获取或设置当前页面的 URL,`window.history`用于操作浏览器的历史记录,如`history.back`(后退)和`history.forward`(前进)。

window.location.href = "https://www.new - url.com";history.back();

四、事件处理部分

1. 事件绑定

可以将函数(事件处理程序)绑定到 HTML 元素的各种事件上,如`click`、`mouseover`、`keydown`等。

let button = document.getElementById("my - button");button.addEventListener("click", function () {console.log("按钮被点击了");});

2. 事件冒泡与捕获

当一个事件在一个元素上被触发时,它会在 DOM 树中传播,这个过程涉及事件冒泡(从子元素向上传播到父元素)和事件捕获(从父元素向下传播到子元素)。可以通过设置`addEventListener`的第三个参数来控制是在冒泡阶段还是捕获阶段处理事件。

let parent = document.getElementById("parent - element");let child = document.getElementById("child - element");// 在捕获阶段处理事件parent.addEventListener("click",function () {console.log("父元素捕获阶段被点击");},true);// 在冒泡阶段处理事件child.addEventListener("click", function () {console.log("子元素冒泡阶段被点击");});

相关文章:

浏览器端的 js 包括哪几个部分

一、核心语言部分 1. 变量与数据类型 变量用于存储数据&#xff0c;在 JavaScript 中有多种数据类型&#xff0c;如基本数据类型&#xff08;字符串、数字、布尔值、undefined、null&#xff09;和引用数据类型&#xff08;对象、数组、函数&#xff09;。 let name "…...

GoogLeNet网络:深度学习领域的创新之作

目录 ​编辑 引言 GoogLeNet的核心创新&#xff1a;Inception模块 Inception模块的工作原理 1x1卷积&#xff1a;降维与减少计算量 1x1卷积的优势 深度分离卷积&#xff1a;计算效率的提升 深度分离卷积的实现 全局平均池化&#xff1a;简化网络结构 全局平均池化的作…...

深入C语言文件操作:从库函数到系统调用

引言 文件操作是编程中不可或缺的一部分&#xff0c;尤其在C语言中&#xff0c;文件操作不仅是处理数据的基本手段&#xff0c;也是连接程序与外部世界的重要桥梁。C语言提供了丰富的库函数来处理文件&#xff0c;如 fopen、fclose、fread、fwrite 等。然而&#xff0c;这些库…...

Java序列化

Java序列化 简单来说&#xff1a; 序列化是将对象的状态信息转换为可以存储或传输的形式&#xff08;如字节序列&#xff09;的过程。在 Java 中&#xff0c;通过序列化可以把一个对象保存到文件、通过网络传输到其他地方或者存储到数据库等。最直接的原因就是某些场景下需要…...

基坑表面位移沉降倾斜自动化监测 非接触式一体化解决机器视觉

基于变焦视觉位移监测仪的基坑自动化监测新方案是一种集成了光学、机械、电子、边缘计算、AI识别以及云平台软件等技术的自动化系统。该方案利用变焦机器视觉原理&#xff0c;结合特殊波段成像识别技术和无源靶标&#xff0c;实现了非接触式大空间、多断面、多测点的高精度水平…...

提升效率:精通Windows命令行的艺术

文章目录 引言1. 基本目录操作命令dir&#xff1a;列出目录内容cd&#xff1a;更改目录mkdir 和 rmdir&#xff1a;创建和删除目录 2. 文件操作命令copy&#xff1a;复制文件或目录move&#xff1a;移动或重命名文件/目录del&#xff1a;删除文件 3. 文件查看命令type&#xff…...

ESP32-S3-devKitC-1 点亮板上的WS2812 RGB LED

ESP32-S3-devKitC-1 板上自带了一个RGB LED&#xff0c;型号为 WS2812。 RGB LED 在板上的位置如下图所示。 为了点亮这个WS2812&#xff0c;需要确定这颗RGB LED连接到哪个GPIO上了。 下面是确定GPIO管脚的过程&#xff1a; 1、根据原理图 2、根据PCB布局图&#xff1a; 程…...

python调用matlab函数(内置 + 自定义) —— 安装matlab.engine

文章目录 一、简介二、安装matlab.engine2.1、基于 CMD 安装2.2、基于 MATLAB 安装&#xff08;不建议&#xff09; 三、python调用matlab函数&#xff08;内置 自定义&#xff09; 一、简介 matlab.engine&#xff08;MATLAB Engine API for Python&#xff09;&#xff1a;…...

CAD c# 生成略缩图预览

代码如下&#xff1a; using (Transaction tr currentdb.TransactionManager.StartTransaction()){//当前数据库开启事务using (Database tempdb new Database(false, true)) //创建临时数据库(两个参数&#xff1a;是否创建符号表&#xff0c;不与当前文档关联){try{Bitmap …...

端点鉴别、安全电子邮件、TLS

文章目录 端点鉴别鉴别协议ap 1.0——发送者直接发送一个报文表明身份鉴别协议ap 2.0——ap1.0 的基础上&#xff0c;接收者对报文的来源IP地址进行鉴别鉴别协议ap 3.0——使用秘密口令&#xff0c;口令为鉴别者和被鉴别者之间共享的秘密鉴别协议ap 3.1——对秘密口令进行加密&…...

汽车电子元件的可靠性保障:AEC-Q102认证

AEC-Q102标准的起源与价值 随着汽车电子系统的日益复杂&#xff0c;电子器件必须能够在极端的温度、湿度、振动和电磁干扰等恶劣条件下保持性能。AEC-Q102标准由汽车电子委员会&#xff08;AEC&#xff09;制定&#xff0c;专门针对LED、激光二极管和光电二极管等光电器件&…...

主成分分析法大全(包括stata+matlab)

数据简介&#xff1a;主成分分析&#xff08;Principal Component Analysis&#xff0c;PCA&#xff09;&#xff0c; 是一种统计方法。通过正交变换将一组可能存在相关性的变量转换为一组线性不相关的变量&#xff0c;转换后的这组变量叫主成分。在实际课题中&#xff0c;为了…...

ubuntu+ros新手笔记(五):初探anaconda+cuda+pytorch

深度学习三件套&#xff1a;初探anacondacudapytorch 系统ubuntu22.04 1.初探anaconda 1.1 安装 安装过程参照【详细】Ubuntu 下安装 Anaconda 1.2 创建和删除环境 创建新环境 conda create -n your_env_name pythonx.x比如我创建了一个名为“py312“的环境 conda cre…...

C++ List(双向链表)

是一个线性链表结构&#xff0c;它的数据由若干个节点构成&#xff0c;每一个节点都包括一个 信息块&#xff08;即实际存储的数据&#xff09;、一个前驱指针和一个后驱指针。它无需分配指定 的内存大小且可以任意伸缩&#xff0c;这是因为它存储在非连续的内存空间中&#…...

ASP.NET|日常开发中读写TXT文本详解

ASP.NET&#xff5c;日常开发中读写TXT文本详解 前言一、读取 TXT 文本1.1 使用StreamReader类 二、写入 TXT 文本2.1 使用StreamWriter类 三、文件编码问题3.1 常见编码格式 四、错误处理和性能考虑4.1 错误处理4.2 性能考虑 结束语优质源码分享 ASP.NET&#xff5c;日常开发中…...

【机器学习】在不确定的光影中:机器学习与概率论的心灵共舞

文章目录 概率与统计基础&#xff1a;解锁机器学习的数据洞察之门前言一、概率论基础1.1 概率的基本概念与性质1.1.1 概率的定义1.1.2 样本空间与事件1.1.3 互斥事件与独立事件1.1.4 概率的计算方法 1.2 条件概率与独立性1.2.1 条件概率1.2.2 独立事件 1.3 随机变量1.3.1 随机变…...

【论文笔记】Editing Models with Task Arithmetic

&#x1f34e;个人主页&#xff1a;小嗷犬的个人主页 &#x1f34a;个人网站&#xff1a;小嗷犬的技术小站 &#x1f96d;个人信条&#xff1a;为天地立心&#xff0c;为生民立命&#xff0c;为往圣继绝学&#xff0c;为万世开太平。 基本信息 标题: Editing Models with Task…...

ESP32外设学习部分--UART篇

前言 在我们学习嵌入式的过程中&#xff0c;uart算是我们用的非常多的一个外设了&#xff0c;我们可以用串口打印信息&#xff0c;也可以用于设备通信&#xff0c;总之串口的作用非常多&#xff0c;我们也非常有必要熟练地去掌握这个外设。 uart的配置 uart的参数配置 uart_…...

ssm-day04 mybatis

mybatis是一个持久层框架&#xff0c;针对的是JDBC的优化 简化数据库操作&#xff0c;能进行单表、多表操作&#xff0c;在这个框架下&#xff0c;需要我们自己写SQL语句 Mapper接口和MapperXML文件就相当于Dao和Dao层的实现 通常将xml文件放在resources包下 &#xff0c;放在…...

es中段是怎么合并的

文章目录 1. 段合并的背景2. 合并的方式2.1TieredMergePolicy 的层次结构2.2 层次的基本规则2.3 如何理解层次&#xff08;tier&#xff09;2.4. 合并过程中的层次示例2.5. TieredMergePolicy 的优势2.6. 小结 3. 合并过程中的优化4. 合并的性能考虑5. 使用 API 手动合并6. 合并…...

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

基于ASP.NET+ SQL Server实现(Web)医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

如何在网页里填写 PDF 表格?

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

听写流程自动化实践,轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

JS设计模式(4):观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

排序算法总结(C++)

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

GitFlow 工作模式(详解)

今天再学项目的过程中遇到使用gitflow模式管理代码&#xff0c;因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存&#xff0c;无论是github还是gittee&#xff0c;都是一种基于git去保存代码的形式&#xff0c;这样保存代码…...

ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]

报错信息&#xff1a;libc.so.6: cannot open shared object file: No such file or directory&#xff1a; #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...

消防一体化安全管控平台:构建消防“一张图”和APP统一管理

在城市的某个角落&#xff0c;一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延&#xff0c;滚滚浓烟弥漫开来&#xff0c;周围群众的生命财产安全受到严重威胁。就在这千钧一发之际&#xff0c;消防救援队伍迅速行动&#xff0c;而豪越科技消防一体化安全管控平台构建的消防“…...