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

javascript Vue

news 2025/10/31 6:02:45

DOM对象

什么是DOM

DOM(Document Object Model)：文档对象模型，就是Javascript将HTML文档的各个组成部分封装为对象，通过修改HTML元素的内容和样式动态改变页面。
在这里插入图片描述

如何获取DOM对象

  • 获取DOM中的元素对象（Element对象/标签）
  • 操作标签的属性

标签对象通过document获取，document对象通过Window对象获取，以下是document对象提供的用于获取element元素对象的ApI如下
在这里插入图片描述
这里展示了getElementById,其余API调用类似。

  • 获取元素对象
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>test</title>
</head>
<body><div id="001">hhh</div><script>var divdemo = document.getElementById("001")alert(divdemo)</script>
</body>
</html>

在这里插入图片描述

  • 操作属性

如何查看文档呢？

<script>var divdemo = document.getElementById("001")divdemo.innerHTML = "hxw 好帅"alert(divdemo)
</script>

发现内容从’hhh’变成了’hxw 好帅’,我爱敲代码

在这里插入图片描述

案例

需求

  • 点亮灯泡
  • 将所有的div标签的白哦前提内容后面加上：Yes！
  • 使得所有的复选框被选中状态

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img id="h1" src="../img/off.gif"> <br><br><div class="cls">hxw 好帅</div> <br><div class="cls">hxw 将会是一个优秀的程序员</div> <br><input type="checkbox" name="hobby"> 敲代码<input type="checkbox" name="hobby"> 打篮球<input type="checkbox" name="hobby"> 打乒乓球
</body>
</html>

效果如下
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/c1dbeca59b154d9f838a2ce01f53cfe2.png

需求实现

  • 点亮灯泡：其实本质就是换一张图片，需要获取img标签对象来操作src属性
  • 在div标签内容的后面添加Yes！并且是红色字体：获取原有内容，通过font属性进行修改字体颜色。通过标签名获取所有的div标签，对div标签进行遍历处理，获取div标签的原有内容，然后追加very good,替换掉原来的内容
  • 将所有的复选框内容呈现被选中的状态：checkbox标签对象的checked属性设置为true可以使得复选框被选中，所以通过name属性获取所有的checkbox标签，遍历所有的chekbox标签，设置每个checkbox标签的checked属性

代码实现

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img id="h1" src="../img/off.gif"> <br><br><div class="cls">hxw 好帅</div> <br><div class="cls">hxw 将会是一个优秀的程序员</div> <br><input type="checkbox" name="hobby"> 敲代码<input type="checkbox" name="hobby"> 打篮球<input type="checkbox" name="hobby"> 打乒乓球<script>var img = document.getElementById("h1");img.src = "../img/on.gif"var divs = document.getElementsByTagName('div');for(let i = 0; i < divs.length; i ++){const div = divs[i];div.innerHTML += "<font color = 'red'> Yes! </font>"}var ins = document.getElementsByName('hobby');for(let i = 0; i < ins.length; i ++){const check = ins[i];check.checked = true;}</script>
</body>
</html>

js事件

什么是事件

当我想要在游戏中注册一个新账号，输入用户名，页面会给我一个反馈，我这个用户名是否存在以及是否符合其命名规则，要想实现这个就需要使用事件。理解以下的概念

  1. 事件（Event）
    在 JavaScript 中，事件是指在用户与页面交互时或在页面加载过程中发生的特定动作，比如点击按钮、提交表单、页面加载完成等。

  2. 事件处理函数（Event Handler）
    事件处理函数是当特定事件发生时执行的函数。例如，当用户点击一个按钮时，可能会触发一个函数来处理这个点击事件。

  3. 事件监听（Event Listener）
    事件监听是一种机制，用于监听和响应用户操作或其他事件。通过事件监听，你可以指定在特定事件发生时应该执行哪个函数。

事件绑定的方式

事件绑定的函数，只有在事件触发的时候才会被调用

  • 方式一：通过html中的事件属性进行绑定
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="button" id="btn1" value="事件绑定1" onclick="on()"><script>function on(){alert("按钮一被点击了...")}</script>
</body>
</html>

在这里插入图片描述

  • 方式二：通过DOM中Element元素的事件属性进行绑定
    html中的标签被加载成element对象，可以通过对象的属性来操作标签的属性。此时可以添加一个按钮
 <input type="button" id="btn2" value="事件绑定2"><script>document.getElementById("btn2").onclick = function(){alert("按钮二被点击...")}</script>

在这里插入图片描述

相关文章：

javascript Vue

DOM对象 什么是DOM DOM(Document Object Model)&#xff1a;文档对象模型&#xff0c;就是Javascript将HTML文档的各个组成部分封装为对象&#xff0c;通过修改HTML元素的内容和样式动态改变页面。 如何获取DOM对象 获取DOM中的元素对象&#xff08;Element对象/标签&…...

编程日记 2024/11/13 8:23:37

《揭秘观察者模式：作用与使用场景全解析》

在软件开发的世界中&#xff0c;设计模式就像是建筑师手中的蓝图&#xff0c;指导着软件系统的构建。其中&#xff0c;观察者模式是一种极为重要且广泛应用的设计模式。今天&#xff0c;我们就来深入探讨一下观察者模式的作用和使用场景。 一、观察者模式是什么&#xff1f; …...

编程日记 2024/11/13 8:18:33

【QT常用技术讲解】优化网络链接不上导致qt、qml界面卡顿的问题

前言 qt、qml项目经常会涉及访问MySQL数据库、网络服务器&#xff0c;并且界面打开时的初始化过程就会涉及到链接Mysql、网络服务器获取数据&#xff0c;如果网络不通&#xff0c;卡个几十秒&#xff0c;会让用户觉得非常的不爽&#xff0c;本文从技术调研的角度讲解解决此类问…...

编程日记 2024/11/13 8:16:31

下划线命名json数组转java对象

/*** 将驼峰式命名的字符串转换为下划线方式* @param camelCase* @return*/ private static String toUnderlineCase(String camelCase) {return StrUtil.toUnderlineCase(camelCase); }/*** 下划线-赋值给-驼峰* @param source 源数据* @param target 目标数据*/ public stati…...

编程日记 2024/11/13 8:14:29

实测运行容器化Nginx服务器

文章目录 前言一、拉取Nginx镜像二、创建挂载目录三、运行容器化Nginx服务器四、访问网页测试 总结 前言 运行容器化Nginx服务器&#xff0c;首先确保正确安装docker&#xff0c;并且已启动运行&#xff0c;具体安装docker方法见笔者前面的博文《OpenEuler 下 Docker 安装、配…...

编程日记 2024/11/13 8:13:28

显示器接口种类 | 附图片

显示器接口类型主要包括VGA、DVI、HDMI、DP和USB Type-C等。 VGA、DVI、HDMI、DP和USB Type-C 1. 观察 VGA接口:15针 DP接口&#xff1a;在DP接口旁&#xff0c;都有一个“D”型的标志。 电脑主机&#xff1a;DP(D) 显示器&#xff1a;VGA(15针) Ref https://cloud.tenc…...

编程日记 2024/11/13 8:12:26

C++初阶——list

一、什么是list list是一个可以在序列的任意位置进行插入和删除的容器&#xff0c;并且可以进行双向迭代。list的底层是一个双向链表&#xff0c;双向链表可以将它们包含的每个元素存储在不同且不相关的存储位置。通过将每个元素与前一个元素的链接和后一个元素的链接关联起来&…...

编程日记 2024/11/13 8:11:25

软件设计师-排序算法

冒泡排序 每一趟冒泡排序&#xff0c;从第0个元素开始&#xff0c;和后面的元素比较&#xff0c;如果大于就交换&#xff0c;否则不变&#xff0c;每次冒泡可以把最大的元素放到最后一个&#xff0c;第一次冒泡的终点是n-1,第二趟的是n-2,直到最后剩下一个元素。时间复杂度O(n…...

编程日记 2024/11/13 8:10:24

即插即用篇 | YOLOv8 引入 代理注意力 AgentAttention

Transformer模型中的注意力模块是其核心组成部分。虽然全局注意力机制具有很强的表达能力，但其高昂的计算成本限制了在各种场景中的应用。本文提出了一种新的注意力范式，称为“代理注意力”（Agent Attention），以在计算效率和表示能力之间取得平衡。代理注意力使用四元组(Q…...

编程日记 2024/11/13 8:07:21

020_Servlet_Mysql学生选课系统(新版)_lwplus87

摘 要 随着在校大学生人数的不断增加&#xff0c;教务系统的数据量也不断的上涨。针对学生选课这一环节&#xff0c;本系统从学生网上自主选课以及课程发布两个大方面进行了设计&#xff0c;基本实现了学生的在线信息查询、选课功能以及教师对课程信息发布的管理等功能&…...

编程日记 2024/11/13 8:05:19

LabVIEW导入并显示CAD DXF文件图形 程序见附件

LabVIEW导入并显示CAD DXF文件图形 程序见附件 LabVIEW导入并显示CAD DXF文件图形 程序见附件 - 北京瀚文网星科技有限公司 LabVIEW广泛应用于自动化、数据采集、图形显示等领域。对于涉及CAD图形的应用&#xff0c;LabVIEW也提供了一些方法来导入和显示CAD DXF文件&#x…...

编程日记 2024/11/13 7:58:12

《云原生安全攻防》-- K8s安全防护思路

从本节课程开始&#xff0c;我们将正式进入防护篇。通过深入理解K8s提供的多种安全机制&#xff0c;从防守者的角度&#xff0c;运用K8s的安全最佳实践来保障K8s集群的安全。 在这个课程中&#xff0c;我们将学习以下内容&#xff1a; K8s安全防护思路&#xff1a;掌握K8s自身提…...

编程日记 2024/11/13 7:57:11

鸿蒙系统的发展及开发者机遇

鸿蒙系统&#xff08;HarmonyOS&#xff09;凭借其分布式架构和跨设备协同能力&#xff0c;展现出强大的发展潜力&#xff0c;在智能手机、智能穿戴、车载、家居等行业领域应用日益广泛&#xff0c;已逐渐形成与安卓、iOS 三足鼎立的市场格局。 开发者面临的挑战 1. 技术适应与…...

编程日记 2024/11/13 7:52:05

Java | Leetcode Java题解之第556题下一个更大元素III

题目&#xff1a; 题解&#xff1a; class Solution {public int nextGreaterElement(int n) {int x n, cnt 1;for (; x > 10 && x / 10 % 10 > x % 10; x / 10) {cnt;}x / 10;if (x 0) {return -1;}int targetDigit x % 10;int x2 n, cnt2 0;for (; x2 %…...

编程日记 2024/11/13 7:51:05

OSPF动态路由配置实验：实现高效网络自动化

实验主题&#xff1a;OSPF动态路由协议配置 实验背景 OSPF&#xff08;Open Shortest Path First&#xff09;是一种基于链路状态的路由协议&#xff0c;广泛应用于中大型网络中。它采用Dijkstra算法计算最短路径&#xff0c;以确保网络中的路由更新快速、稳定&#xff0c;并能…...

编程日记 2024/11/13 7:44:58

CRM对企业有什么用？如何在实践中有效应用CRM系统？

在现在非常激烈竞争环境中&#xff0c;客户关系管理系统&#xff08;CRM&#xff09; 已经成为很多企业的“必备神器”&#xff0c;它不仅帮助企业高效地管理客户信息&#xff0c;还能提高客户满意度&#xff0c;增强客户忠诚度&#xff0c;最终推动销售增长和业务发展。然而&a…...

编程日记 2024/11/13 7:43:56

渗透测试之 -- Linux基础

声明 学习视频来自B站UP主 泷羽sec,如涉及侵泷羽sec权马上删除文章笔记的只是方便各位师傅学习知识,以下网站涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负 一、Openssl 1、openssl passwd -1 123 openssl一个开源加密工具包&#xff0c;用于各种解密、加…...

编程日记 2024/11/13 7:42:56

【excel】easy excel如何导出动态列

动态也有多重含义&#xff1a;本文将描述两种动态场景下的解决方案 场景一&#xff1a;例如表头第一列固定为动物&#xff0c;且必定有第二列&#xff0c;第二列的表头可能为猫 也可能为狗&#xff1b;这是列数固定&#xff0c;列名不固定的场景&#xff1b; 场景二&#xff1…...

编程日记 2024/11/13 7:41:54

[Linux] 进程间通信

进程间通信&#xff08;Inter-Process Communication, IPC&#xff09;是指不同进程之间的数据交换与协作。在Linux中&#xff0c;进程间通信有多种方式&#xff0c;每种方式都有其适用的场景。本文将介绍Linux中常见的几种进程间通信方法&#xff1a;管道&#xff08;Pipe&…...

编程日记 2024/11/13 7:40:54

【蓝桥等考C++真题】蓝桥杯等级考试C++组第13级L13真题原题(含答案)-最大的数

CL13 最大的数(20 分) 输入一个有 n 个无重复元素的整数数组 a&#xff0c;输出数组中最大的数。提示&#xff1a;如使用排序库函数 sort()&#xff0c;需要包含头文件#include 。输入&#xff1a; 第一行是一个正整数 n(2<n<20)&#xff1b; 第二行包含 n 个不重复的整…...

编程日记 2024/11/13 7:39:53

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

编程新知 2025/10/17 17:04:15

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

编程新知 2025/10/25 6:07:35

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

编程新知 2025/10/26 2:48:36

使用LangGraph和LangSmith构建多智能体人工智能系统

现在&#xff0c;通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战&#xff0c;比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...

编程新知 2025/10/27 21:35:56

Redis：现代应用开发的高效内存数据存储利器

一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发&#xff0c;其初衷是为了满足他自己的一个项目需求&#xff0c;即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源&#xff0c;Redis凭借其简单易用、…...

编程新知 2025/7/20 11:10:16

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

编程新知 2025/10/30 11:52:17

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...

编程新知 2025/9/13 22:57:57

tauri项目，如何在rust端读取电脑环境变量

如果想在前端通过调用来获取环境变量的值&#xff0c;可以通过标准的依赖&#xff1a; std::env::var(name).ok() 想在前端通过调用来获取&#xff0c;可以写一个command函数&#xff1a; #[tauri::command] pub fn get_env_var(name: String) -> Result<String, Stri…...

编程新知 2025/10/21 18:05:03

C++实现分布式网络通信框架RPC(2)——rpc发布端

有了上篇文章的项目的基本知识的了解&#xff0c;现在我们就开始构建项目。 目录 一、构建工程目录 二、本地服务发布成RPC服务 2.1理解RPC发布 2.2实现 三、Mprpc框架的基础类设计 3.1框架的初始化类 MprpcApplication 代码实现 3.2读取配置文件类 MprpcConfig 代码实现…...

编程新知 2025/10/29 10:49:27

AD学习（3）

1 PCB封装元素组成及简单的PCB封装创建 封装的组成部分&#xff1a; &#xff08;1&#xff09;PCB焊盘&#xff1a;表层的铜 &#xff0c;top层的铜 &#xff08;2&#xff09;管脚序号&#xff1a;用来关联原理图中的管脚的序号&#xff0c;原理图的序号需要和PCB封装一一…...

编程新知 2025/10/27 23:49:55