jQuery與Ajax 面試題庫（長期更新中...）

jQuery 部分：

　　JavaScript 是客戶端腳本的標準語言，而 jQuery 使得編寫 JavaScript 更加簡單。你能夠只用寫幾行的jQuery 代碼就能實現更多的東西. 它是最長被用到的 JavaScript 庫之一，而且如今已經不多有不用jQuery 而使用原生 JavaScript 的新項目了。這對於做爲一個 Java web 開發者的你而言意味着你會在一場Java web開發面試中發現許多jQuery的面試問題.

　　早些時候，絕大部分都是 HTTP, HTML, CSS 以及 JavaScript，但最近開始，除了 JavaScript 基礎以外，人們也但願知道你是否熟悉 jQuery。這16個jQuery的問題是爲web開發者準備的，且也可以很是方便你在參加一次電話或者視頻一輪的面試以前糾正一些關鍵的概念。若是你是 jQuery 新手，那麼它也可以幫助你更加好的理解基礎知識，並激勵你去發現更多東西。

　　1. jQuery 庫中的 $() 是什麼？（答案以下）

　　$() 函數是 jQuery() 函數的別稱，乍一看這很怪異，還使 jQuery 代碼晦澀難懂。一旦你適應了，你會愛上它的簡潔。$() 函數用於將任何對象包裹成 jQuery 對象，接着你就被容許調用定義在 jQuery 對象上的多個不一樣方法。你甚至能夠將一個選擇器字符串傳入 $() 函數，它會返回一個包含全部匹配的 DOM 元素數組的 jQuery 對象。這個問題我已經見過好幾回被說起，儘管它很是基礎，它常常被用來區分一個開發人員是否瞭解 jQuery。

　　2. 網頁上有 5 個元素，如何使用 jQuery來選擇它們？（答案）

　　另外一個重要的 jQuery 問題是基於選擇器的。jQuery 支持不一樣類型的選擇器，例如 ID 選擇器、class 選擇器、標籤選擇器。鑑於這個問題沒提到 ID 和 class，你能夠用標籤選擇器來選擇全部的 div 元素。jQuery 代碼：$("div")，這樣會返回一個包含全部 5 個 div 標籤的 jQuery 對象。更詳細的解答參見上面連接的文章。

　　3. jQuery 裏的 ID 選擇器和 class 選擇器有何不一樣？（答案）

　　若是你用過 CSS，你也許就知道 ID 選擇器和 class 選擇器之間的差別，jQuery 也一樣如此。ID 選擇器使用 ID 來選擇元素，好比 #element1，而 class 選擇器使用 CSS class 來選擇元素。當你只須要選擇一個元素時，使用 ID 選擇器，而若是你想要選擇一組具備相同 CSS class 的元素，就要用 class 選擇器。在面試過程當中，你有很大概率會被要求使用 ID 選擇器和 class 選擇器來寫代碼。下面的 jQuery 代碼使用了 ID 選擇器和 class 選擇器：

$('#LoginTextBox') // Returns element wrapped as jQuery object with id='LoginTextBox'
$('.active') // Returns all elements with CSS class active.複製代碼

　　正如你所見，從語法角度來講，ID 選擇器和 class 選擇器的另外一個不一樣之處是，前者用字符」#」然後者用字符」.」。更詳細的分析和討論參見上面的答案連接。

　　4. 如何在點擊一個按鈕時使用 jQuery 隱藏一個圖片？

　　這是一個事件處理問題。jQuery爲按鈕點擊之類的事件提供了很好的支持。你能夠經過如下代碼去隱藏一個經過ID或class定位到的圖片。你須要知道如何爲按鈕設置事件並執行hide() 方法，代碼以下所示：

$('#ButtonToClick').click(function(){
	$('#ImageToHide').hide();
});複製代碼

　　我喜歡這個問題，由於很貼近實際使用，代碼也不復雜。

　　5. $(document).ready() 是個什麼函數？爲何要用它？(answer)

　　這個問題很重要，而且經常被問到。 ready() 函數用於在文檔進入ready狀態時執行代碼。當DOM 徹底加載（例如HTML被徹底解析DOM樹構建完成時），jQuery容許你執行代碼。使用$(document).ready()的最大好處在於它適用於全部瀏覽器，jQuery幫你解決了跨瀏覽器的難題。須要進一步瞭解的用戶能夠點擊 answer連接查看詳細討論。

　　6. JavaScript window.onload 事件和 jQuery ready 函數有何不一樣？（答案）

　　這個問答是緊接着上一個的。JavaScript window.onload 事件和 jQuery ready 函數之間的主要區別是，前者除了要等待 DOM 被建立還要等到包括大型圖片、音頻、視頻在內的全部外部資源都徹底加載。若是加載圖片和媒體內容花費了大量時間，用戶就會感覺到定義在 window.onload 事件上的代碼在執行時有明顯的延遲。

　　另外一方面，jQuery ready() 函數只需對 DOM 樹的等待，而無需對圖像或外部資源加載的等待，從而執行起來更快。使用 jQuery $(document).ready() 的另外一個優點是你能夠在網頁裏屢次使用它，瀏覽器會按它們在 HTML 頁面裏出現的順序執行它們，相反對於 onload 技術而言，只能在單一函數裏使用。鑑於這個好處，用 jQuery ready() 函數比用 JavaScript window.onload 事件要更好些。

　　7. 如何找到全部 HTML select 標籤的選中項？（答案以下）

　　這是面試裏比較棘手的 jQuery 問題之一。這是個基礎的問題，可是別指望每一個 jQuery 初學者都知道它。你能用下面的 jQuery 選擇器獲取全部具有 multiple=true 的 <select > 標籤的選中項：

$('[name=NameOfSelectedTag] :selected')複製代碼

　　這段代碼結合使用了屬性選擇器和 :selected 選擇器，結果只返回被選中的選項。你可按需修改它，好比用 id 屬性而不是 name 屬性來獲取 <select> 標籤。

　　8. jQuery 裏的 each() 是什麼函數？你是如何使用它的？（答案以下）

　　each() 函數就像是 Java 裏的一個 Iterator，它容許你遍歷一個元素集合。你能夠傳一個函數給 each() 方法，被調用的 jQuery 對象會在其每一個元素上執行傳入的函數。有時這個問題會緊接着上面一個問題，舉個例子，如何在 alert 框裏顯示全部選中項。咱們能夠用上面的選擇器代碼找出全部選中項，而後咱們在 alert 框中用 each() 方法來一個個打印它們，代碼以下：

$('[name=NameOfSelectedTag] :selected').each(function(selected) {
			alert($(selected).text());
});複製代碼

　　其中 text() 方法返回選項的文本。

　　9. 你是如何將一個 HTML 元素添加到 DOM 樹中的？（答案以下）

　　你能夠用 jQuery 方法 appendTo() 將一個 HTML 元素添加到 DOM 樹中。這是 jQuery 提供的衆多操控 DOM 的方法中的一個。你能夠經過 appendTo() 方法在指定的 DOM 元素末尾添加一個現存的元素或者一個新的 HTML 元素。

　　10. 你能用 jQuery 代碼選擇全部在段落內部的超連接嗎？（答案略）

　　這是另外一個關於選擇器的 jQuery 面試題。就像其餘問題那樣，只需一行 jQuery 代碼就能搞定。你能夠使用下面這個 jQuery 代碼片斷來選擇全部嵌套在段落（<p>標籤）內部的超連接（<a>標籤）……

　　11. $(this) 和 this 關鍵字在 jQuery 中有何不一樣？（答案以下）

　　這對於不少 jQuery 初學者來講是一個棘手的問題，實際上是個簡單的問題。$(this) 返回一個 jQuery 對象，你能夠對它調用多個 jQuery 方法，好比用 text() 獲取文本，用val() 獲取值等等。而 this 表明當前元素，它是 JavaScript 關鍵詞中的一個，表示上下文中的當前 DOM 元素。你不能對它調用 jQuery 方法，直到它被 $() 函數包裹，例如 $(this)。

　　12. 你如何使用jQuery來提取一個HTML 標記的屬性 例如. 連接的href? (答案)

　　attr() 方法被用來提取任意一個HTML元素的一個屬性的值. 你首先須要利用jQuery選擇及選取到全部的連接或者一個特定的連接，而後你能夠應用attr()方法來得到他們的href屬性的值。下面的代碼會找到頁面中全部的連接並返回href值：

$('a').each(function(){
	alert($(this).attr('href'));
});複製代碼

　　13. 你如何使用jQuery設置一個屬性值? (答案)

　　前面這個問題以後額外的一個後續問題是，attr()方法和jQuery中的其它方法同樣，能力不止同樣. 若是你在調用attr()的同時帶上一個值 例如. attr(name, value), 這裏name是屬性的名稱，value是屬性的新值。

　　14. jQuery中 detach() 和 remove() 方法的區別是什麼? (答案)

　　儘管 detach() 和 remove() 方法都被用來移除一個DOM元素, 二者之間的主要不一樣在於 detach() 會保持對過去被解除元素的跟蹤, 所以它能夠被取消解除, 而 remove() 方法則會保持過去被移除對象的引用. 你也還能夠看看 用來向DOM中添加元素的 appendTo() 方法.

　　15. 你如何利用jQuery來向一個元素中添加和移除CSS類? (答案)

　　經過利用 addClass() 和 removeClass() 這兩個 jQuery 方法。動態的改變元素的class屬性能夠很簡單例如. 使用類「.active"來標記它們的未激活和激活狀態，等等.

　　16. 使用 CDN 加載 jQuery 庫的主要優點是什麼 ? (答案)

　　這是一個稍微高級點兒的jQuery問題。好吧，除了報錯節省服務器帶寬以及更快的下載速度這許多的好處以外, 最重要的是，若是瀏覽器已經從同一個CDN下載類相同的 jQuery 版本, 那麼它就不會再去下載它一次. 所以今時今日，許多公共的網站都將jQuery用於用戶交互和動畫, 若是瀏覽器已經有了下載好的jQuery庫，網站就能有很是好的展現機會。

　　17. jQuery.get() 和 jQuery.ajax() 方法之間的區別是什麼?

　　ajax() 方法更強大，更具可配置性, 讓你能夠指定等待多久，以及如何處理錯誤。get() 方法是一個只獲取一些數據的專門化方法。

　　18. jQuery 中的方法鏈是什麼？使用方法鏈有什麼好處？

　　方法鏈是對一個方法返回的結果調用另外一個方法，這使得代碼簡潔明瞭，同時因爲只對 DOM 進行了一輪查找，性能方面更加出色。

　　19. 你要是在一個 jQuery 事件處理程序裏返回了 false 會怎樣？

　　這一般用於阻止事件向上冒泡。

　　20. 哪一種方式更高效：document.getElementbyId("myId") 仍是 $("#myId")？

　　第一種，由於它直接調用了 JavaScript 引擎。

Ajax部分：

一、什麼是 AJAX，Ajax 包含什麼技術？

什麼是 ajax：
AJAX 是「Asynchronous JavaScript and XML」的縮寫。他是指一種建立交互式網頁應用的網頁開發技術。
Ajax 包含下列技術（Ajax的技術體系組成）
基於web標準（standards-basedpresentation） XHTML+ CSS的表示；
使用 DOM（Document ObjectModel）進行動態顯示及交互；
使用 XML 和 XSLT 進行數據交換及相關操做；
使用 XMLHttpRequest 進行異步數據查詢、檢索；
使用 JavaScript 將全部的東西綁定在一塊兒。

2. Ajax的使用

和服務器進行交互時，出現的 ajax ；

建立一個 ajax 對象 XMLHttpRequest 對象 ；

若是在 ie5 ie6 中 沒有 XMLHttpRequest 對象 須要特殊的作兼容處理；

第一步：

let xmlHttp;
if(window.XMLHttpRequest){//判斷當前的瀏覽器 是否爲 ie5或者ie6
	//若是是 new XMLHttpRequest()
	xmlHttp=new XMLHttpRequest()
}else{
	//若是不是 new ActiveXObject("Microsoft.XMLHTTP")
	xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")
}複製代碼

第二步：

// .open建立一個一個請求，告訴ajax 用什麼方式，去請求什麼地址，是同步仍是異步
    // xmlHttp.open("請求類型","請求地址",同步或者異步)
    //類型：
    //get:1.get一般用於獲取數據  2.get在數據中有大小限制，不能大於 32k
    //3.get採用明文傳碼，重要的信息傳入不要使用get 
    //post：1.post一般用於發送數據 2.post能夠傳入大量數據 3.post安全性較高
    //請求地址 api接口
    //同步或者異步 false同步 true異步
xmlHttp.open("get","url");
    //發送請求
    //若是是get請求 send(null) 能夠傳參，可是不是由send發送
    //若是是post請求 send填寫發送的數據
    // name="wangyi"
xmlHttp.send(null)
複製代碼

//onreadystatechange  準備狀態發生了改變
xmlHttp.onreadystatechange=function(){
	//readyState
	//0 xmlHttp.readyState 請求未初始化
	//1 和服務器鏈接建立
	//2 請求已經接受了
	//3 請求處理中
	//4 請求處理完成，而且返回數據(響應就緒) 
	//status
	//200 時 請求成功了
	//404 時 沒有找到接口
	if(xmlHttp.readyState==4&&xmlHttp.status==200){
		console.log("接受到數據了")
	}
}複製代碼

總結：

1. 建立 ajax 對象 ，兼容性處理

xmlHttp=new XMLHttpRequest() ;

或者 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP") ;

2. 建立 ajax 請求（向服務器發送請求） .open

3. 發送 ajax 請求 .send

4. 接受請求數據 onreadystatechange 事件

5. xmlHttp.readystate==4 響應完成 .status==200時證實請求成功

AJAX向服務器發送請求

AJAX服務器響應

responseText 屬性

若是來自服務器的響應並不是 XML，請使用 responseText 屬性。

responseText 屬性返回字符串形式的響應，所以您能夠這樣使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;複製代碼

responseXML 屬性

若是來自服務器的響應是 XML，並且須要做爲 XML 對象進行解析，請使用 responseXML 屬性；

Ready State 事件

三、爲何要用 ajax，Ajax 應用程序的優點在於：

1. 經過異步模式，提高了用戶體驗；
2. 優化了瀏覽器和服務器之間的傳輸，減小沒必要要的數據往返，減小了帶寬佔用；
3. Ajax 引擎在客戶端運行，承擔了一部分原本由服務器承擔的工做，從而減小了大用戶量下的服務器負載。

四、AJAX 最大的特色是什麼。

Ajax能夠實現動態不刷新（局部刷新），就是能在不更新整個頁面的前提下維護數據。

這使得Web應用程序更爲迅捷地迴應用戶動做，並避免了在網絡上發送那些沒有改變過的信息。

五、請介紹一下 XMLhttprequest 對象。

Ajax 的核心是 JavaScript 對象 XmlHttpRequest。該對象在 Internet Explorer 5中首次引

入，它是一種支持異步請求的技術。簡而言之，XmlHttpRequest 使您能夠使用 JavaScript 向

服務器提出請求並處理響應，而不阻塞用戶。經過 XMLHttpRequest 對象，Web 開發人員可

以在頁面加載之後進行頁面的局部更新。

六、AJAX應用和傳統Web應用有什麼不一樣。

在傳統的Javascript編程中，若是想獲得服務器端數據庫或文件上的信息，或者發送客戶端信息到服務器，須要創建一個 HTML form 而後 GET 或者 POST 數據到服務器端。用戶須要點擊」Submit」按鈕來發送或者接受數據信息，而後等待服務器響應請求，頁面從新加載。
由於服務器每次都會返回一個新的頁面， 因此傳統的web應用有可能很慢並且用戶交互不友好。
使用 AJAX 技術， 就能夠使Javascript經過XMLHttpRequest對象直接與服務器進行交互。
經過 HTTP Request， 一個 web 頁面能夠發送一個請求到 web 服務器而且接受 web 服務器返回的信息(不用從新加載頁面)，展現給用戶的仍是通一個頁面，用戶感受頁面刷新，也看不到到Javascript後臺進行的發送請求和接受響應。

七、AJAX請求總共有多少種CALLBACK。

Ajax請求總共有八種Callback
onSuccess
onFailure
onUninitialized
onLoading
onLoaded
onInteractive
onComplete
onException

8. Ajax 和 javascript 的區別。

javascript是一種在瀏覽器端執行的腳本語言，Ajax是一種建立交互式網頁應用的開發技術 ，它是利用了一系列相關的技術其中就包括javascript。
Javascript是由網景公司開發的一種腳本語言，它和sun公司的java語言是沒有任何關係的，它們類似的名稱只是一種行銷策略。
在通常的web開發中，javascript是在瀏覽器端執行的，咱們能夠用javascript控制瀏覽器的行爲和內容。
在 Ajax應用中信息是如何在瀏覽器和服務器之間傳遞的
經過XML數據或者字符串

九、在瀏覽器端如何獲得服務器端響應的XML數據。

XMLHttpRequest 對象的 responseXMl 屬性

十、 XMLHttpRequest 對象在 IE 和 Firefox 中建立方式有沒有不一樣。

有，IE 中經過 new ActiveXObject() 獲得，Firefox 中經過 newXMLHttpRequest() 獲得

十一、介紹一下 XMLHttpRequest 對象的經常使用方法和屬性。

open(「method」,」URL」) 創建對服務器的調用，第一個參數是HTTP請求 方式能夠爲GET，POST或任何服務器所支持的您想調用的方式。
第二個參數是請求頁面的 URL。
send() 方法，發送具體請求
abort() 方法，中止當前請求
readyState 屬性 請求的狀態 有5個可取值0=未初始化 ，1=正在加載
2=以加載，3=交互中，4=完成
responseText 屬性 服務器的響應，表示爲一個串
reponseXML 屬性 服務器的響應，表示爲XML
status 服務器的HTTP狀態碼，200對應ok 400對應not found

十二、什麼是XML

XML是擴展標記語言，可以用一系列簡單的標記描述數據

1三、XML的解析方式

經常使用的用dom解析和sax解析。dom解析是一次性讀取xml文件並將其構造爲DOM對象供程序使用，優勢是操做方便，可是比較耗內存。Sax是按事件驅動的方式解析的，佔用內存少，可是編程複雜。

1四、你採用的是什麼框架（架包）

這題是必問的，通常也是最開始就會問到。
在java中比較流行的有 dojo, Prototype , JQuery, Dwr, extjs 等等

1五、若是熟悉某種ajax框架，他可能會問到怎樣在程序中使用這種框架

DWR框架介紹
DWR(DirectWeb Remoting)是一個WEB遠程調用框架.利用這個框架可讓AJAX開發變得很簡單.利用DWR能夠在客戶端利用JavaScript直接調用服務端的Java方法並返回值給JavaScript就好像直接本地客戶端調用同樣(DWR根據Java類來動態生成JavaScrip代碼).
DWR的實現原理是經過反射，將java翻譯成javascript，而後利用回調機制，從而實現了javascript調用Java代碼

1六、介紹一下Prototype的$()函數，$F()函數，$A()函數都是什麼做用

$() 方法是在DOM中使用過於頻繁的document.getElementById() 方法的一個便利的簡寫，就像這個DOM方法同樣，這個方法返回參數傳入的id的那個元素。
$F()函數是另外一個大收歡迎的「快捷鍵」，它能用於返回任何表單輸入控件的值，好比textbox,drop-down list。這個方法也能用元素id或元素自己作爲參數。

$A()函數能把它接收到的單個的參數轉換成一個Array對象。

1七、介紹一下XMLHttpRequest對象

經過XMLHttpRequest對象，Web開發人員能夠在頁面加載之後進行頁面的局部更新。
AJAX開始流行始於Google在2005年使用的」Google Suggest」。
「Google Suggest」就是使用XMLHttpRequest對象來建立動態的Web接口：
當用戶開始輸入google的搜索框，Javascript發送用戶輸入的字符到服務器，而後服務器返回一個建議列表。

XMLHttpRequest對象在IE5.0+, Safari 1.2, Mozilla1.0/Firefox, Opera 8+ 和NetScapt7 開始被支持。

1八、AJAX的全稱是什麼？ 介紹一下AJAX？

AJAX的全稱是Asynchronous JavaScript And XML.
AJAX是2005年由Google發起並流行起來的編程方法， AJAX不是一個新的編程語言，可是它是一個使用已有標準的新的編程技術。
使用AJAX能夠建立更好，更快，更用戶界面友好的Web應用。

AJAX技術基於Javascript和HTTP Request.

1九、Ajax主要包含了哪些技術？

Ajax（Asynchronous JavaScript + XML）的定義
基於web標準（standards-based presentation）XHTML+CSS的表示；
使用 DOM（Document Object Model）進行動態顯示及交互；
使用 XML 和 XSLT 進行數據交換及相關操做；
使用XMLHttpRequest 進行異步數據查詢、檢索；
使用 JavaScript 將全部的東西綁定在一塊兒。英文參見Ajax的提出者Jesse James Garrett的原文,原文題目(Ajax: A New Approach to Web Applications)。
相似於DHTML或LAMP，AJAX不是指一種單一的技術，而是有機地利用了一系列相關的技術。事實上，一些基於AJAX的「派生/合成」式（derivative/composite）的技術正在出現，如「AFLAX」。

AJAX的應用使用支持以上技術的web瀏覽器做爲運行平臺。這些瀏覽器目前包括：Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。可是Opera不支持XSL格式對象，也不支持XSLT。

20、AJAX都有哪些優勢和缺點？

優勢：

一、最大的一點是頁面無刷新，用戶的體驗很是好。

二、使用異步方式與服務器通訊，具備更加迅速的響應能力。

三、能夠把之前一些服務器負擔的工做轉嫁到客戶端，利用客戶端閒置的能力來處理，減輕服

務器和帶寬的負擔，節約空間和寬帶租用成本。而且減輕服務器的負擔，ajax的原則是「按

需取數據」，能夠最大程度的減小冗餘請求，和響應對服務器形成的負擔。

四、基於標準化的並被普遍支持的技術，不須要下載插件或者小程序。

缺點：

一、ajax不支持瀏覽器back按鈕。

二、安全問題 AJAX暴露了與服務器交互的細節。

三、對搜索引擎的支持比較弱。

四、破壞了程序的異常機制。

五、不容易調試。

一、Ajax 是什麼? 如何建立一個Ajax？

Ajax並不算是一種新的技術，全稱是asychronous javascript and xml，能夠說是已有技術的組合，主要用來實現客戶端與服務器端的異步通訊效果，實現頁面的局部刷新，早期的瀏覽器並不能原生支持ajax，能夠使用隱藏幀（iframe）方式變相實現異步效果，後來的瀏覽器提供了對ajax的原生支持

使用ajax原生方式發送請求主要經過XMLHttpRequest(標準瀏覽器)、ActiveXObject(IE瀏覽器)對象實現異步通訊效果

基本步驟：

var xhr =null;//建立對象

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}else{

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

xhr.open(「方式」,」地址」,」標誌位」);//初始化請求

xhr.setRequestHeader(「」,」」);//設置http頭信息

xhr.onreadystatechange =function(){}//指定回調函數

xhr.send();//發送請求

js框架（jQuery/EXTJS等）提供的ajax API對原生的ajax進行了封裝，熟悉了基礎理論，再學習別的框架就會駕輕就熟，好多都是換湯不換藥的內容

二、同步和異步的區別?

同步：阻塞的

-張三叫李四去吃飯，李四一直忙得不停，張三一直等着，直到李四忙完兩我的一塊去吃飯

=瀏覽器向服務器請求數據，服務器比較忙，瀏覽器一直等着（頁面白屏），直到服務器返回數據，瀏覽器才能顯示頁面

異步：非阻塞的

-張三叫李四去吃飯，李四在忙，張三說了一聲而後本身就去吃飯了，李四忙完後本身去吃

=瀏覽器向服務器請求數據，服務器比較忙，瀏覽器能夠自如的幹原來的事情（顯示頁面），服務器返回數據的時候通知瀏覽器一聲，瀏覽器把返回的數據再渲染到頁面，局部更新

三、如何解決跨域問題?

理解跨域的概念：協議、域名、端口都相同才同域，不然都是跨域

出於安全考慮，服務器不容許ajax跨域獲取數據，可是能夠跨域獲取文件內容，因此基於這一點，能夠動態建立script標籤，使用標籤的src屬性訪問js文件的形式獲取js腳本，而且這個js腳本中的內容是函數調用，該函數調用的參數是服務器返回的數據，爲了獲取這裏的參數數據，須要事先在頁面中定義回調函數，在回調函數中處理服務器返回的數據，這就是解決跨域問題的主流解決方案

四、頁面編碼和被請求的資源編碼若是不一致如何處理？

對於ajax請求傳遞的參數，若是是get請求方式，參數若是傳遞中文，在有些瀏覽器會亂碼，不一樣的瀏覽器對參數編碼的處理方式不一樣，因此對於get請求的參數須要使用 encodeURIComponent函數對參數進行編碼處理，後臺開發語言都有相應的解碼api。對於post請求不須要進行編碼

五、簡述ajax 的過程。

1. 建立XMLHttpRequest對象,也就是建立一個異步調用對象（建立ajax對象）

2. 建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息（建立請求）

3. 設置響應HTTP請求狀態變化的函數

4. 發送HTTP請求

5. 獲取異步調用返回的數據

6. 使用JavaScript和DOM實現局部刷新

六、闡述一下異步加載JS。

1. 異步加載的方案： 動態插入 script 標籤

2. 經過 ajax 去獲取 js 代碼，而後經過 eval 執行

3. script 標籤上添加 defer 或者 async 屬性

4. 建立並插入 iframe，讓它異步執行 js

七、請解釋一下 JavaScript 的同源策略。

同源策略是客戶端腳本（尤爲是Javascript）的重要的安全度量標準。它最先出自Netscape Navigator2.0，其目的是防止某個文檔或腳本從多個不一樣源裝載。所謂同源指的是：協議，域名，端口相同，同源策略是一種安全協議，指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。

8*、GET和POST的區別，什麼時候使用POST？

GET：通常用於信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，通常在2000個字符，有的瀏覽器是8000個字符

POST：通常用於修改服務器上的資源，對所發送的信息沒有限制

在如下狀況中，請使用 POST 請求：

1. 沒法使用緩存文件（更新服務器上的文件或數據庫）

2. 向服務器發送大量數據（POST 沒有數據量限制）

3. 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

九、ajax 是什麼?ajax 的交互模型?同步和異步的區別?如何解決跨域問題?

1. 經過異步模式，提高了用戶體驗

2. 優化了瀏覽器和服務器之間的傳輸，減小沒必要要的數據往返，減小了帶寬佔用

3. Ajax在客戶端運行，承擔了一部分原本由服務器承擔的工做，減小了大用戶量下的服務器負載。

十、 Ajax的最大的特色是什麼。

Ajax能夠實現異步通訊效果，實現頁面局部刷新，帶來更好的用戶體驗；按需獲取數據，節約帶寬資源；

十一、ajax的缺點

一、ajax不支持瀏覽器back按鈕。

二、安全問題 AJAX暴露了與服務器交互的細節。

三、對搜索引擎的支持比較弱。

四、破壞了程序的異常機制。

十二、ajax請求的時候get 和post方式的區別

get通常用來進行查詢操做，url地址有長度限制，請求的參數都暴露在url地址當中，若是傳遞中文參數，須要本身進行編碼操做，安全性較低。

post請求方式主要用來提交數據，沒有數據長度的限制，提交的數據內容存在於http請求體中，數據不會暴漏在url地址中。

1三、解釋jsonp的原理，以及爲何不是真正的ajax

Jsonp並非一種數據格式9，而json是一種數據格式，jsonp是用來解決跨域獲取數據的一種解決方案，具體是經過動態建立script標籤，而後經過標籤的src屬性獲取js文件中的js腳本，該腳本的內容是一個函數調用，參數就是服務器返回的數據，爲了處理這些返回的數據，須要事先在頁面定義好回調函數，本質上使用的並非ajax技術

1四、什麼是Ajax和JSON，它們的優缺點。

Ajax是全稱是asynchronous JavaScript andXML，即異步JavaScript和xml，用於在Web頁面中實現異步數據交互，實現頁面局部刷新。

優勢：能夠使得頁面不重載所有內容的狀況下加載局部內容，下降數據傳輸量，避免用戶不斷刷新或者跳轉頁面，提升用戶體驗

缺點：對搜索引擎不友好；要實現ajax下的先後退功能成本較大；可能形成請求數的增長跨域問題限制；

JSON是一種輕量級的數據交換格式，ECMA的一個子集

優勢：輕量級、易於人的閱讀和編寫，便於機器（JavaScript）解析，支持複合數據類型（數組、對象、字符串、數字）

1五、http常見的狀態碼有那些？分別表明是什麼意思？

200 - 請求成功

301 - 資源（網頁等）被永久轉移到其它URL

404 - 請求的資源（網頁等）不存在

500 - 內部服務器錯誤

1六、一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？

分爲4個步驟：

1. 當發送一個 URL 請求時，無論這個 URL 是 Web 頁面的 URL 仍是 Web 頁面上每一個資源的 URL，瀏覽器都會開啓一個線程來處理這個請求，同時在遠程 DNS 服務器上啓動一個 DNS 查詢。這能使瀏覽器得到請求對應的 IP 地址。

2. 瀏覽器與遠程 Web 服務器經過 TCP 三次握手協商來創建一個 TCP/IP 鏈接。該握手包括一個同步報文，一個同步-應答報文和一個應答報文，這三個報文在 瀏覽器和服務器之間傳遞。該握手首先由客戶端嘗試創建起通訊，然後服務器應答並接受客戶端的請求，最後由客戶端發出該請求已經被接受的報文。

3. 一旦 TCP/IP 鏈接創建，瀏覽器會經過該鏈接向遠程服務器發送 HTTP 的 GET 請求。遠程服務器找到資源並使用 HTTP 響應返回該資源，值爲 200 的 HTTP 響應狀態表示一個正確的響應。

4. 此時，Web 服務器提供資源服務，客戶端開始下載資源。

1七、ajax請求的時候get 和post方式的區別

get通常用來進行查詢操做，url地址有長度限制，請求的參數都暴露在url地址當中，若是傳遞中文參數，須要本身進行編碼操做，安全性較低。

post請求方式主要用來提交數據，沒有數據長度的限制，提交的數據內容存在於http請求體中，數據不會暴漏在url地址中。

1八、ajax請求時，如何解釋json數據

使用eval() 或者JSON.parse() 鑑於安全性考慮，推薦使用JSON.parse()更靠譜，對數據的安全性更好。

1. 自我介紹

  我叫XXX，今年23歲，畢業於XXX，本科學的是xxx，由於我的緣由對計算機比較感興趣，因此自學了前端的一些知識，在校期間也有實習，去年10月份到至今，在秦皇島益誠堂醫藥實習。在我學習期間，我我的把小米的網站仿着作了一遍，我也跟着老師參與作咱們學校的一個實驗室網站，學到了很多的東西。經過這個實習，我不只學到了一些技術方面的東西，還有個人自學能力和與同事的溝通能力，並且我認爲這些也是在工做中比較重要的。

技術方面我掌握的我一直在從事web前端方面的工做，掌握的前端技術有，html，css，JavaScript，div+css，ajax和jQuery。

個人性格方面不算外向，也不算內向，在和同事，朋友相處的時候比較外向，在工做中，代碼開發時，我是比較內向的，我喜歡全心全意地投入個人工做。我也比較喜歡交朋友，和朋友一塊兒聚聚聊聊，對於個人工做，我老是抱着認真負責，有責任心，吃苦耐勞的態度工做。

2. 瞭解先後端分離嗎，說說認識，有什麼優勢（不太瞭解，直說出了方便維護，先後端能夠同時開發，效率高）

一、能夠實現真正的先後端解耦，前端服務器使用nginx。前端/WEB服務器放的是css，js，圖片等等一系列靜態資源（甚至你還能夠css，js，圖片等資源放到特定的文件服務器，例如阿里雲的oss，並使用cdn加速），前端服務器負責控制頁面引用&跳轉&路由，前端頁面異步調用後端的接口，後端/應用服務器使用tomcat（把tomcat想象成一個數據提供者），加快總體響應速度。（這裏須要使用一些前端工程化的框架好比nodejs，react，router，react，redux，webpack）

二、發現bug，能夠快速定位是誰的問題。頁面邏輯，跳轉錯誤，瀏覽器兼容性問題，腳本錯誤，頁面樣式等問題，所有由前端工程師來負責；接口數據出錯，數據沒有提交成功，應答超時等問題，所有由後端工程師來解決。

三、在大併發狀況下，我能夠同時水平擴展先後端服務器，好比淘寶的一個首頁就須要2000+臺前端服務器作集羣來抗住日均多少億+的日均pv。

四、減小後端服務器的併發/負載壓力。除了接口之外的其餘全部http請求所有轉移到前端nginx上，接口的請求調用tomcat，參考nginx反向代理tomcat。且除了第一次頁面請求外，瀏覽器會大量調用本地緩存。

五、即便後端服務暫時超時或者宕機了，前端頁面也會正常訪問，只不過數據刷不出來而已。

六、頁面顯示的東西再多也不怕，由於是異步加載。

7. nginx支持頁面熱部署，不用重啓服務器，前端升級更無縫。

8. 增長代碼的維護性 & 易讀性（先後端耦在一塊兒的代碼讀起來至關費勁）。

9. 提高開發效率，由於能夠先後端並行開發，而不是像之前的強依賴。

十、在 nginx 中部署證書，外網使用https訪問，而且只開放443和80端口，其餘端口一概關閉（防止黑客端口掃描），內網使用http，性能和安全都有保障。

十一、前端大量的組件代碼得以複用，組件化，提高開發效率，抽出來！

3. 以後問了一下了解 js 多仍是 css 答的是 js 下面問的大部分都是 js   

 js 的基本變量類型（7種），幾種判斷方法（4種），typeof數組返回什麼（object），爲何返回object。

  1）數值（number）整數和小數 例如：（1和3.14）

  2）字符串（string）文本：例如（「hellow world」）

  3）布爾值（boolean）表示真僞的兩個特殊值，true（真）和false（假）

  4）Undefined：表示」未定義」或不存在

  5）Null：表示空值，即此處的值爲空

  6）對象（object）：各類值組成的集合

  7）Symbol（ES6新增）

  null、對象、數組返回的都是object類型；對於函數類型返回的則是function，再好比typeof(Date)，typeof(eval)等。接下來進入正題，js判斷數組類型的方法

  1）typeof 返回一個表示數據類型的字符串，返回結果包括：number、boolean、string、object、undefined、function等6種基本數據類型。

typeof '';// string 有效
typeof 1;// number 有效
typeof Symbol();// symbol 有效
typeof true;//boolean 有效
typeof undefined;//undefined 有效
typeof null;//object 無效
typeof [] ;//object 無效
typeof new Function();// function 有效
typeof new Date();//object 無效
typeof new RegExp();//object 無效複製代碼

   typeof 數組爲什麼返回的是object?

  typeof是用來檢測數據是屬於哪一種基本數據類型；

  instanceof是用來檢測數據屬於哪一種引用數據類型因此typeof(數組)的結果是"object"

  a instanceof array;的結果是true

2） instanceof 

在 JavaScript 中，判斷一個變量的類型嚐嚐會用 typeof 運算符，在使用 typeof 運算符時採用引用類型存儲值會出現一個問題，不管引用的是什麼類型的對象，它都返回 「object」。ECMAScript 引入了另外一個 Java 運算符 instanceof 來解決這個問題。instanceof 運算符與 typeof 運算符類似，用於識別正在處理的對象的類型。與 typeof 方法不一樣的是，instanceof 方法要求開發者明確地確認對象爲某特定類型。例如：

function Person(){ }var Tom = new Person();console.log(Tom instanceof Person); // true複製代碼

  咱們再看看下面的例子：

function Person(){

}
function Student(){

}
Student.prototype = new Person();
var John = new Student();
console.log(John instanceof Student); // trueconsole.log(John instancdof Person);  // true
//instanceof還能檢測出多層繼承的關係。複製代碼

好了，咱們來使用instanceof檢測上面的那些變量：

console.log(    num instanceof Number,    // num : false    
        str instanceof String,    // str : false    
	bool instanceof Boolean,  // bool : false    
	arr instanceof Array,     // arr : true    
	json instanceof Object,   // json : true    
	func instanceof Function,  // func : true    
	und instanceof Object,     // und : false    
	nul instanceof Object,     // nul : false    
	date instanceof Date,      // date : true    
	reg instanceof RegExp,     // reg : true    
	error instanceof Error     // error : true
	)複製代碼

  從上面的運行結果咱們能夠看到，num, str和bool沒有檢測出他的類型，可是咱們使用下面的方式建立num，是能夠檢測出類型的：

var num = new Number(123);var str = new String('abcdef');var boolean = new Boolean(true);複製代碼

同時，咱們也要看到，und和nul是檢測的Object類型，才輸出的true，由於js中沒有Undefined和Null的這種全局類型，他們und和nul都屬於Object類型，所以輸出了true。

3）constructor

  在W3C定義中的定義：constructor 屬性返回對建立此對象的數組函數的引用，就是返回對象相對應的構造函數。從定義上來講跟instanceof不太一致，但效果都是同樣的。

那麼判斷各類類型的方法：

console.log([].constructor == Array);
console.log({}.constructor == Object);
console.log("string".constructor == String);
console.log((123).constructor == Number);
console.log(true.constructor == Boolean);複製代碼

  注意： 

   使用instaceof和construcor,被判斷的array必須是在當前頁面聲明的！好比，一個頁面（父頁面）有一個框架，框架中引用了一個頁面（子頁面），在子頁面中聲明瞭一個array，並將其賦值給父頁面的一個變量，這時判斷該變量，Array ==object.constructor;會返回false； 

  緣由： 

1）array屬於引用型數據，在傳遞過程當中，僅僅是引用地址的傳遞。 

2）每一個頁面的Array原生對象所引用的地址是不同的，在子頁面聲明的array，所對應的構造函數，是子頁面的Array對象；父頁面來進行判斷，使用的Array並不等於子頁面的Array。

4）toString

  toString是Object原型對象上的一個方法，該方法默認返回其調用者的具體類型，更嚴格的講，是 toString運行時this指向的對象類型, 返回的類型格式爲[object,xxx],xxx是具體的數據類型，其中包括：    String，Number，Boolean，Undefined，Null，Function，Date，Array，RegExp，Error，HTMLDocument,... 基本上全部對象的類型均可以經過這個方法獲取到。

Object.prototype.toString.call('') ;   // [object String]Object.prototype.toString.call(1) ;    // [object Number]Object.prototype.toString.call(true) ; // [object Boolean]Object.prototype.toString.call(undefined) ; // [object Undefined]Object.prototype.toString.call(null) ; // [object Null]Object.prototype.toString.call(new Function()) ; // [object Function]Object.prototype.toString.call(new Date()) ; // [object Date]Object.prototype.toString.call([]) ; // [object Array]Object.prototype.toString.call(new RegExp()) ; // [object RegExp]Object.prototype.toString.call(new Error()) ; // [object Error]Object.prototype.toString.call(document) ; // [object HTMLDocument]Object.prototype.toString.call(window) ; //[object global] window是全局對象global的引用複製代碼

字符串和數組互轉

字符串-->數組 .split(「」) 經過字符串中指定的字符，將其分割成數組

數組-->字符串 .join() 是經過指定的字符，將數組變成字符串，返回出來

4. ajax的一些問題，項目中有用嗎回答基本用的jq框架中的 

get和post的區別，給了一個情景問用哪一種方法

1).url可見性：

get，參數url可見

post，url參數不可見

**get把請求的數據放在url上，即HTTP協議頭上，其格式爲：以?分割URL和傳輸數據，參數之間以&相連；post把數據放在HTTP的包體內（requrest body）

2).傳輸數據的大小：

get通常傳輸數據大小不超過2k-4k

post請求傳輸數據的大小根據php.ini 配置文件設定，也能夠無限大

3).數據傳輸上：

get，經過拼接url進行傳遞參數

post，經過body體傳輸參數

4).後退頁面的反應：

get請求頁面後退時，不產生影響

post請求頁面後退時，會從新提交請求

5).緩存性：

get請求是能夠緩存的

post請求不能夠緩存

**GET請求會被瀏覽器主動cache，而POST不會，除非手動設置

6).安全性：

都不安全，原則上

post確定要比get安全，畢竟傳輸參數時url不可見，但也擋不住部分人閒的沒事在那抓包玩，瀏覽器還會緩存get請求的數據。安全性我的以爲是沒多大區別的，防君子不防小人就是這個道理。對傳遞的參數進行加密，其實都同樣

那麼，

post那麼好爲何還用get？get效率高！

5. cookie，localstorage，sessionstorage的區別，一樣給了一個情景問選擇哪一個       cookie和其餘兩個的根本區別，能不能放棄cookie

共同點：都是保存在瀏覽器端，而且是同源的（URL的協議、端口、主機名是相同的，只要有一個不一樣就屬於不一樣源）

不一樣點：

1)、cookie數據始終在同源的http請求中攜帶（即便不須要），即cookie在瀏覽器和服務器間來回傳遞，而sessionStorage和localStorage不會自動把數據發送給服務器，僅在本地保存。cookie數據還有路徑（path）的概念，能夠限制cookie只屬於某個路徑下。

2)、存儲大小限制：cookie數據不能超過4K，同時由於每次http請求都會攜帶cookie、因此cookie只適合保存很小的數據，如會話標識。

sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，能夠達到
5M或更大

3)、數據有效期不一樣，sessionStorage僅僅在當前瀏覽器窗口關閉以前有效；localStorage始終有效，窗口或者瀏覽器關閉以後也一直保存，所以做用持久數據；cookie，只在設置cookie過時時間以前有效，即便窗口關閉或者瀏覽器關閉。

4)、做用域不一樣：sessionStorage在不一樣的瀏覽器窗口中不共享，即便是同一個頁面，localStorage在全部的同源窗口中是共享的，cookie也是在全部同源的窗口中共享的。

5)、web Storage支持事件通知機制，能夠將數據更新的通知發送給監聽者。

6)、web Storage的api接口使用更方便。

6. 給一個列表每一行加一個刪除按鈕，有什麼辦法

回答：利用事件委託，給每個標籤添加方法，經過循環用js操做dom添加事件

循環方法，最後只能綁定給最後一個，怎麼解決

回答了利用閉包，當即執行函數

問還有沒有別的辦法，答在循環是能夠用

let聲明（小哥哥說就是想讓說let）

7. ES6中let，const和 var 三者的區別

    let命令基本用法

在ES6中，新增了let命令，用於聲明變量，用來取代ES5中var命令，消除var聲明的變量的不合理，不嚴謹之處。const用於聲明常量。 讓咱們來看看let和var的區別：

1） let 不存在變量提高

  使用let聲明的變量，不會像使用var那樣存在「變量提高「」的現象。因此使用let聲明變量，必須遵循「先聲明，後使用」的原則。不然會報錯

console.log(a); //ReferenceError
let a = 10;複製代碼

若是是var聲明的變量，則不會報錯。

console.log(b); //undefined
var b = 10;複製代碼

2）let 聲明的變量存在塊級做用域

let聲明的變量只在所聲明的代碼塊內有效。塊級做用域由 { } 包括，if語句和for語句裏面的{ }也屬於塊做用域

{
    var a = 10;
    let b = 20;  
}
    console.log(a); //10
    console.log(b); // ReferenceError: b is not defined複製代碼

var a =[];
for( var i=0; i<10; i++ ){
    a[i] = function(){
        console.log(i);
    }
}

    for( var j = 0; j<a.length; j++ ){
        a[j](); //輸出10個10。 由於i是var聲明的，在全局範圍內都用，每次新的i都會覆蓋原來的。
    }複製代碼

var a =[];
    for( let i=0; i<10; i++ ){
        a[i] = function(){
            console.log(i);
        }
    }

    for( let j = 0; j<a.length; j++ ){
        a[j](); //輸出 0，1，2，...，9
    }複製代碼

3）let 不容許在同一做用域內重複聲明同一個變量

在同一做用域內，若是使用var聲明同一個變量，則後面的覆蓋前面的

var a = 10;
let a = 10;

console.log(a);//Uncaught SyntaxError:
Identifier 'a' has already been declared複製代碼

或

let a = 10;
let a = 15;

console.log(a);//Uncaught SyntaxError:
Identifier 'a' has already been declared複製代碼

4）暫時性死區：在代碼塊內，使用 let 聲明變量以前，該變量都是不能夠使用

只要在同一做用域內存在let命令，他所聲明的變量就「綁定」在這個做用域內，無論外部有沒有聲明 

let a =10;
    function fn1(){
        console.log(a);
        let a = 5;
    }

fn1();//Uncaught ReferenceError: a is not defined複製代碼

ES6規定，若是在區塊中存在let和const聲明的變量，則這個區塊對這些聲明的變量從一開始就造成一個封閉的做用域。無論在外部有沒有聲明這個變量。必須遵照「先聲明，後使用」的原則，不然報錯  

ES6規定暫時性死區和不存在變量提高，主要是爲了減小運行程序的錯誤，防止出現「先使用（變量），後聲明（變量）」的狀況，從而致使意料以外的行爲。這種錯誤在ES5中很常見，如今有了這種規定，就能夠避免出現此類錯誤了  

總之，暫時性死區的本質就是，只要一進入當前做用域，所使用的變量就已存在，可是不可獲取，只有等到聲明變量的哪一行代碼的出現，在能夠獲取和使用該變量

const命令的基本使用

const用來聲明常量，一旦聲明，其值就不能更改

const a = 10;
    a = 20;

 console.log(a);//Uncaught TypeError: 
 Assignment to constant variable.複製代碼

 1. const聲明的常量不能改變，意味着const一旦聲明常量，就必須同時初始化。不能先聲明，後初始化，這樣會報錯 

 2. 與let同樣。const聲明的常量也只在塊級做用域內有效 

 3. 與let同樣，必須先聲明，後使用 

 4. 與let同樣，在同一做用域，const不能重複聲明同一常量 

那麼若是使用const聲明對象呢？

const b = {
        name:'zs',
        age:22
    }
b.name = "lzx";

console.log(b.name+"---"+b.age);//輸出lzx---22複製代碼

咱們能夠看到，使用const聲明的對象的屬性是能夠修改。 由於Object類型是引用類型。用const聲明常量保存的是對象的地址，不可變的是地址，在上面的代碼中就是，不能把 b 指向另外一個對象。而修改對象的屬性，並不會改變對象的地址，所以用const聲明對象的屬性是能夠修改的 數組也是引用類型。

8. 事件綁定 addEventListener方法有幾個參數，都是什麼 最有一個參數表示什麼 事件冒泡和事件捕獲

默認是事件捕獲仍是事件冒泡，true仍是false

項目中用到跨域了嗎  ，回答用到了，  跨域有什麼方法，  答了jsonp post 代理跨越等

用過代理跨域嗎，知道它的具體機制嗎，   回答沒有用過，不太瞭解

9. 下面問了幾個css的題

css水平垂直居中的方法

元素水平居中：

margin o auto;

元素水平垂直居中

方案

1：position 元素已知寬度

父元素設置爲：

position: relative;

子元素設置爲：

position: absolute;

距上50%，據左50%，而後減去元素自身寬度的距離就能夠實現

方案 2：position transform 元素未知寬度

若是元素未知寬度，只需將上面例子中的

margin: -50px 0 0 -50px;替換爲： transform: translate(-50%,-50%);

方案 3：flex佈局

<div class="box">
    <div class="content">
    </div>
</div>
<style>
    .box {
        background-color: #FF8C00;
        width: 300px;
        height: 300px;
        display: flex;/*flex佈局*/
        justify-content: center;/*使子項目水平居中*/ /*兩端對齊，內容居中 */
        align-items: center;/*使子項目垂直居中*/  /*垂直方向：居中 */
    }
    .content {
        background-color: #F00;
        width: 100px;
        height: 100px;
    }
</style>
複製代碼

方案 4：table-cell佈局

10. 響應式佈局中rem em的區別 哪一個是根據根元素變化的

  rem,em都是順應不一樣網頁字體大小展示而產生的

  其中，em是相對其父元素，在實際應用中相對而言會帶來不少不便

  而rem是始終相對於html大小，即頁面根元素

移動端像素和臺式機的不同怎麼辦  答用視口，使比例爲1：1

遇到過響應式佈局中1px的border的問題嗎 

 答沒有 小哥哥說能夠了解一下，其中問了逛什麼論壇，說在論壇中好好看看，這個問題很值得注意

     響應式項目通常使用百分比佈局，可是咱們border會給咱們佈局帶來麻煩，舉個例：

<div class="s">
    <div class="s1">內容1</div>
    <div class="s2">內容2</div>
</div>
<style>
    .s{
        width:800px;
    }
    .s1,.s2{
        float:left;
        width:50%;
        height:200px;
        background:#009;
        border:1px solid red;
    }
</style>複製代碼

s是個大容器，它的寬度爲800px，裏面包含兩個子級div，都爲float:left;width:50%;試圖讓這兩個div排在同一行上，然而border的加入，使得右邊的div[class=‘s2’]換到另一行去了，由於border佔據了1px的寬度，因此s1和s2加起來的寬度是400+400+1+1+1+1=804px>800px,因此形成第二個div[class=‘s2’]換行，要想知道爲何，首先須要瞭解float的特性，它老是把一行中最末尾的元素（若是顯示須要超出父容器寬度），換到另一行去。

  方法一(outline代替border): outline一樣能夠設置邊框，只不過outline定義的邊框在元素內部（不佔用元素外的空間），border定義的邊框在元素外部（佔用元素外的空間），因此一樣的邊框屬性咱們能夠這樣寫outline:1px solid red然而outline老是和上下左右四邊框同時存在聯繫在一塊兒，而不像border同樣能夠定義border-left，border-right等等，因此具備必定的侷限性。 最好的辦法是第二種(box-sizing): 給s1和s2設置屬性box-sizing：border-box；這樣不只解決了border的自適應，還解決了padding的自適應，box-sizing語法: 

box-sizing: content-box|border-box|inherit;複製代碼

  content-box：元素默認的屬性。border,padding寬度和高度分別應用到元素的框內。在寬度和高度以外繪製元素的內邊距（padding）和邊框（border）。 border-box：爲元素設定的寬度和高度爲絕對寬度和高度，即不會根據border,padding的影響。就是說，爲元素指定的任何內邊距（padding）和邊框（border）都將在已設定的寬度和高度內進行繪製。經過從已設定的寬度和高度分別減去邊框（border）和內邊距（padding）才能獲得內容的寬度和高度。 inherit：規定應從父元素繼承 box-sizing 屬性的值，父元素是啥就是啥。

   content-box:content-width = width+padding-left+padding-right+border-left+border-right;

   border-box: content-width = width-padding-left-padding-right-border-left-border-right; 

  方法三： 在網頁佈局中，除了縱向佈局外，還有橫向佈局，這是兩個應用最爲普遍的佈局模式，然而橫向佈局又較縱向佈局應用更加頻繁。普通的橫向佈局，咱們都是對每一個模塊採用固定寬度，而後讓它居左浮動起來。這樣就能夠達到橫排的目的。然而這樣的佈局並不美觀，特別是在響應式網頁開發中，雖然說能夠採用百分比的寬度，但終究仍是會被margin值和padding值和border值影響，從而致使在不一樣分辨率下出現右邊空缺過大以及折行的現象 解決辦法是給它的父級元素設置display的盒模型展現，好比html結構以下：

<div class="flex flex-pack-justify">
<span>模塊一</span>
<span>模塊二</span>
<span>模塊三</span>
<span>模塊四</span>
</div>複製代碼

css代碼以下： 
/* ============================================================ 
flex：定義佈局爲盒模型 
flex-v：盒模型垂直佈局 
flex-1：子元素佔據剩餘的空間 
flex-align-center：子元素垂直居中 
flex-pack-center：子元素水平居中 
flex-pack-justify：子元素兩端對齊 
兼容性：ios 4+、android 2.3+、winphone8+ 
 ============================================================================*/複製代碼

11. img標籤中title和alt標籤的區別，有什麼用

alt 屬性 ①若是圖像沒有下載或者加載失敗，會用文字來代替圖像顯示。

這一做用是爲了給加載不出網頁圖片的用戶提供圖片信息，方便用戶瀏覽網頁，也方便程序猿維護網頁。② 搜索引擎能夠經過這個屬性的文字來抓取圖片

title 屬性 當網頁上的圖片被加載完成後，鼠標移動到上面去，會顯示這個圖片指定的屬性文字，以對圖片信息進行補充性說明。

若是  img 的圖片獲取不到，怎麼設置默認圖片 回答不太瞭解，好像img標籤有一個錯誤事件能夠設置， 小哥哥說就是這個

  咱們能夠給 img 標籤設置一個 onerror 屬性，能夠在 src 路徑不存在時顯示指定的默認圖片。

<img src="正常圖片路徑" alt="" onerror="this.src='默認圖片路徑'">複製代碼

12.  href和src的區別

   href是Hypertext Reference的縮寫，表示超文本引用。用來創建當前元素和文檔之間的連接。經常使用的有：link、a。例如：

<link href="reset.css" rel=」stylesheet「/>複製代碼

   瀏覽器會識別該文檔爲css文檔，並行下載該文檔，而且不會中止對當前文檔的處理。這也是建議使用link，而不採用@import加載css的緣由。 

   src是source的縮寫，src的內容是頁面必不可少的一部分，是引入。src指向的內容會嵌入到文檔中當前標籤所在的位置。經常使用的有：img、script、iframe。

<script src="script.js"></script>複製代碼

當瀏覽器解析到該元素時，會暫停瀏覽器的渲染，知道該資源加載完畢。這也是將js腳本放在底部而不是頭部得緣由。

簡而言之，src用於替換當前元素；href用於在當前文檔和引用資源之間創建聯繫。

13. 瞭解css3嗎 回答動畫方面嗎，小哥哥說不止這方面還有translate、偏移量等  

CSS3有哪些新特性？

1. CSS3實現圓角（border-radius），陰影（box-shadow），

2. 對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）

3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜

4. 增長了更多的CSS選擇器 多背景 rgba

5. 在CSS3中惟一引入的僞元素是 ::selection.

6. 媒體查詢，多欄佈局

7. border-image

技術基本就這些，不太會的問題小哥哥會提示一下

hr主要了解了一下學習狀況，學校經歷等，就是聊了會天，問了一下何時能夠實習等

關於vue

1. 看簡歷寫了瞭解vue回答不精通，只是瞭解 問了v-if和v-show的區別

相同點：二者都是在判斷 dom 節點是否要顯示

不一樣點：

1）實現方式：v-if 是根據後面數據的真假值判斷直接從 dom 樹刪除或重建元素節點；v-show 只是在修改元素的 css 樣式，也就是display的屬性值，元素始終在 dom 樹上；

2）編譯過程：

v-if 切換有一個局部編譯/卸載的過程，切換過程當中合適地銷燬和重建內部的事件監聽和子組件； v-show 只是簡單的基於 css 切換；

3）編譯條件：

v-if 是惰性的，若是初始值爲假，則什麼也不作；只有在條件在第一次變爲真時纔開始局部編譯； v-show 是在任何條件下（首次條件是否爲真時）都被編譯，而後被緩存，並且dom元素始終被保留；

4）性能消耗：

v-if 有更高的切換消耗，不適合作頻繁的切換；v-show 有更高的初始渲染消耗，適合作頻繁的切換；

v-if 和v-show 在頁面第一次渲染時，哪一個比較快

1. 自我介紹

2. 你爲何要作這個項目？

  這個問題我有點懵啊 咋回答

3. vue的新特性有哪些?

4. vue雙向數據綁定原理？嗯 我想捶死本身。。這麼重要的知識點忘了複習，講的不清楚，減分項吧，不該該的。

5.css和js咋樣？答 還行

6.那你給我講一下 viewport？呃這是視口...嗯對你給我講一下。。 壓根沒複習這沒講出來啥

7.那你還有什麼問題要問個人嗎 ?

8.我終於能夠balabla開說了。。講了做用域 閉包 原型鏈繼承 異步單線程等。。

9.還有嗎？ 我答 就還有那些基礎知識啊什麼的 說實話那種環境下 我確實想不起來我還要說什麼，總感受他的問題很奇怪。。

在講異步單線程的時候提到settimeout

10.settimeout的缺點

  setInterval (函數，時間) 是 無限定時器，做用每隔一段時間後，自動調用該函數，無限次調用；clearinterval(t) 讓函數中止；

setTimeout (函數，時間) 是 延時定時器，間隔必定時間調用一次，且只調用一次；clearTimeout(t) 讓函數中止；

若是想用延時定時器實現無限次調用，必須在指定的函數內部從新啓動一次延時定時器；

兩種實現無限次調用的區別：

1. 若是函數的 執行時間 大於 無限定時器setInterval 的調用時間，會形成函數的累積；

2. setTimeout()寫在函數的最後，不會形成函數的累積；

對象合併；

兩行代碼實現數組各元素+1；

實現迴文字符串的判斷；

對vue框架的理解（假如讓你實現框架，要作什麼）；