WEB前端面筆試題總結(jié)_第1頁
WEB前端面筆試題總結(jié)_第2頁
WEB前端面筆試題總結(jié)_第3頁
WEB前端面筆試題總結(jié)_第4頁
WEB前端面筆試題總結(jié)_第5頁
已閱讀5頁，還剩8頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1.

如何顯示/隱藏一個(gè)DOM元素？更改元素的cssstyle，設(shè)為display:none。此外還可以將visibility設(shè)為hidden，透明度設(shè)為0，或長(zhǎng)、寬設(shè)為0。2.

一個(gè)定寬網(wǎng)頁在瀏覽器（IE6，IE7，F(xiàn)irefox，IE5）中橫向居中對(duì)齊的布局，請(qǐng)寫出主要的HTML標(biāo)簽及CSS。<!DOCTYPEhtmlPUBLIC”-//W3C//DTDXHTML1.0Strict//EN””/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<htmlxmlns=”/1999/xhtml”xml:lang=”zh-CN”lang=”zh-CN”>

<head>

<metahttp-equiv=”Content-Type”content=”text/html;charset=utf-8″/>

<title>居中</title>

<styletype=”text/css”>

body{width:600px}

html,body{margin:auto;padding:0}

div.wrap{text-align:center;margin:0;padding:0}

</style>

</head>

<body>

<divclass=”wrap”>居中</div>

</body>

</html>

3.

CSS中margin和padding的區(qū)別margin是外邊距，屬于元素之外，相鄰元素的margin可以融合。padding是內(nèi)邊距，在元素之內(nèi)，相鄰元素的padding不可融合。4.

JavaScript中如何檢測(cè)一個(gè)變量是一個(gè)String類型？請(qǐng)寫出函數(shù)實(shí)現(xiàn)function(obj){returntypeof(obj)==

”string”;}5.

網(wǎng)頁中實(shí)現(xiàn)一個(gè)計(jì)算當(dāng)年還剩多少時(shí)間的倒數(shù)計(jì)時(shí)程序，要求網(wǎng)頁上實(shí)時(shí)動(dòng)態(tài)顯示“××年還?！痢撂臁痢?xí)r××分××秒”這個(gè)看我論壇右上角的就知道了…6.

如何控制網(wǎng)頁在網(wǎng)絡(luò)傳輸過程中的數(shù)據(jù)量題目貌似有問題，應(yīng)該是減少數(shù)據(jù)量吧。最顯著的方法是啟用GZIP壓縮。此外保持好的編碼習(xí)慣，避免重復(fù)和css、JavaScript代碼，多余的HTML標(biāo)簽和屬性。7.

補(bǔ)充代碼，是鼠標(biāo)單擊后Button1到Button2的后面<div><inputtype=”button”id=”button1″value=”1″onclick=”???”/><inputtype=”button”id=”button2″value=”2″/></div>varparent=this.parentNode;parent.removeChild(this);parent.appendChild(this);8.

Linux中，將a、b打包為back.tar，命令是（

）不知道＝。＝9.

Flash、Ajax各自的優(yōu)缺點(diǎn)，在使用中如何取舍？Flash的缺點(diǎn)是需要客戶端安裝Flash插件，比較大，且更改了默認(rèn)的HTML頁面行為；但可以方便地實(shí)現(xiàn)很多特效及動(dòng)畫，且具有較高權(quán)限。Ajax的缺點(diǎn)是編程較為復(fù)雜，需要服務(wù)器端的支持，能實(shí)現(xiàn)的效果只能是DOMAPI提供的，權(quán)限很低，較難跨域；但可以顯著加快頁面的載入速度和用戶體驗(yàn)。此外，二者都不能被搜索引擎索引（Google已支持Flash文本的索引），不利于SEO。建議:重要和關(guān)鍵部分直接用HTML，交互部分可以使用Ajax，復(fù)雜的動(dòng)畫可采用Flash。

百度2010

1、JS主要數(shù)據(jù)類型？5分答：主要的類型有number、string、object以及Boolean類型,其他兩種類型為null和undefined。2、img的alt和title的異同？10分答：title屬性為設(shè)置該屬性的元素提供建議性的信息。比如為鏈接添加描述性文字。為不能顯示圖像、窗體或applets的用戶代理（UA），alt屬性用來指定替換文字。使用alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明。3、CSS的JS調(diào)用？如font-family,-moz-border-radius10分答：fontFamily、MozBorderRadius

4、CSS布局：兩列，左邊寬度自適應(yīng)，右邊寬度固定200px15分

#box1{width:100%;height:600px;position:relative;}#left1{margin-right:200px;border:1pxsolidred;height:100%;}#right1{width:200px;height:100%;position:absolute;top:0px;right:0px;border:1pxsolidblue;}<div

id="box1">

<div

id="left1"></div>

<div

id="right1"></div></div>

5、js對(duì)象的深度克??？20分

Ototype.deepClone=function(){

function

cloneObj(){}

cloneOtotype=this;

var

obj=new

cloneObj();

for(var

o

in

obj){

if(typeof(obj[o])=="object")obj[o]=obj[o].deepClone();

}

return

obj;}

6、動(dòng)態(tài)打印時(shí)間，格式為yyyy-MM-ddhh:mm:ss?15分

function

printTime(){

var

timer1=new

Date();

var

timer=timer1.toLocaleString();

timer=timer.replace(/[年月]/g,"-");

timer=timer.replace(/日/,"");

time.innerHTML=timer;}setInterval("printTime()",1000);

7、如何提高網(wǎng)頁運(yùn)行性能？20分沒寫。8、linux下刪除當(dāng)前目錄下擴(kuò)展名為c的文件（如a.c，b.c）5分rm–r*.cfind.-name“*.doc”-typef-execcp{}/tmp/doc\;找到當(dāng)前目錄（.）下擴(kuò)展名為(doc)的文件并拷貝到指定目錄【注意-typef指普通文件，-execls-l{}列出文件，最后加上\】cp[options]sourcedest復(fù)制9、flashas2.0和flashas3.0在面向?qū)ο蠓矫娴漠愅?0分答：面向?qū)ο蠓矫妫?.0像javascript，3.0像java。到了AS2.0,面向?qū)ο蟊灰肓?，但它?shí)質(zhì)上是動(dòng)態(tài)腳本語言，雖然已經(jīng)有了類的概念和class關(guān)鍵字，但對(duì)象支持還是基于類似JavaScript的prototype機(jī)制——?jiǎng)討B(tài)繼承。3.0同時(shí)支持靜態(tài)類型，即基于類的繼承方式；以及動(dòng)態(tài)類型，即基于prototype的繼承方式。推薦用靜態(tài)類型。10、Flash、Ajax各自的優(yōu)缺點(diǎn)，在使用中如何取舍？10分1、Flashajax對(duì)比Flash適合處理多媒體、矢量圖形、訪問機(jī)器；對(duì)CSS、處理文本上不足，不容易被搜索。Ajax對(duì)CSS、文本支持很好，支持搜索；多媒體、矢量圖形、機(jī)器訪問不足。共同點(diǎn)：與服務(wù)器的無刷新傳遞消息、用戶離線和在線狀態(tài)、操作DOM2、項(xiàng)目中遇到什么問題？如何解決？

前端題目總結(jié)

HTML相關(guān)<!DOCTYPE>標(biāo)簽的定義與用法。塊級(jí)元素和行內(nèi)元素都有哪些？你真的了解HTML嗎？雅虎面試題把前面黃底那段拿去搜索下就知道了(曾在某浪公司面試的時(shí)候被問到過，確實(shí)是很好的問題)。

CSS相關(guān)介紹所知道的CSShack技巧(如：_，

*，+，

\9，!important之類)。介紹CSS盒模型。CSS層疊是什么？介紹一下。都知道哪些CSS瀏覽器兼容性問題。有時(shí)會(huì)被問到些刁鉆點(diǎn)的題，比如position值都有哪些，CSS3都有哪些新內(nèi)容...

JavaScript基礎(chǔ)相關(guān)HTTP協(xié)議的狀態(tài)消息都有哪些？(如200、302對(duì)應(yīng)的描述)AJAX是什么?AJAX的交互模型(流程)?AJAX跨域的解決辦法?同步和異步的區(qū)別?

簡(jiǎn)述JavaScript封裝。JavaScript繼承有哪兩種形式形式，進(jìn)行描述。什么是閉包？以下代碼點(diǎn)擊<p>會(huì)輸出什么？為什么？能大概說明白的話繼續(xù)問能想出幾種解決辦法。

答案:5

解釋:

由于閉包i被保留在內(nèi)存中,alert顯示的是i當(dāng)前的值,最后一次i++會(huì)導(dǎo)致i為5

<!DOCTYPEHTML>

<html>

<head>

<meta

charset="utf-8"

/>

<title>閉包演示</title>

<style

type="text/css">

p

{background:gold;}

</style>

<script

type="text/javascript">

function

init(){

var

pAry=document.getElementsByTagName("p");

for(

var

i=0;i<pAry.length;i++){

pAry[i].onclick=

function(){

alert(i);

}

}

}

</script>

</head>

<body

onload="init();">

<p>產(chǎn)品0</p>

<p>產(chǎn)品1</p>

<p>產(chǎn)品2</p>

<p>產(chǎn)品3</p>

<p>產(chǎn)品4</p>

</body>

</html>

在JS中this關(guān)鍵字的使用場(chǎng)合和用法(如在構(gòu)造函數(shù)中、setTimeout中等)。簡(jiǎn)述下cookie的操作，還有cookie的屬性都知道哪些。IE與FF的JS兼容性都知道哪些。DOM操作

-

怎樣添加、移除、移動(dòng)、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)(這個(gè)問題真心是基礎(chǔ)題，一般不會(huì)問)。

jQuery相關(guān)jQuery源碼是否嘗試去讀過？說說基本的架構(gòu)或者

jQuery.fn.init

中都做了哪些判斷。都知道哪些不好的jQuery書寫方式。Sizzle是否有讀過？

其它相關(guān)的加分項(xiàng)：都使用和了解過哪些編輯器？都使用和了解過哪些日常工具？都知道有哪些瀏覽器內(nèi)核？開發(fā)過的項(xiàng)目都兼容哪些瀏覽器？國內(nèi)外的JS牛人都知道哪些？瀑布流布局或者流式布局是否有了解正則表達(dá)式有系統(tǒng)學(xué)習(xí)過嗎(看書或網(wǎng)上教程)？有的話就問問簡(jiǎn)單點(diǎn)的郵箱驗(yàn)證、URL驗(yàn)證，

或者問問

貪婪匹配與懶惰匹配

的理論知識(shí)。Node.js是否有過嘗試？到什么程度？說說個(gè)人理解的看法？HTML5都有哪些新的JSAPI？前端優(yōu)化知識(shí)都知道哪些？基礎(chǔ)算法題（如快速排序，能否一兩句說說重要的核心原理或者數(shù)組消重等）。是否有接觸過或者了解過重構(gòu)。其他一些總結(jié)

百度web前端筆試試卷上的題目：1.判斷字符串是否是這樣組成的，第一個(gè)必須是字母，后面可以是字母、數(shù)字、下劃線，總長(zhǎng)度為5-202.截取字符串a(chǎn)bcdefg的efg3.讓一個(gè)input的背景顏色變成紅色4。給一個(gè)頁面，寫htmlcss5。div的高寬等于瀏覽器可見區(qū)域的高寬，瀏覽器滾動(dòng)，div始終覆蓋瀏覽器的整個(gè)可見區(qū)域6。判斷一個(gè)字符串中出現(xiàn)次數(shù)最多的字符，統(tǒng)計(jì)這個(gè)次數(shù)7。IE與FF腳本兼容性問題又重新問的是1，4，6，7，這次問出題者的意圖，并且讓給出7的更多答案，以及IEFF不兼容的原因然后看了看簡(jiǎn)歷，沒有問簡(jiǎn)歷上的項(xiàng)目，而是讓自己隨便談?wù)?對(duì)于web客戶端技術(shù)未來趨勢(shì)發(fā)展談?wù)効捶╦avascript+ajax=RIAAdobeFlashAS3FlexSliveright2web開發(fā)團(tuán)隊(duì)人員應(yīng)該如何分工協(xié)作布局

CSS

腳本比如腳本人員長(zhǎng)期的積累可能鑄造類型YUI這樣的產(chǎn)品級(jí)腳本庫（亮點(diǎn)）3web開發(fā)曾經(jīng)的團(tuán)隊(duì)有沒有別人遇到問題，什么問題，向你請(qǐng)教4如果要實(shí)習(xí)，什么時(shí)候可以5自己在開發(fā)的過程中遇到什么問題，談?wù)効捶?web開發(fā)腳本開發(fā)環(huán)境用什么、調(diào)試用什么試過aptana，現(xiàn)在就用editplus調(diào)試肯定用firebug，ie下看頁面DOM用IEInspector7如果有個(gè)新技術(shù)，現(xiàn)在需要掌握，你會(huì)怎么做新技術(shù)的發(fā)現(xiàn)我一般是通過RSS工具，比如我用GoogleReader每天有半個(gè)小時(shí)左右在看最新的資訊、技術(shù)走向發(fā)現(xiàn)新技術(shù)，首先有個(gè)大概了解，如果有深入的必要我一般會(huì)看他的官網(wǎng)，比如jquery，我會(huì)搜索到，然后看Docs、samples如果要用到項(xiàng)目中，有困難的問題，我會(huì)svn得到最新的這個(gè)技術(shù)的源碼，深入跟蹤進(jìn)去，看實(shí)現(xiàn)原理一般現(xiàn)在涌現(xiàn)的技術(shù)都是opensource提問時(shí)間1百度web開發(fā)腳本是否有做類似YUI庫的打算2百度web開發(fā)工程師打算招多少人

百度電話二面回憶

web開發(fā)部–web開發(fā)工程師首先是自我介紹然后談?wù)勛龅膚eb項(xiàng)目然后開始問技術(shù)問題前端開發(fā)的優(yōu)化問題答:產(chǎn)品發(fā)布時(shí)，js的壓縮，即函數(shù)名替換、整個(gè)文件壓縮成一行css開發(fā)的時(shí)候

注釋寫清楚，先有個(gè)base.css，然后根據(jù)不同頁面需要再加css，發(fā)布的時(shí)候?qū)ss中的一個(gè)定義寫成一行，目的是壓縮文件大小最終發(fā)布的時(shí)候甚至可以將css，js分別壓縮成一個(gè)文件，甚至css、js通過技巧壓縮到一個(gè)里邊（亮點(diǎn)）這樣的目的是，減少用戶訪問web產(chǎn)品的http連接數(shù)web前端產(chǎn)品的開發(fā)流程答:首先根據(jù)產(chǎn)品的定位、用戶群，確定配色，然后紙上設(shè)計(jì)整體布局，然后png或者psd出效果圖，切出需要的小圖片，然后手寫代碼div+css構(gòu)造出頁面，然后根據(jù)功能寫腳本參考126郵箱首頁，將所有小圖片放到一個(gè)圖片中，通過css的background-position實(shí)現(xiàn)頁面，還是為了優(yōu)化，減少http連接數(shù)規(guī)避javascript多人開發(fā)函數(shù)重名問題答:首先是通過命名規(guī)范，比如根據(jù)不同的開發(fā)人員實(shí)現(xiàn)的功能，在函數(shù)名加前綴，雖然函數(shù)名看起來復(fù)雜，發(fā)布的時(shí)候還是可以替換，從而優(yōu)化。還有一種辦法是，每個(gè)開發(fā)人員都把自己的函數(shù)封裝到類中，然后調(diào)用的時(shí)候即使函數(shù)名相同，但是因?yàn)槭且?函數(shù)名來調(diào)用，所以也減少了重復(fù)的可能性。javascript面向?qū)ο笾欣^承實(shí)現(xiàn)答：我是用prototype.jsextend.js擴(kuò)展然后子類中parent.initialize()…答的不好正確答案：

//1.

構(gòu)造器functionAnimal(){};functionMammal(){};functionCanine(){};functionDog(){};//2.

原型鏈表Mtotype=newAnimal();Ctotype=newMammal();Dtotype=newCanine();prototype.js實(shí)現(xiàn)的基本原理答：將功能封裝比如Ajax.Request，還是有判斷瀏覽器的代碼；Position這樣的實(shí)現(xiàn)頁面元素位置的計(jì)算prototye太大，如果一個(gè)頁面功能不需要這樣的，自己實(shí)現(xiàn)，怎么做答：首先頁面、css、腳本分離之后，腳本中將整個(gè)模塊功能寫成一個(gè)類varDo={}其中初始化函數(shù)init:function(){}，然后最后做Do.init()其中init會(huì)對(duì)頁面上form中需要交互的元素綁定事件，比如$(’input1′).onclick=function(){}IE、FF下面腳本的區(qū)別答：1.IE有outerHTML，F(xiàn)F沒有2.頁面元素id，IE可以直接取，F(xiàn)F必須document.getElementById()3.Ajax里邊FF是newXMLHttpRequest，而IE是trynewActiveXObject(’Msxml2.XMLHTTP’)trynewActiveXObject(’Microsoft.XMLHTTP’)FF下面實(shí)現(xiàn)outerHTML答：.parenet.firstChild.parent.innerHTML這個(gè)沒答好正確答案：原理是，get：取到這個(gè)標(biāo)簽的tagname，然后屬性循環(huán)構(gòu)造成這個(gè)標(biāo)簽的屬性set：把字符串用insertBefore插入到這個(gè)元素前面，然后removeChild這個(gè)元素

<head><SCRIPTLANGUAGE=”JavaScript”><!–if(typeof(HTMLElement)!=”undefined”&&!window.opera){HTMLEtotype.__defineGetter__(”outerHTML”,function(){vara=this.attributes,str=”<”+this.tagName,i=0;for(;i<a.length;i++)if(a[i].specified)str+=”

“+a[i].name+’=”‘+a[i].value+’”‘;if(!this.canHaveChildren)returnstr+”

/>”;returnstr+”>”+this.innerHTML+”</”+this.tagName+”>”;});HTMLEtotype.__defineSetter__(”outerHTML”,function(s){vard=document.createElement(”DIV”);d.innerHTML=s;for(vari=0;i<d.childNodes.length;i++)this.parentNode.insertBefore(d.childNodes[i],this);this.parentNode.removeChild(this);});HTMLEtotype.__defineGetter__(”canHaveChildren”,function(){return!/^(area|base|basefont|col|frame|hr|img|br|input|isindex|link|meta|param)$/.test(this.tagName.toLowerCase());});}//–></SCRIPT>IE、FF下面CSS的解釋區(qū)別答：1.png透明背景，F(xiàn)F下面沒有問題，IE需要用濾鏡通道2.z-index在IE、FF下面的解釋問題，IE會(huì)認(rèn)為第一個(gè)z-index=03.長(zhǎng)字符串，word-wrap:break-all可以解決IE，但是FF需要overflow:hidden才行馮舒婭補(bǔ)充：1、有些標(biāo)簽在ff中不能用，比如button2、濾鏡3、鼠標(biāo)cursor:handcursor:pointer4、div的高度自適應(yīng)5、對(duì)box模型解析不一樣6、ul、ol的padding和marginIE都能識(shí)別*，標(biāo)準(zhǔn)瀏覽器（如FF）不能識(shí)別*；IE6能識(shí)別*，但不能識(shí)別

!important；IE7能識(shí)別*，也能識(shí)別

!important；FF不能識(shí)別*，但能識(shí)別

!important；例如style=”*width:10px;!importantwidth:20px;”這樣在IE6下寬度為10px,在IE7下寬度時(shí)20pxweb前端技術(shù)的展望答：javascriptajax；flashAS；Flex；Sliveright附上網(wǎng)上的百度web開發(fā)工程師筆試問題集1編寫一個(gè)方法

求一個(gè)字符串的字節(jié)長(zhǎng)度

<scriptlanguage=”javascript”type=”text/javascript”>newfunction(s){if(!arguments.length||!s)returnnull;if(”"==s)return0;varl=0;for(vari=0;i<s.length;i++){if(s.charCodeAt(i)>255)l+=2;elsel++;}alert(l);}(”hello你好，我好,大家好！world!”);</script>2編寫一個(gè)方法

去掉一個(gè)數(shù)組的重復(fù)元素

<scriptlanguage=”javascript”type=”text/javascript”>Atotype.strip=function(){if(this.length<2)return[this[0]]||[];vararr=[];for(vari=0;i<this.length;i++){arr.push(this.splice(i–,1));for(varj=0;j<this.length;j++){if(this[j]==arr[arr.length-1]){this.splice(j–,1);}}}returnarr;}vararr=["abc",85,"abc",85,8,8,1,2,5,4,7,8];alert(arr.strip());</script>3說出3條以上ff和ie的腳本兼容問題IE

有children，F(xiàn)F沒有；IE有parentElement，F(xiàn)F沒有；IE有innerText,outerText,outerHTML，F(xiàn)F

沒有；FF有HTMLElement,HTMLDivElement,XMLDocument,DocumentFragment,Node,Event,Element等等，IE沒有；IE有數(shù)據(jù)島，F(xiàn)F沒有；IE跟FF創(chuàng)建HttpRequest實(shí)例的方法不一樣。。等等。。4用腳本寫去除字符串的前后空格

Stotype.trim=function(mode){//前后去空格if(mode==’left’){return((this.charA

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論