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

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; i<emp; i++)
B for(var i =0; i<Array(3); i++)
C for(var i =0; i<emp.length(); i++)
D for(var i =0; i<emp.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. 、 display属性值的常用取值不包括(C )
a)inline
b)block
c)hidden
d)none

7. 以下有关pixelTop属性与top属性的说法正确的是。(D )
a)都是Location对象的属性
b)使用时返回值都是字符串
c)都是返回以像素为单位的数值
d)以上都不对

8. 使用open方法打开具有浏览器工具条,地址栏,菜单栏的窗口，下列选项正确的是__D__
a)open("x.html","HI","toolbas=1,scrollbars=1,status=1");
b)open("HI","scrollbars=1,location=1,status=1");
c)open("x.html","status=yes,menubar=1,location=1");
d)open("x.html","HI","toolbas=yes,menubar=1,location=1");

9. 、 javascript中表达式parseInt(“X8X8”)+paseFloat(‘8’)的结果是什么?( C)
a)8+8
b)88
c)16
d)“8”+’8

10. 关于setTimeout(“check”,10)中说法正确的是( D)
a)程序循环执行10次
b)Check函数每10秒执行一次
c)10做为参数传给函数check
d)Check函数每10毫秒执行一次

二：
11 link 和@import 的区别是？
（1）link属于XHTML标签，而@import是CSS提供的;
（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;
（4）link方式的样式的权重 高于@import的权重.
12 html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
* HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

* 绘画 canvas
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素，比如 article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
新的技术webworker, websockt, Geolocation

* 移除的元素
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
支持HTML5新标签：

* IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，

浏览器支持新标签后，还需要添加标签默认的样式：

* 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]>
<script> src="
<![endif]-->
如何区分： DOCTYPE声明\新增的结构元素\功能元素

13 HTML5的离线储存？
localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 数据在浏览器关闭后自动删除。

14：介绍一下CSS的盒子模型？
（1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;

（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).
15 CSS 选择器有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？
* 1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul < li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = "external"]）
9.伪类选择器（a: hover, li: nth - child）
* 可继承的样式： font-size font-family color, UL LI DL DD DT;
* 不可继承的样式：border padding margin width height ;
* 优先级就近原则，同权重情况下样式定义最近者为准;
* 载入样式以最后载入的定位为准;
优先级为:
!important > id > class > tag

important 比 内联优先级高
16 列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？
1.
block 象块类型元素一样显示。
none 缺省值。象行内元素类型一样显示。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。

2.
*absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

*fixed （老IE不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。

*relative
生成相对定位的元素，相对于其正常位置进行定位。

* static 默认值。没有定位，元素出现在正常的流中
*（忽略 top, bottom, left, right z-index 声明）。

* inherit 规定从父元素继承 position 属性的值。
17 介绍js的基本数据类型。
number,string,boolean,object,undefined
18 Javascript如何实现继承？
通过原型和构造器
19 什么是闭包（closure），为什么要用它？
一、变量的作用域
要理解闭包，首先必须理解Javascript特殊的变量作用域。
变量的作用域无非就是两种：全局变量和局部变量。
Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。

二、如何从外部读取局部变量？
出于种种原因，我们有时候需要得到函数内的局部变量。但是，前面已经说过了，正常情况下，这是办不到的，只有通过变通方法才能实现。
那就是在函数的内部，再定义一个函数。

三、闭包的概念
上一节代码中的f2函数，就是闭包。
各种专业文献上的“闭包”（closure）定义非常抽象，很难看懂。我的理解是，闭包就是能够读取其他函数内部变量的函数。
由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。
所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
--------------------------------------------------------------------------------------------------------b
四、闭包的用途
闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
闭包的用途
闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
20 针对 jQuery 的优化方法？
1，总是从ID选择器开始继承
2，在class前使用tag(标签名)
在jQuery中第二快的选择器是tag(标签)选择器( 比如：$(“head”) )。
跟ID选择器累时，因为它来自原生的getElementsByTagName() 方法。
继续看刚才那段HTML代码：
比如需要选择 红绿 单选框，
那么可以使用一个tag name来限制(修饰)class ，如下所示：
var active_light = $(“input.on”);
当然也可以结合 就近的ID，如下所示：
var active_light = $(“#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对象缓存起来 就是要告诉我们 要养成将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");
$("#traffic_light input.on").fadeIn("slow");

但切记不要这么做。
我们应该先将对象缓存进一个变量然后再操作，如下所示：
var $active_light = $("#traffic_light input.on");
$active_light.bind("click", function(){ });
$active_light.css("border", "1px dashed yellow");
$active_light.css("background-color", "orange");
$active_light.fadeIn("slow");
记住，永远不要让相同的选择器在你的代码里出现多次.

4，对直接的DOM操作进行限制

这里的基本思想是在内存中建立你确实想要的东西，然后更新DOM 。
这并不是一个jQuery最佳实践，但必须进行有效的JavaScript操作 。直接的DOM操作速度很慢。
例如，你想动态的创建一组列表元素，千万不要这样做,如下所示：
var top_100_list = [], // 假设这里是100个独一无二的字符串
$mylist = $("#mylist"); // jQuery 选择到 元素
for (var i=0, l=top_100_list.length; i" + top_100_list[i] + "");
}

我们应该将整套元素字符串在插入进dom中之前先全部创建好，如下所示：
var top_100_list = [],$mylist = $("#mylist"), top_100_li = ""; // 这个变量将用来存储我们的列表元素
for (var i=0, l=top_100_list.length; i";
}
$mylist.html(top_100_li);

5，冒泡
除非在特殊情况下, 否则每一个js事件(例如:click, mouseover等.)都会冒泡到父级节点。
当我们需要给多个元素调用同个函数时这点会很有用。
代替这种效率很差的多元素事件监听的方法就是, 你只需向它们的父节点绑定一次。
比如, 我们要为一个拥有很多输入框的表单绑定这样的行为: 当输入框被选中时为它添加一个class
传统的做法是，直接选中input，然后绑定focus等，如下所示：
$("#entryform input").bind("focus", function(){
$(this).addClass("selected");
}).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).load

jQuery对于开发者来说有一个很诱人的东西, 可以把任何东西挂到$(document).ready下。
尽管$(document).rady 确实很有用， 它可以在页面渲染时，其它元素还没下载完成就执行。
如果你发现你的页面一直是载入中的状态，很有可能就是$(document).ready函数引起的。
你可以通过将jQuery函数绑定到$(window).load 事件的方法来减少页面载入时的cpu使用率。
它会在所有的html(包括iframe)被下载完成后执行。
一些特效的功能，例如拖放, 视觉特效和动画, 预载入隐藏图像等等，都是适合这种技术的场合。

7，压缩JavaScript

在线压缩地址: http://dean.edwards.name/packer/
压缩之前，请保证你的代码的规范性，否则可能失败，导致Js错误。

8，尽量使用ID代替Class。
前面性能优化已经说过，ID选择器的速度是最快的。所以在HTML代码中，能使用ID的尽量使用ID来代替class。

9，给选择器一个上下文
jQuery选择器中有一个这样的选择器，它能指定上下文。
jQuery( expression, context );
通过它，能缩小选择器在DOM中搜索的范围，达到节省时间，提高效率。
普通方式：
$('.myDiv')
改进方式：
$('.myDiv' , $("#listItem") )
10，慎用 .live()方法（应该说尽量不要使用）
这是jQuery1.3.1版本之后增加的方法，这个方法的功能就是为 新增的DOM元素 动态绑定事件。
但对于效率来说，这个方法比较占用资源。所以请尽量不要使用它。
其中专业理论知识内容包括：保安理论知识、消防业务知识、职业道德、法律常识、保安礼仪、救护知识。作技能训练内容包括：岗位操作指引、勤务技能、消防技能、军事技能。
二．培训的及要求培训目的
安全生产目标责任书
为了进一步落实安全生产责任制，做到“责、权、利”相结合，根据我公司2015年度安全生产目标的内容，现与财务部签订如下安全生产目标：
一、目标值：
1、全年人身死亡事故为零，重伤事故为零，轻伤人数为零。
2、现金安全保管，不发生盗窃事故。
3、每月足额提取安全生产费用，保障安全生产投入资金的到位。
4、安全培训合格率为100%。
二、本单位安全工作上必须做到以下内容：
1、对本单位的安全生产负直接领导责任，必须模范遵守公司的各项安全管理制度，不发布与公司安全管理制度相抵触的指令，严格履行本人的安全职责，确保安全责任制在本单位全面落实，并全力支持安全工作。
2、保证公司各项安全管理制度和管理办法在本单位内全面实施，并自觉接受公司安全部门的监督和管理。
3、在确保安全的前提下组织生产，始终把安全工作放在首位，当“安全与交货期、质量”发生矛盾时，坚持安全第一的原则。
4、参加生产碰头会时，首先汇报本单位的安全生产情况和安全问题落实情况；在安排本单位生产任务时，必须安排安全工作内容，并写入记录。
5、在公司及政府的安全检查中杜绝各类违章现象。
6、组织本部门积极参加安全检查，做到有检查、有整改，记录全。
7、以身作则，不违章指挥、不违章操作。对发现的各类违章现象负有查禁的责任，同时要予以查处。
8、虚心接受员工提出的问题，杜绝不接受或盲目指挥；
9、发生事故，应立即报告主管领导，按照“四不放过”的原则召开事故分析会，提出整改措施和对责任者的处理意见，并填写事故登记表，严禁隐瞒不报或降低对责任者的处罚标准。
10、必须按规定对单位员工进行培训和新员工上岗教育；
11、严格执行公司安全生产十六项禁令，保证本单位所有人员不违章作业。
三、 安全奖惩：
1、对于全年实现安全目标的按照公司生产现场管理规定和工作说明书进行考核奖励；对于未实现安全目标的按照公司规定进行处罚。
2、每月接受主管领导指派人员对安全生产责任状的落