各种小知识点（笔记本）

1、 localStorage 里面只会储存 String 类型数据

如果传入的是非 String 则会直接使用 toString 转换：({}).toString() //"[object Object]"，这时候就会发生异常，所以才需要先使用 JSON.stringify() 将 Object 转换成 json 格式，读取出来之后再利用 JSON.parse() 转换为 Object。

2、required 属性规定必需在提交之前填写输入字段。required 属性是 HTML5 中的新属性。

如果使用该属性，则字段是必填（或必选）的。

注释：required 属性适用于以下 <input> 类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

3、form表单submit默认页面刷新行为。

在表单空间（form区域）拥有焦点时按下 `Enter` 键或者点击提交按钮，都会提交表单，浏览器进行刷新，输入框中之前填入的内容会被刷新掉。

  <form action=""><input type="text" placeholder="请输入文本"><input type="submit" value="提交"></form>

在将表单内容提交给服务器之前会触发submit事件，监听该事件可以做一些处理。

  <form class="biaodan"><input type="text" placeholder="请输入文本"><input type="submit" value="提交"></form><script>const tijiao=document.querySelector('.biaodan');tijiao.addEventListener('submit',handle);function handle(){console.log('here');}</script>

在点击提交按钮或者按下回车键时，会触发submit事件，上面程序运行的结果就是：console控制台会闪现here 后刷新整个页面，这是 submit 的默认行为。

阻止默认的页面刷新行为：

阻击位置：在监听到submit事件触发的事件处理函数中进行阻止，因为它发生在送到服务器之前。

阻击方法：e.preventDefault();

  <form class="biaodan"><input type="text" placeholder="请输入文本"><input type="submit" value="提交"></form><script>const tijiao=document.querySelector('.biaodan');tijiao.addEventListener('submit',handle);function handle(e){e.preventDefault();console.log('here');}</script>

添加该方法后，点击提交按钮或者按下enter键后，页面不进行刷新，输入框中的内容不会消失，再输入会在其后显示，控制台中的here不会闪现，会一直存在。

若需要输入提交后输入框清空复位，使用this.reset();

    const tijiao=document.querySelector('.biaodan');tijiao.addEventListener('submit',handle);function handle(e){e.preventDefault();console.log('here');this.reset();}

    <input type="submit" value="提交">

单独的submit类型不会触发submit事件，也不会有页面刷新行为

4、往对象中添加属性和属性值的方法：

5、获取对象的属性名，js有原生的Object.keys(xx)方法，返回一个由对象的可枚举属性名组成的数组,返回的属性名无序。

6、for-in用来遍历对象，会遍历该对象原型中的属性和方法。

for in 可以遍历到myObject的原型方法method,如果不想遍历原型方法和属性的话，可以在循环内部判断一下,hasOwnPropery方法可以判断某属性是否是该对象的实例属性。

for (var key in myObject) {if（myObject.hasOwnProperty(key)){console.log(key);}
}

用for-in遍历数组，for(var i in arr){}// 这里的i是数组的索引值，且是字符串类型。

用for-of遍历数组，for(var i of arr){}// 这里的i是数组元素的值，for of遍历的只是数组内的元素，而不包括数组的原型属性method和索引name

`7、input autocomplete设置是否显示输入框记忆内容。`

在html里就可以直接清除了<input type="text" autocomplete="off">
input 的autocomplete属性默认是on：其含义代表是否让浏览器自动记录之前输入的值
off：则关闭记录

8、onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发。

该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。

注意：当该事件返回的字符串（事前设置好的event.returnValue的值）不为null或者undefined时，弹出确认窗口让用户自行选择是否关闭当前页面。（换句话说就是使用event.returnValue可以阻止onunload卸载页面，因为它会出现一个提示窗口，让用户自己判断是否离开当前页）一些浏览器将该事件返回的字符串显示在弹出窗上。从Firefox 4、 Chrome 51、Opera 38 和Safari 9.1开始，通用确认信息代替事件返回的字符串。

onbeforeunload也是在页面刷新或关闭时调用，

onbeforeunload是正要去服务器读取新的页面时调用，此时还没开始读取；

而onunload则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。

onunload是无法阻止页面的更新和关闭的。而 onbeforeunload 可以做到,它会出现系统提示框。

页面加载时只执行onload
页面关闭时先执行onbeforeunload，最后onunload
页面刷新时先执行onbeforeunload，然后onunload，最后onload。

9、保留两位小数：num.toFixed(x);四舍五入进行保留

10、list-style:设置所有的列表属性

值	描述
list-style-type	设置列表项标记的类型。参阅：list-style-type 中可能的值。默认是实心圆，square:方形
list-style-position	设置在何处放置列表项标记。参阅：list-style-position 中可能的值。inside和outside,分别位于list文本的内和外处。
list-style-image	使用图像来替换列表项的标记。参阅：list-style-image 中可能的值。
inherit	规定应该从父元素继承 list-style 属性的值。

11、HTML中的点击事件格式

<button οnclick="ascending()">升序</button>

<button οnclick="descending()">升序</button>

button.addEventListener("click",paixu);

注意区分：函数名的使用格式

12、button.addEventListener("click",()=>{paixu(true)});

addEventListener当事件处理函数需要传参时，要使用匿名函数调用带参数的函数

13、正则字符

\w	匹配字母、数字、下划线。等价于'[A-Za-z0-9_]'。
\W	匹配非字母、数字、下划线。等价于 '[^A-Za-z0-9_]'。

14、line-height line-height 属性设置行间的距离（行高）。

说明

该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。

line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

值	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	以像素值设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。在大多数浏览器中默认行高大约是 110% 到 120%。
inherit	规定应该从父元素继承 line-height 属性的值。

15、cssText片段式改变样式：减少回流和重绘

SPAN.style.cssText=`width:${rects.width}px;height:${rects.height}px;left:${rects.left}px;top:${rects.top}px;display:block;`;

input1.setSelectionRange(0, input.value.length);用于选中可操作元素的范围。