label标签的 for 属性

for 属性规定 label 与哪个表单元素绑定。 for属性的值就是要绑定元素的id。

在html中，标签通常和标签一起使用，标签为input元素定义标注（标记）。

标签的作用是为鼠标用户改进了可用性，当用户点击标签中的文本时，浏览器就会自动将焦点转到和该标签相关联的控件上；

标签在单选按钮和复选按钮上经常被使用，使用该标签后，你点击单选按钮或复选按钮的文本也是可以选中的。

JSdocument.execCommand 实现复制功能

点击button,复制input的内容

1 2	input.select(); //select() 方法用于选取文本域中的内容。 document.execCommand('copy');

箭头函数只有行的时候如果要加上{}则必须用return返回

赋值和对象的转换

let i=1;
console.log({i});
//输出结果
{i:1}

value和innerHtml的使用场景

对于表单控件（输入类），都可以用value属性，对于非表单控件（div, span ,em）,可以用innerHTML；

input标签都有value属性，但都没有innerHTML属性，只能用value;

SELECT标签和OPTION标签,即有value属性也有innerHTML属性,但是一个是取回值,一个是取回文本,这两个可能相同也可能不同,具体要看你想要哪个值.

TEXTAREA标签也没有innerHTML属性,有value属性和innerText属性.

padStart 和padEnd函数

可用于自动编号的补0操作

let a= '1';
let b = a.padStart(3,'0') //b的值为001，3表示位数，‘0’表示要补充的字符串 

padEnd()是在数字的后面补。

验证码输入一个数字后自动转移光标到下一个输入框，按回车键后自动将光标转移到前一个输入框

const inputs = document.querySelectorAll('input');
inputs[0].focus();
inputs.forEach((input ,index) => {
  input.addEventListener('keydown', (e)=>{
    if(e.key>=0 && e.key<=9){
      inputs[index].value =''; //每次输入后将值置空，保证下次输入的时候不会保存原先输入的值。
      setTimeout(() => {
        if(index<inputs.length-1) //防止所以的验证框输入完毕后，找不到下一个输入框会报错。
        inputs[index+1].focus();
      }, 10);
    }
    else if(e.key=='Backspace'){
      setTimeout(() => {
        inputs[index-1].focus();
      }, 10);
    }
  })
});

将一个数字范围映射到另一个数字范围

学习链接： https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers


function scale (number, inMin, inMax, outMin, outMax) {
    return (number - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
}
使用该函数，如下所示：

const num = 5;
console.log(scale(num, 0, 10, -50, 50)); // 0
console.log(scale(num, -20, 0, -100, 100)); // 150

Location reload()

eload()方法用于刷新当前文档。

reload() 方法类似于你浏览器上的刷新页面按钮。

如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。

1	<button onclick="location.reload()">Reload</button>

contextmenu事件

当按下鼠标右键时触发

li.addEventListener('contextmenu' ,(e)=>{
  e.preventDefault(); // preventDefault()可阻止按下右键后浏览器默认的触发事件。
    li.remove();
  })

愿卿一路好风景

前端知识点笔记