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

文章目录

  • 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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/49682.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

docker笔记4-镜像理解

docker笔记4-镜像理解

docker笔记4-镜像理解 一、镜像原理之联合文件系统二、镜像原理之分层理解三、commit镜像 一、镜像原理之联合文件系统 UnionFS&#xff08;联合文件系统&#xff09;: Union文件系统&#xff08;UnionFS&#xff09;是一种分层、轻量级并且高性能的文件系统&#xff0c;它支持…
阅读更多...
vue2使用univerjs

vue2使用univerjs

1、univerjs Univer 提供了一个全面的企业级文档与数据协同的解决方案&#xff0c;支持电子表格、文本文档和演示幻灯片三大核心文档类型。通过灵活的 API 和插件机制&#xff0c;开发者可以在 Univer 的基础上进行个性化功能的定制和扩展&#xff0c;以适应不同用户在不同场景…
阅读更多...
大语言模型训练过程中，怎么实现算力共享，采用什么分片规则和共享策略

大语言模型训练过程中，怎么实现算力共享，采用什么分片规则和共享策略

目录 大语言模型训练过程中，怎么实现算力共享，采用什么分片规则和共享策略 一、算力共享的实现 二、分片规则与共享策略 三、总结 DeepSpeed、Megatron-LM是什么 DeepSpeed ZeRO技术一般不实现调参的 ZeRO技术的实现方式 ZeRO与调参的关系 NCCL是什么 一、NCCL概…
阅读更多...
【JavaEE】Spring Boot 自动装配原理(源码分析)

【JavaEE】Spring Boot 自动装配原理(源码分析)

一. 前言 我们在写Spring Boot的程序代码的时候, 可以注入很多我们没有定义过的Bean.例如: Autowired private ApplicationContext applicationContext; Autowired public DataSourceTransactionManager transactionManager; Autowired public AutowireCapableBeanFactory …
阅读更多...
UnrealEngine摸索(一)——Static Mesh Actor不会阻挡可见性查询解决方法

UnrealEngine摸索(一)——Static Mesh Actor不会阻挡可见性查询解决方法

实际开发中遇到题目所述的问题&#xff0c;对解决方法进行记录 文章目录 问题描述解决方案 问题描述 博主在开发FPS游戏过程中&#xff0c;使用 LineTraceSingleByChannel 进行可视性检测&#xff0c;即其参数 Channel Visiblity&#xff0c;对于命中的第一个物体应用相应的处…
阅读更多...
Web开发：VUE3小白开发入门基础笔记

Web开发：VUE3小白开发入门基础笔记

一、基本语法 1.click 后端路由&#xff1a;api/GetDataList 返回值&#xff1a;Value 前端要做的事&#xff1a; ①拿到Value值&#xff0c;传到a标签 ②a标签有一个按钮&#xff0c;每点击一下&#xff0c;Value的值加一。 前端需要用click语法 【代码】 <template>…
阅读更多...
《0基础》学习Python——第十八讲__爬虫/＜1＞

《0基础》学习Python——第十八讲__爬虫/＜1＞

一、什么是爬虫 爬虫是一种网络数据抓取的技术。通过编写程序&#xff08;通常使用Python&#xff09;&#xff0c;爬虫可以自动化地访问网页&#xff0c;解析网页内容并提取出所需的数据。爬虫可以用于各种用途&#xff0c;如搜索引擎的索引&#xff0c;数据分析和挖掘&#x…
阅读更多...
Vue 3项目安装Element-Plus

Vue 3项目安装Element-Plus

Element Plus 是一个基于 Vue 3 的现代前端UI框架&#xff0c;它旨在提升开发体验&#xff0c;并为开发者提供高效、优雅的组件。如果你正在使用 Vue 3 进行项目开发&#xff0c;那么安装和集成 Element Plus 是一个不错的选择。在本文中&#xff0c;博主将详细介绍如何在 Vue …
阅读更多...
[嵌入式Linux]-常见编译框架与软件包组成

[嵌入式Linux]-常见编译框架与软件包组成

嵌入式常见编译框架与软件包组成 1.嵌入式开发准备工作 主芯片资料包括&#xff1a; 主芯片资料 主芯片开发参考手册&#xff1b;主芯片数据手册&#xff1b;主芯片规格书&#xff1b; 硬件参考 主芯片硬件设计参考资料&#xff1b;主芯片配套公板硬件工程&#xff1b; 软件…
阅读更多...
OD C卷 - 数据单元的变量替换

OD C卷 - 数据单元的变量替换

数据单元的变量替换&#xff08;100&#xff09; 输入描述&#xff1a; 输入一行数据&#xff0c;用逗号分割每个单元格&#xff0c;尾部没有逗号&#xff0c;最多26个单元格&#xff0c;对应编号A-Z&#xff1b;每个单元格内容&#xff1a;字母、数字、<> 单元格引用&…
阅读更多...
linux 公平调度关键点记录

linux 公平调度关键点记录

1.如何计算进程的物理运行时间和虚拟运行时间 调度周期（sched period)nice valuerealruntime（实际运行时间)vruntime(虚拟运行时间）10ms05ms5ms05ms5ms10ms-209.996ms0.1153ms150.004ms0.11378ms可以看到对于-20和15两个进程的情况下，其虚拟运行时间是基本相同的，这正式cf…
阅读更多...
今天我们聊聊C#的并发和并行

今天我们聊聊C#的并发和并行

并发和并行是现代编程中的两个重要概念&#xff0c;它们可以帮助开发人员创建高效、响应迅速、高性能的应用程序。在C#中&#xff0c;这些概念尤为重要&#xff0c;因为该语言提供了对多线程和异步编程的强大支持。本文将介绍C#中并发和并行编程的关键概念、优点&#xff0c;并…
阅读更多...
如何使用录屏软件录制声音？超实用的4个电脑录屏方法！

如何使用录屏软件录制声音？超实用的4个电脑录屏方法！

在现代的数字时代&#xff0c;录屏软件已经成为我们日常工作和学习中不可或缺的工具之一。无论是制作教学视频、演示软件功能&#xff0c;还是记录游戏过程&#xff0c;录屏软件都能提供极大的帮助。但许多人在使用录屏软件时&#xff0c;可能会遇到一个问题&#xff1a;如何将…
阅读更多...
Godot游戏制作 03世界构建1.0版

Godot游戏制作 03世界构建1.0版

在game场景&#xff0c;删除StaticBody2D节点&#xff0c;添加TileMap节点 添加TileSet图块集 添加TileSet源 拖动图片到图块&#xff0c;自动创建图块 使用橡皮擦擦除。取消橡皮擦后按住Shift创建大型图块。 进入选择模式&#xff0c;TileMap选择绘制&#xff0c;选中图块后在…
阅读更多...
Leetcode 721.账户合并(hash+dfs)☆

Leetcode 721.账户合并(hash+dfs)☆

思路&#xff1a; 最核心的地方在于如何合并&#xff1f;这里是通过具有相同的email进行账户的合并&#xff0c;这个相同的email类似于图中的共同节点将两个账户连接起来&#xff0c;所以将原来 账户名 -> 邮件1 邮件2.。。变成hash 邮件1 ->账户id1&#xff0c;账户id2…
阅读更多...
Meta革命性发布：Llama 3.1——性能最强的AI开源模型，开启智能新时代！

Meta革命性发布：Llama 3.1——性能最强的AI开源模型，开启智能新时代！

前言 &#x1f680; Meta隆重推出Llama 3.1&#xff1a;迄今为止性能最强的AI模型 Meta公司近日发布了他们最新的AI语言模型——Llama 3.1&#xff0c;这一消息迅速在科技界掀起了波澜。作为猫头虎技术团队&#xff0c;我们将为大家详细解析Llama 3.1的强大功能及其应用前景。…
阅读更多...
Android APP 音视频（02）MediaProjection录屏与MediaCodec编码

Android APP 音视频（02）MediaProjection录屏与MediaCodec编码

说明&#xff1a; 此MediaProjection 录屏和编码实操主要针对Android12.0系统。通过MediaProjection获取屏幕数据&#xff0c;将数据通过mediacodec编码输出H264码流&#xff08;使用ffmpeg播放&#xff09;&#xff0c;存储到sd卡上。 1 MediaProjection录屏与编码简介 这里…
阅读更多...
HTML5 + CSS3

HTML5 + CSS3

HTML 基础 准备开发环境 1.vscode 使用 新建文件夹 ---> 左键拖入 vscode 中 2.安装插件 扩展 → 搜索插件 → 安装打开网页插件&#xff1a;open in browser汉化菜单插件&#xff1a;Chinese 3.缩放代码字号 放大,缩小&#xff1a;Ctrl 加号&#xff0c;减号 4.设…
阅读更多...
机械设计基础B(学习笔记)

机械设计基础B(学习笔记)

绪论 机构&#xff1a;是一些具备各自特点的和具有确定的相对运动的基本组合的统称。 组成机构的各个相对运动部分称为构件。构件作为运动单元&#xff0c;它可以是单一的整体&#xff0c;也可以是由几个最基本的事物&#xff08;通常称为零件&#xff09;组成的刚性结构。 构件…
阅读更多...
机器学习笔记1——监督学习和无监督学习

机器学习笔记1——监督学习和无监督学习

一、机器学习的定义 1.机器学习的定义&#xff1a;计算机程序从经验E中学习&#xff0c;解决某一任务T进行某一性能度量P&#xff0c;通过P测定在T上的表现因经验E而提高。 2.在各种不同类型的学习算法中&#xff0c;主要分为监督学习和无监督学习。 监督学习&#xff1a;就是我…
阅读更多...
最新文章

Copyright @ 2022~2023