前端工程师面试题题及答案(全面综合)

1、1. 要动态改变层中内容可以使用的方法有( AB )a) i nn erHTMLb) i nn erTextc) 通过设置层的隐藏和显示来实现d) 通过设置层的样式属性的display属性2. 在javascript里，下列选项中不属于数组方法的是( B)；a) sort()b) le ngth()c) con cat()d) reverse()3、var emp = new Array(3);for(var i in emp)以下答案中能与for循环代码互换的是：(选择一项)。(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下列声明数组的语句中，错误的选项是(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) 都是返回以像素为单位的数值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) 程序循环执行10次b) Check函数每10秒执行一次c) 10做为参数传给函数 checkd) Check函数每10毫秒执行一次11 link和import 的区别是?(1) link 属于XHTML标签，而 import是CSS提供的；(2) 页面被加载的时，link会同时被加载，而 import引用的CSS会等到页面被加载完再加载(3) import只在IE5以上才能识别，而link是XHTML标签，无兼容问题；(4) link方式的样式的权重高于im

6、port的权重.12 html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML和HTML5 ？* HTML5现在已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加。* 绘画 canvas用于媒介回放的 video 和audio 元素本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；sessionStorage的数据在浏览器关闭后自动删除语意化更好的内容元素，比如article 、footer 、header、nav、section表单控件， calendar 、date、time、email、url、sea

7、rch新的技术 webworker, websockt. Geolocation*移除的元素纯表现的元素：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->如何区分：DOCTYPE声明新增的结构元素功能元素13 HTML5的离线储存?localStorage长期存储数据，浏览器关闭后数据不丢失;sessionstorage数据在浏览器关闭后自动删除。14 :介绍一下 CSS的盒子模型?(1 )有两种，IE 盒子模型、标准 W3C盒子模型；IE的content 部分包含了 border 和pading;(2)盒模型： 内容(content)、填充(padding)、边界(margin)、 边框

9、(border).CSS3新增伪类有15 CSS选择器有哪些？哪些属性可以继承？优先级算法如何计算?那些?* 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 ;* 优先级就近原则，同权重情况下样式定义最近者为准；* 载入样式以最后载入的定位为准；优先级为：important > id > class > tagimportant 比内联优先级高16 列出display 的值，说明他们的作用。position 的值，relative和absolute定位原点 是？1.block象块类型元素一样显示。none 缺省值。象行内元素类型一样显示。inline-block象行内元素一样显示，但其内容象块类型元素一样显示。list-item象块

11、类型元素一样显示，并添加样式列表标记。2.*absolute生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。*fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。*relative生成相对定位的元素，相对于其正常位置进行定位。* static默认值。没有定位，元素出现在正常的流中* （忽略 top, bottom, left, right z-index声明）。* inherit规定从父元素继承 position 属性的值。17介绍js的基本数据类型。number,string,boolean,object,undefined18 Javascrip

12、t如何实现继承?通过原型和构造器19什么是闭包（closure ），为什么要用它?20针对jQuery 的优化方法？1，总是从ID选择器开始继承2，在class 前使用tag（标签名）在jQuery中第二快的选择器是tag（标签）选择器（比如：$（ “ head ”）跟ID选择器累时，因为它来自原生的getElementsByTagName（） 方法。继续看刚才那段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、要养成将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");记住，永远不要让相同的选择器在你的代码里岀现多次4，对直接的DOM操作进行限制这里的基本思想是在内存中建立你确实想要的东西，然后更新DOM。这并不是一个jQuery最佳实践，但必须进行有效的JavaScript 操作。直接的DOM操作速度很慢。例如，你想动态的创建一组列表元素，千万不要这样做，如下所示:var top_100_list = , /假设这里是100个独一无二的字符串$mylist = $("#m

17、ylist");/jQuery选择到 元素for (var i=0, l=top_100_list.length; i" + top_100_listi + "");我们应该将整套元素字符串在插入进dom中之前先全部创建好，如下所示：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 等.)都会冒泡到父级节点。当我们需要给多个元素调用同个函数时这点会很有用。代替这种效率很差的多元素事件监听的方法就是，你只需向它们的父节点绑定一次。比如，我们要为一个拥有很多输入框的表单绑定这样的行为：当输入框被选中时为它添加一个class传统的做法是，直接选中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捕捉到触发的目标元素$cell.addClass("selected");).bind("blur", function(e)var $cell = $(e.target);$cell.removeClass("selected"););通过在父级监听获取焦点和失去焦点的事件，对目标元素进行操作。在上面代码中，父级元素扮演了一个调度员的角色，它可以基于目标元素绑定事件。如果你发现你给很多元素绑定了同一个事件监听，那么现在的你肯定知道哪里做错了。6，推迟到 $(window).loadjQuery