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

javascript Vue

news 2026/5/24 10:13:16

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

Applite：3分钟搞定macOS应用管理的终极图形化解决方案

Applite&#xff1a;3分钟搞定macOS应用管理的终极图形化解决方案 【免费下载链接】Applite User-friendly GUI macOS application for Homebrew Casks 项目地址: https://gitcode.com/gh_mirrors/ap/Applite 还在为macOS上的软件安装和管理头疼吗&#xff1f;每次都要打…...

编程新知 2026/5/24 9:58:10

BabelDOC终极指南：如何完美保留PDF格式的专业文档翻译工具

BabelDOC终极指南&#xff1a;如何完美保留PDF格式的专业文档翻译工具 【免费下载链接】BabelDOC Yet Another Document Translator 项目地址: https://gitcode.com/GitHub_Trending/ba/BabelDOC 你是否曾为翻译PDF文档而烦恼&#xff1f;格式错乱、公式变形、排版混乱—…...

编程新知 2026/5/24 9:09:36

猫抓浏览器扩展：如何高效捕获并下载网页媒体资源的终极指南

猫抓浏览器扩展&#xff1a;如何高效捕获并下载网页媒体资源的终极指南 【免费下载链接】cat-catch 猫抓 浏览器资源嗅探扩展 / cat-catch Browser Resource Sniffing Extension 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 在当今以流媒体为主导的互联…...

编程新知 2026/5/24 8:56:47

UABEA深度指南：Unity AssetBundle资源提取与序列化层逆向分析

1. 为什么Unity开发者总在“找资源”上浪费半天——UABEA不是万能钥匙&#xff0c;但它是你最该先摸清的那把 Unity项目交付后&#xff0c;美术资源、音频片段、UI图集、甚至脚本逻辑&#xff0c;常常被打包进AssetBundle&#xff08;.unity3d&#xff09;、Resources文件夹或更…...

编程新知 2026/5/24 8:08:37

量子机器学习在基因组分类中的实践：特征映射与模型选择指南

1. 项目概述&#xff1a;当量子计算遇上基因组学如果你和我一样&#xff0c;既对量子计算的神秘力量感到好奇&#xff0c;又长期在生物信息学的数据海洋里“游泳”&#xff0c;那么“量子机器学习”这个交叉领域绝对值得你投入时间。这听起来像是科幻小说的情节&#xff0c;但现…...

编程新知 2026/5/24 6:49:44

电信计费系统AI Agent重构实战：7天完成规则引擎迁移，零业务中断验证报告

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;电信计费系统AI Agent重构实战&#xff1a;7天完成规则引擎迁移&#xff0c;零业务中断验证报告 传统电信计费系统长期依赖硬编码规则引擎&#xff08;如 Drools 7.10&#xff09;&#xff0c;平均响应…...

编程新知 2026/5/24 4:52:43

量子计算数学基础：希尔伯特空间、张量积与密度算子核心解析

1. 量子计算的数学基石&#xff1a;从希尔伯特空间谈起搞量子计算&#xff0c;不管是做算法设计、硬件实现还是理论研究&#xff0c;绕不开的第一座大山就是它的数学语言。这不像经典编程&#xff0c;学个语法和数据结构就能上手。量子世界有自己的一套“语法规则”&#xff0c…...

编程新知 2026/5/24 4:50:42

BU-CVKit：模块化计算机视觉框架赋能跨物种动物行为分析

1. 项目概述&#xff1a;从实验室到旷野&#xff0c;一个框架的野心在计算机视觉研究领域&#xff0c;尤其是动物行为学和生态学方向&#xff0c;我们常常面临一个尴尬的局面&#xff1a;针对小鼠开发的追踪算法&#xff0c;拿到斑马鱼身上就水土不服&#xff1b;为猕猴设计的姿…...

编程新知 2026/5/24 3:59:09

告别双系统！用WSL2+Ubuntu20.04+ROS Noetic，在Windows上丝滑运行AirSim仿真（保姆级避坑指南）

在Windows上构建WSL2ROSAirSim一体化仿真环境&#xff1a;从零避坑到实战 对于机器人开发者而言&#xff0c;跨平台仿真环境的搭建往往意味着无尽的配置噩梦。当我在研究生课题中首次尝试将AirSim与ROS联调时&#xff0c;经历了整整两周的黑暗时期——双系统切换导致工作流断裂…...

编程新知 2026/5/24 1:58:25

用Python处理DREAMER脑电数据集：从.mat文件到.npy文件的完整实战教程

用Python处理DREAMER脑电数据集&#xff1a;从.mat文件到.npy文件的完整实战教程在情感计算与神经科学交叉领域&#xff0c;DREAMER数据集因其同时包含脑电信号&#xff08;EEG&#xff09;和情感评分而备受研究者青睐。但原始数据以.mat格式存储&#xff0c;这种MATLAB专属格式…...

编程新知 2026/5/24 1:35:39