前端零碎知识随笔

news2024/9/21 7:45:29

一、介绍

本篇博客主要使用来记录一些比较零碎的知识点,都是本人在日常开发工作中遇到的,或者是在学习过程中遇到的。因为这些知识点都比较零碎,为了防止遗忘,所以特意写一篇博客来记录,后面也不会不断慢慢更新的。

二、HTML相关

1、取消checkbox按钮在浏览器切换页面时状态的自动保存

我们在页面中使用<input type="checkbox" >的按钮,然后对修改了其状态,如果此时我们跳转到了其他页面,然后再通过浏览器的回退按钮,返回此页面,此时checkbox按钮状态是与页面跳转之前保持一致的,而且我们无法通过js获取到正确的按钮checked状态。因为浏览器默认会保存checkbox按钮的状态,如果我们不想让浏览器进行保存,只需要给checkbox按钮加上autocomplete="off" 属性即可:

图例:

在这里插入图片描述

解决方案:
 <input type="checkbox" autocomplete="off" class="checkbox-btn">

二、CSS相关

1、清除IE浏览器中输入框自带的删除和查看icon图标

input输入框在讨厌的IE浏览器中会显示一个默认的删除图标,密码输入框会显示一个默认的查看图标,但通常我们都是不想要默认的图标的,所以我们要想办法隐藏。

图例:

在这里插入图片描述

解决方案:
input::-ms-clear,  /*  ::-ms-clear 是文本清除icon */
input::-ms-reveal {   /*  ::-ms-reveal是密码查看icon */
	display: none; 
	width: 0;
	height: 0;
}

三、JavaScript相关

1、标签的 onload() 和 onerror() 事件

① 介绍

HTML标签中支持onload()onerror()事件的标签不多,常见的有bodylinkscriptframeiframeimg等,除此之外 window 对象也支持这两个事件。

② img 标签

img标签为例,这俩事件的触发,主要取决于src属性,当给定的 URL 地址存在且图片加载完成,则触发onload事件。当给定的图片 URL 地址不存在或网络出错时,则触发onerror事件,整体分为下面几种情况:

  • 当src地址正确,且图片加载完成时,触发onload()事件。
  • 当src地址不正确时,触发onerror事件,且控制台出现报错信息。
  • 当src为空时,触发onerror事件,但控制台不会出现报错信息。
  • 当未设置src时,onload()事件和onerror事件都不会触发,并且控制台也无报错信息。
    所以当图片加载出错时,我们可以通过onerror事件来做错误处理等操作,也可以通过onload()事件来结束图片的加载动画等操作。
③ 执行顺序

img标签的onload()事件和 onerror事件、document 的ready状态(DOMContentLoaded)以及window的onload()事件的执行顺序是:

  1. img的onload()事件(情况一:加载成功、图片小、网速较快的情况)
  2. document ready 状态(DOMContentLoaded
  3. img的onload()事件(情况二:加载成功、图片大、网速较慢的情况)
  4. img的onerror()事件(情况三:加载失败的情况)
  5. window的onload()事件
    这其中最值得注意的一点就是 img的onload()事件的执行时间,会受到图片本身的大小以及网速快慢的影响,可能会在document ready 状态之前执行,也有可能在document ready 状态之后执行。

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

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

相关文章

[附源码]计算机毕业设计Python-大学生健康档案管理(程序+源码+LW文档)

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程 项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等…

JSP+MySQL基于ssm的环保数据自动采集及预测系统

在21世纪的今天,随着科技的进步和发展,人们的生活逐渐趋于自动化、便捷化、数据化。而发展总会有代价,科技的进步总是伴随着环境的恶化。人类用智慧将地球的资源充分利用,以便丰富人们的生活,推动国家的进步。回过头去看,地球的环境已经成为威胁人类长久生存的主要问题之一。在…

34-Vue之ECharts高级-调色盘

ECharts高级-调色盘前言调色盘主题调色盘全局调色盘局部调色盘渐变颜色前言 本篇来学习下ECharts中调色盘的使用 调色盘 它是一组颜色&#xff0c;图形、系列会自动从其中选择颜色, 不断的循环从头取到尾, 再从头取到尾, 如此往复主要分三种&#xff1a;主题调色盘、全局调色…

基于GDAL的gdb格式数据读写功能实现

一、GDAL类库下载&#xff1a; 下载地址&#xff1a;GISInternals Support Site 比如我下载的是release-1930-x64-gdal-3-4-2-mapserver-7-6-4 点击release-1930-x64-gdal-3-4-2-mapserver-7-6-4的链接&#xff0c;下载这两个文件 二、解压文件和安装gdb插件 1.下载好的两个…

Innodb存储引擎-备份和恢复(分类、冷备、热备、逻辑备份、二进制日志备份和恢复、快照备份、复制)

文章目录备份和恢复分类冷备热备逻辑备份mysqldumpSELECT...INTO OUTFILE恢复二进制日志备份与恢复快照备份(完全备份)复制快照复制的备份架构备份和恢复 分类 &#xff08;1&#xff09;根据备份的方法可以分为&#xff1a; Hot Backup&#xff08;热备&#xff09;&#x…

【图像去噪】中值+均值+Lee+Kuan图像滤波【含Matlab源码 1179期】

⛄一、图像去噪及滤波简介 1 图像去噪 1.1 图像噪声定义 噪声是干扰图像视觉效果的重要因素&#xff0c;图像去噪是指减少图像中噪声的过程。噪声分类有三种&#xff1a;加性噪声&#xff0c;乘性噪声和量化噪声。我们用f(x,y&#xff09;表示图像&#xff0c;g(x,y&#xff0…

ADI Blackfin DSP处理器-BF533的开发详解63:DSP接总线屏的硬件和驱动设计(含源码)

硬件准备 ADSP-EDU-BF533&#xff1a;BF533开发板 AD-HP530ICE&#xff1a;ADI DSP仿真器 软件准备 Visual DSP软件 硬件链接 EBIU总线LCD屏 硬件实现原理 LCD2.4 寸液晶屏子卡板连接在 ADSP-EDU-BF53x 开发板的扩展端口 PORT1 和 PORT2 上&#xff0c;板卡插入时&#xf…

基于JAVA的水产批发系统

开发工具(eclipse/idea/vscode等)&#xff1a; 数据库(sqlite/mysql/sqlserver等)&#xff1a; 功能模块(请用文字描述&#xff0c;至少200字)&#xff1a;

【Linux】低级IO

目录 一、文件的概念 二、C语言文件操作回顾 三、使用系统调用进行文件I/O 1、系统调用open 1.1open接口介绍 1.2open形参中标记位flags的意义 1.3open的使用 2、系统调用write 2.1write接口介绍 2.2write的使用 3、系统调用read 3.1read接口介绍 3.2read的使用 …

什么是 SAP ABAP FDA - Fast Data Access 技术?

快速数据访问 (Fast Data Access&#xff0c;缩写为 FDA) 是一种可在 SAP ABAP 环境中访问的协议。 它允许针对 SAP HANA 提交 OPEN SQL SELECT 语句&#xff0c;从而使用 SAP ABAP 的数据格式。 在快速数据访问场景里&#xff0c;SAP ABAP 内表数据传输到数据库并返回。这种方…

Java+MySQL基于ssm的物理竞赛管理系统

物理竞赛是对课堂上所学的理论知识的实践运用,加深所学知识的理解,锻炼团队协作能力。学生可以根据个人爱好,个人特长选择参与,不仅能培养学生的创新意思、提高专业技能,还能锻炼学生的组织能力和协作能力。物理竞赛是在中国科协的领导下,由中国物理学会主办,各省、自治区、直辖…

【力扣周赛#324】6266. 使用质因数之和替换后可以取到的最小值+6267. 添加边使所有节点度数都为偶数+6268. 查询树中环的长度

目录 6265. 统计相似字符串对的数目 - ac 6266. 使用质因数之和替换后可以取到的最小值 分解质因数 1、tle代码 2、优化ac代码 6267. 添加边使所有节点度数都为偶数 - 建图分类讨论 关于建图 6268. 查询树中环的长度 - LCA最近公共祖先 6265. 统计相似字符串对的数目…

[附源码]Nodejs计算机毕业设计基于微信平台的车险投保系统设计与实现Express(程序+LW)

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流 项目运行 环境配置&#xff1a; Node.js Vscode Mysql5.7 HBuilderXNavicat11VueExpress。 项目技术&#xff1a; Express框架 Node.js Vue 等等组成&#xff0c;B/S模式 Vscode管理前后端分…

Vue实现后台管理系统

目录 前言 登录页面 后台界面 前言 今天用Vue实现一个简易的后台&#xff0c;不借助接口和后端代码&#xff0c;仅通过前端实现&#xff0c;本案例涉及Vue路由相关知识&#xff0c;不熟悉Vue路由可以先看一下右边的文章再接着看下面的项目案例&#xff1a;Vue路由 这篇文章详…

[CISCN2019 华北赛区 Day1 Web2]

目录 前言 涉及考点 部分记录 前言 第一次看到这题时没有思路&#xff0c;通过搜索相关WP并简单了解考点所涉及的知识后&#xff0c;通过解题来扩展自己的知识面 涉及考点 python爬虫&#xff0c;支付逻辑漏洞&#xff0c;cookie篡改&#xff0c;重放攻击&#xff0c;JWT…

C++11后的STL算法

文章目录一、函数对象二、预定义的函数对象三、算法函数1.自己实现foreach算法2.自己实现的findif算法3.自己实现bsort算法一、函数对象 STL提供了很多处理容器的函数模板&#xff0c;它们的设计是相同的&#xff0c;有以下特点&#xff1a; 1&#xff09;用迭代器表示需要处理…

数据结构---用栈实现队列

用栈实现队列模拟入队模拟出队JAVA实现总结用栈来模拟一个队列&#xff0c;要求实现队列的两个基本操作&#xff1a;入队、出队。栈是先入后出&#xff0c;队列是先入先出 用两个栈来实现一个队列功能 让其中一个栈作为队列的入口&#xff0c;负责插入新元素&#xff1b;另一个…

ARM9和STM32什么关系?

已剪辑自: https://mp.weixin.qq.com/s/QHARY-D2SwFoQbFsJoCNlg 有小伙伴问&#xff1a;ARM9和STM32什么关系&#xff1f;如果时间倒退10年&#xff0c;ARM9、 s3c2410还算是比较流行的年代&#xff0c;但STM32这类“新时代”的ARM处理器也问世了。 ARM9是早期的ARM处理器&…

Java+MySQL基于ssm的打车管理系统的设计与实现

随着时代的发展,交通也变的越来越便利,但是很多时候人们出行的时候因为各种原因还是会进行打车,因为一些地区比较偏远或者处于特殊的时间段而用户又急需用车等情况导致没办法及时的打到车,这种情况下就急需一套基于互联网的打车系统出现了。 本打车管理系统采用JAVA语言来进行开…

Vivado2019+Modelsim仿真环境搭建

目录 一、安装准备 二、安装与配置 2.1 Vivado安装 2.2 modelsim安装 2.3 Vivado设置modelsim仿真环境 1&#xff09;仿真库生成设置 2&#xff09;modelsim添加仿真库&#xff08;逐个添加&#xff09; 3&#xff09;modelsim添加仿真库&#xff08;批量添加&#xff…