js三大件基礎知識總結

複習整理

html

1.html5有什麼新特性？

新增語義化標籤<header></header>、<nav></nav>等
複製代碼

​ 新增用於繪畫的 元素

​ 用於媒介回放的video和audio元素

​ 本地緩存有更好支持（localStorage和sessionStorage）

2.html是什麼，html文檔是什麼？

html是用來描述網頁的一種超文本標記語言，html文檔也被成爲網頁，它包含html標籤和純文本

3.是什麼？

它不是html標籤，它爲瀏覽器提供一種信息聲明，告訴瀏覽器html是用什麼版本編寫的，用來表示html的版本

4.html文檔的類型

有html、html+、html2.0、html、3.二、html4.0一、xhtml 1.0、html5等

---

css

1.簡述flex佈局

flex佈局：彈性佈局，設置間距相同的佈局、單行單列布局的時候至關好用 display能夠設置爲flex、inline-flex。

設置display：flex的時候，子元素的float、clear、vertical-align屬性都將所有失效。

容器屬性：

flex-direction設置主軸的排列方向，有 row（豎直向下排列）、row-reverse（豎直向上排列）、column（垂直向右排列）、column-reverse（垂直向左排列）

flex-wrap 設置是否排列在一條線上，有nowrap、wrap和warp-reverse三個選項

flex-flow是flex-direction和flex-wrap的簡寫

justify-content定義項目在主軸上的對齊方式有 flex-start | flex-end | center | space-between | space-around

align-items定義交叉軸的對齊方式 flex-start | flex-end | center | baseline | stretch

align-content定義多跟軸線的對齊方式

項目屬性：

align-self（改項目的對齊方式）

order （項目排列順序）

flex-grow（項目放大比例）

flex-shrink（項目縮小比例）

flex-basis（在分配多餘空間時，項目佔據的主軸空間）

flex（flex-grow，flex-shrink，flex-basis的縮寫）

2. 簡述grid佈局

​ 網格佈局

3. 幾種實現水平垂直居中的方法

• 使用display：flex，justify-content：center，align-item： center實現

• 肯定高寬狀況下 .test { position: absolute; margin:auto; left:0; top:0; right:0; bottom:0; }，或者 .test { position: absolute; margin:auto; left:50%; top:50%; margin-top： -height/50； margin-left： -width/50； }，

• 不肯定高寬 .test { position: absolute; margin:auto; left:50%; top:50%; transform： translate（-50%，-50%） }，

4. 常見塊級元素和內聯元素

塊級元素： div、form、table、p、h1-h六、dl、li、ul、ol等 內聯元素： a、strong、br、img、i、span、label、input、textarea、select等

5. position定位有哪些

​ absolute（絕對定位，相對於值不爲static的第一個父元素進行定位） relative（相對定位，相對於其正常位置進行定位） fixed（相對於瀏覽器窗口進行定位） static（默認值，沒有定位，元素出如今正常的流中） inherit（繼承父元素position屬性的值） sticky（relative和fixed的結合體，當元素在屏幕內飾relative，滾出屏幕時顯示爲fixed）

6. css3的新屬性

1. transfrom（對元素進行旋轉、縮放、移動或傾斜）、animation（動畫效果）和transition（添加過渡效		     果）
2. 三個邊框效果： border-radius（建立圓角邊框）、border-shadow（陰影）、border-image（使用圖片繪製邊框）
3. 文字效果新增word-wrap、text-overflow和text-shadow，以上等等
複製代碼

7.block、inline和inline-block的區別

• display：block

  1. block元素又叫作塊級元素，它獨佔一行，多個block元素各佔一行。默認狀況下block元素 寬度自動填滿父元素寬度
  2. 能夠設置weight和width屬性，塊級元素設置了width仍是獨佔一行
  3. 能夠設置padding和margin屬性

• display：inline 1.inline元素又叫內聯元素，不會佔一行，多個內聯元素會排列在一行，一行排列不下去纔會 行，，寬度隨元素的內容變化 2.設置width和weight屬性無效 3.inline元素的margin和padding屬性，水平方向上都能產生邊距效果，豎直方向上不會產生 效果

• display： inline-block

  1. 內聯塊級元素擁有inline元素的多個佔據同行特性和block元素的設置高度寬度特性和設置 padding和margin特性

8. display：none和visiblity：hidden的區別

​ 爲none的時候不佔空間，爲hidden的時候隱藏元素依然佔據空間

​ 爲none的會產生迴流和重繪，visiblity：hidden的時候只產生重繪

​ visiblity：hidden的子孫元素設置visiblity：hidden時會失效

9. 什麼是BFC， BFC用來解決什麼問題

格式化上下文：特色是內部的子元素不會影響外部的元素，能夠用來解決margin穿透和清除浮動

一個塊格式化上下文由如下之一建立：

1)根元素或其它包含它的元素
2)浮動元素 (元素的 float 不是 none)
3)絕對定位元素 (元素具備 position 爲 absolute 或 fixed)
4)內聯塊 (元素具備 display: inline-block)
5)表格單元格 (元素具備 display: table-cell，HTML表格單元格默認屬性)
6)表格標題 (元素具備 display: table-caption, HTML表格標題默認屬性)
7)具備overflow 且值不是 visible 的塊元素，
8)display: flow-root
9)column-span: all 應當老是會建立一個新的格式化上下文，即使具備 column-span: all 的元素並不被包裹在一個多列容器中。
複製代碼

10.盒子模型有哪些，如何設置

iE盒子模型： 內容（content+padding+border）+邊界margin 高寬包含padding和border

標準盒子模型： content+padding+border+邊界margin 高寬指的是content

經過box-sizing：content-box設置標準盒子模型，box-sizing：border-box設置ie盒子模型

11.css選擇器有哪些

選擇器有id選擇器、元素選擇器、屬性選擇器、類選擇器、後代選擇器、子元素選擇器、相鄰兄弟選擇器、僞類和僞元素。

12.清除浮動的四種方式

• 在浮動的元素樣式中加入clear：both
• 在浮動元素下面插入清除浮動的塊級元素
• 給浮動元素設置僞類，僞類樣式設置display爲block，clear：both
• 設置BFC（格式化上下文），如浮動父元素設置overflow：auto

13.如何用css實現一個三角形

​ 定義一個div元素，讓它的內容高寬爲0，經過border來實現

div {
    width: 0;
    height: 0;
    border: 40px solid;
    border: transparent transparent red;
}
複製代碼

以上css樣式經過設置底部border邊爲紅色，其餘邊爲透明色，實現了一個底部寬40，高20的紅色的三角形

---

js

###1. addEventListener的第三個參數的做用

指定事件是否在捕獲或者冒泡階段執行，true爲在捕獲階段執行，false默認，在冒泡階段執行

2.什麼是事件冒泡，什麼是事件捕獲

事件冒泡指事件從發生的目標開始，沿着文檔逐層向上冒泡，到documnent爲止，事件捕獲則相反，從documnet開始，沿着文檔向下，直到目標事件爲止，

3.如何阻止事件冒泡和事件捕獲

ie下設置e.cancelBubble = true，在符合w3c的瀏覽器設置e.stopProgation()阻止事件冒泡，也能夠經過preventDefault阻止默認行爲，由於事件處理的默認行爲就是冒泡或者經過return false

使用stopImmediatePropagation() 阻止事件捕獲，須要注意的是stopImmediatePropagation() 也能阻止事件冒泡，調用後，不只父類元素冒泡被阻止，同時該元素綁定的同類事件也會執行

4.typeof返回的數據類型

string、number、boolean、undefined、object、function

5.列舉三種強制類型轉換和2種隱式類型轉換

強制（parseInt、parseFloat、number）

隱式（== ===）

6.split（） join（）區別

前者將字符串切割成數組形式，後者將數組轉爲字符串

7. ajax請求get和post方法的區別

1. get主要是獲取資源，post請求服務器端資源
2. get傳輸數據經過url，post經過http的post機制，將要傳輸的數據放在請求實體中發送給服務器
3. get傳輸數據量小，post傳輸數據量大
4. get不安全，post安全性較高
5. get只能支持ASCII字符傳輸，傳遞中午字符會亂打；post支持標準字符集，能夠傳遞中文字符

8.call、apply和bind的區別

call和apply均可以改變this的指向，區別在於傳入apply的第二個參數是一個數組，call後面是對象

bind後面的參數也是對象，可是bind不會當即執行

9.ajax請求時，如何解析json數據

使用JSON.parse()把json數據轉化爲js對象，使用JSON.Stringify()把js對象轉化爲json對象

10.閉包是什麼，有什麼特性

閉包就是可以讀取函數內部變量的函數，使得函數不被GC回收，若是過多使用，就會形成內存泄露

11.添加 刪除 替換 插入到某個節點的方法

1. 建立新節點

   createElement（） // 建立一個具體元素

   createTextNode（） // 建立一個文本節點

2. 添加、移除、替換、插入

   appendChild（） // 添加

   removeChild（） // 移除

   replaceChild（） // 替換

   insertBefore（） // 插入

12.document onload和doucment ready的區別

onload是在結構和樣式、外部js及圖片加載好後執行js，ready是在dom樹建立完成後就執行，是jquery裏面的方法

13.函數聲明和函數表達式的區別

函數聲明在js解析時就會進行函數提高，所以在同一做用域中，無論函數聲明在哪定義，該函數均可以調用，函數表達式只有在執行到那一塊後，才能夠調用

14. null和undefined的區別

​ null表示‘空’的對象，轉化爲數值是0，undefined是一個表示無的原始值，轉化爲數值是NAN，

​ 變量爲聲明，默認是undefined，null表示尚不存在的對象

​ undefined表示爲未初始化的變量返回的值，null表示一個尚不存在的對象返回的值，undefined能夠看作空的變量，null看作空的對象

15. new操做符幹了什麼

1. 建立了一個空對象。

2. 把所建立的空對象的_ proto _指向構造函數的prototype

3. 執行構造函數中的代碼，構造函數中的this指向對象

4. 返回該對象（除非構造函數中返回一個對象或者函數）

16.實現深度克隆

JSON.parse(JSON.stringify());

17.什麼是同源策略

它是瀏覽器的一種約定，腳本只容許訪問同一站點的資源，協議相同，域名相同，端口號相同，就是同一站點

在瀏覽器中，