当前位置： 首页 > article >正文

前端快速入门——JavaScript函数、DOM

article 2026/1/21 11:35:06

1.JavaScript函数

函数是一段可重复使用的代码块，它接受输入(参数)、执行特定任务，并返回输出。
函数使用语法

<scricpt>function add(a,b){return a+b;}let c=add(5,10);console.log(c);
</script>

2.JavaScript事件

在这里插入图片描述
JavaScript绑定事件的方法：
（1）HTML属性
（2）DOM属性
（3）addEventListener方法

    <button id="btn" onclick="showAlert()">这是一个点击事件按钮</button><script>function showAlert() {alert("按钮被点击了！");}// alert("这是一个弹窗！");</script>

3.JavaScrip DOM

在 Web 开发中，DOM 通常与 JavaScript 一起使用。
当网页被加载时，浏览器会创建页面的文档对象模型，也就是 DOM(Document Object Model)
每个 HTML或 XML, 文档都可以被视为一个文档树，文档树是整个文档的层次结构表示。
文档节点是整个文档树的根节点。
DOM为这个文档树提供了一个编程接口，开发者可以使用JavaScript 来操作这个树状结构。
在这里插入图片描述

<body><div id="fox1">这是一个ID选择器标签</div><div class="box2">这是一个类选择器标签</div><div>这是一个普通的DIV标签</div><button id="btn1">按钮1</button><script>let element_id=document.getElementById("fox1");console.log(element_id);element_id.style.color="red";element_id.style.fontSize="30px";element_id.style.backgroundColor="blue";let element_class=document.getElementsByClassName("box2");console.log(element_class[0]);let element_tag=document.getElementsByTagName("div")[0];console.log(element_tag);element_id.innerHTML="修改内容";// DOM属性绑定事件let btn_element=document.getElementById("btn1");btn_element.onclick=function(){alert("按钮被点击了！");}// DOM属性绑定事件的另一种写法      btn_element.addEventListener("click",function(){alert("按钮被点击了！2222");});// DOM属性绑定事件的另一种写法btn_element.addEventListener("click",click_event)function click_event(){alert("按钮被点击了！3333");}</script></body>

在这里插入图片描述

相关文章：

前端快速入门——JavaScript函数、DOM

1.JavaScript函数 函数是一段可重复使用的代码块&#xff0c;它接受输入(参数)、执行特定任务&#xff0c;并返回输出。 <scricpt>function add(a,b){return ab;}let cadd(5,10);console.log(c); </script>2.JavaScript事件 JavaScript绑定事件的方法&#xff1…...

编程日记 2026/1/21 11:35:06

shell 编程之循环语句

目录 一、for 循环语句 二、while 循环语句 三、until 循环语句 四、总结扩展 1. 循环对比 2. 调试技巧 3. 易混淆点解析 4. 进阶技巧 一、for 循环语句 1. 基础概念 含义&#xff1a; 用于 遍历一个已知的列表&#xff0c;逐个执行同一组命令 核心作用&#xff1a…...

编程日记 2026/1/15 1:35:12

10【模块学习】LCD1602（二）：6路温度显示+实时时钟

项目&#xff1a;6路温度显示实时时钟 1、6路温度显示①TempMenu.c文件的代码②TempMenu.h文件的代码③main.c文件的代码④Timer.c文件的代码⑤Delay.c文件的代码⑥Key.c文件的代码 2、实时时钟显示①BeiJingTime.c文件的代码②BeiJingTime.h文件的代码③main.c文件的代码如下④…...

编程日记 2026/1/14 15:53:31

Linux基础14

一、搭建LAMP平台 安装包&#xff1a;mariadb-server、php、php-mysqlnd、php-xml、php-json 搭建平台步骤&#xff1a; ​ php步骤&#xff1a; ​ 创建网页&#xff1a;index.php ​ 网页内编写php语言&#xff1a; > ​ eg&#xff1a;<?p…...

编程日记 2026/1/14 21:15:58

PDF处理控件Aspose.PDF指南：使用 C# 从 PDF 文档中删除页面

需要从 PDF 文档中删除特定页面&#xff1f;本快速指南将向您展示如何仅用几行代码删除不需要的页面。无论您是清理报告、跳过空白页&#xff0c;还是在共享前自定义文档&#xff0c;C# 都能让 PDF 操作变得简单高效。学习如何以编程方式从 PDF 文档中选择和删除特定页面&#…...

编程日记 2026/1/14 22:12:53

如何在不同版本的 Elasticsearch 之间以及集群之间迁移数据

作者&#xff1a;来自 Elastic Kofi Bartlett 当你想要升级一个 Elasticsearch 集群时&#xff0c;有时候创建一个新的独立集群并将数据从旧集群迁移到新集群会更容易一些。这让用户能够在不冒任何停机或数据丢失风险的情况下&#xff0c;在新集群上使用所有应用程序测试其所有…...

编程日记 2026/1/17 11:29:36

Vue3生命周期钩子详解

Vue 3 的生命周期钩子函数允许开发者在组件不同阶段执行特定逻辑。与 Vue 2 相比&#xff0c;Vue 3 在 Composition API 中引入了新名称&#xff0c;并废弃了部分钩子。以下是详细说明&#xff1a; 一、Vue 3 生命周期阶段与钩子函数 1. 组件创建阶段 setup() 替代 Vue 2 的 b…...

编程日记 2026/1/14 2:36:51

Day08【基于预训练模型分词器实现交互型文本匹配】

基于预训练模型分词器实现交互型文本匹配 目标数据准备参数配置数据处理模型构建主程序测试与评估总结 目标 本文基于预训练模型bert分词器BertTokenizer&#xff0c;将输入的文本以文本对的形式&#xff0c;送入到分词器中得到文本对的词嵌入向量&#xff0c;之后经过若干网络…...

编程日记 2026/1/20 19:16:04

npm和npx的作用和区别

npx 和 npm 是 Node.js 生态系统中两个常用的工具&#xff0c;它们有不同的作用和使用场景。 1. npm&#xff08;Node Package Manager&#xff09; 作用&#xff1a; npm 是 Node.js 的包管理工具&#xff0c;主要用于&#xff1a; 安装、卸载、更新项目依赖&#xff08;包&a…...

编程日记 2026/1/15 1:21:26

mysql按条件三表并联查询

下面为你呈现一个 MySQL 按条件三表并联查询的示例。假定有三个表&#xff1a;students、courses 和 enrollments&#xff0c;它们的结构和关联如下&#xff1a; students 表&#xff1a;包含学生的基本信息&#xff0c;有 student_id 和 student_name 等字段。courses 表&…...

编程日记 2025/12/27 18:24:36

C++学习之金融类安全传输平台项目git

目录 1.知识点概述 2.版本控制工具作用 3.git和SVN 4.git介绍 5.git安装 6.工作区 暂存区 版本库概念 7.本地文件添加到暂存区和提交到版本库 8.文件的修改和还原 9.查看提交的历史版本信息 10.版本差异比较 11.删除文件 12.本地版本管理设置忽略目录 13.远程git仓…...

编程日记 2026/1/17 18:08:57

CCF CSP 第36次（2024.12）（1_移动_C++）

CCF CSP 第36次&#xff08;2024.12&#xff09;&#xff08;1_移动_C&#xff09; 解题思路&#xff1a;思路一&#xff1a; 代码实现代码实现&#xff08;思路一&#xff09;&#xff1a; 时间限制&#xff1a; 1.0 秒 空间限制&#xff1a; 512 MiB 原题链接 解题思路&…...

编程日记 2026/1/22 4:14:14

7.thinkphp的路由

一&#xff0e;路由简介 1. 路由的作用就是让URL地址更加的规范和优雅&#xff0c;或者说更加简洁&#xff1b; 2. 设置路由对URL的检测、验证等一系列操作提供了极大的便利性&#xff1b; 3. 路由是默认开启的&#xff0c;如果想要关闭路由&#xff0c;在config/app.php配置…...

编程日记 2026/1/19 13:50:00

Browser-use 是连接你的AI代理与浏览器的最简单方式

AI MCP 系列 AgentGPT-01-入门介绍 Browser-use 是连接你的AI代理与浏览器的最简单方式 AI MCP(大模型上下文)-01-入门介绍 AI MCP(大模型上下文)-02-awesome-mcp-servers 精选的 MCP 服务器 AI MCP(大模型上下文)-03-open webui 介绍 是一个可扩展、功能丰富且用户友好的…...

编程日记 2025/11/29 8:59:07

（五）机器学习---决策树和随机森林

在分类问题中还有一个常用算法&#xff1a;就是决策树。本文将会对决策树和随机森林进行介绍。 目录 一.决策树的基本原理 &#xff08;1&#xff09;决策树 &#xff08;2&#xff09;决策树的构建过程 &#xff08;3&#xff09;决策树特征选择 &#xff08;4&#xff0…...

编程日记 2026/1/17 22:42:48

【项目管理】第16章 项目采购管理-- 知识点整理

项目管理-相关文档&#xff0c;希望互相学习&#xff0c;共同进步 风123456789&#xff5e;-CSDN博客 &#xff08;一&#xff09;知识总览 项目管理知识域 知识点&#xff1a; &#xff08;项目管理概论、立项管理、十大知识域、配置与变更管理、绩效域&#xff09; 对应&…...

编程日记 2026/1/18 3:41:00

2025年4月15日 百度一面 面经

目录 1. 代理相关 从静态代理到动态代理 2. cglib可以代理被final修饰的类吗，为什么 3. JVM 体系结构 4. 垃圾回收算法 5. 什么是注解 如何使用 底层原理 6. synchronized和reentrantlock 7. 讲一下你项目中 redis的分布式锁 与java自带的锁有啥区别 8. post 请求和 ge…...

编程日记 2025/11/29 1:00:25

从图像“看出动作”

&#x1f4d8; 第一部分&#xff1a;运动估计&#xff08;Motion Estimation&#xff09; &#x1f9e0; 什么是运动估计&#xff1f; 简单说&#xff1a; &#x1f449; 给你一段视频&#xff0c;计算机要“看懂”里面什么东西动了、往哪动了、有多快。 比如&#xff1a; 一…...

编程日记 2026/1/16 20:25:07

鸿蒙案例---生肖抽卡

案例源码&#xff1a; Zodiac_cards: 鸿蒙生肖抽奖卡片 效果演示 初始布局 1. Badge 角标组件 此处为语雀内容卡片&#xff0c;点击链接查看&#xff1a;https://www.yuque.com/kevin-nzthp/lvl039/rccg0o4pkp3v6nua 2. Grid 布局 // 定义接口 interface ImageCount {url:…...

编程日记 2026/1/21 23:47:38

达梦数据库-学习-18-ODBC数据源配置（Linux）

一、环境信息 名称值CPU12th Gen Intel(R) Core(TM) i7-12700H操作系统CentOS Linux release 7.9.2009 (Core)内存4G逻辑核数2DM版本1 DM Database Server 64 V8 2 DB Version: 0x7000c 3 03134284194-20240703-234060-20108 4 Msg Versi…...

编程日记 2025/11/29 5:37:29

Conda 入门指令教程

Conda 入门指令教程 Conda 是一个强大的包和环境管理工具&#xff0c;广泛应用于数据科学和机器学习项目中。本文将介绍 Conda 的常用指令&#xff0c;帮助你快速上手。 1. Conda 基础操作 查看 Conda 版本 conda --version显示当前安装的 Conda 版本。 更新 Conda conda…...

编程日记 2025/11/28 4:08:05

宿舍管理系统(servlet+jsp)

宿舍管理系统(servletjsp) 宿舍管理系统是一个用于管理学生宿舍信息的平台&#xff0c;支持超级管理员、教师端和学生端三种用户角色登录。系统功能包括宿舍管理员管理、学生管理、宿舍楼管理、缺勤记录、添加宿舍房间、心理咨询留言板、修改密码和退出系统等模块。宿舍管理员…...

编程日记 2026/1/16 21:43:28

驱动-兼容不同设备-container_of

驱动兼容不同类型设备 在 Linux 驱动开发中&#xff0c;container_of 宏常被用来实现一个驱动兼容多种不同设备的架构。这种设计模式在 Linux 内核中非常常见&#xff0c;特别 是在设备驱动模型中。linux内核的主要开发语言是C&#xff0c;但是现在内核的框架使用了非常多的面向…...

编程日记 2026/1/16 18:40:46

MySQLQ_数据库约束

目录 什么是数据库约束约束类型NOT NULL 非空约束UNIQUE 唯一约束PRIMARY KEY主键约束FOREIGN KEY外键约束CHECK约束DEFAULT 默认值(缺省)约束 什么是数据库约束 数据库约束就是对数据库添加一些规则&#xff0c;使数据更准确&#xff0c;关联性更强 比如加了唯一值约束&#…...

编程日记 2026/1/16 18:41:29

责任链设计模式（单例+多例）

目录 1. 单例责任链 2. 多例责任链 核心区别对比 实际应用场景 单例实现 多例实现 初始化 初始化责任链 执行测试方法 欢迎关注我的博客&#xff01;26届java选手&#xff0c;一起加油&#x1f498;&#x1f4a6;&#x1f468;‍&#x1f393;&#x1f604;&#x1f602; 最近在…...

编程日记 2026/1/16 20:25:14

控制反转（IoC）和依赖注入（DI）实现及常用注解

在Spring框架里&#xff0c;控制反转&#xff08;IoC&#xff09;和依赖注入&#xff08;DI&#xff09;是核心特性&#xff0c;以下将介绍实现它们的各种方式以及常用注解。 配置文件方式 详细版&#xff1a; Spring IoC与DI详解&#xff1a;从Bean概念到手写实现 XML 配置…...

编程日记 2026/1/14 22:45:40

DeepSeek 接入 Excel 完整教程

一、前期准备 1.1 获取 DeepSeek API 密钥 注册 DeepSeek 平台 访问 DeepSeek 官方网站&#xff08;或指定的 API 服务平台&#xff0c;如硅基流动等&#xff09;。若尚未注册&#xff0c;按照平台指引创建新账号并完成登录。 创建 API 密钥 进入用户控制面板&#xff0c;找到…...

编程日记 2026/1/6 2:18:34

林纳斯·托瓦兹：Linux系统之父 Git创始人

名人说&#xff1a;路漫漫其修远兮&#xff0c;吾将上下而求索。—— 屈原《离骚》 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 林纳斯托瓦兹&#xff1a;Linux之父、Git创始人 一、传奇人物的诞生 1. 早年生活与家…...

编程日记 2026/1/16 22:23:18

8. RabbitMQ 消息队列 + 结合配合 Spring Boot 框架实现 “发布确认” 的功能

8. RabbitMQ 消息队列 结合配合 Spring Boot 框架实现 “发布确认” 的功能 文章目录 8. RabbitMQ 消息队列 结合配合 Spring Boot 框架实现 “发布确认” 的功能1. RabbitMQ 消息队列 结合配合 Spring Boot 框架实现 “发布确认” 的功能1.1 回退消息 2.备用交换机3. API说…...

编程日记 2026/1/19 2:13:07

维港首秀！沃飞长空AE200亮相香港特别行政区

4月13日-16日&#xff0c;第三届香港国际创科展在香港会议展览中心盛大举办。 作为国内领先、国际一流的eVTOL主机厂&#xff0c;沃飞长空携旗下AE200批产构型登陆国际舞台&#xff0c;以前瞻性的创新技术与商业化应用潜力&#xff0c;吸引了来自全球17个国家及地区的行业领袖…...

编程日记 2026/1/14 19:00:34