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

【前端】JavaScript入门及实战91-95

news 2025/7/5 18:39:20

文章目录

  • 91 DOM
  • 92 事件
  • 93 文档的加载
  • 94 DOM查询(1)
  • 95 图片切换的练习

91 DOM

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"><style>
</style>
</head>
<body><button id="btn">一个按钮</button><script type="text/javascript">/*DOM，全称Document Object Model文档对象模型JS中通过DOM操作HTML文档文档：整个HTML网页文档对象：将网页中的每一个部分都转换为了一个对象模型：表示对象之间的关系，方便我们获取对象节点Node：构成HTML文档最基本的单元常用节点分为四类：1. 文档节点：整个HTML网页文档2. 元素节点：HTML文档中的HTML标签3. 属性节点：元素的属性（id）4. 文本节点：HTML标签中的文本内容nodeName  nodeType  nodeValue文档节点：#document    9        null元素节点：标签名       1        null属性节点：属性名       2       属性值文本节点：#text        3      文本内容浏览器已经为我们提供文档节点对象，这个对象是window属性，可以在页面中直接使用，文档节点代表的是整个网页*/console.log(document); // object HTMLDocument// 获取到button对象var btn = document.getElementById("btn");console.log(btn); // object HTMLDocument// 修改按钮的文字btn.innerHTML = "I'm button";</script>
</body>
</html>

92 事件

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"><style>
</style>
</head>
<body><!--我们可以在事件对应的属性中设置一些js代码，这样当事件被触发时，这些代码会执行这种写法称为结构和行为耦合，不方便维护，不推荐使用--><button id="btn" onclick="alert('别点我');">我是一个按钮（单击）</button><button id="btn" ondblclick="alert('别点我');">我是一个按钮（双击）</button><button id="btn" onmousemove="alert('别点我');">我是一个按钮（鼠标移动）</button><script type="text/javascript">/*事件，就是用户和浏览器之间的交互行为，比如：点击按钮，鼠标移动，关闭窗口*//*可以为按钮的对应事件绑定处理函数的形式来响应事件，这样，当事件被触发时，其对应的函数将会被调用*/// 获取按钮对象var btn = document.getElementById("btn");// 绑定一个单击事件// 像这种为单击事件绑定的函数，我们称为单击响应函数btn.onclick = function(){alert("你还点");};</script>
</body>
</html>

93 文档的加载

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">	<script type="text/javascript">/*浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行，如果将script标签写到页面的上边，在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载，会导致无法获取到DOM对象			*/		// 获取按钮对象var btn = document.getElementById("btn");// 报错btn.onclick = function(){alert("hello");};console.log(btn); // null/*onload事件会在整个页面加载完成之后才触发，为window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了*/window.onload = function(){var btn = document.getElementById("btn");btn.onclick = function(){alert("hello");};console.log(btn);};</script>
</head>
<body>
<button id="btn" onclick="alert('别点我');">我是一个按钮（单击）</button>
<script type="text/javascript">/*将js代码编写到页面下边就是为了，可以在页面加载完毕以后再执行js代码（推荐）		*/var btn = document.getElementById("btn");btn.onclick = function(){alert("hello");};console.log(btn);				</script>	
</body>
</html>

94 DOM查询(1)

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">	<script type="text/javascript">window.onload = function(){// 为id为btn01的按钮绑定一个单击响应函数var btn01 = document.getElementById("btn01");btn01.onclick = function(){// 查找#bj节点var bj = document.getElementById("bj");// 打印bj// innerHTML，通过这个属性可以获取到元素内部的html代码alert(bj.innerHTML);};// 为id为btn02的按钮绑定一个单击响应函数var btn02 = document.getElementById("btn02");btn02.onclick = function(){// 查找所有li节点// getElementsByTagName()可以根据标签名来获取一组元素节点对象// 这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中// 即使查询到的元素只有一个，也会封装到数组中返回var lis = document.getElementsByTagName("li");// 打印lis//alert(lis.length);// 变量lisfor(var i = 0; i < lis.length; i++){alert(lis[i].innerHTML);}				};// 为id为btn03的按钮绑定一个单击响应函数var btn03 = document.getElementById("btn03");btn03.onclick = function(){// 查找name=gender的所有节点var inputs = document.getElementsByName("gender");for(var i = 0; i < inputs.length; i++){/*innerHTML用于获取元素内部的HTML代码，对于自结束标签，这个属性没有意义*///alert(inputs[i].innerHTML);/*如果需要读取元素节点属性，直接使用"元素.属性名"例子：元素.id，元素.value，元素.name注意：class属性不能采用这种方式，读取class属性时需要使用元素.className*/alert(inputs[i].className);}};			};				</script>	
</head>
<body><div id="total"><div class="inner"><p>你喜欢哪个城市</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>成都</li><li>深圳</li></ul><br><p>你喜欢哪款游戏</p><ul id="game"><li id="cj">绝地求生</li><li>王者荣耀</li><li>金铲铲</li><li>保卫萝卜</li></ul><br><p>你收集的操作系统是</p><ul id="phone"><li id="android">Android</li><li>IOS</li><li>鸿蒙</li></ul>						</div>		<div class=""inner>gender:<input type="radio" name="gender" value="male"/>Male<input type="radio" name="gender" value="female"/>Female</div></div>	<div id="btnList"> <div><button id="btn01">查找#bj节点</button></div><div><button id="btn02">查找所有li节点</button></div><div><button id="btn03">查找name=gender的所有节点</button></div></div>
</body>
</html>

95 图片切换的练习

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">	
<script type="text/javascript">window.onload = function(){/*点击按钮切换图片*/// 获取两个按钮var pre = document.getElementById("pre");var next = document.getElementById("next");/*切换图片：修改img标签中src属性*/// 获取img标签var img = document.getElementsByTagName("img")[0];// 创建一个数组，用来保存图片的路径var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg"];// 创建一个变量，保存当前正在显示的图片的索引var index = 0;// 设置提示文字// 获取id为infor的p元素，一共4张图片，当前是第n张var infor = document.getElementById("infor");	pre.onclick = function(){index--;if(index < 0){index = imgArr.length - 1;}img.src = imgArr[index];infor.innerHTML = "一共" + imgArr.length + "张图片，当前是第" + (index + 1) + "张";};next.onclick = function(){index++;if(index > imgArr.length - 1){index = 0;}img.src = imgArr[index];infor.innerHTML = "一共" + imgArr.length + "张图片，当前是第" + (index + 1) + "张";};	};
</script>
<style type="text/css">* {margin: 0;padding: 0;}img {width: 400px;padding: 30px;}#outer {width: 500px;margin: 50px auto;padding: 10px;background-color: grey;text-align: center;}
</style>	
</head>
<body><div id="outer"><p id="infor">一共4张图片，当前是第1张</p><img src="img/1.jpg" alt="古风"/><button id="pre">上一张</button><button id="next">下一张</button></div>
</body>
</html>

相关文章：

【前端】JavaScript入门及实战91-95

文章目录 91 DOM92 事件93 文档的加载94 DOM查询(1)95 图片切换的练习 91 DOM <!DOCTYPE html> <html> <head> <title></title> <meta charset"utf-8"><style> </style> </head> <body><button id&…...

编程日记 2024/7/26 0:09:07

vue3在元素上绑定自定义事件弹出虚拟键盘

最近开发中遇到一个需求: 焊接机器人的屏幕上集成web前端网页, 但是没有接入键盘。这就需要web端开发一个虚拟键盘,在网上找个很多虚拟键盘没有特别适合,索性自己写个简单的 图片: 代码: (代码可能比较垃圾冗余,也没时间优化,凑合看吧) 第一步:创建键盘组件 为了方便使用…...

编程日记 2024/7/26 0:05:03

VMware 上安装 CentOS 7 教程 (包含网络设置)

**建议先看一些我安装VMware的教程&#xff0c;有些网络配置需要做一下 1.打开VMware&#xff0c;创建虚拟机 2.勾选自定义&#xff0c;点击下一步 3.点击下一步 4.勾选“稍后安装操作系统”&#xff0c;点击下一步 5.勾选linux&#xff0c;勾选centos7&#xff0c;点击下一步…...

编程日记 2024/7/26 0:03:01

算法 day4 【双指针、快慢指针、环形链表】链表下

⚡刷题计划day4继续&#xff0c;可以点个免费的赞哦~ 下一期将会开启哈希表刷题专题&#xff0c;往期可看专栏&#xff0c;关注不迷路&#xff0c; 您的支持是我的最大动力&#x1f339;~ 目录 ⚡刷题计划day4继续&#xff0c;可以点个免费的赞哦~ 下一期将会开启哈希表刷题…...

编程日记 2024/7/26 0:02:00

智能音箱的工作原理

智能音箱的工作原理主要涉及到硬件和软件两个层面的协同工作&#xff0c;以及多个关键技术环节的配合。以下是对智能音箱工作原理的详细解析&#xff1a; 一、硬件层面 智能音箱的硬件组成通常包括主控芯片、麦克风阵列、扬声器、Wi-Fi模块和电源等部分。 主控芯片&#xff1…...

编程日记 2024/7/25 23:59:59

国际金融入门：国际收支与平衡表解析

在全球化的经济体系中&#xff0c;国际金融已成为我们日常生活不可或缺的一部分。了解国际金融的基础知识&#xff0c;可以帮助我们更好地理解世界经济的动态和趋势。今天&#xff0c;我们将深入探讨国际收支及其平衡表&#xff0c;以及它们是如何影响国家经济。 国际收支&…...

编程日记 2024/7/25 23:56:56

Modbus转BACnet/IP网关的技术实现与应用

引言 随着智能建筑和工业自动化的快速发展&#xff0c;不同通信协议之间的数据交换也变得日益重要。Modbus和BACnet/IP是两种广泛应用于自动化领域的通信协议&#xff0c;Modbus以其简单性和灵活性被广泛用于工业自动化&#xff0c;而BACnet/IP则在楼宇自动化系统中占据主导地…...

编程日记 2024/7/25 23:53:53

数据库连接断开后，DBAPI的数据源如何自动重连

现象 在使用DBAPI的过程中&#xff0c;如果网络抖动导致数据库连接不上&#xff0c;发现DBAPI的数据源不能重连&#xff0c;必须重启DBAPI才能连上数据库 解决办法 在数据源的连接池参数配置druid.breakAfterAcquireFailurefalse注意在企业版的4.1.1及以上版本才可以配置连接…...

编程日记 2024/7/25 23:49:50

Microsoft 365 Office BusinessPro LTSC 2024 for Mac( 微软Office办公套件)

Microsoft 365 Office BusinessPro LTSC 2024是一款专为商业用户设计的办公软件套件&#xff0c;它集成了Word、Excel、PowerPoint等核心应用&#xff0c;并特别包含了Microsoft Teams这一强大的协作工具。Teams将聊天、会议、文件共享、任务管理等功能整合到一个平台上&#x…...

编程日记 2024/7/25 23:48:49

svelte - 1. 基础知识

svelte中文官网 vue和svelt语法对比 掘金-svelte入门简介 文章目录 1、基本页面框架2、动态属性3、嵌套组件4、@html: 插入html标签，显示真实dom元素5、点击事件 on:click={handleClick}6、响应式声明7、父子组件通信8、if-else（1）if（2）if - else（3）if - else if - else…...

编程日记 2024/7/25 23:46:47

挖掘基于边缘无线协同感知的低功耗物联网 (LPIOT) 的巨大潜力

关键词&#xff1a;边缘无线协同感知、低功耗物联网(LPIOT)、无线混合组网、用电监测、用电计量、多角色、计量插座、无线场景感知、多角色运用、后台边缘层&#xff0c;网络边缘层&#xff0c;场景能效管理&#xff0c;场景能耗计算 在数字化和智能化日益加速的今天&#xff…...

编程日记 2024/7/25 23:45:46

iOS开发设计模式篇第一篇MVC设计模式

目录 1. 引言 2.概念 1.Model 1.职责 2.实现 3.和Controller通信 1.Contrller直接访问Model 2.通过委托(Delegate)模式 3.通知 4.KVO 4.设计的建议 2.View 1.职责 2.实现 3.和Controller通信 1. 目标-动作&#xff08;Target-Action&#xff09;模式 2…...

编程日记 2024/7/25 23:41:42

【React】全面解析：从基础知识到高级应用，掌握现代Web开发利器

文章目录 一、React 的基础知识1. 什么是 React&#xff1f;2. React 的基本概念3. 基本示例 二、React 的进阶概念1. 状态&#xff08;State&#xff09;和属性&#xff08;Props&#xff09;2. 生命周期方法&#xff08;Lifecycle Methods&#xff09;3. 钩子&#xff08;Hoo…...

编程日记 2024/7/25 23:37:39

神经网络之卷积神经网络

目录 一、卷积神经网络概述&#xff1a;1.卷积层&#xff1a;1.1卷积核与神经元&#xff1a;1.2卷积层作用&#xff1a;1.3多输出通道概念&#xff1a; 2.池化层&#xff1a;2.1池化层作用&#xff1a; 3.隐藏层与卷积层、池化层关系&#xff1a; 一、卷积神经网络概述&#xf…...

编程日记 2024/7/25 23:36:37

【Vue实战教程】之Vue工程化项目详解

Vue工程化项目 随着多年的发展&#xff0c;前端越来越模块化、组件化、工程化&#xff0c;这是前端发展的大趋势。webpack是目前用于构建前端工程化项目的主流工具之一&#xff0c;也正变得越来越重要。本章节我们来详细讲解一下如何使用webpack搭建Vue工程化项目。 1 使用we…...

编程日记 2024/7/25 23:35:36

DBeaver Ultimate 22.1.0 连接数据库(MySQL+Mongo+Clickhouse)

前言 继续书接上文 Docker Compose V2 安装常用数据库MySQLMongo&#xff0c;部署安装好之后我本来是找了一个web端的在线连接数据库的工具&#xff0c;但是使用过程中并不丝滑&#xff0c;最终还是选择了使用 DBeaver &#xff0c;然后发现 mongo 还需要许可&#xff0c;又折…...

编程日记 2024/7/25 23:32:32

探索PyMuPDF：Python中的强大PDF处理库

探索PyMuPDF&#xff1a;Python中的强大PDF处理库 背景&#xff1a;为何选择PyMuPDF 在数字化时代&#xff0c;PDF文件因其跨平台的兼容性和对格式的严格保持而成为文档交换的通用格式。然而&#xff0c;处理PDF文件往往需要专门的工具或库。这就是PyMuPDF库的用武之地。PyMuP…...

编程日记 2024/7/25 23:30:30

天润融通AI技术助力汽车行业销售革新，邀约到店率翻倍增长

2024年汽车行业增速放缓&#xff0c;市场竞争加剧。在这种背景下&#xff0c;人工智能的加速渗透&#xff0c;各大汽车厂商纷纷引入大模型技术&#xff0c;对传统营销方式进行升级改造&#xff0c;寻找新的增长空间。 一直以来&#xff0c;汽车厂商投入大量预算&#xff0c;对…...

编程日记 2024/7/25 23:29:29

ubuntu安装mysql8.0

文章目录 ubuntu版本安装修改密码取消root跳过密码验证 ubuntu版本 22.04 安装 更新软件包列表 sudo apt update安装 MySQL 8.0 服务器 sudo apt install mysql-server在安装过程中&#xff0c;系统可能会提示您设置 root 用户的密码&#xff0c;请务必牢记您设置的密码。…...

编程日记 2024/7/25 23:27:27

数字图像处理笔记（三) ---- 傅里叶变换的基本原理

系列文章目录 数字图像处理笔记&#xff08;一&#xff09;---- 图像数字化与显示 数字图像处理笔记&#xff08;二&#xff09;---- 像素加图像统计特征 数字图像处理笔记&#xff08;三) ---- 傅里叶变换的基本原理 文章目录 系列文章目录前言一、傅里叶变换二、离散傅里叶变…...

编程日记 2024/7/25 23:26:26

JavaScript 中的 ES|QL：利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

编程新知 2025/7/4 12:36:00

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

编程新知 2025/7/5 0:21:39

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

编程新知 2025/7/4 14:25:42

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

编程新知 2025/6/20 15:14:31

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

编程新知 2025/6/24 2:55:32

C++.OpenGL （14/64）多光源（Multiple Lights）

多光源（Multiple Lights） 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

编程新知 2025/6/11 3:15:20

【Go语言基础【12】】指针：声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

编程新知 2025/6/21 2:18:57

深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

编程新知 2025/7/4 13:24:26

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

编程新知 2025/7/5 3:23:12

DiscuzX3.5发帖json api

参考文章&#xff1a;PHP实现独立Discuz站外发帖(直连操作数据库)_discuz 发帖api-CSDN博客 简单改造了一下&#xff0c;适配我自己的需求 有一个站点存在多个采集站&#xff0c;我想通过主站拿标题&#xff0c;采集站拿内容 使用到的sql如下 CREATE TABLE pre_forum_post_…...

编程新知 2025/6/21 6:43:48