前端研发笔试题

Posted 淡然丶blue

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端研发笔试题相关的知识，希望对你有一定的参考价值。

备注：请将答案写在答题纸上

一、选择题

1．下面标签嵌套正确的是（D）

A. <ul><p>赶集网</p></ul> 

B. <a href="#"><a href="#">赶集网</a></a> 

C. <dl><li>赶集网</li></dl> 

D.<ol><li>赶集网</li></ol> 

 

2. 在html中，（C）可以在网页上通过链接直接打开邮件客户端发送邮件。

A.<a href=”telnet:[email protected]”>发送邮件</a>

B. <a href=”mail:[email protected]”>发送邮件</a> 

C.<a href=”mailto:[email protected]”>发送邮件</a>

D.<a href=”ftp:[email protected]”>发送邮件</a> 

 

3. 请选出所有的置换元素（ABCD）(多选) 

A. img 

B. input 

C. textarea 

D. select 

 

 

4．下面哪条声明能固定背景图片（A）

 

A. background-attachment:fixed; 

B. background-attachment:scroll; 

C. background-origin: initial; 

D. background-clip: initial; 

 

5．下列说法正确的是（AB）（多选） 

A.display: none；不为被隐藏的对象保留其物理空间；

B.visibility:hidden;所占据的空间位置仍然存在,仅为视觉上的完全透明；

C.visibility:hidden;产生reflow和repaint(回流与重绘)；

D.visibility:hidden;与display: none;两者没有本质上的区别；

 

6．以下关于盒子模型描述正确的是（A）

A.标准盒子模型中：盒子的总宽度＝左右margin + 左右border + 左右padding + width 

B.IE盒子模型中：盒子总宽度＝左右margin + 左右border + width 

C.标准盒子模型中：盒子的总宽度＝ 左右margin + 左右border + width 

D.IE盒子模型中：盒子总宽度＝width 

 

7．英文字母全部转为大写正确的是（C）

A. text-transform: capitalize; 

B. text-transform: lowercase; 

C. text-transform: uppercase; 

D. font-weight: bold;

  1. 页面有一个按钮button id为button1，通过原生的js如何禁用？（A B C D）(多选) 

A.document.getElementById("button1").readolny= true; 

B.document.getElementById("button1").setAttribute("readolny","true"); 

C.document.getElementById("button1").disabled = true; 

D.document.getElementById("button1").setAttribute("disabled","true"); 

 

9．页面有一个按钮button id为button1，通过原生的js 设置背景色为红色？（ A ） 

A. document.getElementById(‘button1‘).style.backgroundColor="red"; 

B. document.getElementById(‘button1‘).style.backgroundcolor="red"; 

C. document.getElementById(‘button1‘).style.backGroundColor="red"; 

D. document.getElementById(‘button1‘).style.bgcolor="red"; 

 

10．使用CSS来格式化网页，共有三种方式，以下哪一种不是( D ). 

A. 在HEAD中引用 

B. 作为标记来引用

C. 在BODY中引用

D. 作为文件来引用

 

 

11.下述有关border:none以及border:0的区别，描述错误的是？( C D )(多选) 

A. border:none表示边框样式无

B. border:0表示边框宽度为0 

C. 当定义了border:none，即隐藏了边框的显示，实际就是边框宽度为0 

D. 当定义边框时，仅设置边框宽度也可以达到显示的效果

 

12．iframe的使用场景有？(A B D C) 

A. 与第三方域名下的页面共享cookie 

B. 上传图片，避免当前页刷新

C. 左边固定右边自适应的布局

D. 资源加载

 

13．通常我们在浏览器内容区看到的内容，都是放入在( D ) 之间

A. <!doctype html> 

B. <html></html> 

C. <head></head> 

D. <body></body> 

 

14. 在网站上添加链接使用的标签是(D) 

A. title标签 

B. img标签

C. meta标签

D. a标签

15．通过分析如下HTML代码，可以得出( B C D )（多选）

 <table border="10">

            <tr>

                <td colspan="2" align="center">员工号</td>

            </tr>

            <tr>

                <td colspan="2" align="center">学历</td>

                <td align="center">专业</td>

                

            </tr>

            <tr>

                <td colspan="2" align="center">毕业学校</td>

            </tr>

        </table>

A. 该表格共有2行3列

B. 该表格中的文字均居中显示

C. 该表格的边框宽度为10毫米

D. "员工号"单元个跨2列

 

二、填空题

16．CSS中的_____margin___属性可为元素设置外边距，改变元素的内填充用___padding___属性。

 

17．对ul li的样式设成无，应该是用什么属性_____list-style: none_________。

 

18．合理的页面布局中常听过结构与表现分离，那么结构是___html_____，表现是___css_____。

 

19．在Table中，TR是___行_____，TD是____列____。

  

三、问答题

 

20．写出三个javascript中使用this关键字的典型应用场景。

1.全局环境中的this指向全局对象

2.对象内部函数的this指向调用函数的当前对象

3.全局环境函数的this指向全局对象

4.匿名函数中的this指向全局对象

5.setInterval和setTimeout定时器中的this指向全局对象

 

21．写一段JS代码：判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、

数字、下划线，总长度为5-20。

 var reg = /^[a-zA-Z]\w{5,20}$/;

22．AJAX的全称是什么，AJAX技术体系的组成部分有哪些？

 AJAX的全称是：Asynchronous Javascript And XML”（异步JavaScript和XML）

 主要包含了以下几种技术： 
Ajax（Asynchronous JavaScript + XML）的定义 
基于web标准（standards-based presentation）XHTML+CSS的表示； 
使用 DOM（Document Object Model）进行动态显示及交互； 
使用 XML 和 XSLT 进行数据交换及相关操作； 
使用 XMLHttpRequest 进行异步数据查询、检索； 
使用 JavaScript 将所有的东西绑定在一起。

 

23．请介绍一下XMLhttprequest对象。

 XMLHttpRequest 对象用于在后台与服务器交换数据。

XMLHttpRequest 对象是开发者的梦想，因为您能够：

  • 在不重新加载页面的情况下更新网页
  • 在页面已加载后从服务器请求数据
  • 在页面已加载后从服务器接收数据
  • 在后台向服务器发送数据

所有现代浏览器（IE7+、Firefox、Chrome、Safari 和 Opera）都有内建的 XMLHttpRequest 对象。

 

 

24．请列举五个常用的Javascript DOM方法。

　　getElementsByTagName() 通过标签名字，获取节点对象的数组

　　getAttribute() 获取对象的某个属性

　　setAttribute() 设置对象的某个属性

一些常用的 HTML DOM 方法：

  • getElementById(id) - 获取带有指定 id 的节点（元素）
  • appendChild(node) - 插入新的子节点（元素）
  • removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：

  • innerHTML - 节点（元素）的文本值
  • parentNode - 节点（元素）的父节点
  • childNodes - 节点（元素）的子节点
  • attributes - 节点（元素）的属性节点

 

25．Javascript常用的库有哪些，你的开发经历中使用过哪些？

 
jQuery
jQuery 是目前最受欢迎的JavaScript 框架。它使用 CSS 选择器来访问和操作网页上的HTML元素（DOM 对象）。jQuery 同时提供 companion UI（用户界面）和插件。Google、Microsoft、IBM和Netflix等大公司都在网站上使用 jQuery。

 

requirejs

requirejs是一个JavaScript文件和模块加载器。requireJS允许你把你的javascript代码独立成文件和模块，同时管理每个模块间的依赖关系。RequireJS的目标是鼓励代码的模块化，它使用了不同于传统<script>标签的脚本加载步骤。使用RequireJS加载模块化脚本将提高代码的加载速度和质量。

 

AngularJS

AngularJS[1]  诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

 

MooTools
MooTools是一个简洁，模块化，面向对象的JavaScript框架。 它能够帮助你更快，更简单地编写可扩展和兼容性强的JavaScript代码。 Mootools从Prototype.js中汲取了许多有益的设计理念，语法也和其极其类似。但它提供的功能要比Prototype.js多，整体设计 也比Prototype.js要相对完善，功能更强大，比如增加了动画特效、拖放操作等。
 
YUI Library
UI Library (YUI) 是一个开放源代码的 JavaScript 函数库。UI Library (YUI)的直观的、丰富的API可帮助你构建高性能的desktop、服务器和移动应用程序。为了能建立一个高互动的网页，它采用了AJAX, DHTML 和 DOM 等程式码技术。此外，UI Library (YUI)还包含了许多CSS 资源。
 
DevExtreme
DevExtreme包含了功能强大的HTML5,CSS和JavaScript开发框架。如果你想创建漂亮的跨平台和多设备（无论是Windows8设备还是iPad，还是iPhone,android等智能手机）应用程序，DevExtreme将为你提供了一个全新的解决方案！
 
Bookmarklet Generator
正如您所料想的，Bookmarklet Generator是一个书签生成器：简单地粘贴常规的JavaScript代码，按下按钮，您会得到一个书签 ——准备安装在您的浏览器栏。
 
Protorype
Protorype 是一个很独特的JavaScript 库，逐渐成为Web引用开发者的代码基础，被一些大型媒体公司和组织使用。随着版本的更新，Protorype 在性能，用户自定义事件以及同现代浏览器兼容方面越来越完善。
 
Dojo Toolkit
Dojo 的内核小巧，快速，精深，可用来创建反应灵敏的Web程序，拥有很出色的UI工具，在可访问性，本地化方面也做得很好。
 
Modernizr
Modernizr是一个开源的JS库，它使得那些基于访客浏览器的不同 （指对新标准支持性的差异）而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可以在支持HTML5和CSS3的浏览器中充分利用HTML5和 CSS3的特性进行开发，同时又不会牺牲其他不支持这些新技术的浏览器的控制。

VectorDraw web library (JavaScript)
VectorDraw web library (javascript)是 一个矢量图形库，关键是它不但能够打开CAD绘图，而且还能在任何支持HTML5的浏览器中显示通用的矢量对象，包括现在的移动设备Android和 ios系统上。VectorDraw web library完全采用Javascript编写，并在客户端运行，另外还包含了一个类似DXF和.Net VectorDraw Framework组件的对象模型。
 
Ligature.js
Ligature.js是一个脚本，能为任何类型的文章增添漂亮的连体字。这是所有排版爱好者必须拥有的！

以上是关于前端研发笔试题的主要内容，如果未能解决你的问题，请参考以下文章

美团2016研发工程师笔试题(绑鞋带问题)

web前端笔试题

滴滴出行2016研发工程师笔试题(亮灯问题)

前端笔试题

前端笔试题[1]

2016京东Android研发校招笔试题