前端零碎知识随笔

一、介绍

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

二、HTML相关

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

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

图例&＃xff1a;

解决方案&＃xff1a;

<input type&＃61;"checkbox" autocomplete&＃61;"off" class&＃61;"checkbox-btn">


二、CSS相关

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

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

图例&＃xff1a;

解决方案&＃xff1a;

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()事件的标签不多&＃xff0c;常见的有body、link、script、frame、iframe、img等&＃xff0c;除此之外 window 对象也支持这两个事件。

② img 标签

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

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

③ 执行顺序

img标签的onload()事件和 onerror事件、document 的ready状态&＃xff08;DOMContentLoaded&＃xff09;以及window的onload()事件的执行顺序是&＃xff1a;

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