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

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

2、+) C for(var i =0; iemp.length(); i+) D for(var i =0; iemp.length; i+) 4 下列聲明數(shù)組的語句中，錯誤的選項(xiàng)是（ 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. 下列哪一個選項(xiàng)不屬于document對象的方法?（D ） a)focus() b)getElementById() c)getElementsByName() d)bgColor() 6. 、 di

3、splay屬性值的常用取值不包括(C ) a)inline b)block c)hidden d)none 7. 以下有關(guān)pixelTop屬性與top屬性的說法正確的是。(D ) a)都是Location對象的屬性 b)使用時返回值都是字符串 都是返回以像素為單位的數(shù)值c) d)以上都不對 下列選項(xiàng)正確的是_D_方法打開具有瀏覽器工具條,地址欄,菜單欄的窗口，8. 使用open?燈湥尨?瑨汭?屜尬潴汯慢?捳潲汬慢獲?猬慴疇?就?b)open(HI,scrollbars=1,location=1,status=1); ?燈湥尨?瑨汭?獜慴疇?敹?敭畮慢?潬?wèi)T楴湯?燈湥尨?瑨汭?屜尬潴汯慢?敹?敭

4、畮慢?潬?wèi)T楴湯? 的結(jié)果是什么?( C) javascript中表達(dá)式parseInt(“X8X8”)+paseFloat(8)9. 、a)8+8 b)88 c)16 d)“8”+8 中說法正確的是( D)10. 關(guān)于setTimeout(“check”,10) 10次a)程序循環(huán)執(zhí)行 10秒執(zhí)行一次b)Check函數(shù)每check c)10做為參數(shù)傳給函數(shù) 10毫秒執(zhí)行一次d)Check函數(shù)每 二： 的區(qū)別是？link 和import 11 （1）link屬于XHTML標(biāo)簽，而import是CSS提供的; （2）頁面被加載的時，link會同時被加載，而import引用的CSS會等到頁面被加載完

5、再加載; （3）import只在IE5以上才能識別，而link是XHTML標(biāo)簽，無兼容問題; （4）link方式的樣式的權(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)閉后自動刪除 secti

6、on 、nav、footer、 語意化更好的內(nèi)容元素，比如header article、urlsearch time、email、 表單控件，calendar、date、 新的技術(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新

7、標(biāo)簽， 瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式： * 當(dāng)然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架 src=/svn/trunk/html5.js 如何區(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 和 padin

8、g; (border). 邊框 、(margin)、邊界(padding)、填充(content)內(nèi)容 ）盒模型：2（新增偽類有CSS3CSS 選擇器有哪些？哪些屬性可以繼承？優(yōu)先級算法如何計算？ 15 那些？ ）* 1.id # myid選擇器（ ） 2.類選擇器（.myclassname ） 3.標(biāo)簽選擇器（div, h1, p ） 4.相鄰選擇器（h1 + p ）子選擇器（ul id class tag important 比 內(nèi)聯(lián)優(yōu)先級高 16 列出display的值，說明他們的作用。position的值， relative和absolute定位原點(diǎn)是？ 1. block 象塊類型元素

9、一樣顯示。 none 缺省值。象行內(nèi)元素類型一樣顯示。 inline-block 象行內(nèi)元素一樣顯示，但其內(nèi)容象塊類型元素一樣顯示。 list-item 象塊類型元素一樣顯示，并添加樣式列表標(biāo)記。 2. *absolute 定位以外的第一個父元素進(jìn)行定位。生成絕對定位的元素，相對于 static IE *fixed （老不支持） 生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。 *relative 生成相對定位的元素，相對于其正常位置進(jìn)行定位。 * static 默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中 *（忽略 top, bottom, left, right z-index 聲明）。 * in

10、herit 規(guī)定從父元素繼承 position 屬性的值。 17 介紹js的基本數(shù)據(jù)類型。 number,string,boolean,object,undefined 18 Javascript如何實(shí)現(xiàn)繼承？ 通過原型和構(gòu)造器 19 什么是閉包（closure），為什么要用它？ 一、變量的作用要理解閉包，首先必須理Javascrip特殊的變量作用域變量的作用域無非就是兩種：全局變量和局部變量Javascrip語言的特殊之處，就在于函數(shù)內(nèi)部可以直接讀取全局變量二、如何從外部讀取局部變量出于種種原因我們有時候需要得到函數(shù)內(nèi)的局部變量但是，前面已經(jīng)說過了正常情下，這是辦不到的，只有通過變通方法才能

11、實(shí)現(xiàn)那就是在函數(shù)的內(nèi)部，再定義一個函數(shù)三、閉包的概上一節(jié)代碼中f函數(shù)，就是閉包各種專業(yè)文獻(xiàn)上閉closur）定義非常抽象，很難看懂。我的理解是，閉包就是能讀取其他函數(shù)內(nèi)部變量的函數(shù)由于Javascrip語言中，只有函數(shù)內(nèi)部的子函數(shù)才能讀取局部變量，因此可以把閉包簡定義在一個函數(shù)內(nèi)部的函理解成 所以，在本質(zhì)上，閉包就是將函數(shù)內(nèi)部和函數(shù)外部連接起來的一座橋梁。-b 四、閉包的用途 閉包可以用在許多地方。它的最大用處有兩個，一個是前面提到的可以讀取函數(shù)內(nèi)部的變量，另一個就是讓這些變量的值始終保持在內(nèi)存中。 閉包的用途 閉包可以用在許多地方。它的最大用處有兩個，一個是前面提到的可以讀取函數(shù)內(nèi)部的變量，

12、另一個就是讓這些變量的值始終保持在內(nèi)存中。 20 針對 jQuery 的優(yōu)化方法？ 1，總是從ID選擇器開始繼承 2，在class前使用tag(標(biāo)簽名) 在jQuery中第二快的選擇器是tag(標(biāo)簽)選擇器( 比如：$(“head”) )。 跟ID選擇器累時，因?yàn)樗鼇碜栽膅etElementsByTagName() 方法。 繼續(xù)看剛才那段HTML代碼： 比如需要選擇 紅綠 單選框， 那么可以使用一個tag name來限制(修飾)class ，如下所示： var active_light = $(“input.on”); 當(dāng)然也可以結(jié)合 就近的ID，如下所示： var active_ligh

13、t = $(“#traffic_light input.on”); 在使用tag來修飾class的時候，我們需要注意以下幾點(diǎn)： （1） 不要使用tag來修飾ID，如下所示： var content = $(“div#content”); 這樣一來，選擇器會先遍歷所有的div元素，然后匹配#content。 （好像jQuery從1.3.1開始改變了選擇器核心后，不存在這個問題了。暫時無法考證。） （2）不要畫蛇添足的使用ID來修飾ID，如下所示： var traffic_light = $(“#content #traffic_light”); 3，將jQuery對象緩存起來 把jQuery對象

14、緩存起來 就是要告訴我們 要養(yǎng)成將jQuery對象緩存進(jìn)變量的習(xí)慣。 下面是一個jQuery新手寫的一段代碼： $(#traffic_light input.on).bind(click, function() ); $(#traffic_light input.on).css(order, px dashed yellow); $(#traffic_light input.on).css(ackground-color, orange); $(#traffic_light input.on).fadeIn(slow); 但切記不要這么做。 我們應(yīng)該先將對象緩存進(jìn)一個變量然后再操作，如下所示：

15、 var $active_light = $(#traffic_light input.on); $active_light.bind(click, function() ); $active_light.css(order, px dashed yellow); $active_light.css(ackground-color, orange); $active_light.fadeIn(slow); 記住，永遠(yuǎn)不要讓相同的選擇器在你的代碼里出現(xiàn)多次. 4，對直接的DOM操作進(jìn)行限制 這里的基本思想是在內(nèi)存中建立你確實(shí)想要的東西，然后更新DOM 。 這并不是一個jQuery最佳實(shí)踐，但必須

16、進(jìn)行有效的JavaScript操作 。直接的DOM操作速度很慢。 例如，你想動態(tài)的創(chuàng)建一組列表元素，千萬不要這樣做,如下所示： var top_100_list = , / 假設(shè)這里是100個獨(dú)一無二的字符串 $mylist = $(#mylist); / jQuery 選擇到 元素 for (var i=0, l=top_100_list.length; i + top_100_listi + ); 我們應(yīng)該將整套元素字符串在插入進(jìn)dom中之前先全部創(chuàng)建好，如下所示： var top_100_list = ,$mylist = $(#mylist), top_100_li = ; / 這個變

17、量將用來存儲我們的列表元素 for (var i=0, l=top_100_list.length; i; $mylist.html(top_100_li); 5，冒泡 除非在特殊情況下, 否則每一個js事件(例如:click, mouseover等.)都會冒泡到父級節(jié)點(diǎn)。 當(dāng)我們需要給多個元素調(diào)用同個函數(shù)時這點(diǎn)會很有用。 代替這種效率很差的多元素事件監(jiān)聽的方法就是, 你只需向它們的父節(jié)點(diǎn)綁定一次。 比如, 我們要為一個擁有很多輸入框的表單綁定這樣的行為: 當(dāng)輸入框被選中時為它添加一個class 傳統(tǒng)的做法是，直接選中input，然后綁定focus等，如下所示： $(#entryform in

18、put).bind(ocus, function() $(this).addClass(selected); ).bind(lur, function() $(this).removeClass(selected); ); 當(dāng)然上面代碼能幫我們完成相應(yīng)的任務(wù)，但如果你要尋求更高效的方法，請使用如下代碼： $(#entryform).bind(ocus, function(e) var $cell = $(e.target); / e.target 捕捉到觸發(fā)的目標(biāo)元素 $cell.addClass(selected); ).bind(lur, function(e) var $cell = $(e.target); $cell.removeClass(selected); ); 通過在父級監(jiān)聽獲取焦點(diǎn)和失去焦點(diǎn)的事件，對目標(biāo)元素進(jìn)行操作。 在上面代碼中，父級元素扮演了一個調(diào)度員的角色, 它可以基于目標(biāo)元素綁定事件。 如果你發(fā)現(xiàn)你給很多元素綁定了同一個事件監(jiān)聽, 那么現(xiàn)在的你肯定知道哪里做錯了。 6，推遲到 $(window).load 下。$(document).ready可以把任何東西掛到, 對于開發(fā)者來說有一個很誘人的東西jQuery 盡管$(document).rady 確實(shí)很有用，