前端工程師面試題題及答案全面綜合解析

1、B)；(D )(D )1. 要動態(tài)改變層中內(nèi)容可以使用的方法有( AB )a) i nn erHTMLb) i nn erTextc) 通過設(shè)置層的隱藏和顯示來實現(xiàn)d) 通過設(shè)置層的樣式屬性的display屬性2. 在javascript里，下列選項中不屬于數(shù)組方法的是(a) sort()b) le ngth()c) con cat()d) reverse()3. var emp = new Array(3);for(var i in emp)以下答案中能與for循環(huán)代碼互換的是：(選擇一項)。A for(var i =0; i<emp; i+)B for(var i =0; i<

2、Array(3); i+)C for(var i =0; i<empen gth(); i+)D for(var i =0; i<empen gth; i+)4下列聲明數(shù)組的語句中，錯誤的選項是(C )。a) Var arry= new Array()b) Var arry=new Array(3)c) Var arry=new Array(3)(4)d) Var arry=new Array( 3' , ' 4')5. 下列哪一個選項不屬于document 對象的方法？( Da) focus()b) getEleme ntByld()c) getEleme

3、 ntsByName()d) bgColor()6. 、 display屬性值的常用取值不包括(C )a) i nlineb) blockc) hidde nd) none7. 以下有關(guān)pixelTop屬性與top屬性的說法正確的是。a) 都是Location對象的屬性b) 使用時返回值都是字符串c) 都是返回以像素為單位的數(shù)值d) 以上都不對8. 使用open方法打開具有瀏覽器工具條，地址欄，菜單欄的窗口，下列選項正確的是_D_a) ope n("x.html","HI","toolbas=1,scrollbars=1,status=1&qu

4、ot;);b) ope n("HI","scrollbars=1,locatio n=1,status=1");c) ope n("x.html","status=yes,me nubar=1,locati on=1");d) ope n("x.html","HI","toolbas=yes,me nubar=1,locatio n=1");9. 、 javascript 中表達(dá)式 parseInt(“X8X8' )+paseFloat(的結(jié)果是什

5、么?( C)a) 8+8b) 88c) 16d) “ 8” +，810. 關(guān)于 setTimeout( “check” ,10中說法正確的是(D)a) 程序循環(huán)執(zhí)行10次b) Check函數(shù)每10秒執(zhí)行一次c) 10做為參數(shù)傳給函數(shù)checkd) Check函數(shù)每10毫秒執(zhí)行一次11 link和import 的區(qū)別是？(1) link 屬于XHTML標(biāo)簽，而 import是CSS提供的；(2) 頁面被加載的時，link會同時被加載，而 import引用的CSS會等到頁面被加載完再加載(3) import只在IE5以上才能識別，而link是XHTML標(biāo)簽，無兼容問題；(4) link方式的樣式的

6、權(quán)重高于import的權(quán)重.12 html5有哪些新特性、移除了那些元素？如何處理 HTML5新標(biāo)簽的瀏覽器兼容問 題？如何區(qū)分 HTML和HTML5 ？* HTML5現(xiàn)在已經(jīng)不是SGML的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加。* 繪畫 canvas用于媒介回放的 video 和audio 元素本地離線存儲localStorage長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;sessionStorage的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除語意化更好的內(nèi)容元素，比如article 、footer 、header、nav、section表單控件， calendar 、date、time、email

7、、url、search新的技術(shù) webworker, websockt. Geolocation*移除的元素純表現(xiàn)的元素：basefont ， big ， center ， font, s，strike ， tt ， u ；對可用性產(chǎn)生負(fù)面影響的元素：frame，frameset ，noframes ；支持HTML5新標(biāo)簽:* IE8/IE7/IE6支持通過 document.createElement方法產(chǎn)生的標(biāo)簽，可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽,瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式：*當(dāng)然最好的方式是直接使用成熟的框架、使用最多的是html5shim 框架<

8、!-if lt IE 9><script> src="<!endif->如何區(qū)分：DOCTYPE聲明新增的結(jié)構(gòu)元素功能元素13 HTML5的離線儲存?localstorage長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;sessionstorage數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除。14 :介紹一下 CSS的盒子模型?(1 )有兩種，IE 盒子模型、標(biāo)準(zhǔn) W3C盒子模型；IE的content 部分包含了 border 和pading;(2)盒模型： 內(nèi)容(content)、填充(padding)、邊界(margin)、 邊框(border).15 CSS選擇器有哪些？哪

9、些屬性可以繼承？優(yōu)先級算法如何計算？CSS3新增偽類有那些？* 1.id 選擇器（# myid ）2. 類選擇器（.myclassname ）3. 標(biāo)簽選擇器（div, hi, p）4. 相鄰選擇器（hi + p ）5. 子選擇器（ul < li）6. 后代選擇器（li a ）7. 通配符選擇器（* ）8. 屬性選擇器（arel = "external"）9. 偽類選擇器（a: hover, li: nth - child）* 可繼承的樣式： font-size font-family color, UL LI DL DD DT;* 不可繼承的樣式： border p

10、adding margin width height ;* 優(yōu)先級就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn)；* 載入樣式以最后載入的定位為準(zhǔn)；優(yōu)先級為：important > id > class > tagimportant 比內(nèi)聯(lián)優(yōu)先級高16 列出display 的值，說明他們的作用。position的值，relative和absolute定位原點是？1.block象塊類型元素一樣顯示。none 缺省值。象行內(nèi)元素類型一樣顯示。inline-block象行內(nèi)元素一樣顯示，但其內(nèi)容象塊類型元素一樣顯示。list-item象塊類型元素一樣顯示，并添加樣式列表標(biāo)記。*absol

11、ute2.生成絕對定位的元素，相對于static定位以外的第一個父元素進(jìn)行定位。*fixed （老IE不支持）生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。Relative生成相對定位的元素，相對于其正常位置進(jìn)行定位。* static默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中* （忽略 top, bottom, left, right z-index聲明）* inherit規(guī)定從父元素繼承 position 屬性的值。17介紹js的基本數(shù)據(jù)類型。number,string,boolean,object,undefined18 Javascript如何實現(xiàn)繼承?通過原型和構(gòu)造器19什么是閉包（clo

12、sure ），為什么要用它？一、變量的作用域要理解閉包，首先必須理解Javascript特殊的變量作用域。變量的作用域無非就是兩種：全局變量和局部變量。Javascript語言的特殊之處，就在于函數(shù)內(nèi)部可以直接讀取全局變量。二、如何從外部讀取局部變量？出于種種原因，我們有時候需要得到函數(shù)內(nèi)的局部變量。但是，前面已經(jīng)說過了，正常情況下，這是辦不到的，只有通過變通方法才能實現(xiàn)。那就是在函數(shù)的內(nèi)部，再定義一個函數(shù)。三、閉包的概念上一節(jié)代碼中的f2函數(shù)，就是閉包。各種專業(yè)文獻(xiàn)上的 閉包"（closure）定義非常抽象，很難看懂。我的理解是，閉包就是能夠 讀取其他函數(shù)內(nèi)部變量的函數(shù)。由于在Ja

13、vascript語言中，只有函數(shù)內(nèi)部的子函數(shù)才能讀取局部變量，因此可以把閉包簡單 理解成 定義在一個函數(shù)內(nèi)部的函數(shù)”所以，在本質(zhì)上，閉包就是將函數(shù)內(nèi)部和函數(shù)外部連接起來的一座橋梁。b四、閉包的用途閉包可以用在許多地方。它的最大用處有兩個，一個是前面提到的可以讀取函數(shù)內(nèi)部的變量, 另一個就是讓這些變量的值始終保持在內(nèi)存中。閉包的用途閉包可以用在許多地方。它的最大用處有兩個，一個是前面提到的可以讀取函數(shù)內(nèi)部的變量, 另一個就是讓這些變量的值始終保持在內(nèi)存中。20針對jQuery 的優(yōu)化方法？1，總是從ID選擇器開始繼承2，在class 前使用tag(標(biāo)簽名)在jQuery中第二快的選擇器是tag(

14、標(biāo)簽)選擇器(比如：$( “ head ”)。跟ID選擇器累時，因為它來自原生的getElementsByTagName() 方法。繼續(xù)看剛才那段HTML代碼：比如需要選擇紅綠單選框，那么可以使用一個tag name來限制(修飾)class ，如下所示：var active_light = $(“ input.on ” );當(dāng)然也可以結(jié)合 就近的ID，如下所示：var active_light= $(“ #traffic_light input.on” );在使用tag來修飾class的時候，我們需要注意以下幾點：(1) 不要使用tag來修飾ID，如下所示：var content = $(“

15、div#content ” );這樣一來，選擇器會先遍歷所有的div元素，然后匹配#content 。(好像jQuery從1.3.1開始改變了選擇器核心后，不存在這個問題了。暫時無法考證。)(2) 不要畫蛇添足的使用ID來修飾ID，如下所示：var traffic_light = $(“ #content #traffic_light” );3，將jQuery對象緩存起來把jQuery對象緩存起來就是要告訴我們要養(yǎng)成將jQuery對象緩存進(jìn)變量的習(xí)慣。下面是一個jQuery新手寫的一段代碼：$("#traffic_light input.on").bind("cl

16、ick", function() );$("#traffic_light input.on").css("border", "1px dashed yellow");$("#traffic_light input.on").css("background-color", "orange");$("#traffic_light input.on").fadeln("slow");但切記不要這么做。我們應(yīng)該先將對象緩存進(jìn)一個變量然

17、后再操作，如下所示：var $active_light = $("#traffic_light input.on");$active_light.bind("click", function() );$active_light.css("border", "1px dashed yellow");$active_light.css("background-color", "orange");$active_light.fadeln("slow");記住，永

18、遠(yuǎn)不要讓相同的選擇器在你的代碼里岀現(xiàn)多次4，對直接的DOM操作進(jìn)行限制這里的基本思想是在內(nèi)存中建立你確實想要的東西，然后更新DOM。DOM操作速度很慢。這個變量將用來存這并不是一個jQuery最佳實踐，但必須進(jìn)行有效的JavaScript 操作。直接的例如，你想動態(tài)的創(chuàng)建一組列表元素，千萬不要這樣做，如下所示：var top_100_list = , /假設(shè)這里是100個獨一無二的字符串$mylist = $("#mylist"); / jQuery選擇到 元素for (var i=0, l=top_100_list.length; i" + top_100_li

19、sti + "");我們應(yīng)該將整套元素字符串在插入進(jìn)dom中之前先全部創(chuàng)建好，如下所示：var top_100_list = ,$mylist = $("#mylist"), top_100_li = "" /儲我們的列表元素for (var i=0, l=top_100_list.length; i"$mylist.html(top_100_li);5，冒泡除非在特殊情況下，否則每一個js事件(例如:click, mouseover 等.)都會冒泡到父級節(jié)點當(dāng)我們需要給多個元素調(diào)用同個函數(shù)時這點會很有用。代替這種效率很差的

20、多元素事件監(jiān)聽的方法就是，你只需向它們的父節(jié)點綁定一次。class比如，我們要為一個擁有很多輸入框的表單綁定這樣的行為：當(dāng)輸入框被選中時為它添加一個傳統(tǒng)的做法是，直接選中input ，然后綁定focus等，如下所示：$("#entryform input").bind("focus", function()$(this).addClass("selected");).bind("blur", function()$(this).removeClass("selected"););當(dāng)然上面代碼能幫

21、我們完成相應(yīng)的任務(wù)，但如果你要尋求更高效的方法，請使用如下代碼：$("#entryform").bind("focus", function(e)var $cell = $(e.target); / e.target捕捉到觸發(fā)的目標(biāo)元素$cell.addClass("selected");).bind("blur", function(e)var $cell = $(e.target);$cell.removeClass("selected"););通過在父級監(jiān)聽獲取焦點和失去焦點的事件，對目標(biāo)元素進(jìn)行操作。在上面代碼中，父級元素扮演了一個調(diào)度員的角色，它可以基于目標(biāo)元素綁定事件。如果你發(fā)現(xiàn)你給很多元素綁定了同一個事件監(jiān)聽，那么現(xiàn)在的你肯定知道哪里做錯了。6，推遲到 $(window).loa