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

《前端工程师面试题题及答案(全面综合)》由会员分享，可在线阅读，更多相关《前端工程师面试题题及答案(全面综合)（10页珍藏版）》请在装配图网上搜索。

1、1. 要动态改变层中内容可以使用的方法有（AB）a)innerHTMLb)innerTextc)通过设置层的隐藏和显示来实现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+)C for(var i

2、 =0; iemp.length(); i+)D for(var i =0; iemp.length; i+)4 下列声明数组的语句中，错误的选项是（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)C ）。5. 下列哪一个选项不属于 document 对象的方法 ? （D ）a)focus()b)getElementById()c)getElementsByName()d)bgColor()6. 、 display 属性值的常用取值不包括 (C

3、 ) a)inlineb)blockc)hiddend)none7. 以下有关 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,m

4、enubar=1,location=1); d)open(x.html,HI,toolbas=yes,menubar=1,location=1);9. 、 javascript 中表达式 parseInt( “ X8X8” )+paseFloat( 的8结)果是什么 ?( C)a)8+8b)88c)16d) “ 8” +810. 关于 setTimeout(“ check ” ,10)中说法正确的是( D)a)程序循环执行10 次b)Check 函数每 10 秒执行一次c)10 做为参数传给函数checkd)Check 函数每 10 毫秒执行一次二：11link和 import的区别是？（ 1

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

6、 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，

7、noframes ；支持 HTML5新标签：* IE8/IE7/IE6支持通过 document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式：*当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架如何区分：DOCTYPE声明新增的结构元素功能元素13 HTML5 的离线储存？localStorage长期存储数据，浏览器关闭后数据不丢失；sessionStorage数据在浏览器关闭后自动删除。14 ：介绍一下CSS 的盒子模型？（1）有两种，IE盒子模型、标准W3C 盒子模型； IE

8、 的 content部分包含了border和 pading;（2）盒模型：内容 (content)、填充 (padding)、边界 (margin)、 边框 (border).15CSS 选择器有哪些？哪些属性可以继承？优先级算法如何计算？CSS3 新增伪类有那些？* 1.id选择器（ # myid ）2. 类选择器（ .myclassname ）3.标签选择器（ div, h1, p）4. 相邻选择器（ h1 + p ）5.子选择器（ ul id class tagimportant比 内联优先级高16 列出 display 的值， 说明他们的作用。 position 的值， relativ

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

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

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

12、中。闭包的用途闭包可以用在许多地方。 它的最大用处有两个， 一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。20 针对jQuery的优化方法？1，总是从 ID 选择器开始继承2，在 class 前使用 tag(标签名 )在 jQuery 中第二快的选择器是tag(标签)选择器 (比如： $( “ head ” ) ) 。跟 ID 选择器累时，因为它来自原生的getElementsByTagName()方法。继续看刚才那段 HTML代码：比如需要选择红绿 单选框，那么可以使用一个 tag name 来限制 ( 修饰 )class，如下所示：var active_

13、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

14、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);$

15、(#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);记住，永远不要让相同的选择器在你的代码里出现多次

16、.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_listi + );我们应该将整套元素字符串在插入进dom 中之前先全部创建好，如下所示：v

17、ar 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等.) 都会冒泡到父级节点。当我们需要给多个元素调用同个函数时这点会很有用。代替这种效率很差的多元素事件监听的方法就是,你只需向它们的父节点绑定一次。比如 ,我们要为一个拥有很多输入框的表单绑定这样的行为:当输入框被选中时为它添加一个c

18、lass传统的做法是，直接选中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(se

19、lected);).bind(blur, function(e)var $cell = $(e.target);$cell.removeClass(selected););通过在父级监听获取焦点和失去焦点的事件，对目标元素进行操作。在上面代码中，父级元素扮演了一个调度员的角色,它可以基于目标元素绑定事件。如果你发现你给很多元素绑定了同一个事件监听,那么现在的你肯定知道哪里做错了。6，推迟到 $(window).loadjQuery对于开发者来说有一个很诱人的东西,可以把任何东西挂到$(document).ready下。尽管 $(document).rady确实很有用，它可以在页面渲染时，其它元

20、素还没下载完成就执行。如果你发现你的页面一直是载入中的状态，很有可能就是$(document).ready函数引起的。你可以通过将jQuery函数绑定到 $(window).load事件的方法来减少页面载入时的cpu 使用率。它会在所有的html(包括 iframe)被下载完成后执行。一些特效的功能，例如拖放,视觉特效和动画,预载入隐藏图像等等，都是适合这种技术的场合。7，压缩 JavaScript在线压缩地址压缩之前，请保证你的代码的规范性，否则可能失败，导致Js 错误。8，尽量使用ID 代替 Class 。前面性能优化已经说过， ID 选择器的速度是最快的。所以在 HTML代码中，能使用

21、ID 的尽量使用 ID 来代替 class 。9，给选择器一个上下文jQuery选择器中有一个这样的选择器，它能指定上下文。jQuery( expression, context );通过它，能缩小选择器在DOM中搜索的范围，达到节省时间，提高效率。普通方式：$(.myDiv)改进方式：$(.myDiv , $(#listItem) )10，慎用 .live()方法（应该说尽量不要使用）这是版本之后增加的方法，这个方法的功能就是为新增的 DOM元素动态绑定事件。但对于效率来说，这个方法比较占用资源。所以请尽量不要使用它。其中专业理论知识内容包括：保安理论知识、消防业务知识、职业道德、法律常识、

22、保安礼仪、救护知识。作技能训练内容包括：岗位操作指引、勤务技能、消防技能、军事技能。二培训的及要求培训目的安全生产目标责任书为了进一步落实安全生产责任制，做到“责、权、利”相结合，根据我公司2015 年度安全生产目标的内容，现与财务部 签订如下安全生产目标：一、目标值：1 、全年人身死亡事故为零，重伤事故为零，轻伤人数为零。2 、现金安全保管，不发生盗窃事故。3 、每月足额提取安全生产费用，保障安全生产投入资金的到位。4 、安全培训合格率为 100% 。二、本单位安全工作上必须做到以下内容：1 、对本单位的安全生产负直接领导责任，必须模范遵守公司的各项安全管理制度，不发布与公司安全管理制度相抵

23、触的指令，严格履行本人的安全职责，确保安全责任制在本单位全面落实，并全力支持安全工作。2 、保证公司各项安全管理制度和管理办法在本单位内全面实施，并自觉接受公司安全部门的监督和管理。3 、在确保安全的前提下组织生产，始终把安全工作放在首位，当“安全与交货期、质量”发生矛盾时，坚持安全第一的原则。4 、参加生产碰头会时，首先汇报本单位的安全生产情况和安全问题落实情况；在安排本单位生产任务时，必须安排安全工作内容，并写入记录。5 、在公司及政府的安全检查中杜绝各类违章现象。6 、组织本部门积极参加安全检查，做到有检查、有整改，记录全。7 、以身作则，不违章指挥、不违章操作。对发现的各类违章现象负有查禁的责任，同时要予以查处。8 、虚心接受员工提出的问题，杜绝不接受或盲目指挥；9 、发生事故，应立即报告主管领导，按照“四不放过”的原则召开事故分析会，提出整改措施和对责任者的处理意见，并填写事故登记表，严禁隐瞒不报或降低对责任者的处罚标准。10 、必须按规定对单位员工进行培训和新员工上岗教育；11 、严格执行公司安全生产十六项禁令，保证本单位所有人员不违章作业。三、 安全奖惩：1 、对于全年实现安全目标的按照公司生产现场管理规定和工作说明书进行考核奖励；对于未实现安全目标的按照公司规定进行处罚。2 、每月接受主管领导指派人员对安全生产责任状的落