一、添加js
- 1、內(nèi)部樣式
- 2、外部樣式
- 3、內(nèi)聯(lián)樣式（不推薦）
二、各種知識點
1、變量 常量
- var 聲明一個變量
- let 聲明一個塊作用域中的局部變量
- const 聲明一個常量
- 變量聲明和初始化是可以分開的
- 常量必須在聲明時賦值，之后不能修改
- var 會把變量提升到當(dāng)前全局或函數(shù)作用域
- 變量和常量的選擇：如果明確知道一個標(biāo)識符定義后不再修改，應(yīng)該盡量聲明成 const 常量，減少被修改的風(fēng)險，減少BUG
2、類型轉(zhuǎn)換
var a = '5' + 4 + 3；
// a為543
var a = 5 + 4 + '3';
// a為93
3、== 與 ===
- ==會進(jìn)行類型轉(zhuǎn)換例如
123 == '123'; //true
123 === '123'; //false
4、getBoundingClientRect()
getBoundingClientRect()獲取元素位置，這個方法沒有參數(shù)
getBoundingClientRect()用于獲得頁面中某個元素的左，上，右和下分別相對瀏覽器視窗的位置。
getBoundingClientRect()是DOM元素到瀏覽器可視范圍的距離（不包含文檔卷起的部分）。
該對象有6個屬性：top,lef,right,bottom,width,height； 可以用.來取到
例如：box.getBoundingClientRect().top
5、定時器setInterval
- 開啟定時器
var timer = setInterval(function(){
}, 1000)
參數(shù)1：回調(diào)函數(shù)
參數(shù)2：時間（毫秒）
- 關(guān)閉定時器
clearInterval(timer)
6、HTML <input> required 屬性
required 屬性規(guī)定必需在提交表單之前填寫輸入字段，就是不能為空。
required 屬性適用于下面的 input 類型：text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file。
7、innerText和innerHTML區(qū)別
- innerText：純文本
- innerHTML：InnerHTML允許您使用HTML格式的文本。
8、HTML DOM createElement() 方法
createElement() 方法通過指定名稱創(chuàng)建一個元素
例如創(chuàng)建一個按鈕
const btn = document.createElement('button')
9、HTML DOM appendChild() 方法
appendChild() 方法可向節(jié)點的子節(jié)點列表的末尾添加新的子節(jié)點。
10、getAttribute
獲取對應(yīng)的屬性的值，比如
<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)，強(qiáng)制轉(zhuǎn)換為數(shù)字類型
會將其按照Number函數(shù)的規(guī)則轉(zhuǎn)換為數(shù)值或者NaN,規(guī)則大概如下：
- Boolean:true返回1，false返回0
- 數(shù)據(jù)值，直接返回
- null，返回0
- undefined，返回NaN
- 對于字符串，將其轉(zhuǎn)換為十進(jìn)制數(shù)值，會忽略前面的0（16進(jìn)制除外），空字符串返回0，浮點數(shù)會返回浮點數(shù)值。其他格式字符串（無論是否數(shù)字開頭，返回NaN，字符串中好幾個小數(shù)點，返回NaN）
12、js 單擊、雙擊
單擊
button.onclick = function() {
console.log('單擊')
}
雙擊
button.ondblclick = function() {
console.log('雙擊')
}
13、箭頭函數(shù)與function的區(qū)別
寫法、this的指向、是否可以定義構(gòu)造函數(shù)、是否必須先定義再引用
參考文章：http://www.itdecent.cn/p/b80dca096e10
14、string 的slice()方法
string.slice(start,end)
start 必須。 要抽取的片斷的起始下標(biāo)，第一個字符位置為 0。如果為負(fù)數(shù)，則從尾部開始截取。
end 可選。 緊接著要截取的片段結(jié)尾的下標(biāo)。若未指定此參數(shù)，則要提取的子串包括 start 到原字符串結(jié)尾的字符串。如果該參數(shù)是負(fù)數(shù)，那么它規(guī)定的是從字符串的尾部開始算起的位置。slice(-2) 表示提取原數(shù)組中的倒數(shù)第二個元素到最后一個元素（包含最后一個元素）。
15、floor() 方法
Math.floor(x)
返回值
Number 小于等于 x，且與 x 最接近的整數(shù)。
16、random()方法
Math.random()
返回值
Number 0.0 ~ 1.0（不包含） 之間的一個偽隨機(jī)數(shù)。
17、JS中判斷鼠標(biāo)移入移出方向
mouseenter和mouseleave事件
這兩個事件和mouseover、 mouseout的對比
mouseover和mouseenter都是鼠標(biāo)移到元素身上就觸發(fā)，區(qū)別是
1、mouseover經(jīng)過自身盒子觸發(fā)，經(jīng)過子盒子也觸發(fā)，擁有冒泡特性
2、mouseenter只經(jīng)過自身盒子觸發(fā)，沒有冒泡特性
mouseenter不會冒泡，搭配鼠標(biāo)離開事件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文件內(nèi)的原生click事件，根據(jù)查詢vue官方文檔，得知click事件作用于組件內(nèi)部，如果組件內(nèi)沒有寫click事件，便會無響應(yīng)。
- 解決方法
參照官方文檔，可以用@click.native=“click”解決
20、reload() 方法
reload()方法用于刷新當(dāng)前文檔。
reload() 方法類似于你瀏覽器上的刷新頁面按鈕。
21、nextSibling 和nextElementSibling的區(qū)別
nextSibling 屬性返回元素節(jié)點之后的兄弟節(jié)點（包括文本節(jié)點、注釋節(jié)點）；
nextElementSibling 屬性只返回元素節(jié)點之后的兄弟元素節(jié)點（不包括文本節(jié)點、注釋節(jié)點）；
nextElementSibling屬性為只讀屬性。
注意: 空格、回車也會看作文本，以文本節(jié)點對待。
下例中，如果兩個li元素之間有空格、回車，將返回 “undefined”。
今天犯了個很蛋疼的錯誤，調(diào)試了半天，才發(fā)現(xiàn)在input 與font 標(biāo)簽之間多了個回車。（中間不應(yīng)有任何內(nèi)容，包括，回車，換行）
<input type="text" name="username" onblur="checkName();" /><font></font>
22、getComputedStyle的用法
getComputedStyle()這個方法來獲取元素當(dāng)前的樣式
這個方法是window的方法，可以直接使用
需要兩個參數(shù)
第一個：要獲取樣式的元素
第二個：可以傳遞一個偽元素，一般都傳null
例如
var box1=document.getElementById("box1");
//這里調(diào)用getComputedStyle來獲取left的值
var left=getComputedStyle(box1,null)["left"];
alert("left的值是"+left);
23、axios和fetch的區(qū)別
http://www.itdecent.cn/p/e7c720d2be6b
https://zhuanlan.zhihu.com/p/353492075
24、DOM事件中target和currentTarget的區(qū)別
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
