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

javascript Vue

news 2025/9/14 1:52:47

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

多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

编程新知 2025/9/13 18:53:26

【Java学习笔记】Arrays类

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

编程新知 2025/8/12 18:09:54

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...

编程新知 2025/9/13 17:43:37

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

编程新知 2025/8/22 22:34:43

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

编程新知 2025/8/7 7:06:16

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

编程新知 2025/9/12 23:21:54

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

编程新知 2025/9/4 1:57:51

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

编程新知 2025/9/4 8:01:03

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

编程新知 2025/7/9 20:53:30

安卓基础（Java 和 Gradle 版本）

1. 设置项目的 JDK 版本 方法1&#xff1a;通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分&#xff0c;设置 Gradle JDK 方法2&#xff1a;通过 Settings File → Settings... (或 CtrlAltS)…...

编程新知 2025/7/10 0:32:50