一、添加js
- 1、内部样式
- 2、外部样式
- 3、内联样式（不推荐）
二、各种知识点
1、变量 常量
- var 声明一个变量
- let 声明一个块作用域中的局部变量
- const 声明一个常量
- 变量声明和初始化是可以分开的
- 常量必须在声明时赋值，之后不能修改
- var 会把变量提升到当前全局或函数作用域
- 变量和常量的选择：如果明确知道一个标识符定义后不再修改，应该尽量声明成 const 常量，减少被修改的风险，减少BUG
2、类型转换
var a = '5' + 4 + 3；
// a为543
var a = 5 + 4 + '3';
// a为93
3、== 与 ===
- ==会进行类型转换例如
123 == '123'; //true
123 === '123'; //false
4、getBoundingClientRect()
getBoundingClientRect()获取元素位置，这个方法没有参数
getBoundingClientRect()用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。
getBoundingClientRect()是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。
该对象有6个属性：top,lef,right,bottom,width,height； 可以用.来取到
例如：box.getBoundingClientRect().top
5、定时器setInterval
- 开启定时器
var timer = setInterval(function(){
}, 1000)
参数1：回调函数
参数2：时间（毫秒）
- 关闭定时器
clearInterval(timer)
6、HTML <input> required 属性
required 属性规定必需在提交表单之前填写输入字段，就是不能为空。
required 属性适用于下面的 input 类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file。
7、innerText和innerHTML区别
- innerText：纯文本
- innerHTML：InnerHTML允许您使用HTML格式的文本。
8、HTML DOM createElement() 方法
createElement() 方法通过指定名称创建一个元素
例如创建一个按钮
const btn = document.createElement('button')
9、HTML DOM appendChild() 方法
appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
10、getAttribute
获取对应的属性的值，比如
<input value="3652" id="inputdemo" type="password">
const type = document.getAttribute('type')
//值为password
同样的有setAttribute(key, value)
removeAttribute
11、js变量前的+是什么意思
例如
const value = container.innerText
//value值为0
console.log(value + 100)
console.log(+value)
这里的+value可以理解为Number(value)，强制转换为数字类型
会将其按照Number函数的规则转换为数值或者NaN,规则大概如下：
- Boolean:true返回1，false返回0
- 数据值，直接返回
- null，返回0
- undefined，返回NaN
- 对于字符串，将其转换为十进制数值，会忽略前面的0（16进制除外），空字符串返回0，浮点数会返回浮点数值。其他格式字符串（无论是否数字开头，返回NaN，字符串中好几个小数点，返回NaN）
12、js 单击、双击
单击
button.onclick = function() {
console.log('单击')
}
双击
button.ondblclick = function() {
console.log('双击')
}
13、箭头函数与function的区别
写法、this的指向、是否可以定义构造函数、是否必须先定义再引用
参考文章：https://www.jianshu.com/p/b80dca096e10
14、string 的slice()方法
string.slice(start,end)
start 必须。 要抽取的片断的起始下标，第一个字符位置为 0。如果为负数，则从尾部开始截取。
end 可选。 紧接着要截取的片段结尾的下标。若未指定此参数，则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数，那么它规定的是从字符串的尾部开始算起的位置。slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。
15、floor() 方法
Math.floor(x)
返回值
Number 小于等于 x，且与 x 最接近的整数。
16、random()方法
Math.random()
返回值
Number 0.0 ~ 1.0（不包含） 之间的一个伪随机数。
17、JS中判断鼠标移入移出方向
mouseenter和mouseleave事件
这两个事件和mouseover、 mouseout的对比
mouseover和mouseenter都是鼠标移到元素身上就触发，区别是
1、mouseover经过自身盒子触发，经过子盒子也触发，拥有冒泡特性
2、mouseenter只经过自身盒子触发，没有冒泡特性
mouseenter不会冒泡，搭配鼠标离开事件mouseleave同样不会冒泡
18、JS中的拖拽
首先是给元素添加draggable=true的属性，然后就可以开启拖拽
拖拽的操作如下图所示：
参考：https://blog.csdn.net/weixin_46831501/article/details/123267221
https://blog.csdn.net/weixin_39772652/article/details/110610051
19、vue自定义组件@click点击失效问题及解决
自定义组件无法绑定原vue文件内的原生click事件，根据查询vue官方文档，得知click事件作用于组件内部，如果组件内没有写click事件，便会无响应。
- 解决方法
参照官方文档，可以用@click.native=“click”解决
20、reload() 方法
reload()方法用于刷新当前文档。
reload() 方法类似于你浏览器上的刷新页面按钮。
21、nextSibling 和nextElementSibling的区别
nextSibling 属性返回元素节点之后的兄弟节点（包括文本节点、注释节点）；
nextElementSibling 属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）；
nextElementSibling属性为只读属性。
注意: 空格、回车也会看作文本，以文本节点对待。
下例中，如果两个li元素之间有空格、回车，将返回 “undefined”。
今天犯了个很蛋疼的错误，调试了半天，才发现在input 与font 标签之间多了个回车。（中间不应有任何内容，包括，回车，换行）
<input type="text" name="username" onblur="checkName();" /><font></font>
22、getComputedStyle的用法
getComputedStyle()这个方法来获取元素当前的样式
这个方法是window的方法，可以直接使用
需要两个参数
第一个：要获取样式的元素
第二个：可以传递一个伪元素，一般都传null
例如
var box1=document.getElementById("box1");
//这里调用getComputedStyle来获取left的值
var left=getComputedStyle(box1,null)["left"];
alert("left的值是"+left);
23、axios和fetch的区别
https://www.jianshu.com/p/e7c720d2be6b
https://zhuanlan.zhihu.com/p/353492075
24、DOM事件中target和currentTarget的区别
https://www.cnblogs.com/chendezhen/p/15318759.html
https://www.php.cn/css-tutorial-412196.html
https://www.zhihu.com/question/20227599
https://www.imooc.com/article/51405
https://www.runoob.com/jsref/prop-element-offsetheight.html
https://blog.csdn.net/shibazijiang/article/details/103894498
http://t.zoukankan.com/liluning-p-13268170.html
http://t.zoukankan.com/liluning-p-13268170.html
http://ui.itheima.com/news/20211102/170622.html
https://blog.csdn.net/u010142437/article/details/85762717