學習了這么久，第一次面試前端，雖然只是電話面試，但是還是很緊張。
主要問題：
1.介紹你的項目
2.html的狀態(tài)
3html5新增加的標簽
4.css的display：none和visibility區(qū)別
5.怎么清除浮動
6.jquery的選擇器
7.jquery的on和事件綁定區(qū)別

問題答案的總結

html的狀態(tài)：
詳細見這篇博客：http://blog.csdn.net/liuwengai/article/details/51722704

html5新增加的標簽

<article>標簽定義外部的內(nèi)容（結構元素） <aside>定義頁面內(nèi)容之外的內(nèi)容。 aside的內(nèi)容與article的內(nèi)容相關。（結構元素） <figure>定義一組媒介內(nèi)容的分組，以及它們的標題。（結構元素） <section>標簽定義文檔中的節(jié)（section，區(qū)段）。比如章節(jié)，頁眉，頁腳或文檔中的其他部分（結構元素） <meter>定義預定義范圍內(nèi)的度量。僅用于已知最大和最小值的度量（內(nèi)聯(lián)元素） <progress>定義任何類型的任務的進度。可以使用<progress>標簽來顯示javascript中耗費時間的函數(shù)的進度（內(nèi)聯(lián)元素） <time>定義一個日期/時間 （內(nèi)聯(lián)元素） <audio>定義聲音內(nèi)容。(內(nèi)嵌元素) audio 元素允許多個 source 元素。source 元素可以鏈接不同的音頻文件。瀏覽器將使用第一個可識別的格式 <video>定義視頻。(內(nèi)嵌元素) Video也支持多個source元素，鏈接到不同的視頻文件，瀏覽器將使用第一個可識別的格式 屬性值： autoplay=”autoplay”就緒后馬上播放 loop=“l(fā)oop”播放完再次播放 <command>定義命令按鈕 （交互元素） <datalist>定義下拉列表,與input元素配合使用該元素，定義input可能出現(xiàn)的值，datalist的選項不會被顯示出來，它僅僅是合法的輸入值列表（交互元素） <details>定義元素的細節(jié) （交互元素） <canvas>定義圖形,繪制路徑，矩形，圓形，字符以及添加圖像的方法 Canvas元素本身沒有繪圖能力，所有的繪制工作必須在JavaScript內(nèi)部完成 <dialog>定義對話（會話）dialog元素表示幾個人之間的對話。 <embed>定義外部交互內(nèi)容或插件 <event-source>為服務器發(fā)送的事件定義目標 <footer>定義 section 或 page 的頁腳 <figcaption> 標簽定義 figure 元素的標題。 <hgroup> 標簽用于對網(wǎng)頁或區(qū)段（section）的標題進行組合。 <keygen>標簽提供一種驗證用戶的可靠方法。keygen 元素是密鑰對生成器（key-pair generator）。當提交表單時，會生成兩個鍵，一個是私鑰，一個公鑰。私鑰（private key）存儲于客戶端，公鑰（public key）則被發(fā)送到服務器。公鑰可用于之后驗證用戶的客戶端證書（client certificate）。 <header>定義 section 或 page 的頁眉（介紹信息） <mark> 標簽定義帶有記號的文本。請在需要突出顯示文本時使用 <m> 標簽。 <nav>定義導航鏈接。 <output>定義輸出的一些類型。 <source>定義媒體資源 Video也支持多個source元素，鏈接到不同的視頻文件，瀏覽器將使用第一個可識別的格式 屬性值： autoplay=”autoplay”就緒后馬上播放 loop=“l(fā)oop”播放完再次播放

display:none和visibility:hidden

CSS display:none;
使用該屬性后，HTML元素（對象）的寬度、高度等各種屬性值都將“丟失”，視為不存在，不加載;
一旦父節(jié)點元素應用了display:none，父節(jié)點及其子孫節(jié)點元素全部不可見
隱藏產(chǎn)生reflow和repaint(回流與重繪)

visibility:hidden;
使用該屬性后，HTML元素（對象）僅僅是在視覺上看不見（完全透明），而它所占據(jù)的空間位置仍然存在，也即是說它仍具有高度、寬度等屬性值。

引用一段網(wǎng)上的總結：

display:none是個相當慘無人道的聲明，子孫后代全部搞死（株連性），而且連塊安葬的地方都不留（不留空間），導致全體民眾嘩然（渲染與回流）。
visibility:hidden則具有人道主義關懷，雖然不得已搞死子孫，但是子孫可以通過一定手段避免（偽株連性），而且死后全尸，墓地俱全（占據(jù)空間），國內(nèi)民眾比較淡然（無渲染與回流）。

清除浮動
方法一：使用帶clear屬性的空元素

在浮動元素后使用一個空元素如<div class="clear"></div>，并在CSS中賦予.clear{clear:both;}屬性即可清理浮動。

優(yōu)點：簡單，代碼少，瀏覽器兼容性好。
缺點：需要添加大量無語義的html元素，代碼不夠優(yōu)雅，后期不容易維護。

方法二：使用CSS的overflow屬性
給浮動元素的容器添加overflow:hidden;或overflow:auto;可以清除浮動

方法三：給浮動的元素的容器添加浮動
給浮動元素的容器也添加上浮動屬性即可清除內(nèi)部浮動，但是這樣會使其整體浮動，影響布局，不推薦使用。

方法四：使用鄰接元素處理
給浮動元素后面的元素換行符 br 添加clear屬性。

<style type="text/css"> .div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1} .div2{background:#800080;border:1px solid red;height:100px} .left{float:left;width:20%;height:200px;background:#DDD} .right{float:right;width:30%;height:80px;background:#DDD} .clearfloat{clear:both} </style> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> <br class="clearfloat" /> </div> <div class="div2"> div2 </div>

方法五：父級div定義 height
原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。

方法六：父級div定義 偽類:after 和 zoom

<style type="text/css"> .div1{background:#000080;border:1px solid red;} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} .left{float:left;width:20%;height:200px;background:#DDD} .right{float:right;width:30%;height:80px;background:#DDD} /*清除浮動代碼*/ .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} .clearfloat{zoom:1} </style> <div class="div1 clearfloat"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2"> div2 </div>

在網(wǎng)頁主要布局時使用:after偽元素方法并作為主要清理浮動方式；在**小模塊如ul里使用overflow:hidde**n;（留意可能產(chǎn)生的隱藏溢出元素問題）；如果本身就是浮動元素則可自動清除內(nèi)部浮動，無需格外處理；正文中使用鄰接元素清理之前的浮動。最后可以使用相對完美的:after偽元素方法清理浮動，文檔結構更加清晰。

jquery選擇器

Jquery選擇器分為基本選擇器、層次選擇器、過濾選擇器和表單選擇器，下面一一介紹這四種選擇器。一、基本選擇器大部分都是基本選擇器。基本選擇器中包含id選擇器、class選擇器、標簽選擇器、復合選擇器和“*”選擇器。$("#id") 選取所有屬性id等于“id”的元素。$(".class_1") 選取所有屬性class為“class_1”的元素。$("p") 選取所有的<p>元素。$("div,span,p.myClass") 選取所有<div>、<span>和屬性class為“myClass”的<p>標簽的一組元素。$("*") 選取所有元素。二、層次選擇器如果想根據(jù)個元素之間的層次關系來獲取特定的元素，可以選擇使用層次選擇器。$("div p") 選取<div>里所有的<p>元素。這個選擇器獲取的是所有后代元素，而不是下一層次的元素（即子元素）。$("div>p") 選取<div>里所有標簽為<p>子元素。$(".class_1+div") 選取屬性class為“class_1”的下一個<div>同輩元素。$(".class_1").next("div") 效果同上。$(".class_1~div") 選取屬性class為“class_1”的元素后面的所有<div>同輩元素。$(".class_1").nextAll("div") 效果同上。$(".class_1").siblings("div") 與上面兩個選擇器不同的是：這個選擇器沒有前后之分，它選取所有同輩的<div>元素。三、過濾選擇器過濾選擇器都是以冒號(:)開頭，過濾選擇器可以分為基本過濾、內(nèi)容過濾、可見性過濾、屬性過濾、子元素過濾和表單對象屬性過濾選擇器。1、基本過濾選擇器$("div:first") 選取所有<div>元素中第一個<div>元素。$("div:last") 選取所有<div>元素中最后一個<div>元素。$("input:not(.class_1)") 選取屬性class不是“class_1”的<input>元素。$("input:even") 選取索引是偶數(shù)的<input>元素。$("input:odd") 選取索引是奇數(shù)的<input>元素。$("input:eq(1)") 選取索引等于1的<input>元素。$("input:gt(1)") 選取索引大于1的<input>元素。（注：大于1，而不包括1）$("input:lt(1)") 選取索引小于1的<input>元素。（注：小于1，而不包括1）$(":header") 選取網(wǎng)頁中所有的<h1>，<h2>，<h3>...。$("div:animated") 選取正在執(zhí)行動畫的<div>元素。$(":focus") 選取當前獲取焦點的元素。2、內(nèi)容過濾選擇器$("div:contains('我')") 選取含有文本“我”的<div>元素。$("div:empty") 選取不包含子元素（包括文本元素）的<div>空元素。$("div:has(p)") 選取含有<p>元素的<div>元素。$("div:parent") 選取擁有子元素（包括文本元素）的<div>元素。3、可見性過濾選擇器$(":hidden") 選取所有不可見元素，$("input:hidden") 選取所有不可見的<input>元素。$("div:visible") 選取所有可見的<div>元素。4、屬性過濾選擇器$("div[id]") 選取擁有屬性id的<div>元素。$("div[title=text]") 選取屬性title為“text”的<div>元素。$("div[title!=text]") 選取屬性title不等于“text”的<div>元素。（注：沒有屬性title的<div>元素也會被選取）$("div[title^=text]") 選取屬性title是以“text”開頭的<div>元素。$("div[title$=text]") 選取屬性title是以“text”結束的<div>元素。$("div[title*=text]") 選取屬性title中含有“text”的<div>元素。$('div[title|="text"]') 選取屬性title等于“text”或以“text”為前綴的<div>元素。（注：為前綴指該字符串后跟一個‘-’）。$('div[title~="text"]') 選取屬性title以空格分隔的值中包含字符“text”的元素。$("div[id][title$='text']") 選取擁有屬性id，并且屬性title以“text”結束的<div>元素。5、子元素過濾選擇器$("div.one:nth-child(2)") 選取屬性class為“one”的<div>父元素下的第二個子元素。$("div.one:first-child(2)") 選取屬性class為“one”的<div>父元素下的第一個子元素。$("div.one:last-child(2)") 選取屬性class為“one”的<div>父元素下的最后一個子元素。$("div.one:first-child(2)") 如果屬性class為“one”的<div>父元素下只有一個子元素，則選取這個子元素。6、表單對象屬性過濾選擇器$("#form1 input:enabled") 選取表單內(nèi)可用的<input>元素。$("#form1 input:disabled") 選取表單內(nèi)不可用的<input>元素。$("input:checked") 選取被選中的多選框。$("select:selected") 選取下拉框中被選中的項。（注：在元素中設置屬性disabled為“disabled”可使此元素不可用）四、表單選擇器$(":input") 選取所有<input>、<textarea>、<select>和<button>元素。$(":text") 選取所有的單行文本框。$(":password") 選取所有的密碼框。$(":radio") 選取所有的單選框。$(":checkbox") 選取所有的復選框。$(":image") 選取所有的圖像按鈕。$(":reset") 選取所有的重置按鈕。$(":button") 選取所有的按鈕。$(":file") 選取所有的上傳控件。$(":hidden") 選取所有的不可見元素。五、選擇器中的一些注意事項1、一些屬性值中含有特殊字符如：<div id="id[1]">aa</div>,獲取此元素的方法是：$("#id\\[1\\]")。2、選擇器中含有空格$('.class_1 :hidden')與$('.class_1:hidden')的對比。$('.class_1 :hidden') 獲取到的是屬性class為class_1的元素里邊包含的隱藏元素。$('.class_1:hidden') 獲取到的是屬性class為class_1的元素。

jquery事件綁定，on和冒泡

我們的頁面可以理解為一棵DOM樹，當我們在葉子結點上做什么事情的時候（如click一個a元素），如果我們不人為的設置stopPropagation(Moder Browser), cancelBubble(IE)，那么它的所有父元素，祖宗元素都會受之影響，它們上面綁定的事件也會產(chǎn)生作用。

$('a').bind('click', function() { alert("That tickles!") });

當我們在a 上面點擊的時候，首先會觸發(fā)它本身所綁定的click事件，然后會一路往上，觸發(fā)它的父元素，祖先元素上所有綁定的click事件，就像下圖演示的那樣。

1.bind()

.bind()是最直接的綁定方法 ，會綁定事件類型和處理函數(shù)到DOM element上, 這個方法是存在最久的，而且也很好的解決了瀏覽器在事件處理中的兼容問題。但是這個方法有一些performance方面的問題，看下面的代碼：

$( "#members li a" ).bind( "click", function( e ) {} ); $( "#members li a" ).click( function( e ) {} );

上面的兩行代碼所完成的任務都是一致的，就是把event handler加到全部的匹配的a 元素上。
效率
一方面，我們隱式地把click handler加到所有的a標簽上，這個過程是昂貴的;
另一方面在執(zhí)行的時候也是一種浪費，因為它們都是做了同一件事卻被執(zhí)行了一次又一次（比如我們可以把它hook到它們的父元素上，通過冒泡可以對它們中的每一個進行區(qū)分，然后再執(zhí)行這個event handler）。

優(yōu)點：
·這個方法提供了一種在各種瀏覽器之間對事件處理的兼容性解決方案；
·非常方便簡單的綁定事件到元素上；
·.click(), .hover()…這些非常方便的事件綁定，都是bind的一種簡化處理方式；
·對于利用ID選出來的元素是非常好的，不僅僅是很快的可以hook上去(因為一個頁面只有一個id),而且當事件發(fā)生時，handler可以立即被執(zhí)行(相對于后面的live, delegate)實現(xiàn)方式；

缺點：
·它會綁定事件到所有的選出來的元素上；
·它不會綁定到在它執(zhí)行完后動態(tài)添加的那些元素上；
·當元素很多時，會出現(xiàn)效率問題；
·當頁面加載完的時候，你才可以進行bind()，所以可能產(chǎn)生效率問題；

2.live()

.live()方法用到了事件委托的概念來處理事件的綁定。它和用.bind()來綁定事件是一樣的。.live()方法會綁定相應的事件到你所選擇的元素的根元素上，即是document元素上。那么所有通過冒泡上來的事件都可以用這個相同的handler來處理了。它的處理機制是這樣的，一旦事件冒泡到document上，jQuery將會查找selector/event metadata,然后決定那個handler應該被調(diào)用。

$( "#members li a" ).live( "click", function( e ) {} );

不需要在每個元素上再去綁定事件，而只在document上綁定一次就可以了。盡管這個不是最快的方式，但是確實是最少浪費的。
優(yōu)點：
·這里僅有一次的事件綁定，綁定到document上而不像.bind()那樣給所有的元素挨個綁定；
·那些動態(tài)添加的elemtns依然可以觸發(fā)那些早先綁定的事件，因為事件真正的綁定是在document上；
·你可以在document ready之前就可以綁定那些需要的事件；

缺點：
·從1.7開始已經(jīng)不被推薦了，所以你也要開始逐步淘汰它了；
·Chaining沒有被正確的支持；
·當使用event.stopPropagation()是沒用的，因為都要到達document；
·因為所有的selector/event都被綁定到document, 所以當我們使用matchSelector方法來選出那個事件被調(diào)用時，會非常慢；
·當發(fā)生事件的元素在你的DOM樹中很深的時候，會有performance問題；

3.delegate()
.delegate()有點像.live(),不同于.live()的地方在于，它不會把所有的event全部綁定到document,而是由你決定把它放在哪兒。而和.live()相同的地方在于都是用event delegation.

$( "#members" ).delegate( "li a", "click", function( e ) {} );

優(yōu)點：
·你可以選擇你把這個事件放到那個元素上了；
·chaining被正確的支持了；
·jQuery仍然需要迭代查找所有的selector/event data來決定那個子元素來匹配，但是因為你可以決定放在那個根元素上，所以可以有效的減小你所要查找的元素；
·可以用在動態(tài)添加的元素上；

缺點：
·需要查找哪個元素上發(fā)生了哪個事件了，盡管比document少很多了，不過，你還是得浪費時間來查找；

4.on()

其實.bind(), .live(), .delegate()都是通過.on()來實現(xiàn)的，.unbind(), .die(), .undelegate(),也是一樣的都是通過.off()來實現(xiàn)的

// Bind $( "#members li a" ).on( "click", function( e ) {} ); $( "#members li a" ).bind( "click", function( e ) {} ); // Live $( document ).on( "click", "#members li a", function( e ) {} ); $( "#members li a" ).live( "click", function( e ) {} );// Delegate $( "#members" ).on( "click", "li a", function( e ) {} ); $( "#members" ).delegate( "li a", "click", function( e ) {} );

優(yōu)點：
·提供了一種統(tǒng)一綁定事件的方法；
·仍然提供了.delegate()的優(yōu)點，當然如果需要你也可以直接用.bind()；

總結：
用.bind()的代價是非常大的，它會把相同的一個事件處理程序hook到所有匹配的DOM元素上；
·不要再用.live()了，它已經(jīng)不再被推薦了，而且還有許多問題；
·.delegate()會提供很好的方法來提高效率，同時我們可以添加一事件處理方法到動態(tài)添加的元素上；
·我們可以用.on()來代替上述的3種方法；

總結

以上是生活随笔為你收集整理的前端面试--大众点评的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。