web前端面试题

1请实现，鼠标点击页面中的任意标签，alert该标签的名称．（注意兼容性）答：document.onclick=function(e){e=e||window.event;varo=e.srcElement||e.target;alert(o.tagName);}2请指出一下代码的性能问题，并经行优化。varinfo=腾讯拍拍网（）是腾讯旗下知名电子商务网站。;info+=拍拍网于2005年9月12日上线发布，;info+=2006年3月13日宣布正式运营，;info+=是目前国内第二大电子商务平台。;info=info.split(,);for(vari=0;iinfo.length;i++){alert(info[i]);}答:输出字符串没有必要用for。3请给出异步加载js方案，不少于两种。答:1.直接document.write);scriptdocument.write(scriptsrc=test.js/script);/script2.动态改变已有script的src属性scriptsrc=id=s1scriptscripts1.src=test.js/script3.动态创建script元素scriptvaroHead=document.getElementsByTagName(HEAD).item(0);varoScript=document.createElement(script);oScript.type=text/javascript;oScript.src=test.js;oHead.appendChild(oScript);/script4请写出jQuery绑定事件的方法，不少于两种。答:$().click()$().ready()$().change()$().focus()5请设计一套方案，用于确保页面中JS加载完全。答:原生用onload,jq用ready。6.用CSS实现布局让我们一起来做一个页面首先，我们需要一个布局。请使用CSS控制3个div，实现如下图的布局。这题不难，在平时项目开发过程中也经常会碰到：主要考虑几个问题：1.IE6的3像素BUG；2.清楚浮动；CSS代码[css]viewplaincopy1.*{margin:0;padding:0;}2.div{background:blue;}3..frist{float:left;width:100px;height:150px;}4..second{clear:left;float:left;width:100px;height:150px;margin:10px000;}5..third{width:200px;height:310px;margin-left:110px;_margin-left:107px;}XML/HTML代码[html]viewplaincopy1.divclass=firstid=first1/div2.3.divclass=secondid=second2/div4.5.divclass=thirdid=third3/div7.用javascript优化布局由于我们的用户群喜欢放大看页面于是我们给上一题的布局做一次优化。当鼠标略过某个区块的时候，该区块会放大25%，并且其他的区块仍然固定不动。提示：也许，我们其他的布局也会用到这个放大的效果哦。可以使用任何开源代码，包括曾经你自己写的。关键字：javascript、封装、复用惭愧啊，用上边那个布局我怎么也没把它优化出来，硬这头皮用绝对定位改了布局；所以样式改成了这样[css]viewplaincopy1.*{margin:0;padding:0;}2.div{background:blue;position:absolute}3..first{width:100px;height:150px;float:left;}4..second{top:160px;width:100px;height:150px;}5..third{width:200px;left:110px;height:310px}javascript要考虑封装、复用[javascript]viewplaincopy1.scripttype=text/javascript2.functionzoom(id,x,y){//设置缩放函数参数：容器id、横向缩放倍数、纵向缩放倍数（等比例缩放时也可以设定一个参数）3.varobj=document.getElementById(id);//获取元素对象值4.vardW=obj.clientWidth;//获取元素宽度5.vardH=obj.clientHeight;//获取元素高度6.//varoTop=obj.offsetTop;7.//varoLeft=obj.offsetLeft;8.obj.onmouseover=function(){//鼠标移入9.this.style.width=dW*x+px;//横向缩放10.this.style.height=dH*y+px;//纵向缩放11.this.style.backgroundColor=#f00;//设置调试背景12.this.style.zIndex=1;//设置z轴优先13.}14.obj.onmouseout=function(){15.this.style.width=;16.this.style.height=;17.this.style.padding=;18.this.style.backgroundColor=;19.this.style.zIndex=;20.}21.}22.zoom(first,1.8,1.8);23.zoom(second,1.25,1.25);24.zoom(third,1.25,1.25);25.26./script百度的前端面试题第一题：CSS代码[css]viewplaincopy1.#div1{2.border:2pxsolid#009933;3.width:600px;4.height:100px;5.margin:0auto;6.position:absolute;7.left:50%;8.top:50%;9.margin-top:-50px;10.margin-left:-300px;11.}12.#div2{13.background:#009933;14.width:100px;15.height:600px;16.margin:0auto;17.position:absolute;18.left:50%;19.top:50%;20.margin-top:-300px;21.margin-left:-50px;22.}第二题：[javascript]viewplaincopy1.varEventUtil={2.addHandler:function(element,type,handler){3.if(element.addEventListener){4.element.addEventListener(type,handler,false);5.}elseif(element.attachEvent){6.element.attachEvent(on+type,handler);7.}else{8.element[on+type]=handler;9.}10.},11.removeHandler:function(element,type,handler){12.if(element.removeEventListener){13.element.removeEventListener(type,handler,false);14.}elseif(element.detachEvent){15.element.detachEvent(on+type,handler);16.}else{17.element[on+type]=null;18.}19.},20.getEvent:function(event){21.returnevent?event:window.event;22.},23.getTarget:function(event){24.returnevent.target||event.srcElement;25.}26.};27.varDrag=function(){28.vardrag=null;29.vardiffX=0;30.vardiffY=0;31.functionmove(event){32.vare=EventUtil.getEvent(event);33.vartarget=EventUtil.getTarget(e);34.switch(e.type){35.casemousedown:36.if(target.className.indexOf(drag)-1){37.drag=target;38.diffX=e.clientX-target.parentNode.offsetLeft;39.diffY=e.clientY-target.parentNode.offsetTop;40.}41.break;42.casemousemove:43.if(drag!==null){44.drag.parentNode.style.left=(e.clientX-diffX)+px;45.drag.parentNode.style.top=(e.clientY-diffY)+px;46.}47.break;48.casemouseup:49.drag=null;50.break;51.}52.}53.return{54.enable:function(){55.EventUtil.addHandler(document,mousedown,move);56.EventUtil.addHandler(document,mousemove,move);57.EventUtil.addHandler(document,mouseup,move);58.}59.}60.}();61.Drag.enable();做第二题发现IE一个BUG，在IE6和7中，如果drag层没有背景颜色，target指向了HTML第三题：[css]viewplaincopy1.#msg{2.width:180px;3.border:1pxsolid#009933;4.height:150px;5.display:none;6.background:#ffffff;7.position:absolute;8.}9.#btn{10.width:182px;11.height:35px;12.line-height:35px;13.background:#009933;14.position:absolute;15.top:350px;16.left:300px;17.}[javascript]viewplaincopy1.(function(){2.EventUtil.addHandler(document,click,function(event){3.varbtn=document.getElementById(btn);4.varmsg=document.getElementById(msg);5.varevent=EventUtil.getEvent(event);6.vartarget=EventUtil.getTarget(event);7.if(target!==btn&&target!==msg){8.msg.style.display=none;9.}else{10.msg.style.top=(btn.offsetTop-160)+px;11.msg.style.left=btn.offset