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

1、1. 要動態(tài)改變層中內容可以使用的方法有( AB )a) i nn erHTMLb) i nn erTextc) 通過設置層的隱藏和顯示來實現(xiàn)d) 通過設置層的樣式屬性的display屬性2. 在javascript里，下列選項中不屬于數(shù)組方法的是( B)；a) sort()b) le ngth()c) con cat()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<Arra

2、y(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對象的方法？( D )a) focus()b) getEleme ntByld()c) getEleme nt

3、sByName()d) bgColor()6. 、display屬性值的常用取值不包括(C )a) i nlineb) blockc) hidde nd) none7. 以下有關pixelTop 屬性與top屬性的說法正確的是。(D )a) 都是Location對象的屬性b) 使用時返回值都是字符串c) 都是返回以像素為單位的數(shù)值d) 以上都不對8. 使用open方法打開具有瀏覽器工具條，地址欄，菜單欄的窗口，下列選項正確的是 Da) 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 中表達式 parseInt(“ X8X8”)+paseFloat(的結果是什么?(

5、C)a) 8+8b) 88c) 16d) “ 8” +，810. 關于setTimeout( “check”，1中說法正確的是(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標簽，而 import是CSS提供的；(2) 頁面被加載的時，link會同時被加載，而 import引用的CSS會等到頁面被加載完再加載(3) import只在IE5以上才能識別，而link是XHTML標簽，無兼容問題；(4) link方式的樣式的權重高于im

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

7、rch新的技術 webworker, websockt. Geolocation*移除的元素純表現(xiàn)的元素：basefont ， big ， center ， font, s，strike ， tt ， u ；對可用性產生負面影響的元素：frame，framesetnoframes ；支持HTML5新標簽:* IE8/IE7/IE6支持通過 document.createElement方法產生的標簽,可以利用這一特性讓這些瀏覽器支持HTML5新標簽,瀏覽器支持新標簽后，還需要添加標簽默認的樣式:*當然最好的方式是直接使用成熟的框架、使用最多的是html5shim 框架<!-if lt IE

8、 9><script> src="/trunk/html5.js"v/script><!endif->如何區(qū)分：DOCTYPE聲明新增的結構元素功能元素13 HTML5的離線儲存?localStorage長期存儲數(shù)據(jù)，瀏覽器關閉后數(shù)據(jù)不丟失;sessionstorage數(shù)據(jù)在瀏覽器關閉后自動刪除。14 :介紹一下 CSS的盒子模型?(1 )有兩種，IE 盒子模型、標準 W3C盒子模型；IE的content 部分包含了 border 和pading;(2)盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框

9、(border).CSS3新增偽類有15 CSS選擇器有哪些？哪些屬性可以繼承？優(yōu)先級算法如何計算?那些?* 1.id 選擇器(# myid )2. 類選擇器(.myclassname )3. 標簽選擇器(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

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

11、類型元素一樣顯示，并添加樣式列表標記。2.*absolute生成絕對定位的元素，相對于static定位以外的第一個父元素進行定位。*fixed （老IE不支持）生成絕對定位的元素，相對于瀏覽器窗口進行定位。*relative生成相對定位的元素，相對于其正常位置進行定位。* static默認值。沒有定位，元素出現(xiàn)在正常的流中* （忽略 top, bottom, left, right z-index聲明）。* inherit規(guī)定從父元素繼承 position 屬性的值。17介紹js的基本數(shù)據(jù)類型。number,string,boolean,object,undefined18 Javascrip

12、t如何實現(xiàn)繼承?通過原型和構造器19什么是閉包（closure ），為什么要用它?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 activ

13、e_light= $(“ #traffic_light input.on” );在使用tag來修飾class的時候，我們需要注意以下幾點：(1) 不要使用tag來修飾ID，如下所示：var content = $(“ div#content ” );這樣一來，選擇器會先遍歷所有的div元素，然后匹配#content 。(好像jQuery從，不存在這個問題了。暫時無法考證。)(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("border", "1px dashed yellow");$("#traffic_light input.on").css("background-color", "orange&quo

15、t;);$("#traffic_light input.on").fadeln("slow");但切記不要這么做。我們應該先將對象緩存進一個變量然后再操作，如下所示：var $active_light = $("#traffic_light input.on");$active_light.bind("click", function() );$active_light.css("border", "1px dashed yellow");$active_light.css(

16、"background-color", "orange");$active_light.fadeln("slow");記住，永遠不要讓相同的選擇器在你的代碼里岀現(xiàn)多次4，對直接的DOM操作進行限制這里的基本思想是在內存中建立你確實想要的東西，然后更新DOM。這并不是一個jQuery最佳實踐，但必須進行有效的JavaScript 操作。直接的DOM操作速度很慢。例如，你想動態(tài)的創(chuàng)建一組列表元素，千萬不要這樣做，如下所示:var top_100_list = , /假設這里是100個獨一無二的字符串$mylist = $("#m

17、ylist");/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 = "" /這個變量將用來存儲我們的列表元素for (var i=0, l=top_100_list.length; i"$mylist.html(top_100_l

18、i);5，冒泡除非在特殊情況下，否則每一個js事件(例如:click, mouseover 等.)都會冒泡到父級節(jié)點。當我們需要給多個元素調用同個函數(shù)時這點會很有用。代替這種效率很差的多元素事件監(jiān)聽的方法就是，你只需向它們的父節(jié)點綁定一次。比如，我們要為一個擁有很多輸入框的表單綁定這樣的行為：當輸入框被選中時為它添加一個class傳統(tǒng)的做法是，直接選中input ，然后綁定focus等，如下所示：$("#entryform input").bind("focus", function()$(this).addClass("selected&qu

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