前端工程師面試題題及答案(全面綜合)

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

2、r(var i =0; i<emp.length(); i+)D for(var i =0; i<emp.length; 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對象的方法?（D ）a)focus()b)getElementById()c)getElementsByName()d)bgColor()6. 、 display屬性值的常用

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

4、tion=1,status=1");c)open("x.html","status=yes,menubar=1,location=1");d)open("x.html","HI","toolbas=yes,menubar=1,location=1");9. 、 javascript中表達式parseInt(“X8X8”)+paseFloat(8)的結(jié)果是什么?( C)a)8+8b)88c)16d)“8”+810. 關(guān)于setTimeout(“check”,10)中說法正確的是( D)a

5、)程序循環(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方式的樣式的權(quán)重 高于import的權(quán)重. 12 html5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？* H

6、TML5 現(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、url、search 新的技術(shù)webworker, websockt, Geolocation* 移除的元素純表現(xiàn)的元素：basefont，

7、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框架 <!-if lt IE 9> <script> src=" <!endif-> 如何區(qū)分： DOCTYPE聲明新增的結(jié)構(gòu)元素

8、功能元素13HTML5的離線儲存？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).15CSS 選擇器有哪些？哪些屬性可以繼承？優(yōu)先級算法如何計算？ CSS3新增偽類有那些？* 1.id選擇器（ # myid） 2.類選擇器（.myclassname） 3.標(biāo)簽選擇

9、器（div, h1, p） 4.相鄰選擇器（h1 + 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 padding margin width height ;* 優(yōu)先級就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn);* 載入樣式以最后載入的定位為準(zhǔn);優(yōu)先級為: !im

10、portant > id > class > tag important 比 內(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)記。 2. *absolute 生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。 *fixed （老IE不支持） 生成絕對定位的

11、元素，相對于瀏覽器窗口進行定位。 *relative 生成相對定位的元素，相對于其正常位置進行定位。 * 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 什么是閉包（closure），為什么要用它？一、變量的作用域要理解閉包，首先必須理解Javascript特殊的變量作用域

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

13、”。所以，在本質(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(標(biāo)簽)選擇器( 比如：$(“head”) )。 跟ID選擇器累時，因為它來自原生的getElementsByTa

14、gName() 方法。 繼續(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 = $(“div#content”);這樣一來，選擇器會先遍歷所有的div元素，然后匹配#content。 （好像jQu

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

16、on").css("border", "1px dashed yellow"); $("#traffic_light input.on").css("background-color", "orange"); $("#traffic_light input.on").fadeIn("slow");但切記不要這么做。 我們應(yīng)該先將對象緩存進一個變量然后再操作，如下所示： var $active_light = $("#traffic_li

17、ght input.on"); $active_light.bind("click", function() ); $active_light.css("border", "1px dashed yellow"); $active_light.css("background-color", "orange"); $active_light.fadeIn("slow");記住，永遠(yuǎn)不要讓相同的選擇器在你的代碼里出現(xiàn)多次.4，對直接的DOM操作進行限制這里的基本思想是在

18、內(nèi)存中建立你確實想要的東西，然后更新DOM 。 這并不是一個jQuery最佳實踐，但必須進行有效的JavaScript操作 。直接的DOM操作速度很慢。 例如，你想動態(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_listi + ""); 我們應(yīng)該將整套元素字符串在插入進dom中之前先

19、全部創(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ù)時這點會很有用。 代替這種效率很差的多元素事件監(jiān)聽的方法就是, 你只需向它們的父節(jié)點綁定一

20、次。 比如, 我們要為一個擁有很多輸入框的表單綁定這樣的行為: 當(dāng)輸入框被選中時為它添加一個class傳統(tǒng)的做法是，直接選中input，然后綁定focus等，如下所示： $("#entryform input").bind("focus", function() $(this).addClass("selected"); ).bind("blur", function() $(this).removeClass("selected"); );當(dāng)然上面代碼能幫我們完成相應(yīng)的任務(wù)，但如果你要尋求更高

21、效的方法，請使用如下代碼： $("#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)元素進行操作。 在上面代碼中，父級元素扮演了一個調(diào)度員的角色, 它可以基于目標(biāo)元素綁定事件。 如果你發(fā)現(xiàn)你給很多元素綁定了同一個事件監(jiān)聽, 那么現(xiàn)在的你肯定知道哪里做錯了。6，推遲到 $(window).loadjQuery對于開發(fā)者來說