JavaWeb(5)——HTML、CSS、JS 快速入门

一、JavaScript 对象 

 

 

二、JavaScript BOM对象 和 DOM对象 

关于BOM主要对 Window 和 location 进行说明: 

 

三、JavaScript 事件监听

事件绑定

 

 

常见事件

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-事件-案例</title>
</head>
<body><img id="light" src="img/off.gif"> <br><input type="button" value="点亮" onclick="on()"> <input type="button"  value="熄灭" onclick="off()"><br> <br><input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()"><br> <br><input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏<br><input type="button" value="全选" onclick="checkAll()"> <input type="button" value="反选" onclick="reverse()"></body><script>//1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; -- onclickfunction on(){//a. 获取img元素对象var img = document.getElementById("light");//b. 设置src属性img.src = "img/on.gif";}function off(){//a. 获取img元素对象var img = document.getElementById("light");//b. 设置src属性img.src = "img/off.gif";}//2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; -- onfocus , onblurfunction lower(){//小写//a. 获取输入框元素对象var input = document.getElementById("name");//b. 将值转为小写input.value = input.value.toLowerCase();}function upper(){//大写//a. 获取输入框元素对象var input = document.getElementById("name");//b. 将值转为大写input.value = input.value.toUpperCase();}//3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclickfunction checkAll(){//a. 获取所有复选框元素对象var hobbys = document.getElementsByName("hobby");//b. 设置选中状态for (let i = 0; i < hobbys.length; i++) {const element = hobbys[i];element.checked = true;}}function reverse(){//a. 获取所有复选框元素对象var hobbys = document.getElementsByName("hobby");//b. 设置未选中状态for (let i = 0; i < hobbys.length; i++) {const element = hobbys[i];element.checked = false;}}</script>
</html>
练习 

 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>轮播图点击切换</title><style>* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}</style>
</head><body><div class="slider"><div class="slider-wrapper"><img src="./images/slider01.jpg" alt="" /></div><div class="slider-footer"><p>对人类来说会不会太超前了?</p><ul class="slider-indicator"><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev">&lt;</button><button class="next">&gt;</button></div></div></div><script>// 1. 初始数据const sliderData = [{ url: './images/slider01.jpg', title: '对人类来说会不会太超前了?', color: 'rgb(100, 67, 68)' },{ url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说!', color: 'rgb(43, 35, 26)' },{ url: './images/slider03.jpg', title: '真正的jo厨出现了!', color: 'rgb(36, 31, 33)' },{ url: './images/slider04.jpg', title: '李玉刚:让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },{ url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },{ url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },{ url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题!!!', color: 'rgb(53, 29, 25)' },{ url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢!', color: 'rgb(99, 72, 114)' },]// 1. 获取元素 const img = document.querySelector('.slider-wrapper img')const p = document.querySelector('.slider-footer p')let i = 0  // 信号量 控制图片的张数// 2. 开启定时器// console.log(sliderData[i])  拿到对应的对象啦setInterval(function () {i++// 无缝衔接位置  一共八张图片,到了最后一张就是 8, 数组的长度就是 8if (i >= sliderData.length) {i = 0}// console.log(i)// console.log(sliderData[i])// 更换图片路径  img.src = sliderData[i].url// 把字写到 p里面p.innerHTML = sliderData[i].title// 小圆点// 先删除以前的activedocument.querySelector('.slider-indicator .active').classList.remove('active')// 只让当前li添加activedocument.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')}, 1000)</script>
</body></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><textarea name="" id="" cols="30" rows="10">用户注册协议欢迎注册成为京东用户!在您注册过程中,您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议,请您务必仔细阅读、充分理解协议中的条款内容后再点击同意(尤其是以粗体或下划线标识的条款,因为这些条款可能会明确您应履行的义务或对您的权利有所限制)。【请您注意】如果您不同意以下协议全部或任何条款约定,请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息,阅读并点击同意上述协议且完成全部注册流程后,即表示您已充分阅读、理解并接受协议的全部内容,并表明您同意我们可以依据协议内容来处理您的个人信息,并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方(详情查看</textarea><br><button class="btn" disabled>我已经阅读用户协议(5)</button><script>// 1. 获取元素const btn = document.querySelector('.btn')// console.log(btn.innerHTML)  butto按钮特殊用innerHTML// 2. 倒计时let i = 5// 2.1 开启定时器let n = setInterval(function () {i--btn.innerHTML = `我已经阅读用户协议(${i})`if (i === 0) {clearInterval(n)  // 关闭定时器// 定时器停了,我就可以开按钮btn.disabled = falsebtn.innerHTML = '同意'}}, 1000)</script>
</body></html>

四、JavaScript 内存分配机制

 

 

 

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

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

相关文章

libcurl库使用实例

libcurl libcurl是一个功能强大的跨平台网络传输库&#xff0c;支持多种协议&#xff0c;包括HTTP、FTP、SMTP等&#xff0c;同时提供了易于使用的API。 安装 ubuntu18.04平台安装 sudo apt-get install libcurl4-openssl-dev实例 这个示例使用libcurl库发送一个简单的HTTP …

数据结构——树

数据结构——树 树&#xff08;Tree&#xff09;是一种常见的数据结构&#xff0c;用于存储具有层级关系的数据。树由一组称为节点&#xff08;Node&#xff09;的元素组成&#xff0c;节点之间通过边连接。其中一个节点被称为根节点&#xff08;Root&#xff09;&#xff0c;根…

数据库的基本查询(二)

目录 一、简单查询二、高级查询2.1 分页2.3 结果集排序2.4 去重 三、条件查询3.1 算术运算符3.2 比较运算符3.3 逻辑运算符3.4 按位运算符3.5 WHERE子句的注意事项 一、简单查询 # 查询t_emp表的所有字段 SELECT * FROM t_emp;# 查询t_emp表的指定字段 SELECT ename, empno FR…

谷歌Bard:ChatGPT之外的第三选择

2023年年初&#xff0c;为了对应ChatGPT方面的压力&#xff0c;谷歌Bard仓促上线&#xff0c;此后便进入了低调前行。目前为止已经迭代了9个版本&#xff0c;也就是在近期的版本更新中支持了中文&#xff08;简体/繁体&#xff09;语言&#xff0c;对国内用户可以说又友好了一步…

RabbitMQ log 文件过大 解决方案

log文件地址 C:\Users\Administrator\AppData\Roaming\RabbitMQ\log\rabbitlocalhost.log log文件作用 rabbitlocalhost.log MQ启动、连接日志 rabbitlocalhost-sasl.log saal用来记录Erlang相关的信息&#xff0c;例如查看Erlang崩溃的报告 RabbitMQ官网Log相关介绍 Log…

物理层——数据通信基础知识

1.典型的数据通信模型 2.数据通信的相关术语 2.1 三种通讯方式 2.2 数据传输方式 2.3 常用编码方式&#xff08;数字信号&#xff09; 曼彻斯特编码 将一个码元分成两个相等的间隔&#xff1b; 前一个间隔为 低电平 &#xff0c;后一个间隔为 高电平 表示码元1&#xff1b; 码…

el-dialog 添加loading;avue-form 表单插槽

效果: 第一步&#xff1a;custom-class"publishDialog" 新起一个类名 <el-dialog title"发布配置" custom-class"publishDialog" :visible.sync"publishDialogVisible" width"800px" :append-to-body"true":b…

实现高效数据处理的利器:Java Stream API 的妙用与性能优化

Java作为一门强大的编程语言&#xff0c;提供了丰富的工具和库来处理数据。其中&#xff0c;Java Stream API&#xff08;流式API&#xff09;是一项强大而灵活的特性&#xff0c;它能够简化数据处理过程&#xff0c;并提供高效的性能。本文将深入探索Java Stream API的使用方法…

babel兼容低版本游览器

文章目录 1. webpack项目的搭建2. babel 命令行使用3. babel的预设与编译器流程4. babel项目中配置4.1 babel-loader与插件的使用4.2 babel-preset使用 5. 游览器兼容性使用5.1 browserslist工具与编写规则5.2 browserslist配置5.3 优化babel的配置文件 6. polyfill6.1 useBuil…

Flutter——最详细(NavigationRail)使用教程

NavigationRail 简介 一个 Material Design 小部件&#xff0c;旨在显示在应用程序的左侧或右侧&#xff0c;以便在少量视图&#xff08;通常在三到五个视图之间&#xff09;之间导航。 使用场景&#xff1a; 通过Row属性&#xff0c;左侧或右侧菜单栏按钮 属性作用onDestinati…

Halcon机器视觉-15种常用缺陷检测实例

一、Halcon 15种常用缺陷检测实例分享 缺陷检测是一种通过计算机视觉技术来检测产品制造过程中的缺陷的方法。该技术可以检测出产品表面的缺陷&#xff0c;如裂纹、凹陷、划痕、气泡等&#xff0c;并且可以实时监测和诊断制造过程中的问题。在制造业中&#xff0c;机器视觉缺陷…

GRE实验

题目参考&#xff1a; 实验步骤&#xff1a; 第一步&#xff1a;地址规划拓扑设计&#xff0c;配置IP地址 R1配置&#xff1a; <Huawei>system-view [Huawei]sy R1 [R1]int g 0/0/1 [R1-GigabitEthernet0/0/1]ip address 192.168.1.1 24 [R1-GigabitEthernet0/0/1]in…

智能电表数据采集器

智能电表数据采集器是一种用于采集智能电表数据的设备&#xff0c;它可以将智能电表的数据传输到远程服务器上&#xff0c;以便进行数据分析和监控。智能电表数据采集器的主要功能是采集智能电表的实时数据&#xff0c;并将其发送到远程服务器上&#xff0c;从而实现对智能电表…

拷贝class文件内容发生报错(二)

又粘到项目里几个文件&#xff0c;这回报错信息是&#xff1a; 16:29:34.892 [main] INFO org.ansj.util.MyStaticValue - init ambiguity to env value is : dict/ansj/ambiguity.dic 16:29:34.892 [main] INFO org.ansj.util.MyStaticValue - init synonyms to env valu…

【windows测试通过】关于Godot导入外部音频文件的问题

file.open(filepath, file.READ) var buffer file.get_buffer(file.get_len()) #put data into audiostreamsample var stream AudioStreamSample.new() stream.data buffer 代码给出&#xff0c;还没有测试过。(godot3.2测试未通过&#xff09; 在运行时轻松加载外部音频…

业务安全分析第19期 | 今年暑假,博物馆的门票为什么抢不到?

目录 “黄牛”&#xff1a;加价代预约、加价售票、兜售野导游套餐 “黄牛”倒票带来的危害 “黄牛”为什么能够抢到票 博物馆与“黄牛”的门票攻防 “黄牛”使用的作弊软件有什么特征 技术上防范“黄牛”的作弊软件抢票 遏制“黄牛”倒票给博物馆带来的收益 随着暑期参观…

rust版本更新错误记录:Os { code: 5, kind: PermissionDenied }

使用 rustup update 更新 rust 版本时遇到错误&#xff1a; info: cleaning up downloads & tmp directories thread ‘main’ panicked at ‘Unable to clean up C:\Users\GrapeX.rustup\tmp: Os { code: 5, kind: PermissionDenied, message: “拒绝访问。” }’, src\ut…

[nlp] GPT

一、联合训练任务 1.1 NTP(Next Token Prediction) gpt预训练的一个目标函数有两个,第一个是基础的下一个词预测任务,选择一个K窗口,将窗口中的K个词的embedding作为条件去预测下一个词。 1.2 TC(Text Classification) 第二个是一个分类任务,一段话给一个标签,然后去预…

js面试题

js相关面试题 1.js的数据类型及判断及如何强制转换基本数据类型存储区别数据类型的判断如何转化数据类型 2.说说变量提升3.数组的基本方法4.数组去重5.什么是尾递归6.数组扁平化7.12和1-2是什么8.清除字符串前后空格和去除所有空格1.去除字符串首尾的空格2.去除字符串中所有的空…

离线数据仓库

一、数据仓库 1.数据仓库的概念 1)数据仓库的特点: 面向主题的:对数据进行整合、分析和归类的抽象集成的:将不同数据源的数据(业务数据、外部系统数据、埋点日志)经过统一编码、规范命名、字段类型转换等操作,整合到仓库相对稳定的:根据业务场景实时更新、一般会被长…