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

1、1. 要動態(tài)改變層中內容可以使用的方法有（AB ） a)innerHTML b)innerText c)通過設置層的隱藏和顯示來實現 d)通過設置層的樣式屬性的display屬性 2. 在javascript里，下列選項中不屬于數組方法的是（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; 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 下列聲明數組的語句中，錯誤的選項是（ 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. 、 di

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

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

5、再加載; （3）import只在IE5以上才能識別，而link是XHTML標簽，無兼容問題; （4）link方式的樣式的權重 高于import的權重. 12 html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？ * HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。 * 繪畫 canvas 用于媒介回放的 video 和 audio 元素 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失； sessionStorage 的數據在瀏覽器關閉后自動刪除 secti

6、on 、nav、footer、 語意化更好的內容元素，比如header article、urlsearch time、email、 表單控件，calendar、date、 新的技術webworker, websockt, Geolocation * 移除的元素 純表現的元素：basefont，big，center，font, s，strike，tt，u； 對可用性產生負面影響的元素：frame，frameset，noframes； 支持HTML5新標簽： * IE8/IE7/IE6支持通過document.createElement方法產生的標簽， 可以利用這一特性讓這些瀏覽器支持HTML5新

7、標簽， 瀏覽器支持新標簽后，還需要添加標簽默認的樣式： * 當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架 src=/svn/trunk/html5.js 如何區(qū)分： DOCTYPE聲明新增的結構元素功能元素 13 HTML5的離線儲存？ localStorage 長期存儲數據，瀏覽器關閉后數據不丟失； sessionStorage 數據在瀏覽器關閉后自動刪除。 14：介紹一下CSS的盒子模型？ （1）有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 padin

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

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

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

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

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

13、t = $(“#traffic_light input.on”); 在使用tag來修飾class的時候，我們需要注意以下幾點： （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對象緩存進變量的習慣。 下面是一個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); 但切記不要這么做。 我們應該先將對象緩存進一個變量然后再操作，如下所示：

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); 記住，永遠不要讓相同的選擇器在你的代碼里出現多次. 4，對直接的DOM操作進行限制 這里的基本思想是在內存中建立你確實想要的東西，然后更新DOM 。 這并不是一個jQuery最佳實踐，但必須

16、進行有效的JavaScript操作 。直接的DOM操作速度很慢。 例如，你想動態(tài)的創(chuàng)建一組列表元素，千萬不要這樣做,如下所示： var top_100_list = , / 假設這里是100個獨一無二的字符串 $mylist = $(#mylist); / jQuery 選擇到 元素 for (var i=0, l=top_100_list.length; i + top_100_listi + ); 我們應該將整套元素字符串在插入進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é)點。 當我們需要給多個元素調用同個函數時這點會很有用。 代替這種效率很差的多元素事件監(jiān)聽的方法就是, 你只需向它們的父節(jié)點綁定一次。 比如, 我們要為一個擁有很多輸入框的表單綁定這樣的行為: 當輸入框被選中時為它添加一個class 傳統(tǒng)的做法是，直接選中input，然后綁定focus等，如下所示： $(#entryform in

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