JavaScript事件处理

表单事件

表单事件在HTML表单中触发 (适用于所有 HTML 元素,但该HTML元素需在form表单内):

案例演示1:当文本框获取焦点,文本框背景为红色,当文本框失去焦点,文本框背景为黄色

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<form><input type="text" id="text">
</form><!-- 在这里写JavaScript代码,因为JavaScript是由上到下执行的 -->
<script>var textInput = document.getElementById("text");/* 当文本框获取焦点,文本框背景为红色 */textInput.onfocus = function () {this.style.background = "red";};/* 当文本框失去焦点,文本框背景为绿色 */textInput.onblur = function () {this.style.background = "green";};
</script>
</body>
</html>

注意:这里为什么要用this,你不用this也可以,就直接textInput.style.background = "red";也不是不可以的,但是方法的调用规则就是谁调用this,this就指向谁,这样我们就可以简化代码了

案例演示2:当文本框内容改变时,鼠标离开文本框,自动将文本框的内容输出到控制台

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<form><input type="text" id="text">
</form><!-- 在这里写JavaScript代码,因为JavaScript是由上到下执行的 -->
<script>var textInput = document.getElementById("text");/* 当文本框内容改变时,鼠标离开文本框,自动将文本框的内容输出到控制台 */textInput.onchange = function () {console.log(this.value);};
</script>
</body>
</html>

 案例演示3:当文本框内容改变时,立即将改变的内容输出到控制台

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<form><input type="text" id="text">
</form><!-- 在这里写JavaScript代码,因为JavaScript是由上到下执行的 -->
<script>var textInput = document.getElementById("text");/* 当文本框内容改变时,立即将改变的内容输出到控制台 */textInput.oninput = function () {console.log(this.value);};
</script>
</body>
</html>

案例演示4:如果单击“submit”,则不填写文本字段,将发生警报消息

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<form><input type="text" id="text" required><input type="submit" value="submit">
</form><!-- 在这里写JavaScript代码,因为JavaScript是由上到下执行的 -->
<script>var textInput = document.getElementById("text");/* 如果单击“submit”,则不填写文本字段,将发生警报消息 */textInput.oninvalid = function () {console.log("请您完善表单内容!");};
</script>
</body>
</html>

案例演示6:当提交表单的时候,在控制台输出“表单提交”

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<form id="myform"><input type="submit" id="submit">
</form><!-- 在这里写JavaScript代码,因为JavaScript是由上到下执行的 -->
<script>var myform = document.getElementById("myform");/* 当提交表单的时候,在控制台输出“表单提交” */myform.onsubmit = function () {console.log("表单提交");return false;/* 用来阻止表单提交的,你不写它会跳转请求 */};
</script>
</body>
</html>

setTimeout() 方法:延时器

  • 第一个参数是要执行的函数。
  • 第二个参数指示执行之前的毫秒数。
  • 案例演示:单击按钮,等待 3 秒,然后控制台会输出 "Hello"
    <!DOCTYPE html>
    <html>
    <head><meta charset="UTF-8"><title></title>
    </head>
    <body>
    <button id="btn">按钮</button><!-- 在这里写JavaScript代码,因为JavaScript是由上到下执行的 -->
    <script>var btn = document.getElementById("btn");btn.onclick = function () {// 创建延时器var timer = setTimeout(function () {console.log("Hello");}, 3000);// 清除延时器// clearTimeout(timer);        };
    </script>
    </body>
    </html>
    

    String对象

  • length属性演示:可以用来获取字符串的长度
  • var str = "Hello,World!";
    console.log(str.length);
    

    indexof()方法演示:该方法可以检索一个字符串中是否含有指定内容,如果字符串中含有该内容,则会返回其第一次出现的索引,如果没有找到指定的内容,则返回-1,可以指定一个第二个参数,指定开始查找的位置

  • var str = "Hello,World!";
    console.log(str.indexOf("o"));
    console.log(str.indexOf("o", 5));
    

    lastIndexOf()方法演示:该方法的用法和indexOf()一样,不同的是indexOf是从前往后找,而lastIndexOf是从后往前找,也可以指定开始查找的位置

  • var str = "Hello,World!";
    console.log(str.lastIndexOf("o"));
    console.log(str.lastIndexOf("o", 5));
    

  •  substr()方法演示:该方法用来截取字符串

    参数:

  • 第一个参数:截取开始位置的索引
  • 第二个参数:截取的长度
    var str = "Hello,World!";
    var result = str.substr(6, 6);
    console.log(result);
    
  • substring()方法演示:可以用来截取一个字符串

  • 第一个参数:开始截取位置的索引(包括开始位置)

  • 第二个参数:结束位置的索引(不包括结束位置),如果省略第二个参数,则会截取到后边所有的
  • var str = "Hello,World!";
    var result = str.substring(1, 4);
    console.log(result);
    result = str.substring(1);
    console.log(result);
    result = str.substring(1, -1);
    console.log(result);
    

 split()方法演示:该方法可以将一个字符串拆分为一个数组,需要一个字符串作为参数,将会根据该字符串去拆分数组

var str = "Hello,World!";
var result = str.split(",");
console.log(result);

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

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

相关文章

【JAVA-Day05】深入理解Java数据类型和取值范围

深入理解Java数据类型和取值范围 深入理解Java数据类型和取值范围摘要一、Java的数据类型1.1 存储单位1.2 Java基本数据类型 二、Java的取值范围2.1 变量定义2.2 取值范围验证 三、总结 博主 默语带您 Go to New World. ✍ 个人主页—— 默语 的博客&#x1f466;&#x1f3fb;…

可靠的可视化监控平台应用在那些场景?

可视化监控平台是一种用户友好的工具&#xff0c;可以帮助用户实时监控IT设备的运行状态和网络流量&#xff0c;以及监测安全性和性能指标。它们通常采用图形化界面&#xff0c;使得用户能够直观地了解设备和网络的状态。 以下是一些可视化监控平台常见的应用场景&#xff1a;…

三、创建各个展示模块组件

简介 在文件 components 中创建轮播模块组件,引入App.vue展示。欢迎访问个人的简历网站预览效果 本章涉及修改与新增的文件:First.vue、Second.vue、Third.vue、Fourth.vue、Fifth.vue、App.vue、vite-env.d.ts、assets 一、修改vite-env.d.ts文件 /// <reference type…

Oracle VM VirtualBox 安装 Ubuntu Linux

Virtual Box VirtualBox是一个强大的、面向个人用户或者企业用户的虚拟机产品&#xff0c;其支持x86以及AMD64/Intel64的计算架构&#xff0c;功能特性丰富、性能强劲&#xff0c;支持GPL开源协议&#xff0c;其官方网址是www.virtualbox.org&#xff0c;由Oracle开源&#xf…

大数据安全 | (一)介绍

目录 &#x1f4da;大数据安全 &#x1f407;大数据安全内涵 &#x1f407;大数据安全威胁 &#x1f407;保障大数据安全 ⭐️采集环节安全技术 ⭐️存储环节安全技术 ⭐️挖掘环节安全技术 ⭐️发布环节安全技术 &#x1f407;大数据用于安全 &#x1f4da;隐私及其…

npm版本升级报错

解决方法&#xff1a; 执行npm install --legacy-peer-deps依赖对等 npm install xxx --legacy-peer-deps命令用于绕过peerDependency里依赖的自动安装&#xff1b;它告诉npm忽略项目中引入的各个依赖模块之间依赖相同但版本不同的问题&#xff0c;以npm v4-v6的方式去继续执行…

系统架构设计师(第二版)学习笔记----系统架构设计师概述

【原文链接】系统架构设计师&#xff08;第二版&#xff09;学习笔记----系统架构设计师概述 文章目录 一、架构设计师的定义、职责和任务1.1 架构设计师的定义1.2 架构设计师的任务 二、架构设计师应具备的专业素质2.1 架构设计师应具备的专业知识2.2 架构设计师的知识结构2.3…

如何应用运营商大数据精准营销?

如何应用运营商大数据精准营销&#xff1f; 越来越多的企业逐渐觉察到运营商大数据所带来的商业价值&#xff0c;精准营销也被他们用的越来越娴熟。那么&#xff0c;企业的大数据精准营销该如何应用呢&#xff1f;想必是很多资源有限的中小型公司最想了解的。 一 数据驱动运营…

Spring Boot - Junit4 / Junit5 / Spring Boot / IDEA 关系梳理

文章目录 PreJunit4 / Junit5 / Spring Boot / IDEAIDEA版本Spring-Boot-Older-Release-NotesSpringBootTest 起源 & Spring-Boot-1.4-Release-Notes2.0.0.RELEASE ----- 2.0.9.RELEASE2.1.0.RELEASE ----- 2.1.18.RELEASE2.2.0.RELEASE ~ 2.2.13.RELEASE2.3.0.RELEASE ~ 2…

使用本地mysql+linux实现mysql主从同步

1.配置linux 保证linux已经安装好了mysql1.1修改该linux配置文件 vim /etc/my.cnf1.2重启linux的mysql systemctl restart mysqld1.3使用账户密码登录linux中的mysql,查看是否配置成功 mysql> show master status;若显示有FIile和Posttion就表示注linux的主节点配置成功…

Android 自定义View之圆形进度条

很多场景下都用到这种进度条&#xff0c;有的还带动画效果&#xff0c; 今天我也来写一个。 写之前先拆解下它的组成&#xff1a; 底层圆形上层弧形中间文字 那我们要做的就是&#xff1a; 绘制底层圆形&#xff1b;在同位置绘制上层弧形&#xff0c;但颜色不同&#xff…

【实践篇】Redis使用规范清单详解

Redis 使用规范清单详解 文章目录 Redis 使用规范清单详解0. 前言参考资料 1. 键值对使用规范1. Key的命名规范2. 避免使用 bigkey2.1. "bigkey"的导致的问题2.2 避免"bigkey"问题解决方法2.2 1. 数据分片2.2.2. 数据压缩 3. 使用高效序列化方法和压缩方法…

web pdf 拖拽签章

web pdf 拖拽签章 主要通过火狐的pdfjs 来实现 1. 下载js 并编译 地址 https://mozilla.github.io/pdf.js/ 按照官网当下下载并编译就得到了js 2.其实也没有什么好讲的&#xff0c;都是用的js中的方法&#xff0c;官网中都有 按照步骤就能生成一个document元素&#xff0c;然…

Android常用的工具“小插件”——Widget机制

Widget俗称“小插件”&#xff0c;是Android系统中一个很常用的工具。比如我们可以在Launcher中添加一个音乐播放器的Widget。 在Launcher上可以添加插件&#xff0c;那么是不是说只有Launcher才具备这个功能呢&#xff1f; Android系统并没有具体规定谁才能充当“Widget容器…

Java 复习笔记 - 字符串篇

文章目录 一&#xff0c;API和API帮助文档&#xff08;一&#xff09;API&#xff08;二&#xff09;API帮助文档 二&#xff0c;String概述三&#xff0c;String构造方法代码实现和内存分析四&#xff0c;字符串的比较五&#xff0c;综合练习&#xff08;一&#xff09;用户登…

100个Python数据分析常见问题.pdf

大家好&#xff0c;我是涛哥。 Python语言要说什么效率高&#xff0c;什么学习了马上能见到效果&#xff0c;那非数据分析不可。 之前安排了Python常见问题&#xff0c;爬虫常见问题&#xff0c;面试常见问题等等&#xff0c;这不涛哥也给你大家安排了数据分析问题。 希望大…

python 使用requests爬取百度图片并显示

爬取百度图片并显示 引言一、图片显示二、代码详解2.1 得到网页内容2.2 提取图片url2.3 图片显示 三、完整代码 引言 爬虫&#xff08;Spider&#xff09;&#xff0c;又称网络爬虫&#xff08;Web Crawler&#xff09;&#xff0c;是一种自动化程序&#xff0c;可以自动地浏览…

QT生成ICO文件

生成ICO文件 #include <QApplication> #include <QImage> #include <QIcon> #include <QFile> #include <QDebug> #include <QPixmap>int main(int argc, char* argv[]) {QApplication app(argc, argv);// 读取图片文件QImage image(&quo…

【实践篇】Redis最强Java客户端Redisson

文章目录 1. 前言2. Redisson基础概念2.1 数据结构和并发工具2.1.1 对Redis原生数据类型的封装和使用2.1.2 分布式锁实现和应用2.1.3 分布式集合使用方法 2.2 Redisson的高级特性2.2.1 分布式对象实现和使用2.2.2 分布式消息队列实现和使用2.2.3 分布式计数器实现和使用 3. 参考…

数字花园的指南针:微信小程序排名的提升之道

微信小程序&#xff0c;是一片数字花园&#xff0c;其中各种各样的小程序竞相绽放&#xff0c;散发出各自独特的芬芳。在这个花园中&#xff0c;排名优化就像是精心照料花朵的园丁&#xff0c;让我们一同走进这个数字花园&#xff0c;探寻如何提升微信小程序的排名优化&#xf…