Web前端開發(fā)筆試題集錦

可婚6前端開發(fā)筆試題集錦HTML/CSS篇1,判斷字符奉是否是這樣組成的，第一個必須是字母，后面可以是字母?數(shù)字、下劃線，總長#為5-20varreg=/人[a-zA-Z][a-zA-Z_0-9]{4,19}$/;reg.test("a1a__a1a__a1a__a1a__");2，截取字符串a(chǎn)bcdefg的efgvarstr="abcdefg";if(/efg/.test(str)){varefg=str.substr(str.indexOf("efg"),3);alert(efg);}3，判斷一個字符串中出現(xiàn)次數(shù)最多的字符，統(tǒng)計這個次數(shù)//將字符串的字符保存在一個hashtable中，key是字符，value是這個字符出現(xiàn)的次數(shù)varstr="abcdefgaddda";varobj={};for(vari=0,l=str.length;i<l;i++){varkey=str[i];if(!obj[key]){obj[key]=1;}else{obj[key]++;}}/*遍歷這個hashtable，獲取value最大的key和value*/varmax=-1;varmax_key="";varkey;for(keyinobj){if(max<obj[key]){max=obj[key];max_key=key;}}alert("max:"+max+"max_key:"+max_key);4,IE與「「腳本兼容性問題window.event:表示當(dāng)前的事件對象，IE有這個對象，F(xiàn)F沒有，F(xiàn)F通過給事件處理函數(shù)傳遞事件對象獲取事件源IE用srcElement獲取事件源，而FF用target獲取事件源添加，去除事件IE:element.attachEvent("onclick",function)element.detachEvent("onclick",function)FF:element.addEventListener("click" ,function,true)element.removeEventListener("click",function,true)獲取標(biāo)簽的自定義屬性IE:divl.value或div1["value"]FF:可用div1.getAttribute("value")document.getElementByName()和document.all[name]IE;document.getElementByName()和document.all[name]均不能獲取div元素FF:可以⑹input.type的屬性IE:input.type只讀FF:input.type可讀寫innerTexttextContentouterHTMLIE:支持innerText,outerHTMLFF:支持textContent是否可用id代替HTML元素IE:可以用id來代替HTML元素FF:不可以這里只列出了常見的還有不少更多的介紹可以參看JavaScript在IE瀏覽器和Firefox瀏覽器中的差異總結(jié)5，規(guī)避javascript多人開發(fā)函數(shù)重名問題可以開發(fā)前規(guī)定命名規(guī)范，根據(jù)不同開發(fā)人員開發(fā)的功能在函數(shù)前加前綴將每個開發(fā)人員的函數(shù)封裝到類中，調(diào)用的時候就調(diào)用類的函數(shù)，即使函數(shù)重名只要類名不重復(fù)就ok,javascript面向?qū)ο笾欣^承實現(xiàn)javascript面向?qū)ο笾械睦^承實現(xiàn)一般都使用到了構(gòu)造函數(shù)和Prototype原型鏈，簡單的代碼如下：functionAnimal(name)(=name;}Atotype.getName=function()(alert()}functionDog()(};Dtotype=newAnimal("Buddy");Dtotype.constructor=Dog;vardog=newDog();,FF下面實現(xiàn)outerHTMLFF不支持outerHTML,要實現(xiàn)outerHTML還需要特殊處理思路如下：在頁面中添加一個新的元素A，克隆一份需要獲取outerHTML的元素，將這個元素append到新的A中，然后獲取A的innerHTML就可以了。SPANDIVSPANP8，編寫一個方法求一個字符串的字節(jié)長度假設(shè)：一個英文字符占用一個字節(jié)，一個中文字符占用兩個字節(jié)functionGetBytes(str)(varlen=str.length;varbytes=len;for(vari=0;iif(str.charCodeAt(i)>255)bytes++;}returnbytes;}alert(GetBytes("你好,as"));9，編寫一個方法紋一個數(shù)組的重復(fù)元素vararr=[1,1,2,3,3,2,1];Atotype.unique=function()(varret=[];varo={};varlen=this.length;for(vari=0;ivarv=this[i];if(!o[v]){o[v]=1;ret.push(v);}}returnret;};alert(arr.unique());10,寫出3個使用this的典型應(yīng)用在html元素事件屬性中使用，如構(gòu)造函數(shù)functionAnimal(name,color){=name;this.color=color;}(3):A二[d]D)9S|9(：(A)euop,xri4X3=[d]D)(ApedXi===.pefqo.網(wǎng)八)業(yè):[d]o二A)((d)03do」dUMoseiro)j!}(ouid)JOj:A'dJBA：{}:[]idod'ojomd角二二二,uoipunj,二djba(!oujn^ej}(opedXi=二j.pefqo.||。山！)(o)pefqo9uopuoipunjeuopa^￡j??B(4^—KlsMK*ld!J3SBAer*81IJod/weiAzoiu」0|cqi揮1」叩」oqIJodMspvYoui-'mioAtpirmpmb宣搟回gipgr貿(mào)腕申tduD$eAer 霉SSDLIuoipunj'Xbjjv'pefqo:導(dǎo)穹peuippup'||fin'6uuis'uee|oog'jeqiunN:由凰iE榮鄂擘仙」”曲更’91哩身咽zuoung匾旋期Tuoung尊身Tuoung早甫繳§'賢拙出1ST“斜*xxHxxSgxxH^^xx?好劍醐啊皿牌耋婀礎(chǔ)Sli腳IH陳瀕斟UK孫典W：(((HS)6u!」isM9u)6uuissi)lJ9|e：((HS)6u!」issD1間e：((I)6uuissi)lJ9|e；...二4SJBA(：(6u!」is二二JopnjisuoDUis||二二郴ujn^ej}(rs)6u!HSSIuoipunj：(〃PI」om0||叫〃)6uuisM9U二乙RSJBAfc)-?P|JOM0||9q?二JISJBA(I):￥旦御荊崢稀bumsffiQSS曜用宣鞍慮茉6呻5 時一岫劇?申仙」"曲叩，ET望里NOQ陽羽爵查晉|9￡buou“二仙ds!p?小*,掙；...二Xe|dsip-9|Xis-|9曜竺Noa?—am俚曾岫‘er1U9LU9|9Aip古善溪sjqi由國中羊急冬uoissejdxeSSD(V)}}}returnc;}；19，如何控制alert中的換行\(zhòng)nalert("p\np");20，請實現(xiàn)，鼠標(biāo)點擊頁面中的任意標(biāo)簽，alert該標(biāo)簽的名稱.(注意兼容街SPANDIVSPANP21,請編寫一個JavaScript函數(shù)parseQueryString，它的用途是把URL參數(shù)解析為一個對象，如：varurl="/index.php?key0=0&key1=1&key2=2‘；functionparseQueryString(url)(varparams={};vararr=url.split("?");if(arr.length<=1)returnparams;arr=arr[1].split("&");for(vari=0,l=arr.length;ivara=arr[i].split("=");params[a[0]]=a[1];}returnparams;}varurl="/index.php?key0=0&key1=1&key2=2";varps=parseQueryString(url);alert(ps["key1"]);22，ajax是什么？ajax的交互模型？同步和異步的區(qū)別？如何解決跨域問題？Ajax是多種技術(shù)組合起來的一種瀏覽器和服務(wù)器交互技術(shù)，基本思想是允許一個互聯(lián)網(wǎng)瀏覽器向一個遠(yuǎn)程頁面/服務(wù)做異步的http調(diào)用并且用收到的數(shù)據(jù)來更新一個當(dāng)前web頁面而不必刷新整個頁面。該技術(shù)能夠改進(jìn)客戶端的體驗。包含的技術(shù)：XHTML:對應(yīng)W3C的XHTML規(guī)范，目前是XHTML1.0。CSS:對應(yīng)W3C的CSS規(guī)范，目前是CSS2.0DOM:這里的DOM主要是指HTMLDOM，XMLDOM包括在下面的XML中JavaScript:對應(yīng)于ECMA的ECMAScript規(guī)范XML:對應(yīng)W3C的XMLDOM、XSLT、XPath等等規(guī)范XMLHttpRequest:對應(yīng)WhatWG的WebApplications1.0規(guī)范(/specs/web-apps/current-work/)AJAX交互模型h knqin.reh kuqin.cc廣/土掃h(yuǎn)ttp!//kuqin/土hVKJt同一燧七下6允許-■httpz/Aviw.liuc|in.ccm:30Cia.ujsrr、nrtrr、r、r、r、r、r、r、vrif、rv、r、ihft kLiqin.rgm/T)is:蒲編察:瀟盈盈淡湯;■hr■?i"r、％l、lw、。。r、rwwr「r二、r、r十r %tyhdvrhrh?■『n.■.'1 W1手'i4-■土、1r*r、r、nrtr、r?、r■、r■、＜■、r、r1r r■l、ri dh*、kd'■I*hi'■■"hiA、r'?■--■■'HHhttpz/Aww.kuc|/ajshtt qin/同T住.不同粘議不充許-?http同步：腳本會停留并等待服務(wù)器發(fā)送回mtf異步：腳本允許頁面繼續(xù)其進(jìn)程并處理復(fù)然后再繼續(xù).可能的回復(fù)-L冏(跨域問題簡單的理解就是因為JS同源策或七國*om-下的對蒙，具體場景如下：富略的限制刊：希m域名下的」變無法操作httpy/w/vw.hM」jshif knqin.mm/b.j三不同域芒不m干--PS:(1)如果是端口或者協(xié)議造成的跨域問題前端是無能為力的(2)在跨域問題上，域僅僅通過URL的首部來識別而不會嘗試判斷相同的IP地址對應(yīng)的域或者兩個域是否對應(yīng)一個IP前端對于跨域的解決辦法：document.domain+iframe動態(tài)創(chuàng)建script標(biāo)簽23,什么是閉包?下面這個ul，如何點擊每一列的時候alert其index?這是第一條這是第二條這是第三條內(nèi)部函數(shù)被定義它的函數(shù)的外部區(qū)域調(diào)用的時候就產(chǎn)生了閉包。(functionA()(varindex=0;varul=document.getElementById("test");varobj={};for(vari=0,l=ul.childNodes.length;i<l;i++){if(ul.childNodes[i].nodeName.toLowerCase()=="li"){varli=ul.childNodes[i];li.onclick=function(){index++;alert(index);}}}})();24，清給出異步IM^js方案，不少于兩種默認(rèn)情況javascript是同步加載的，也就是javascript的加載時阻塞的，后面的元素要等待javascript加載完畢后才能進(jìn)行再加載，對于一些意義不是很大的javascript，如果放在頁頭會導(dǎo)致加載很慢的話，是會嚴(yán)重影響用戶體驗的。異步加載方式：(1)defer，只支持IEasync:創(chuàng)建script，插入到DOM中，加載完畢后callBack，見代碼：functionloadScript(url,callback)(varscript=document.createElement("script")script.type="text/javascript";if(script.readyState)(//IEscript.onreadystatechange=function()(if(script.readyState=="loaded"||script.readyState=="complete")(script.onreadystatechange=null;callback();}};}else{//Others:Firefox,Safari,Chrome,andOperascript.onload=function(){callback();};}script.src=url;document.body.appendChild(script);}25，請設(shè)計一套方案，用于確保頁面中JS加載完冬varn=document.createElement("script");n.type="text/javascript";//以上省略部分代碼//ie支持script的readystatechange屬性(IEsupportthereadystatechangeeventforscriptandcssnodes)if(ua.ie){n.onreadystatechange=function(){varrs=this.readyState;if('loaded'===rs||'complete'===rs){n.onreadystatechange=null;f(id,url);〃回調(diào)函數(shù)}};//省略部分代碼//safari3.xsupportstheloadeventforscriptnodes(DOM2)n.addEventListener('load',function(){f(id,url);});//firefoxandoperasupportonload(butnotdom2inff)handlersfor//scriptnodes.opera,butnoff,supporttheonloadeventforlink//nodes.}else(n.onload=function()(f(id,url);};}26,js中如何定義class,如何擴(kuò)展prototype?Ele.className="***";//***在css中定義，形式如下：.***{...}A.prototype.B=C;A是某個構(gòu)造函數(shù)的名字B是這個構(gòu)造函數(shù)的屬性C是想要定義的屬性的值27，如何添^0html元素的事件,有幾種方法.為HTML元素的事件屬性賦值在JS中使用ele.on***=function。{...}使用DOM2的添加事件的方法addEventListener或attachEvent28，documen.write和innerHTM1的區(qū)別document.write只能重繪整個頁面innerHTML可以重繪頁面的一部分29，多瀏覽器檢測通過什么？navigator.userAgent不同瀏覽器的特性，如addEventListener30，js的基礎(chǔ)對象有那些,window和document的常用的方法和屬性列出來String,Number,BooleanWindow:方法：setInterva