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

javascript Vue

news 2026/2/2 23:27:20

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

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

编程新知 2026/1/31 7:06:47

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

编程新知 2026/1/23 21:10:28

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

编程新知 2026/2/1 2:31:16

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2026/1/19 22:49:48

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

编程新知 2025/12/3 9:38:15

零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

编程新知 2026/1/21 12:29:04

学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

编程新知 2026/1/31 14:38:09

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

编程新知 2026/1/21 19:46:26

关键领域软件测试的突围之路：如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

编程新知 2026/1/27 13:20:11

sipsak：SIP瑞士军刀！全参数详细教程！Kali Linux教程！

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

编程新知 2026/1/29 8:51:33