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

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

news 2025/7/7 16:07:12

文章目录

  • 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

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

编程新知 2025/7/7 0:41:18

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

编程新知 2025/7/2 22:42:45

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

编程新知 2025/7/7 12:15:03

PL0语法，分析器实现！

简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...

编程新知 2025/7/7 3:26:15

什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

编程新知 2025/6/24 5:44:40

MySQL账号权限管理指南：安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

编程新知 2025/6/21 13:00:47

云原生玩法三问：构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

编程新知 2025/7/7 15:50:53

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

编程新知 2025/7/5 0:41:11

Mysql8 忘记密码重置，以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

编程新知 2025/7/6 16:44:09

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

编程新知 2025/7/4 21:35:36