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

1、1. 要动态改变层中内容可以使用的方法有（AB ） a)innerHTML b)innerText c)通过设置层的隐藏和显示来实现 d)通过设置层的样式属性的display属性 2. 在javascript里，下列选项中不属于数组方法的是（B）； a)sort() b)length() c)concat() d)reverse() 3 、 var emp = new Array(3); for(var i in emp) 以下答案中能与for循环代码互换的是: （选择一项）。(D ) A for(var i =0; iemp; i+) B for(var i =0; iArray(3); i

2、+) C for(var i =0; iemp.length(); i+) D for(var i =0; iemp.length; 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)getElementById() c)getElementsByName() d)bgColor() 6. 、 di

3、splay属性值的常用取值不包括(C ) a)inline b)block c)hidden d)none 7. 以下有关pixelTop属性与top属性的说法正确的是。(D ) a)都是Location对象的属性 b)使用时返回值都是字符串 都是返回以像素为单位的数值c) d)以上都不对 下列选项正确的是_D_方法打开具有浏览器工具条,地址栏,菜单栏的窗口，8. 使用open?灯湥尨?瑨汭?屉尬潴汯慢?捳潲汬慢獲?猬慴畴?就?b)open(HI,scrollbars=1,location=1,status=1); ?灯湥尨?瑨汭?獜慴畴?敹?敭畮慢?潬慣楴湯?灯湥尨?瑨汭?屉尬潴汯慢?敹?敭

4、畮慢?潬慣楴湯? 的结果是什么?( C) javascript中表达式parseInt(“X8X8”)+paseFloat(8)9. 、a)8+8 b)88 c)16 d)“8”+8 中说法正确的是( D)10. 关于setTimeout(“check”,10) 10次a)程序循环执行 10秒执行一次b)Check函数每check c)10做为参数传给函数 10毫秒执行一次d)Check函数每 二： 的区别是？link 和import 11 （1）link属于XHTML标签，而import是CSS提供的; （2）页面被加载的时，link会同时被加载，而import引用的CSS会等到页面被加载完

5、再加载; （3）import只在IE5以上才能识别，而link是XHTML标签，无兼容问题; （4）link方式的样式的权重 高于import的权重. 12 html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？ * HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。 * 绘画 canvas 用于媒介回放的 video 和 audio 元素 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 的数据在浏览器关闭后自动删除 secti

6、on 、nav、footer、 语意化更好的内容元素，比如header article、urlsearch time、email、 表单控件，calendar、date、 新的技术webworker, websockt, Geolocation * 移除的元素 纯表现的元素：basefont，big，center，font, s，strike，tt，u； 对可用性产生负面影响的元素：frame，frameset，noframes； 支持HTML5新标签： * IE8/IE7/IE6支持通过document.createElement方法产生的标签， 可以利用这一特性让这些浏览器支持HTML5新

7、标签， 浏览器支持新标签后，还需要添加标签默认的样式： * 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架 src=/svn/trunk/html5.js 如何区分： DOCTYPE声明新增的结构元素功能元素 13 HTML5的离线储存？ localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 数据在浏览器关闭后自动删除。 14：介绍一下CSS的盒子模型？ （1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 padin

8、g; (border). 边框 、(margin)、边界(padding)、填充(content)内容 ）盒模型：2（新增伪类有CSS3CSS 选择器有哪些？哪些属性可以继承？优先级算法如何计算？ 15 那些？ ）* 1.id # myid选择器（ ） 2.类选择器（.myclassname ） 3.标签选择器（div, h1, p ） 4.相邻选择器（h1 + p ）子选择器（ul id class tag important 比 内联优先级高 16 列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？ 1. block 象块类型元素

9、一样显示。 none 缺省值。象行内元素类型一样显示。 inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。 list-item 象块类型元素一样显示，并添加样式列表标记。 2. *absolute 定位以外的第一个父元素进行定位。生成绝对定位的元素，相对于 static IE *fixed （老不支持） 生成绝对定位的元素，相对于浏览器窗口进行定位。 *relative 生成相对定位的元素，相对于其正常位置进行定位。 * static 默认值。没有定位，元素出现在正常的流中 *（忽略 top, bottom, left, right z-index 声明）。 * in

10、herit 规定从父元素继承 position 属性的值。 17 介绍js的基本数据类型。 number,string,boolean,object,undefined 18 Javascript如何实现继承？ 通过原型和构造器 19 什么是闭包（closure），为什么要用它？ 一、变量的作用要理解闭包，首先必须理Javascrip特殊的变量作用域变量的作用域无非就是两种：全局变量和局部变量Javascrip语言的特殊之处，就在于函数内部可以直接读取全局变量二、如何从外部读取局部变量出于种种原因我们有时候需要得到函数内的局部变量但是，前面已经说过了正常情下，这是办不到的，只有通过变通方法才能

11、实现那就是在函数的内部，再定义一个函数三、闭包的概上一节代码中f函数，就是闭包各种专业文献上闭closur）定义非常抽象，很难看懂。我的理解是，闭包就是能读取其他函数内部变量的函数由于Javascrip语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简定义在一个函数内部的函理解成 所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。-b 四、闭包的用途 闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。 闭包的用途 闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，

12、另一个就是让这些变量的值始终保持在内存中。 20 针对 jQuery 的优化方法？ 1，总是从ID选择器开始继承 2，在class前使用tag(标签名) 在jQuery中第二快的选择器是tag(标签)选择器( 比如：$(“head”) )。 跟ID选择器累时，因为它来自原生的getElementsByTagName() 方法。 继续看刚才那段HTML代码： 比如需要选择 红绿 单选框， 那么可以使用一个tag name来限制(修饰)class ，如下所示： var active_light = $(“input.on”); 当然也可以结合 就近的ID，如下所示： var active_ligh

13、t = $(“#traffic_light input.on”); 在使用tag来修饰class的时候，我们需要注意以下几点： （1） 不要使用tag来修饰ID，如下所示： var content = $(“div#content”); 这样一来，选择器会先遍历所有的div元素，然后匹配#content。 （好像jQuery从1.3.1开始改变了选择器核心后，不存在这个问题了。暂时无法考证。） （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(order, px dashed yellow); $(#traffic_light input.on).css(ackground-color, orange); $(#traffic_light input.on).fadeIn(slow); 但切记不要这么做。 我们应该先将对象缓存进一个变量然后再操作，如下所示：

15、 var $active_light = $(#traffic_light input.on); $active_light.bind(click, function() ); $active_light.css(order, px dashed yellow); $active_light.css(ackground-color, orange); $active_light.fadeIn(slow); 记住，永远不要让相同的选择器在你的代码里出现多次. 4，对直接的DOM操作进行限制 这里的基本思想是在内存中建立你确实想要的东西，然后更新DOM 。 这并不是一个jQuery最佳实践，但必须

16、进行有效的JavaScript操作 。直接的DOM操作速度很慢。 例如，你想动态的创建一组列表元素，千万不要这样做,如下所示： var top_100_list = , / 假设这里是100个独一无二的字符串 $mylist = $(#mylist); / jQuery 选择到 元素 for (var i=0, l=top_100_list.length; i + top_100_listi + ); 我们应该将整套元素字符串在插入进dom中之前先全部创建好，如下所示： var top_100_list = ,$mylist = $(#mylist), top_100_li = ; / 这个变

17、量将用来存储我们的列表元素 for (var i=0, l=top_100_list.length; i; $mylist.html(top_100_li); 5，冒泡 除非在特殊情况下, 否则每一个js事件(例如:click, mouseover等.)都会冒泡到父级节点。 当我们需要给多个元素调用同个函数时这点会很有用。 代替这种效率很差的多元素事件监听的方法就是, 你只需向它们的父节点绑定一次。 比如, 我们要为一个拥有很多输入框的表单绑定这样的行为: 当输入框被选中时为它添加一个class 传统的做法是，直接选中input，然后绑定focus等，如下所示： $(#entryform in

18、put).bind(ocus, function() $(this).addClass(selected); ).bind(lur, function() $(this).removeClass(selected); ); 当然上面代码能帮我们完成相应的任务，但如果你要寻求更高效的方法，请使用如下代码： $(#entryform).bind(ocus, function(e) var $cell = $(e.target); / e.target 捕捉到触发的目标元素 $cell.addClass(selected); ).bind(lur, function(e) var $cell = $(e.target); $cell.removeClass(selected); ); 通过在父级监听获取焦点和失去焦点的事件，对目标元素进行操作。 在上面代码中，父级元素扮演了一个调度员的角色, 它可以基于目标元素绑定事件。 如果你发现你给很多元素绑定了同一个事件监听, 那么现在的你肯定知道哪里做错了。 6，推迟到 $(window).load 下。$(document).ready可以把任何东西挂到, 对于开发者来说有一个很诱人的东西jQuery 尽管$(document).rady 确实很有用，