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

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

news 2026/2/7 12:19:10

文章目录

  • 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

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

编程新知 2026/2/5 4:23:49

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

编程新知 2026/1/20 14:36:39

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

编程新知 2026/1/31 5:09:27

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

编程新知 2025/11/26 13:15:57

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2026/2/1 4:53:36

多种风格导航菜单 HTML 实现（附源码）

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

编程新知 2026/2/2 2:49:11

Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

编程新知 2026/2/5 4:34:41

DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

编程新知 2025/9/24 13:35:36

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

编程新知 2026/1/23 11:53:19

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

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

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