史上前端面試最全問答（附答案）

史上前端面試最全知識點（附答案）

一.html & js & css

1.AMD和CMD是什麼？它們的區別有哪些？

AMD和CMD是二種模組定義規範。現在都使用模組化程式設計，AMD，非同步模組定義；CMD，通用模組定義。AMD依賴前置，CMD依賴就近。CMD的API職責單一，沒有全域性require，AMD的一個API可以多用。

2.web開發常見的漏洞。

XSS（跨站指令碼攻擊）：其原理是攻擊者向有XSS漏洞的網站中輸入(傳入)惡意的HTML程式碼，當其它使用者瀏覽該網站時，這段HTML程式碼會自動執行，從而達到攻擊的目的。如，盜取使用者Cookie、破壞頁面結構、重定向到其它網站等。

SQL隱碼攻擊：使用者可以提交一段資料庫查詢程式碼，根據程式返回的結果，獲得某些他想得知的資料，這就是所謂的SQL Injection，即SQL隱碼攻擊。

3.cookie和session

當你在瀏覽網站的時候，WEB 伺服器會先送一小小資料放在你的計算機上，Cookie 會幫你在網站上所打的文字或是一些選擇，

都紀錄下來。當下次你再光臨同一個網站，WEB 伺服器會先看看有沒有它上次留下的 Cookie 資料，有的話，就會依據 Cookie
裡的內容來判斷使用者，送出特定的網頁內容給你。
 當程式需要為某個客戶端的請求建立一個session時，伺服器首先檢查這個客戶端的請求裡是否已包含了一個session標識
（稱為session id），如果已包含則說明以前已經為此客戶端建立過session，伺服器就按照session id把這個session檢索出來
使用（檢索不到，會新建一個），如果客戶端請求不包含session id，則為此客戶端建立一個session並且生成一個與此session相
關聯的session id

4.MVC BFC

mvc是模型(model)－檢視(view)－控制器(controller)的縮寫，一種軟體設計典範使用MVC的目的是將M和V的實現程式碼分離，從而使同一個程式可以使用不同的表現形式。MVC對應Html，CSS，js。

BFC全稱”Block Formatting Context”, 中文為“塊級格式化上下文”。流體特性：塊狀水平元素，如div元素（下同），在預設情況下（非浮動、絕對定位等），水平方向會自動填滿外部的容器；BFC元素特性表現原則就是，內部子元素不會影響外部的元素。

5.HTTP狀態碼：

 1.訊息  2.成功 3.重定向 4.請求錯誤 5.伺服器錯誤

 304：響應禁止包含訊息體，如果客戶端傳送了一個帶條件的 GET 請求且該請求已被允許，而文件的內容（自上次訪問以來或者根據請求的條件）並沒有改變，則伺服器應當返回這個狀態碼。
 305：被請求的資源必須通過指定的代理才能被訪問。
 400：語義有誤，當前請求無法被伺服器理解。除非進行修改，否則客戶端不應該重複提交這個請求，或者請求引數有誤。
 403：伺服器已經理解請求，但是拒絕執行它。
 404：請求失敗，請求所希望得到的資源未被在伺服器上發現。
 500：伺服器遇到了一個未曾預料的狀況，導致了它無法完成對請求的處理。一般來說，這個問題都會在伺服器端的原始碼出現錯誤時出現。

6.HTML 5 增加了一項新功能是 自定義資料屬性 ，也就是  data- 自定義屬性。在HTML5中我們可以使用以 data- 為字首來設定我們需要的自定義屬性，來進行一些資料的存放。
<div id = “user” data-uid = “12345” data-uname = “愚人碼頭” > </div>

// 使用getAttribute獲取 data- 屬性
var user = document . getElementById ( `user` ) ;
var userName =user . getAttribute ( `data-uname` ) ; // userName = `愚人碼頭`
var userId = user . getAttribute ( `data-uid` ) ; // userId = `12345`
 
使用setAttribute設定 data- 屬性
user . setAttribute ( `data-site` , `http://www.css88.com` ) ;

7.使div水平垂直都居中

知道DIV的自身長度和寬度，其實解決的思路是這樣的：首們需要position:absolute;絕對定位。而層的定位點，使用外補丁margin負值的方法。負值的大小為層自身寬度高度除以二。[style=”position: absolute;top:50%;left: 50%”]只能實現DIV離左邊框和上邊框的距離為螢幕的物理尺寸的一半，忽略了DIV本身的長度和寬度，所以不會實現DIV的水平垂直居中。
不知道DIV的本身長度和寬度時:

        $(window).load(function(){
            $(".mydiv").css({
                position: "absolute",
                left: ($(window).width() - $(".mydiv").width())/2,
                top: ($(window).height() - $(".mydiv").height())/2
            });
        });

8.Call（）和apply（）
建構函式：

 function showname(){
    this.name="zygg"；
}
var qq=new showname();
console.log(qq.name);

我們發現apply()和call()的真正用武之地是能夠擴充函式賴以執行的作用域，可以改變函式體內部 this 的指向：

      window.firstName = "diz";
        window.lastName = "song";
        var myname = { firstName: "my", lastName: "Object" };
        function show() {
        console.log("Hello " + this.firstName + " " +this.lastName, " glad to meet you!");
        }
        show();
        show.call(myname);//如果不這樣寫，物件myname是沒法呼叫函式 show()的。

二者作用類似，區別就是引數不同：
call(thisObj，Object)
apply(thisObj，[argArray])

9.動態節點繫結事件

Live（） delegate（） bind（）【處理文件中的靜態部分，不用於。。。】
delegate()和live（）作用類似，附加的事件處理程式適用於匹配選擇器的當前及未來的元素（比如由指令碼建立的新元素）。但二者引數不一樣。
$(selector).delegate(childSelector,event,function)

$(selector).live(event,function)

$(“div”).delegate(“p”,”click”,function(){

$(this).slideToggle();

});//只有DIV內的p元素會被繫結事件。
$(“p”).live(“click”,function(){

$(this).slideToggle();

});//文件內所有p元素都會被繫結事件
bind（）可以向元素新增的一個或多個事件處理程式，以及當事件發生時執行的函式。
$(selector).bind(event,function)
$(“button”).bind(“click”,function(){

$("p").slideToggle();

});//bind【捆綁】

10.Position的四個屬性詳解

Position的四個屬性：static，fixed，absolute，relative
首先，static，是position屬性的預設值，也就是無特殊定位，遵循html定位規則。
然後，fixed，是相對於瀏覽器視窗進行定位，不隨頁面的上下翻動而移動，比如固定在頁面末端的二維碼等。
下來，就是absolute，它是相對於它的第一個父元素進行定位，如果你想讓這個div#demo裡的一個子div#sub相對於#demo定位在右上角的某個地方，應該給#demo相對定位，#sub絕對定位。 此時，它的第一個父元素就是id=demo的div；否則它的父元素就是body，這樣它的位置在頁面中保持不變，但是隨著頁面移動會發生變化（區別fixed）。
最後，relative，relative是相對於自己來定位的，相對於其正常位置進行定位。例如：#demo{position:relative;top:-50px;},這時#demo會在相對於它原來的位置上移50px。 
P.S:採用左列left浮動，右列不浮動，採用margin-left定位的方式。

11.理解CSS盒子模型

什麼是CSS的盒子模式呢？為什麼叫它是盒子？先說說我們在網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。

CSS盒子模式
這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也具有這些屬性，所以叫它盒子模式。那麼內容就是盒子裡裝的東西；而填充就是怕盒子裡裝的東西（貴重的）損壞而新增的泡沫或者其它抗震的輔料；邊框就是盒子本身了；至於邊界則說明盒子擺放的時候的不能全部堆在一起，要留一定空隙保持通風，同時也為了方便取出嘛。在網頁設計上，內容常指文字、圖片等元素，但是也可以是小盒子（DIV巢狀），與現實生活中盒子不同的是，現實生活中的東西一般不能大於盒子，否則盒子會被撐壞的，而CSS盒子具有彈性，裡面的東西大過盒子本身最多把它撐大，但它不會損壞的。而且填充只有寬度屬性。

12.區別onmouseover和mouseover

onmouseover是Event 物件的一個屬性，Mouseover是jQuery中的一個事件 。
推薦使用jQuery，直接執行方法$(“#id”).mouseover(function(){});
完全使用js則是如下寫法：document.getElementById(“id”).onmouseover=function(){};
document.getElementsByTagName(“body”)[0].style.backgroundColor=”pink”; //注意不要忘了style，深刻理解DOM的本質。

13.一個簡單的AJAX 的請求

<script type="text/javascript">
function loadXMLDoc(){
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax/demo_get.asp",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">請求資料</button>
<div id="myDiv"></div>
</body>

14.Javascript 的addEventListener()及attachEvent()區別分析

addEventListener()和attachEvent()是一個偵聽事件並處理相應的函式，
可以動態的為網頁內的元素新增一個或多個事件。可以將事件和元素分離，這樣可編輯性就高了。
addEventListener的使用方式： 
target.addEventListener(type, listener, useCapture); 
target： 文件節點、document、window 或 XMLHttpRequest。 
type： 字串，事件名稱，不含“on”，比如“click”、“mouseover”、“keydown”等。 
listener ：實現了 EventListener 介面或者是 JavaScript 中的函式。 
useCapture ：是否使用捕捉，一般用 false 。例如：document.getElementById(“testText”).addEventListener(“keydown”, function (event) { alert(event.keyCode); }, false); 
而attachEvent()則是，target.attachEvent(type, listener); 

注意：attachEvent（）中的type： 字串，事件名稱，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。

15.關於事件監聽

 比如，<button onclick=`A();` /> 就表示"你正在監聽 click 事件", 而事件監聽器就是我們為了要響應這個事件而寫的函式。至於事件監聽機制了，就是冒泡和捕獲。

16.事件監聽機制（冒泡和捕獲）

事件捕獲：事件從最上一級標籤開始往下查詢，直到捕獲到事件目標(target)。
事件冒泡：事件從事件目標(target)開始，往上冒泡直到頁面的最上一級標籤。
假設一個元素div，它有一個下級元素p。
<div>
　　<p>元素</p>
</div>
這兩個元素都繫結了click事件，如果使用者點選了p，它在div和p上都觸發了click事件，那這兩個事件處理程式哪個先執行呢？ 
如div先觸發，這就叫做事件捕獲。
如p先觸發，這就叫做事件冒泡。
IE只支援事件冒泡，其他主流瀏覽器兩種都支援。
程式設計師可以自己選擇繫結事件時採用事件捕獲還是事件冒泡，方法就是繫結事件時通過addEventListener函式，它有三個引數，第三個引數若是true，則表示採用事件捕獲，若是false，則表示採用事件冒泡。
事件的傳播是可以阻止的：
• 在W3c中，使用stopPropagation（）方法
在捕獲的過程中stopPropagation（）；後，後面的冒泡過程也不會發生了~
propagation 【傳播，蔓延】
3.阻止事件的預設行為，例如click a標籤後的跳轉~
• 在W3c中，使用preventDefault（）方法；
• 在IE下設定window.event.returnValue = false;

17.DNS的工作原理（遞迴和迭代）（應用層）

DNS的工作原理及過程分下面幾個步驟：
        第一步：客戶機提出域名解析請求，並將該請求傳送給本地的域名伺服器。
        第二步：當本地的域名伺服器收到請求後，就先查詢本地的快取，如果有該紀錄項，則本地的域名伺服器就直接把查詢的結果返回。 
        第三步：如果本地的快取中沒有該紀錄，則本地域名伺服器就直接把請求發給根域名伺服器，然後根域名伺服器再返回給本地域名伺服器一個所查詢域(根的子域) 的主域名伺服器的地址。
        第四步：本地伺服器再向上一步返回的域名伺服器傳送請求，然後接受請求的伺服器查詢自己的快取，如果沒有該紀錄，則返回相關的下級的域名伺服器的地址。
        第五步：重複第四步，直到找到正確的紀錄。
        第六步：本地域名伺服器把返回的結果儲存到快取，以備下一次使用，同時還將結果返回給客戶機。

18.什麼是DOM事件處理程式？

     首先要理解什麼是DOM？Dom是針對HTML文件的一個API。什麼是事件流？事件流分為：事件冒泡（IE的事件流）和事件捕獲。事件冒泡就是由最具體的元素開始接收，然後逐級向上；事件捕獲就是由不太具體的元素開始接收，逐級向下，最具體的元素最後才接收到事件。
DOM事件處理程式分為DOM0級、DOM2級。DOM0級具有簡單，跨瀏覽器的優勢，它是把函式賦值給一個事件的處理程式屬性。例如：btn.onlick=function（）{。。。}；DOM2級事件定義了兩個方法，用於處理指定和刪除事件處理程式的操作。addEventListener()和removeEventListener()。它們都接收三個引數，要處理的事件名、作為事件處理程式的函式和布林值。布林值為true表示在捕獲階段呼叫事件處理程式，布林值為false是在冒泡處呼叫。注意：事件名要去掉“on”。通過addEventListener（）新增的事件，只能由removeEventListener()刪除。IE存在相容問題，可以用attachEvent()新增事件和detachEvent（）刪除事件。接收兩個引數，事件處理程式的名稱和函式。注意：事件名此時要加”on”。

19.如果給一個元素同時繫結兩個事件，會怎麼樣？

    Dom 0級和Dom 2級都可以給一個元素新增多個事件，Dom 0級的每個事件只支援一個事件處理程式，如果繫結同一個事件，那麼後邊的那個事件，函式會覆蓋掉前邊的那個事件函式。Dom2級可以新增多個事件處理程式，他們會按照新增的順序觸發。

20.深入理解閉包

要理解閉包，首先必須理解Javascript特殊的變數作用域。我的理解是，閉包就是能夠讀取其他函式內部變數的函式。
示意圖：

既然函式b可以讀取函式a中的區域性變數，那麼只要把b作為返回值，我們不就可以在a外部讀取它的內部變數了嗎！

閉包可以用在許多地方。它的最大用處有兩個，一個是前面提到的可以讀取函式內部的變數，另一個就是讓這些變數的值始終保持在記憶體中。

                             來自於：http://www.jb51.net/article/24101.htm

21.jQuery原始碼分析：

 選擇器 Sizzle引擎 回撥物件 – Callbacks 事件繫結 – 繫結設計
DOM操作方法與核心 Ajax – 整體結構
 選擇器 Sizzle引擎：個人認為，sizzle選擇器是增強版的querySelectorAll 函式：返回指定元素節點的子樹中匹配selector的節點集合，採用的是深度優先預查詢；如果沒有匹配的，這個方法返回空集合） 

22.設計模式：

一共有23種設計模式
1.觀察者模式
2.監聽模式

1. Factory Method（工廠方法）：定義一個用於建立物件的介面，讓子類決定例項化哪一個類。就行建構函式

2. Abstract Factory（抽象工廠）：。。。

3. Prototype（原型）：當要例項化的類是在執行時刻指定時，例如，通過動態裝載。

   ......
   

23.CSS框架：

YUI、JQuery、Prototype，bootstrap。

24.幾個前端框架的區別：

jQuery 
核心js只有50K，小而精，佔用頻寬小，側重於對js dom程式設計。有靈活便捷的Ajax請求和回撥操作。
ExtJS 
一整套帶有UI的js庫，封裝得很多，核心js就600多K，這麼大的東西入口網站當然就別想了，裡面的效果當然也不會運用到入口網站，所以它是專門為管理系統而生的。
3、YUI 
或者是類似於網盤應用這種東東。 
4.Dojo 
Dojo是功能最為強大的javascript框架，刻意提醒一下：功能最強大。所以它幾乎包含了所有你可能想要用到的東西。）。 Dojo更適合企業應用和產品開發的需要，
5、Prototype 
最成熟的。但個人認為可以被Jquery取代。兩者相似度也比較高。

25.說說float和position

float:none|left|right|inherit
Inherit:規定應該從父元素繼承 float 屬性的值。

float是相對定位的，會隨著瀏覽器的大小和解析度的變化而改變，而position就不行了，所以一般情況下還是float佈局！在區域性可能會用到position進行定位！既然是佈局，就用float好，這個我比較常用。這個浮動是可以清除的，一般不會影響整體佈局。 而position，定位，是不受約束的，這個貌似都談不上佈局了，一般要是做什麼特殊的定位或者浮動層的時候，可以考慮使用！float會影響後面的元素，而position不會影響後面的元素。

26.清除浮動：

父級div定義 height,父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。 
結尾處加空div標籤 clear:both 

父級div定義 overflow:hidden /auto

27.前端效能優化

①對於頁面來說：儘量減少DOM元素的數量

              減少iframe的數量
              減少http的請求次數
              提前載入

②對於CSS來說：將樣式表置頂

              使用link代替@important

　　區別1：link引用CSS時，在頁面載入時同時載入；@import需要頁面網頁完全載入以後載入。
　　區別2：link是XHTML標籤，無相容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支援。link支援定義RSS(簡易資訊聚合).
區別3：link支援使用Javascript控制DOM去改變樣式；而@import不支援。

③對於JS來說： 將指令碼置底

              使用外部JS和CSS檔案
              精簡JS和CSS檔案，去除重複指令碼

 目前，前端效能測試的執行工具也有很多，比如YSlow，Page Speed，dynaTrace AJAX Edition，webload等等。

28.HTML語義化

就是當你寫html時，要按照人們的思考邏輯寫。不但要自己能看懂，也要讓別人也能看懂，不要讓別人覺得你的程式碼很亂。語義化的主要目的就是讓大家直觀的認識標籤(markup)和屬性(attribute)的用途和作用。

語義化的網頁的好處，最主要的就是對搜尋引擎友好，有了良好的結構和語義你的網頁內容自然容易被搜尋引擎抓取，你網站的推廣便可以省下不少的功夫。

語義 Web 技術有助於利用基於開放標準的技術，從資料、文件內容或應用程式碼中分離出意義。

29.可以談談自己對SEO和title和keywords堆砌問題。

30.說說jsonp，getJSON(),getScript():

Jsonp（解決跨域）

一種非正式傳輸協議，人們把它稱作JSONP，該協議的一個要點就是允許使用者傳遞一個callback引數給服務端，然後服務端返回資料時會將這個callback引數作為函式名來包裹住JSON資料，這樣客戶端就可以隨意定製自己的函式來自動處理返回資料了。

因為，<script> 元素的這個開放策略。

getJSON():

所以getJSON和ajax的方式(實際就是jsonp)想比較，也就是callback函式一個是自動生成的函式名，一個是手工指定的函式名。
getScript():

客戶端：

<script type="text/javascript">
      jQuery.getScript("http://alloyteamzygg.sinaapp.com/js/test.js",function(){
          console.log(zy.name)
      })

</script>

服務端：

 Var zy={“name”:”zygg”,
“age”:”22”
};

31.prototype屬性

每一個建構函式都有一個屬性叫做原型(prototype)。這個屬性非常有用：為一個特定類宣告通用的變數或者函式。prototype是一個物件，因此，你能夠給它新增屬性。你新增給prototype的屬性將會成為使用這個建構函式建立的物件的通用屬性。

32.js實現類:

建構函式方式：
由於js類的定義方法和函式的定義方法一樣，所以定義建構函式的同時就定義了類。建構函式內的方法和屬性也就是類中的方法和屬性。
原型方式 
  該方式利用了物件的prototype屬性。首先定義了一個空函式，然後通過prototype屬性來定義物件的屬性。呼叫該函式時，原型的所有屬性都會立即賦予要建立的物件

33.js物件導向

  物件導向的語言有一個標誌，即擁有類的概念

34.建構函式

js建立物件的方式包括兩種：物件字面量和使用new表示式。對應程式碼：

Var zy={
  “name”:”zygg”,
  “age”:22
}

 function zy(name,age){

        this.name=name;
        this.age=age;
    }
    zy.prototype.sex="male";

    var zygg=new zy("bailu",18)
    console.log(zygg.name)  //bailu

35.js繼承

繼承是指一個物件直接使用另一物件的屬性和方法
實現方法：
物件冒充，及call（）Apply（）參見上述call和apply的用法。
原型鏈方式：
js中每個物件均有一個隱藏的__proto__屬性，一個例項化物件的__proto__屬性指向其類的prototype方法，而這個prototype方法又可以被賦值成另一個例項化物件，這個物件的__proto__又需要指向其類，由此形成一條鏈。

那麼__proto__是什麼？我們在這裡簡單地說下。每個物件都會在其內部初始化一個屬性，就是__proto__，當我們訪問一個物件的屬性 時，如果這個物件內部不存在這個屬性，那麼他就會去__proto__裡找這個屬性，這個__proto__又會有自己的__proto__，於是就這樣 一直找下去，也就是我們平時所說的原型鏈的概念。

36.js事件委託

“事件處理程式過多”問題的解決方案就是事件委託。
事件委託利用的是事件冒泡機制，只制定一事件處理程式，就可以管理某一型別的所有事件（使用事件委託，只需在DOM樹中儘量最高的層次上新增一個事件處理程式）。
這裡要用到事件源：event 物件，需要用到target屬性，其 事件屬性可返回事件的目標節點（觸發該事件的節點）

oUl.onmouseover = function(ev){ 
            var target = ev.target 
            if(target.nodeName.toLowerCase() == "li"){
                target.style.background = "red";
            }
        }

37.js自定義事件：

js自定義事件用處較多，最主要的就是實現觀察者模式.
觀察者模式( 又叫釋出者-訂閱者模式 )應該是最常用的設計模式之一。
平時接觸的dom事件. 也是js和dom之間實現的一種觀察者模式.
觀察者模式舉例：
div.onclick  =  function click (){
 
   alert ( “click` )
 
}
只要訂閱了div的click事件. 當點選div的時候, function click就會被觸發.Div為釋出者，click事件為訂閱者
自定義事件例子：

<script src="Scripts/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $(`body`).on(`someclick`, function () {
                console.log(`被點選了~~`);
            });
            $(`body`).trigger(`someclick`);
        });      
   </script> 

on（）是jQuery中的類似於bind（），live（），delegate（）等繫結事件的方法。
trigger() 方法觸發被選元素的指定事件型別。先給固定元素繫結一個自定義事件”someclick”，然後必須通過trigger（）來使自定義事件可以使用。
Trigger【引發，觸發;】

38.回撥函式：

函式a有一個引數，這個引數是個函式b，當函式a執行完以後執行函式b。那麼這個過程就叫回撥。函式b是你以引數形式傳給函式a的，那麼函式b就叫回撥函式。回撥函式可以繼續擴充套件一個函式的功能，可以是程式非常靈活。

 function zy(callback){
          alert("開始"); 
          callback();
      }
        function zygg(){
            alert("我是回撥函式");
        }
       function test(){
           zy(zygg)
       }

39.說一說css中box和flex

恩恩，首先`box`吶是比較早的語法，使用它時需要帶上字首，比如  display: -webkit-box; / Chrome 4+, Safari 3.1, iOS Safari 3.2+ /，而”flex”是2012年的語法，是css3新規定的，也將是以後標準的語法。將父元素的display屬性設定為-webkit-box（box），然後子元素通過屬性-webkit-box-flex來指定一個框的子元素是否是靈活的或固定的大小，如上，定義兩個靈活的p元素。如果父級box的總寬度為300px，＃P1將有一個100px的寬度，＃P2將有一個200px的寬度，也就是呈固定比例劃分。當然了，也可以這樣寫：

<div style="background-color: pink;width: 500px;height:500px;display:flex">
    <p style="background-color: orange;
flex:1.0;border:1px solid red;">111111111111</p>
    <p style="background-color: orangered;
flex:2.0;border:1px solid blue;">22222222222</p>
</div

當然了css3規定了，一系列的有關box的屬性，比如 box-shadow。。。。。

40.JavaScript內建物件有以下幾種。 

 String物件：處理所有的字串操作 
 Math物件：處理所有的數學運算 
 Date物件：處理日期和時間的儲存、轉化和表達 
 Array物件：提供一個陣列的模型、儲存大量有序的資料 
 Event物件：提供JavaScript事件的各種處理資訊 
 

41.JavaScript內建函式

①：escape( )escape() 函式可對字串進行編碼，這樣就可以在所有的計算機上讀取該字串。 eg:?=%3
②：eval( ) eval() 函式可計算某個字串，並執行其中的的 JavaScript 程式碼。
eg:eval(“x=10;y=20;document.write(x*y)”)
③：isFinite( )isFinite() 函式用於檢查其引數是否是無窮大。返回true或者false。
④：isNaN( ) isNaN( ) 函式可用於判斷其引數是否是 NaN
⑤：parseFloat( )parseFloat() 函式可解析一個字串，並返回一個浮點數。
⑥;parseInt( ) parseInt() 函式可解析一個字串，並返回一個整數。
⑦：unescape( ) unescape() 函式可對通過 escape() 編碼的字串進行解碼。

42.自適應問題

自適應指的就是指其長（寬）度可以根據瀏器視窗的大小自動改變其長（寬）度（隨瀏覽器長（寬）的改變而改變）,而不會被瀏覽器遮住。
實現方法（以左側固定，右側自適應為例）：
①採用左列 left 浮動，右列不浮動，採用 margin-left 定位的方式。
②左列使用絕對定位，右列使用 margin-left 定位。

43.我們給一個dom同時繫結兩個點選事件，一個用捕獲，一個用冒泡，你來說下會執行幾次事件，然後會先執行冒泡還是捕獲！！！

44.jQuery的三種繫結事件方式：bind（），live（），delegate（）

45.從輸入 URL 到頁面載入完的過程中都發生了什麼事情？

①首先如果我們如果輸入的不是ip地址，而是域名的話，就需要IP解析，DNS域名解析（具體見DNS工作機制）。
②解析出來對應的IP後，如不包含埠號，http協議預設埠號是80；https（http+ssl（傳輸層））是430！然後向IP發起網路連線，根據http協議要求，組織一個請求的資料包，裡面包含大量請求資訊。
③伺服器響應請求，將資料返回給瀏覽器。資料可能是根據HTML協議組織的網頁，裡面包含頁面的佈局、文字。資料也可能是圖片、指令碼程式等。
④開始根據資源的型別，將資源組織成螢幕上顯示的影像，這個過程叫渲染，網頁渲染是瀏覽器最複雜、最核心的功能。
⑤將渲染好的頁面影像顯示出來，並開始響應使用者的操作。

46.jQuery 選擇器種類

     

47.Unicode和ASCII的區別是什麼回答

計算機發明後，為了在計算機中表示字元，人們制定了一種編碼，叫ASCII碼。
中國人利用連續2個擴充套件ASCII碼的擴充套件區域（0xA0以後）來表示一個漢字，該方法的標準叫GB-2312。因為各個國家地區定義的字符集有交集，因此使用GB-2312的軟體，就不能在BIG-5的環境下執行（顯示亂碼），反之亦然。

為了把全世界人民所有的所有的文字元號都統一進行編碼，於是制定了UNICODE標準字符集。UNICODE 使用2個位元組表示一個字元(unsigned shor int、WCHAR、_wchar_t、OLECHAR)。

48.JS的資料型別：字串、數字、布林、陣列、物件、Null、Undefined

Null和undefined的區別：
undefined表示變數宣告但未初始化時的值，javascript直譯器不知道這是什麼東西,會丟擲”未定義”的錯誤
null表示準備用來儲存物件，還沒有真正儲存物件的值。從邏輯角度看，null值表示一個空物件指標，意思是你定義了它,但它沒有分配記憶體空間。

二.CSS(3)

css3總的說來大概就是邊框的一些特殊樣式，比如圓角，還有就是漸變，動畫。
在CSS3中border-radius屬性被用於建立圓角（前提是有邊框屬性）：border-radius:10px;

 如果你在 border-radius 屬性中只指定一個值，那麼將生成 4 個 圓角。

 其也可以這樣寫：border-radius:1px 2px 3px 4px [可以給四個角同時設定]

 也可以border-top/bottom-left/right-radius，給某個角給值。

  其值也可以這樣：  border-radius: 15px/50px;

                    border-radius: 50% ;【橢圓效果】

CSS3中的box-shadow屬性被用來新增陰影:box-shadow : 3px 3px 3px yellow;[上右下左]

有了CSS3的border-image屬性，你可以使用影像建立一個邊框：

 -webkit-border-image : url(border.png) 30 30 round;

round : 影像平鋪（重複）來填充該區域。

Stretch 這裡，影像被拉伸以填充該區域。

background-size指定背景影像的大小。CSS3以前，背景影像大小由影像的實際大小決定。

 background-size:80px 60px;

background-Origin屬性指定了背景影像的位置區域。
content-box, padding-box,和 border-box區域內可以放置背景影像。

Eg:background-origin:border-box;

CSS3 允許你在元素,那個新增多個背景影像。
background-image:url(img_flwr.gif),url(img_tree.gif);
CSS3 background-clip 屬性，類比background-origin[背景圖片]
作用：指定繪圖區的背景，也就是規定背景的真正作用區域。
語法：
background-clip: border-box|padding-box|content-box;

CSS3 定義了兩種型別的漸變（gradients）：
線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
徑向漸變（Radial Gradients）- 由它們的中心定義
語法：background: -webkit-linear-gradient(red, pink); 從上到下

  background: -webkit-linear-gradient(left, red , blue);  從左向右

-moz代表firefox瀏覽器私有屬性
-ms代表IE瀏覽器私有屬性
-webkit代表chrome、safari（蘋果瀏覽器）私有屬性
-o代表opera（歐朋瀏覽器）的私有屬性

background: -webkit-linear-gradient(left top, red , blue); 漸變呈對角線變化，從左上角開始。
漸變的方向上也可以做更多的控制，您可以定義一個角度，而不用預定義方向：
 background: -webkit-linear-gradient(180deg, red, blue);
也可以同時使用多個顏色節點：
background: -webkit-linear-gradient(red, green, blue);
CSS3 漸變也支援透明度（transparency），可用於建立減弱變淡的效果：
background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1));
我們使用 rgba() 函式來定義顏色結點。rgba() 函式中的最後一個引數可以是從 0 到 1 的值，它定義了顏色的透明度：0 表示完全透明，1 表示完全不透明。r代表紅色，g代表綠色，b代表藍色，a代表透明度。
重複的漸變：
background: -webkit-repeating-linear-gradient(…);
為了建立一個徑向漸變，您也必須至少定義兩種顏色結點。
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);
比例越大，”半徑越大”，它的預設形狀是橢圓。也可以自定義形狀;
background: -webkit-radial-gradient(circle, red, yellow, green);
CSS3的文字陰影:
text-shadow: 5px 5px 5px #FF0000;分別對應水平陰影，垂直陰影，模糊的距離，以及陰影的顏色.
CSS3文字的強制換行：
p {word-wrap:break-word;}

CSS3 @font-face 規則，自定義字型。

<style> 
@font-face
{
font-family: myFirstFont;
src: url(`Sansation_Light.ttf`)
    }

div
{
font-family:myFirstFont;
}
</style>

CSS3 2D 轉換：
您將瞭解2D變換方法：
translate()
rotate()
scale()
skew()
matrix()
rotate()方法，在一個給定度數順時針旋轉的元素。負值是允許的，這樣是元素逆時針旋轉。

-webkit-transform:rotate(30deg); /* Safari and Chrome */ 注意是-webkit-transform :是冒號

translate()方法，根據左(X軸)和頂部(Y軸)位置給定的引數，從當前元素位置移動:

 -webkit-transform:translate(50px,100px)

scale()方法，該元素增加或減少的大小，取決於寬度（X軸）和高度（Y軸）的引數

 -webkit-transform:scale(1,2); 也就是寬度和高度呈對應的倍數增加。

skew()方法，該元素會根據橫向（X軸）和垂直（Y軸）線引數給定角度：

 skew(30deg,20deg)是繞X軸和Y軸周圍20度30度的元素。

matrix 方法有六個引數，包含旋轉，縮放，移動（平移）和傾斜功能。
rty 描述 CSS
transform 適用於2D或3D轉換的元素 3
transform-origin 允許您更改轉化元素位置 3
函式 描述
matrix(n,n,n,n,n,n) 定義 2D 轉換，使用六個值的矩陣。
translate(x,y) 定義 2D 轉換，沿著 X 和 Y 軸移動元素。
translateX(n) 定義 2D 轉換，沿著 X 軸移動元素。
translateY(n) 定義 2D 轉換，沿著 Y 軸移動元素。
scale(x,y) 定義 2D 縮放轉換，改變元素的寬度和高度。
scaleX(n) 定義 2D 縮放轉換，改變元素的寬度。
scaleY(n) 定義 2D 縮放轉換，改變元素的高度。
rotate(angle) 定義 2D 旋轉，在引數中規定角度。
skew(x-angle,y-angle) 定義 2D 傾斜轉換，沿著 X 和 Y 軸。
skewX(angle) 定義 2D 傾斜轉換，沿著 X 軸。
skewY(angle) 定義 2D 傾斜轉換，沿著 Y 軸。

CSS3 3D 轉換:
rotateX()
rotateY()
-webkit-transform:rotateX/Y(120deg); / Safari and Chrome /

CSS3 過渡 : transition 屬性.
CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果。
要實現這一點，必須規定兩項內容：
指定要新增效果的CSS屬性
指定效果的持續時間
Eg : -webkit-transition: -webkit-transform 3s;
-webkit-transition-delay 規定過渡效果何時開始。預設是 0。
CSS3 動畫
當在@keyframe建立動畫，把它繫結到一個選擇器，否則動畫不會有任何效果。
指定至少這兩個CSS3的動畫屬性繫結向一個選擇器：
規定動畫的名稱
規定動畫的時長
<style>
div{
width:100px;
height:100px;
background:red;
-webkit-animation:myfirst 5s; / Safari and Chrome /
}
@-webkit-keyframes myfirst / Safari and Chrome /
{
from {background:red;}
to {background:yellow;}
}
</style>
也可以這樣寫：
@-webkit-keyframes myfirst / Safari and Chrome /
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
其中不僅僅跟background屬性，可以跟一系列屬性。

屬性 描述 CSS
@keyframes 規定動畫。 3
animation 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。 3
animation-name 規定 @keyframes 動畫的名稱。 3
animation-duration 規定動畫完成一個週期所花費的秒或毫秒。預設是 0。 3
animation-timing-function 規定動畫的速度曲線。預設是 “ease”。 3
animation-delay 規定動畫何時開始。預設是 0。 3
animation-iteration-count 規定動畫被播放的次數。預設是 1。 3
animation-direction 規定動畫是否在下一週期逆向地播放。預設是 “normal”。 3
animation-play-state 規定動畫是否正在執行或暫停。預設是 “running”。 3
通過 CSS3多列，您能夠建立多個列來對文字進行佈局 – 就像報紙那樣！
在本章中，您將學習如下多列屬性：
column-count
column-gap
column-rule

div
{
-webkit-column-count:3; /* Safari and Chrome */    將文章劃為3列
-webkit-column-gap:40px; /* Safari and Chrome */    每列間的距離為40px
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */  設定列之間
的寬度，樣式和顏色
} 

三．Html5

Html5新加了一些語義元素，畫布，拖放，web儲存（localstarge，sessionstrage）等。
1.HTML5 定了 8 個新的 HTML 語義（semantic） 元素。所有這些元素都是 塊級 元素。
為了能讓舊版本的瀏覽器正確顯示這些元素，你可以設定 CSS 的 display 屬性值為 block:
2.你可以為 HTML 新增新的元素。
fuck{
Font-family：simhei;
Color:pink
}
本例中，JavaScript 語句 document.createElement(“myHero”) 是為了為 IE 瀏覽器新增新的元素。Internet Explorer 8 及更早 IE 版本的瀏覽器不支援以上的方式。幸運的是， Sjoerd Visscher 建立了 “HTML5 Enabling JavaScript”, ” shiv”:以上程式碼是一個註釋，作用是在 IE 瀏覽器的版本小於 IE9 時將讀取 html5.js 檔案，並解析它。
3.HTML5 <canvas> 元素用於圖形的繪製，通過指令碼 (通常是JavaScript)來完成.
<canvas> 標籤只是圖形容器，您必須使用指令碼來繪製圖形。Ie8以及以前不支援、

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

getContext() 方法返回一個用於在畫布上繪圖的環境。
設定fillStyle屬性可以是CSS顏色，漸變，或圖案。fillStyle 預設設定是#000000（黑色）。
fillRect(x,y,width,height) 方法定義了矩形當前的填充方式。
canvas 是一個二維網格。canvas 的左上角座標為 (0,0)
在Canvas上畫線，我們將使用以下兩種方法：
moveTo(x,y) 定義線條開始座標
lineTo(x,y) 定義線條結束座標
然後使用 stroke() 方法來繪製線條:
在canvas中繪製圓形, 我們將使用以下方法: arc(x,y,r,start,stop)
ctx.arc(95,50,20,0,2*Math.PI);
引數分別為，圓心的橫座標，縱座標，半徑，起始角（以弧度記），結束角（以弧度記）
使用 canvas 繪製文字，重要的屬性和方法如下：
font – 定義字型
fillText(text,x,y) – 在 canvas 上繪製實心的文字
strokeText(text,x,y) – 在 canvas 上繪製空心的文字
漸變可以填充在矩形, 圓形, 線條, 文字等等, 各種形狀可以自己定義不同的顏色。
以下有兩種不同的方式來設定Canvas漸變：
createLinearGradient(x,y,x1,y1) – 建立線條漸變
createRadialGradient(x,y,r,x1,y1,r1) – 建立一個徑向/圓漸變

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

將圖片畫在畫布上：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

SVG 指可伸縮向量圖形 (Scalable Vector Graphics)SVG 影像在放大或改變尺寸的情況下其圖形質量不會有損失

Canvas 與 SVG 的比較：
SVG 是一種使用 XML 描述 2D 圖形的語言。Canvas 通過 JavaScript 來繪製 2D 圖形。
Svg支援事件處理器，canvas不支援事件處理器
在 SVG 中，每個被繪製的圖形均被視為物件，而canvas能夠以 .png 或 .jpg 格式儲存結果影像
如果 SVG 物件的屬性發生變化，那麼瀏覽器能夠自動重現圖形。

Html5的拖放功能、

HTML5 – 使用地理定位：請使用 getCurrentPosition() 方法來獲得使用者的位置。
Html5新的input型別：

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
Week

HTML5 新的表單元素：

<datalist>
<keygen>
<output>

Select和datalist的區別：
select：5個值裡面選擇1個；
datalist：你可以在文字框裡填值，也可以在下面5個值裡選1個。

<input list=”browser” name=”browser”>

<datalist id="browser">
    <option value="Internet Explorer"></option>
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>

<input type=”submit”>

<keygen> 元素的作用是提供一種驗證使用者的可靠方法。
<keygen>標籤規定用於表單的金鑰對生成器欄位。
當提交表單時，會生成兩個鍵，一個是私鑰，一個公鑰。
<output> 元素用於不同型別的輸出，比如計算或指令碼輸出：

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
    <input type="range" id="a" value="50">100
    +<input type="number" id="b" value="50">
    =<output name="x" for="a b"></output>
</form>

屬性 值 描述
for element_id 定義輸出域相關的一個或多個元素。
form form_id 定義輸入欄位所屬的一個或多個表單。
name name 定義物件的唯一名稱。（表單提交時使用）

P.S：別忘了給range和number設定value屬性。

<form>新屬性：

autocomplete
novalidate

<input>新屬性：

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step
①. autocomplete 屬性規定 form 或 input 域應該擁有自動完成功能。
當使用者在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項。有on（開）,off（關）。
②．novalidate 屬性規定在提交表單時不驗證 form 或 input 域輸入元素的合法性。
③．autofocus 屬性是一個 boolean 屬性.autofocus 屬性規定在頁面載入時，域自動地獲得焦點，就是進去就可以直接輸入。
④．form 屬性規定輸入域所屬的一個或多個表單。Eg:
<form action=”demo-form.php” id=”form1″>
First name: <input type=”text” name=”fname”>

<input type=”submit” value=”Submit”>
</form>
Last name: <input type=”text” name=”lname” form=”form1″>
“Last name” 欄位沒有在form表單之內，但它也是form表單的一部分。
⑤The formaction 屬性用於描述表單提交的URL地址.
⑥formenctype 屬性描述了表單提交到伺服器的資料編碼 (只對form表單中 method=”post” 表單)
⑦formmethod 屬性定義了表單提交的方式。
⑧novalidate屬性描述了 <input> 元素在表單提交時無需被驗證。
⑨formtarget 屬性指定一個名稱或一個關鍵字來指明表單提交資料接收後的展示。
<input type=”submit” formtarget=”_blank” value=”提交到一個新的頁面上”>
10.height 和 width 屬性規定用於 image 型別的 <input> 標籤的影像高度和寬度。
<input type=”image” src=”05.jpg”>這種形式寫在表單裡，可以實現點選圖片提交表單。
11.list 屬性規定輸入域的 datalist。datalist 是輸入域的選項列表。結合datalist標籤使用。
12.min、max 和 step 屬性用於為包含數字或日期的 input 型別規定限定（約束）。
13.

   multiple 屬性是一個 boolean 屬性.
  multiple 屬性規定<input> 元素中可選擇多個值。例如同時選擇多個檔案上傳。

14.pattern 屬性描述了一個正規表示式用於驗證 <input> 元素的值。
15.placeholder 屬性提供一種提示（hint），描述輸入域所期待的值
16.required 屬性規定必須在提交之前填寫輸入域（不能為空）。

17.step 屬性為輸入域規定合法的數字間隔。

如果 step=”3″，則合法的數是 -3,0,3,6 等
語義元素：

一個語義元素能夠清楚的描述其意義給瀏覽器和開發者。
無語義 元素例項: <div> 和 <span> - 無需考慮內容.

語義元素例項: <form>, <table>, and <img> – 清楚的定義了它的內容.
HTML5中新的語義元素：
許多現有網站都包含以下HTML程式碼： <div id=”nav”>, <div class=”header”>, 或者 <div id=”footer”>, 來指明導航連結, 頭部, 以及尾部.

<section> 標籤定義文件中的節（section、區段）。比如章節、頁首、頁尾或文件中的其他部分。
<article> 標籤定義獨立的內容。.
<nav> 標籤定義導航連結的部分。
<aside> 標籤定義頁面主區域內容之外的內容（比如側邊欄）。
<header>元素描述了文件的頭部區域
<footer> 元素描述了文件的底部區域.
<figure>標籤規定獨立的流內容（影像、圖表、照片、程式碼等等）。
<figcaption> 標籤定義 <figure> 元素的標題.
為了讓這些塊及元素在所有版本的瀏覽器中生效，你需要在樣式表檔案中設定一下屬性 (以下樣式程式碼可以讓舊版本瀏覽器支援本章介紹的塊級元素):
header, section, footer, aside, nav, article, figure
{ 
display: block; 
}
HTML5 Shiv解決ie舊版本不支援h5新元素。瀏覽器小於IE9版本時會載入html5shiv.js檔案. 你必須將其放置於<head> 元素中。讓CSS 樣式應用在未知元素上只需執行 document.createElement(elementName) 即可實現。html5shiv就是根據這個原理建立的。如下：

<!--[ifltIE9]>
<script
type="text/javascript"
src="scripts/html5shiv.js"></script>
<![endif]-->

HTML5 Web 儲存

早些時候,本地儲存使用的是cookies。但是Web 儲存需要更加的安全與快速. 
localStorage – 沒有時間限制的資料儲存
sessionStorage – 針對一個 session 的資料儲存

    if(typeof(Storage)!=="undefined")
  {
  if (localStorage.clickcount)
    {
    localStorage.clickcount=Number(localStorage.clickcount)+1;
    }
  else
    {
    localStorage.clickcount=1;
    }

關鍵詞：localStorage.clickcount
HTML5 應用程式快取
1.離線瀏覽 – 使用者可在應用離線時使用它們
2.速度 – 已快取資源載入得更快
3.減少伺服器負載 – 瀏覽器將只從伺服器下載更新過或更改過的資源。

 <!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

manifest 檔案需要配置正確的 MIME-type，即 “text/cache-manifest”。必須在 web 伺服器上進行配置。manifest 檔案是簡單的文字檔案，它告知瀏覽器被快取的內容（以及不快取的內容）。
manifest 檔案可分為三個部分：
CACHE MANIFEST – 在此標題下列出的檔案將在首次下載後進行快取
NETWORK – 在此標題下列出的檔案需要與伺服器的連線，且不會被快取
FALLBACK – 在此標題下列出的檔案規定當頁面無法訪問時的回退頁面（比如 404 頁面）

HTML5 Web Workers

web worker 是執行在後臺的 JavaScript，不會影響頁面的效能。
當在 HTML 頁面中執行指令碼時，頁面的狀態是不可響應的，直到指令碼已完成。
web worker 是執行在後臺的 JavaScript，獨立於其他指令碼，不會影響頁面的效能。您可以繼續做任何願意做的事情：點選、選取內容等等，而此時 web worker 在後臺執行。

 首先，檢測瀏覽器是否支援web worker。

if(typeof(Worker)!=="undefined"){
      ......
}

 首先建立 web worker 檔案，也就是外部的js檔案 
 var i=0;
 postMessage(i);
 建立 Web Worker 物件
 w=new Worker("demo_workers.js");

當我們建立 web worker 物件後，它會繼續監聽訊息（即使在外部指令碼完成之後）直到其被終止為止。

w.terminate(); terminate【終止】

具體例項：

 if(typeof(Worker)!=="undefined"){

       var w=new Worker("client.js");

       w.onmessage=function(ev){

           alert(ev.data)
       }

   }

 關鍵：postMessage()   onmessage;

HTML5 伺服器傳送事件(Server-Sent Events):
Server-Sent 事件指的是網頁自動獲取來自伺服器的更新。 單向訊息傳遞.
客戶端程式碼：

<!DOCTYPE html>
<html>
    <meta http-equiv="content-type" content="text/html charset=utf-8">
<body>
<h1>獲得伺服器更新</h1>
<div id="result"></div>

<script>
if(typeof(EventSource)!=="undefined")
  {
  var source=new EventSource("test.php");
  source.onmessage=function(event)
    {
    document.getElementById("result").innerHTML+=event.data+ "<br />";
    };
  }
else
  {
  document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events...";
  }
</script>

</body>
</html>

伺服器程式碼：

<?php
header(`Content-Type: text/event-stream`);
header(`Cache-Control: no-cache`);
echo "data: This is server info! 

";
flush();
?>

關鍵字：EventSource物件 flush();

PS:新加一些問題，小夥伴們都會不會呀，不會趕緊去惡補呦。

1.html的doctype作用？嚴格模式和混雜模式都是什麼？

2.列舉js非同步程式設計的方法

3.Css選擇器（符）有哪些?哪些可繼承？優先順序如何？

4.setTimeout()的時間引數最小可以是多少？為什麼？

5.class_a .class_b(中間有空格) 和 .class_a.class_b 和.class_a,.class_b三者區別是什麼？