前端重要知識點總結(jié)，以供學(xué)習(xí)參考丧鸯，持續(xù)更新仇参，若有錯嘹叫，請各位大佬指點。

HTML/CSS部分

1.doctype的作用

告知瀏覽器的解析器用什么文檔標準解析文檔诈乒，瀏覽器模式分為標準模式和混雜模式罩扇，若未聲明則按混雜模式解析，會導(dǎo)致無兼容性

2.塊級元素怕磨、行內(nèi)元素喂饥、空元素，塊級肠鲫、行內(nèi)如何區(qū)分

塊級元素：div p h1-h6 ul li ...

行內(nèi)元素：a span img input textarea em? ...

空元素：img? br? hr? input? meta

區(qū)分塊級员帮、行內(nèi)元素：塊級元素獨占一行，可設(shè)置width height导饲；行內(nèi)元素不可設(shè)置捞高，且與其他行內(nèi)元素位于同一行

3.css盒子模型

內(nèi)容 padding margin border

4.css選擇器

id選擇器氯材、類選擇器、標簽選擇器棠枉、后代選擇器浓体、屬性選擇器、子選擇器辈讶、偽類選擇器命浴、通配符選擇器（*）

優(yōu)先級：！important > 內(nèi)聯(lián) >? id > class > tag > *

特指度：I-C-E計算公式

5.css定位

static：默認定位

absolute：絕對定位贱除，相對于第一個非static定位的父級元素定位生闲，原位置消失

relative：相對定位，相對于原來的位置定位月幌，原位置仍保留

fixed：絕對定位碍讯，相對于瀏覽器窗口定位

6.display的值

none：元素消失

block：像塊級元素一樣顯示

inline：像行內(nèi)元素一樣顯示

inline-block：對象呈行內(nèi)元素顯示，但是內(nèi)容作為block對象呈現(xiàn)

list-item：元素像列表一樣顯示（取列表的list-style-type）

7.display：none和visibility：hidden的區(qū)別

display：none指的是元素徹底消失

visibility：hidden元素還占空間扯躺，留一片空白區(qū)域

8.transition過渡

9.src和href的區(qū)別

src（source）用于替代當(dāng)前元素捉兴，href（hypertext reference）建立一個引用連接。

10.localStorage录语、sessionStorage和cookie的區(qū)別

localStorage和sessionStorage是 H5 web storage API提供的

三者都存儲在瀏覽器端

localStorage：存儲持久數(shù)據(jù)倍啥，瀏覽器關(guān)閉后不丟失，存儲大小>5M澎埠，僅本地保存虽缕。

sessionStorage：存儲臨時數(shù)據(jù)，數(shù)據(jù)在瀏覽器關(guān)閉后丟失蒲稳，存儲大小>5M氮趋，僅本地保存。

cookie：在設(shè)置的cookie過期時間前一直有效江耀，存儲大小<4K剩胁，會自動傳遞到服務(wù)器，服務(wù)器也可寫cookie到客戶端

11.一次完整的HTTP請求

js部分

1.js面向?qū)ο螅豪^承祥国、多態(tài)昵观、封裝

繼承：實例繼承原型的屬性

多態(tài)：同一個方法在不同時刻表現(xiàn)出不同的狀態(tài)（比如子對象繼承了父對象的屬性，但是覺得不合適系宫，可以重寫屬性索昂，覆蓋父對象的屬性）

封裝：代碼復(fù)用性提高

2.js三大核心

ECMAScript：核心語言功能

DOM：? 提供訪問和操作網(wǎng)頁內(nèi)容的方法和接口

BOM：提供與瀏覽器交互的方法和接口

3.數(shù)據(jù)類型

Undefind、Null扩借、Number椒惨、String、Boolean潮罪、Object康谆，Symbol（ES6新增）

4.強制類型轉(zhuǎn)換和隱式類型轉(zhuǎn)換

①強制類型轉(zhuǎn)換：parseInt parseFloat Number String

②隱式類型轉(zhuǎn)換：+ - == if while 將參數(shù)轉(zhuǎn)換為boolean值

5.數(shù)據(jù)結(jié)構(gòu)

棧：先入后出? push（從末端插入） pop（從末端移除）

隊列：先入先出 push（從末端插入） shift（從前端移除） unshift（從前端插入）

6.ajax請求的post和get方法區(qū)別

get：使用url傳遞參數(shù)领斥，容量小，安全性差沃暗，有緩存

post：一般用于修改服務(wù)器上的資源月洛，容量大，無緩存

7.ajax

最大特點：局部刷新頁面

ajax核心：XMLHttpRequest對象 或 ActiveXObject對象（IE5 IE6）

請求流程：①創(chuàng)建XHR對象孽锥；②調(diào)用XHR對象的open方法（接收三個參數(shù)：請求類型嚼黔、url、是否異步發(fā)送請求的布爾值）惜辑；③當(dāng)狀態(tài)碼為2時唬涧，調(diào)用XHR的send方法，發(fā)送請求盛撑；④觸發(fā)XHR對象的onreadystatechange事件碎节；⑤判斷readyState狀態(tài)（0-4）是否完成請求（4代表完成）；⑥判斷status（HTTP狀態(tài)）抵卫；⑦調(diào)用成功狮荔、失敗的函數(shù)

注意：為了確保跨瀏覽器兼容性介粘，必須在調(diào)用open()方法之前指定onreadystatechange事件

解析json數(shù)據(jù)：JSON.parse()

8.jsonp原理

由回掉函數(shù)和數(shù)據(jù)構(gòu)成殖氏，通過動態(tài)創(chuàng)建script標簽使用

9.同源策略

一個域上的腳本不允許訪問另一個域的文檔，安全性

10.事件

HTML事件：嵌入在html元素中的事件（缺點：html與js耦合性太強）

DOM0級事件：將函數(shù)賦值給一個事件處理程序

DOM2級事件：addEventListener() removeEventListener()

IE事件：attachEvent()? detachEvent()

阻止事件冒泡碗短、獲仁芨稹：stopPropagation()

11.主流瀏覽器內(nèi)核

webkit：safari chrome

presto：opera

gecko：firefox

trident：IE

12.DOM操作

創(chuàng)建：document.createElement

添加：①appendChild ②insertBefore

修改：①removeChild ②remove ③replaceChild ④replaceNode

12.2 DOM擴展

①querySelector等選擇器

②自定義屬性 data-

13.BOM

核心：window

打開窗口：window.open()

彈出窗口：alert confirm等

location對象：常用href屬性

history對象：history.go(-1)返回上一頁

14.理解this對象

在全局函數(shù)中题涨，this等于window偎谁，當(dāng)函數(shù)作為某個對象的方法調(diào)用時，this等于該對象

15.閉包

有權(quán)訪問另一個函數(shù)作用域中的變量的函數(shù)

16.call apply

call()和apply()的作用相同纲堵，call()第一個參數(shù)是this值巡雨，其余參數(shù)需要逐個列舉出來，apply()傳遞的第一個參數(shù)是this席函，其余參數(shù)是參數(shù)數(shù)組

jquery部分

1.jquery選擇器

①基本選擇器：id class element *

②層次選擇器：parent>child（所有子元素）? prev+next（prev之后的相鄰元素铐望，可用next()代替）? prev~siblings（prev所有兄弟元素，可用nextAll()代替）

③簡單過濾選擇器（常用的）

:odd? ? ? ? ? 索引值為奇數(shù)的元素茂附，從0開始

:event? ? ? ? 索引值為偶數(shù)的元素正蛙，從0開始

:eq(index)? 索引值為index的元素，從0開始

:gt(index)? ? 索引值大于index的元素营曼，從0開始

:lt(index)? ? 索引值小于index的元素乒验，從0開始

④內(nèi)容過濾選擇器

:contains(text)? 包含text文本的元素

:has(selector)? ? 包含selector元素的元素

:empty? ? ? ? ? ? ? 不包含子元素的或文本內(nèi)容為空的元素

:parent? ? ? ? ? ? ? 含有子元素或文本的元素（內(nèi)部不為空的元素）

⑤可見性過濾選擇器

:hidden? ? 獲取所有不可見的元素

:visible? ? ? 獲取所有可見的元素

⑥屬性過濾選擇器（常用）

[ attribute ]? ? 獲取包含給定屬性的元素

[ attribute=value ]? 獲取給定屬性是某個值的元素

⑦子元素過濾選擇器

:nth-child()? 獲取每個父元素下的特定位置的元素，從1開始

:first-child? ? 獲取每個父元素的第一個子元素

:last-child? ? 獲取每個父元素的最后一個子元素

:only-child? ? 獲取每個父元素下的僅有一個子元素類別

⑧表單元素屬性過濾選擇器

:enabled? ? 獲取表單中所有屬性為可用的元素

:disabled? ? 獲取表單中所有屬性為不可用的元素

:checked? ? 獲取表單中所有被選中的元素

:selected? ? 獲取表單中所有被選中的option元素

⑨表單選擇器（常用）

:input? ? ? ? 獲取所有的input textarea select

:password? 獲取所有的密碼框

:radio? ? ? ? 獲取所有的單選按鈕

:checkbox? 獲取所有的復(fù)選框

:submit? ? ? 獲取素有的提交按鈕

:button? ? ? 獲取所有按鈕

:file? ? ? ? ? ? 獲取所有的文件域

2.元素操作

attr()? ? 獲取蒂阱、設(shè)置屬性

html()? 獲取第一個锻全、修改所有內(nèi)容

text()? 獲取所有狂塘、修改所有內(nèi)容

val()? ? 獲取、修改表單元素的值

css()? ? 設(shè)置元素樣式

addClass()? 增加元素類名

toggleClass? 切換元素類名

removeClass 刪除元素類名

3.DOM操作

創(chuàng)建節(jié)點：$()

內(nèi)部插入節(jié)點：

①append()? ? ? ? 插入在內(nèi)部最后一個位置

②appendTo()? ? 把所選元素追加到另外指定元素的集合中

③prepend()? ? ? 插入到內(nèi)部第一個位置

外部插入節(jié)點

①after(content)? before(content)? 插入到目標元素外部的后面/前面鳄厌，content為插入內(nèi)容

②insertAfter(content)? insertBefore(content)? 插入到目標元素的后面/前面荞胡，content為目標元素