HTML5教程

80道前端面试经典选择题，值得收藏！

本文主要是介绍80道前端面试经典选择题，值得收藏！，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

前言

看了一下各种面试题，选择题是必有的

所以我整理了一些经典的前端面试选择题，希望能对大家日后找工作有所帮助！

cmd-markdown-logo

HTML/CSS

1、在 css 选择器当中，优先级排序正确的是（）

A、id选择器>标签选择器>类选择器

B、标签选择器>类选择器>id选择器

C、类选择器>标签选择器>id选择器

D、id选择器>类选择器>标签选择器

解析：

选D

4个等级的定义如下：

第一等：代表内联样式，如: style=””，权值为1000

第二等：代表ID选择器，如：#content，权值为100

第三等：代表类，伪类和属性选择器，如.content，权值为10

第四等：代表类型选择器和伪元素选择器，如div p，权值为1

2、下列定义的 css 中，哪个权重是最低的？（ ）

A、#game .name

B、#game .name span

C、#game div

D、#game div.name

解析：

选C

权重越大，优先级越高

CSS选择器优先级是指“基础选择器”的优先级：

ID > CLASS > ELEMENT > *

3、关于HTML语义化，以下哪个说法是正确的？（ ）

A、语义化的HTML有利于机器的阅读，如PDA手持设备、搜索引擎爬虫；但不利于人的阅读

B、Table 属于过时的标签，遇到数据列表时，需尽量使用 div 来模拟表格

C、语义化是HTML5带来的新概念，此前版本的HTML无法做到语义化

D、header、article、address都属于语义化明确的标签

解析：

选D

1、什么是HTML语义化？

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

2、为什么要语义化？

为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构

用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；

有利于SEO ：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：

爬虫依赖于标签来确定上下文和各个关键字的权重；

方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化

4、CSS 样式，下面哪一个元素能够达到最大宽度，且前后各有一个换行？（ ）

A、Block Element

B、Square Element

C、Side Element

D、Box Element

解析：

选A

块级元素block element

行内元素 inline element

行内块元素 inline-block element

5、下面使用Animate-timing-function定义的贝塞尔曲线，哪一个是先快后慢的（ ）

A、animation-timing-function :
cubic-bezier(.22,1.23,.97,.89)

B、animation-timing-function :
cubic-bezier(1.23,..22,97,.89)

C、animation-timing-function :
cubic-bezier(1.23,.97,.89,.22)

D、animation-timing-function ：
cubic-bezier(.22,.97,.89,1.23)

解析：

选A

cubic-bezier即为贝兹曲线中的绘制方法

有四点，分别为P0-3，其中P0、P3是默认的点，对应了[0,0], [1,1]。

而剩下的P1、P2两点则是我们通过cubic-bezier()自定义的。

cubic-bezier(x1, y1, x2, y2) 为自定义，x1,x2,y1,y2的值范围在[0, 1]。

6、放在HTML里的哪一部分JavaScripts会在页面加载的时候被执行？（ ）

A、文件头部位置

B、文件尾

C、<head>标签部分

D、<body>标签部分

解析：

选D

head部分中的JavaScripts会在被调用的时候才执行。

body部分中的JavaScripts会在页面加载的时候被执行。

7、问一份标准的HTML文档有哪几个必须的HTML标签？（ ）

A、<html>

B、<head>

C、<title>

D、<body>

解析：

选A、B、C、D

注意一下题目说的是标准的HTML文档

8、下列说法正确的有：（ ）

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

B、display:none;不为被隐藏的对象保留其物理空间；

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

D、visibility:hidden;产生reflow和repaint（回流与重绘）；

解析：

选A、B

visiblity:看不见，摸的着.

display:看不见，摸不着.

display是dom级别的，可以渲染和重绘。

visiblity不是dom级别的，不能重绘，只能渲染

9、请选出所有的置换元素（ ）

A、img

B、input

C、textarea

D、select

解析：

选A、B、C、D

置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容

例如：

浏览器会根据<img>标签的src属性的
值来读取图片信息并显示出来，而如果查看html代码，则看不到图片的实际内容；
<input>标签的type属性来决定是显示输入 框，还是单选按钮等。 
html中 的<img>、<input>、<textarea>、<select>、<object> 都是置换元素
这些元素往往没有实际的内容，即是一个空元素。
置换元素在其显示中生成了框，这也就是有的内联元素能够设置宽高的原因。

不可替换元素：html 的大多数元素是不可替换元素，即其内容直接表现给用户端（如浏览器）

例如：

<label>label中的内容</label> 标签<label>是一个非置换元素，文字label中的内容”将全被显示。

10、以下哪些动画效果无法通过贝塞尔曲线cubic-bezier实现（ ）

A、linear

B、ease

C、fade-in

D、ease-out

解析：

选C

fade-in和fade-out为淡入淡出效果

11、下面属于CSS3新增属性的有？（ ）

A、box-shadow

B、text-shadow

C、border-radius

D、rgba

解析：

选A、B、C、D

下边我对CSS3新增属性用法的整理：

1、box-shadow（阴影效果）

2、border-color（为边框设置多种颜色）

3、border-image（图片边框）

4、text-shadow（文本阴影）

5、text-overflow（文本截断）

6、word-wrap（自动换行）

7、border-radius（圆角边框）

8、opacity（透明度）

9、box-sizing（控制盒模型的组成模式）

10、resize（元素缩放）

11、outline（外边框）

12、background-size（指定背景图片尺寸）

13、background-origin（指定背景图片从哪里开始显示）

14、background-clip（指定背景图片从什么位置开始裁剪）

15、background（为一个元素指定多个背景）

16、hsl（通过色调、饱和度、亮度来指定颜色颜色值）

17、hsla（在hsl的基础上增加透明度设置）

18、rgba（基于rgb设置颜色，a设置透明度）

12、input元素的type属性的取值可以是( )

A、image

B、checkbox

C、button

D、select

解析：

选A、B、C

语法：

<input type=”value”>

属性值：

Button：定义可点击按钮(多数情况下，用于通过JavaScript启动脚本)

CheckBox：定义复选框

File：定义输入字段和”浏览”按钮，供文件上传

Hidden：定义隐藏的输入字段

Image：定义图像形式的提交按钮

Password：定义密码字段，该字段中的字符被遮码

Radio：定义单选按钮

Reset：定义重置按钮，重置按钮会清除表单中的所有数据

Submit：定义提交按钮，提交按钮会把表单数据发送到服务器

Text：定义单行输入字段，用户可在其中输入文本，默认宽度为20个字符

13、新窗口打开网页，用到以下哪个值（ ）

A、_self

B、_blank

C、_top

D、_parent

解析：

选B
在html中通过<a>标签打开一个链接，通过 <a> 标签的 target

属性规定在何处打开链接文档。

如果在标签<a>中写入target属性，则浏览器会根据target的属性值去打开与其命名或名称相符的 框架<frame>或者窗口.

在target中还存在四个保留的属性值如下，

_black：在新窗口中打开被链接文档

_self：默认。在相同的框架中打开被链接文档

_ parent：在父框架中打开被链接文档

_top：在整个窗口中打开被链接文档

framename：在指定框架中打开被链接文档

14、以下全部属于块级标签的是？（ ）

A、<div><p><input><span><img>

B、<div><h1><p><img><dl>

C、<span><h1><p><img><dl>

D、<div><p><form><ul><h1>

解析：

选D

在CSS中，html中的标签元素大体被分为三种不同的类型：

块状元素、内联元素（又叫行内元素）和内联块状元素

常见的块状元素有：

<div>、<p>、<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>

常见的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常见的内联块状元素有：

<img>、<input>

15、元素的alt和title有什么异同，选出正确的说法？（ ）

A、不同的浏览器，表现一样

B、alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字

C、alt和title同时设置的时候，title作为图片的替代文字出现，alt是图片的解释文字

D、以上说法都不正确

解析：

选B

alt是html标签的属性，而title既是html标签，又是html属性。

title标签这个不用多说，网页的标题就是写在

<title></title>

这对标签之内的。

title作为属性时，用来为元素提供额外说明信息。

例如，给超链接标签a添加了title属性
，把鼠标移动到该链接上面是，就会显示title的内容，以达到补充说明或者提示的效果。

而alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息

16、下列说法错误的是( )

A、设置display:none后的元素只会导致浏览器的重排而不会重绘

B、设置visibility:hidde后的元素只会导致浏览器重绘而不会重排

C、设置元素opacity:0之后，也可以触发点击事件

D、visibility:hidden的元素无法触发其点击事件

解析：

选A

设置display:none后的元素会导致浏览器的重排重绘

17、下列选项中，不属于CSS3样式选择器的是（ ）

A、empty选择器

B、root 选择器

C、target选择器

D、ID选择器

解析：

选D

ID选择器在css1中就定义了

18、超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了，解决方法是改变CSS属性的排列顺序？（ ）

A、a:link {} a:visited {} a:hover {} a:active {}

B、a:visited {} a:link {} a:hover {} a:active {}

C、a:active {} a:link {} a:hover {} a:visited {}

D、a:link {} a:active {} a:hover {} a:visited {}

解析：

选A

a:link; a:visited; a:hover; a:active;

a:hover必须放在a:link和a:visited之后；

a:active必须放在a:hover之后。

19、关于position定位，下列说法错误的是（ ）

A、fixed元素，可定位于相对于浏览器窗口的指定坐标，它始终是以 body 为依据

B、relative元素以它原来的位置为基准偏移，在其移动后，原来的位置不再占据空间

C、absolute 的元素，如果它的 父容器设置了 position 属性，并且 position 的属性值为 absolute 或者 relative，那么就会依据父容器进行偏移

D、fixed 属性的元素在标准流中不占位置

解析：

选B

absolute：

生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位，元素的位置通过”left”、”top”、”right”、以及”bottom”属性进行规定

fixed：

生成绝对定位的元素，相对于浏览器窗口进行定位，元素的位置通过”left”、”top”、”right”以及”bottom”属性进行规定

relative：

生成相对定位的元素，相对于其正常位置进行定位，因此，”left：20”会向元素的LEFT位置添加20像素

static：

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

inherit：

规定应该从父元素继承position属性的值

20、css中哪些属性可以继承（ ）

A、font-size

B、color

C、font-family

D、border

解析：

选A、B、C

margin padding border display 不可以继承

21、下列哪些是浏览器支持的锚伪类：（ ）

A、a:link

B、a:disabled

C、a:hover

D、a:active

解析：

选A、C、D

在支持 css 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态和鼠标悬停状态。用来表示链接不同状态的伪类就是锚伪类

a:link {color: green;} / 未访问的链接 /

a:visited {color: blue;} / 已访问的链接 /

a:hover {color:orange;} / 鼠标移动到链接上 /

a:active {color: yellow;} / 选定的链接 /

22、关于CSS选择器，以下说法正确的是：（ ）

A、每条选择器最多只能出现一个伪元素

B、每条选择器最多只能出现一个伪类

C、:nth-child(an+b)中n的取值从0开始

D、A+B匹配A之后所有符合B规则的元素

解析：

选A、C

C选项：

nth-child(an+b)在下标计算表达式an+b中：

a,b是系数可以是任意整数；

n就是个字面量“n”，表示是递增变量，并且取值是从0开始的整数。

D选项：

B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面）

23、列表分为两类，一是无序列表，一是有序列表，以下哪个是无序列表？（ ）

A、<UL>

B、<OL>

C、<DIR>

D、<DL>

解析：

选A

Ul无序列表

OL有序列表

24、浮动会导致页面的非正常显示，以下几种清除浮动的方法，哪个是不推荐使用的？（ ）

A、在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>

B、通过设置父元素overflow值为hidden；

C、父元素也设置浮动

D、给父元素添加clearfix类

解析：

选C

这四种方法都可以清除，最常用的是DA方法；

B方法的话，如果子元素中有使用了绝对定位，在页面上显示是在父元素外面，一般就没法使用B方法了。

大型项目一般会多层嵌套，如果采用给父元素设置浮动的方法，那么父元素的父元素很有可能也要设置浮动，页面布局很容易乱掉

25、下列关于web页面级优化描述最正确的是（ ）

A、减少HTTP请求的次数

B、进行资源合拼和压缩

C、Inline images

D、将外部脚本置于低端

E、减少不必要的HTTP跳转

F、以上描述都对

解析：

选F

1、减少HTTP请求的次数。

http协议是无状态的应用层协议，每次http请求都需要建立通信链路、进行数据传输，而在服务器端每个http都需要启动独立的线程去处理，这些通信和服务的开销都很昂贵。所以减少http请求的数目可有效提高访问性能，A正确。

2、进行资源合拼和压缩。

合并CSS、合并javascript、合并图片，将浏览器一次访问需要的javascript和CSS合并成一个文件，这样浏览器就只需要一次请求。在服务器端对文件进行压缩，在浏览器端对文件解压缩，可有效减少通信传输的数据量，B正确。

3、Inline images，使用data: URL

scheme的方式将图片嵌入到页面或CSS中嵌入页面，因为直接嵌入页面增大了页面的体积，而且无法利用浏览器缓存。所以使用在CSS中的图片则更为理想一些，C正确。

4、将外部脚本置于低端

浏览器在加载javascript后立即执行，有可能会阻塞整个页面，造成页面显示缓慢，因此javascript最好放在页面最下面，D正确。

5、减少不必要的HTTP跳转

对于以目录形式访问的HTTP链接，很多人都会忽略链接最后是否带’/’，假如你的服务器对此是区别对待的话，那么你也需要注意，这其中很可能隐藏了301跳转，增加了多余请求，E正确

26、网页开发中，一般需判断浏览器类型，需通过userAgent中获取浏览器内核来判断，下列说法错误的是？（ ）

A、一直到IE9，都是Trident内核

B、firefox是Gecko内核

C、chrome是webkit内核

D、IE是目前最快的浏览器

解析：

选D

-moz代表firefox浏览器私有属性

-ms代表IE浏览器私有属性

-webkit代表chrome、safari私有属性 IE使用的是Trident内核，Firefox

使用的是Gecko内核。目前使用IE内核的浏览器还有搜狗，遨游，360等等。

27、关于浮动元素，下面说法错误的是（ ）

A、如果有多个浮动元素，浮动元素会按顺序排下来而不会发生重叠的现象

B、浮动元素会尽可能地向顶端对齐、向左或向右对齐

C、如果有非浮动元素和浮动元素同时存在，并且非浮动元素在前，则浮动元素不会高于非浮动元素

D、行内元素与浮动元素发生重叠，其边框，背景和内容都会显示在浮动元素之下

解析：

选D

行内元素与浮动元素发生重叠，边框、背景、内容都会显示在浮动元素之上

块级元素与浮动元素发生重叠，边框、背景会显示在浮动元素之下，内容会显示在浮动元素之上

28、要将下面代码中超链接文本呈现为红色，不可以使用的样式表是（ ）

<div><a href="http://www.w3.org/">**链接到W3C**</a></div>
A、a:link{color:red}

B、div a:link{color:red}

C、div&gt;a:link{color:red}

D、div:first-child{color:red}

解析：

选D
div：first-child

表示选择属于父元素的第一个子元素的每个<div>元素

29、下列哪个不属于id与class之间的区别（ ）

A、id在文档中只能使用一次，而class可以多次使用

B、id比class具有更高的样式优先级

C、一个元素只能有一个id属性值，却可以拥有多个class属性值

D、在class中可以定义:hover伪类，在id中不能定义

解析：

选D

在样式表定义一个样式的时候，可以定义id也可以定义class。

1、在CSS文件里书写时，ID加前缀"#"；CLASS用"."

2、id一个页面只可以使用一次；class可以多次引用。

3、ID是一个标签，用于区分不同的结构和内容；class是一个样式，可以套在任何结构和内容上

4、从概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。

30、把鼠标移到按钮并点击时，会产生一串什么样的事件（ ）

A、active hover focus

B、foucs hover active

C、hover active foucus

D、hover focus active

解析：

选D

触发顺序为 link-->visited--->hover--->active

31、下列哪些是HTML5相关的框架或类库：( )

A、spring-core

B、RactiveJS

C、Dubbo

D、Bootstrap

E、AngularJS

F、Hibernate

解析：

选B、D、E

Spring框架是一个开放源代码的J2EE应用程序框架

Dubbo是一款高性能、轻量级的开源Java RPC框架

Hibernate是一个开放源代码的对象关系映射框架

32、css中clear的作用是什么？（ ）

A、清除该元素所有样式

B、清除该元素父元素的所有样式

C、指明该元素周围不可出现浮动元素

D、指明该元素的父元素周围不可出现浮动元素

解析：

选C

clear : none | left | right | both.

对于CSS的清除浮动(clear)，

这个规则只能影响使用清除的元素本身，不能影响其他元素

33、css 中可继承的属性有哪些（ ）

A、height

B、font-size

C、border

D、width

E、color

解析：

选B、E

所有元素可继承：visibility和cursor。

内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。

终端块状元素可继承：text-indent和text-align。

列表元素可继承：list-style、list-style-type、list-style-position、list-style-image

JavaScript

1、JavaScript中window对象的子对象不包含以下哪个对象？（ ）

A. document   B. self   C. history   D. message

解析：

选D

window的主对象主要有如下几个：

document   frames   history  location   navigator   screen

window、self、window.self三者是等价的

2、将一个整数序列整理为升序，两趟处理后变为10,12,21,9,7,3,4,25，则采用的排序算法可能Z:（ ）

A、插入排序

B、快速排序

C、选择排序

D、堆排序

解析：

选C

第一层循环：依次遍历序列当中的每一个元素

第二层循环：将遍历得到的当前元素依次与余下的元素进行比较

符合最小元素的条件，则交换

选择排序的基本思想：比较+交换

3、下边这代码输出的结果是：( )

function showCase(value) {
    switch(value) {
    case 'A':
        console.log('Case A');
        break;
    case 'B':
        console.log('Case B');
        break;
    case undefined:
        console.log('undefined');
        break;
    default:
        console.log('Do not know!');
    }
}
showCase(new String('A'));

A、Case A

B、Case B

C、undefined

D、Do not know!

解析：

选D

此题考查的是关于new string();其中new是一个实例对象,要匹配的也是object,
所以输出结果为Do not know

4、下边这代码输出的结果是（ ）

var two   = 0.2
var one   = 0.1
var eight = 0.8
var six   = 0.6
console.log([two - one == one, eight - six == two]);

A、[true, true]

B、[false, false]

C、[true, false]

D、other

解析：

选C

这题考的是浮点数计算时精度丢失问题

5、以下代码的执行结果是什么（ ）

var string = 'string';  
var number = 0;       
var bool = true;     
console.log(number || string);      
console.log(number && string); 
console.log(bool || number);
console.log(bool && number);

A. ‘string’, 0, true,0

B. ‘string’, true,0, 0

C. ‘string’, ‘string’,true, 0

D. ‘string’, 0, true,true

解析：

选A
var string = 'string';               对象为true
var number = 0;                      非零数字为true
var bool = true;                     非空字符串为true
console.log(number || string);         其他为false
console.log(number && string);          
console.log(bool || number);
console.log(bool && number);

6、下面可以匹配的正则表达式是（ ）

<img src=”http://image.163.com”></img>
A、<img src=”[^”]*”></img>

B、<img src=”[.”]*”></img>

C、<img src=”[^”]*></img>

D、<img src=”[.”]*></img>

<font color=#F4A460>解析：</font>

选A
var a='<IMG src="http://image.163.com">'
          var b=/<IMGsrc="[^"]*">/gi          
           var s=a.match(b)                           
        for(var i= 0;i<s.length;i++)             
            {                                         
                      alert(s[i]);
                    alert(RegExp.$1)
               }

7、["1", "2", "3"].map(parseInt) 返回的结果为（ ）

A：["1", "2", "3"]

B：[1, 2, 3]

C：[0, 1, 2]

D：other

解析：

选D

这题的答案是：[1,NaN,NaN]

该题用到了map与parseInt；parseInt() 函数的语法是parseInt(string, radix)；

string 必需。要被解析的字符串。

radix可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。

如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。

如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN
实际上map里的callback函数接受的是三个参数 分别为元素 下标和数组
回调函数的语法如下所示：
function callbackfn(value, index, array1)
可使用最多三个参数来声明回调函数。

8、[typeof null, null instanceof Object]这些类型的结果是（ ）

A: ["object", false]

B: [null, false]

C: ["object", true]

D: other

解析：

选A

这题考察的是typeof运算符和instanceof运算符

typeof运算符，一些基础类型的结果是：

Undefined "undefined"

Null "object"

Boolean "boolean"

Number "number"

String "string"

Any other object "object"

Array "object"

Null instanceof任何类型都是false

9、下边代码输出的结果是（ ）

var val = 'smtg';
console.log('Value is ' + (val === 'smtg') ? 'Something' : 'Nothing');

A: Value is Something

B: Value is Nothing

C: NaN

D: other

解析：

选D

这题考的是js中的运算符优先级，

这里’+’运算符的优先级要高于’?’

所以val === ‘smtg’实际上就是true

所以结果为’Something’

10、下边代码输出的结果是（ ）

var name = 'World!';
(function () {
    if (typeof name === 'undefined') {
        var name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();

A: Goodbye Jack

B: Hello Jack

C: Hello undefined

D: Hello World

解析：

选A

这题考的是js作用域中变量的提升，

js的作用于中使用var定义变量都会被提升到所有代码的最前面，

所以var name目前是undefined,

题目的typeof name === ‘undefined’的结果为true时，就会输出’Goodbye Jack’

11、var arr = [];typeof arr 的结果是（ ）

A、array

B、function

C、object

D、undefined

解析：

选C

5种简单数据类型（也称基本数据类型）：

Undefined、Null、Boolean、Number、String

1种复杂数据类型：Object（基本上除了上述5种，其余都是Object）

12、以下代码执行后，console 的输出是（ ）

function Foo(){
console.log(this.location);
}
Foo();

A、当前窗口的 Location 对象

B、undefined

C、null

D、TypeError

解析：

选A

这题考的是this的用法

'use strict'条件下，会报TypeError

无'use strict'下，this指向window

13、下列事件哪个不是由鼠标触发的事件（）

A、click

B、contextmenu

C、mouseout

D、keydown

解析：

选D

常见的事件：

    1. 点击事件：
        1. onclick：单击事件
        2. ondblclick：双击事件

    2. 焦点事件
        1. onblur：失去焦点
        2. onfocus:元素获得焦点。

    3. 加载事件：
        1. onload：一张页面或一幅图像完成加载。

    4. 鼠标事件：
        1. onmousedown    鼠标按钮被按下。
        2. onmouseup    鼠标按键被松开。
        3. onmousemove    鼠标被移动。
        4. onmouseover    鼠标移到某元素之上。
        5. onmouseout    鼠标从某元素移开。
    5. 键盘事件：
        1. onkeydown    某个键盘按键被按下。    
        2. onkeyup        某个键盘按键被松开。
        3. onkeypress    某个键盘按键被按下并松开。

    6. 选择和改变
        1. onchange    域的内容被改变。
        2. onselect    文本被选中。

    7. 表单事件：
        1. onsubmit    确认按钮被点击。
        2. onreset    重置按钮被点击。

14、如何遍历下面的 my_data 对象？（ ）

var my_data={a:’Ape’, b:’Banana’, c:’Citronella’};

A、for(var key in my_data) {}

B、foreach(my_data as key=>value) {}

C、for(var i=0;i<my_data.length;i++) {}

D、全不正确

解析：

选A

for in遍历对象所拥有的属性(可枚举的)

由于对象和数组不同，不能用下标来访问，只能用for in遍历

15、如何判断一个js对象是否是Array,arr为要判断的对象，其中最准确的方法是？（ ）

A、typeof(arr)

B、arr instanceof Array

C、arr.toString==='[object Array]';

D、Object.prototype.toString.call(arr) === '[object Array]';

解析：

选D

A选项中的typeof(arr) 返回的是 Object

instanceof 在跨 frame 对象构建的场景下会失效

arr.toString 没有这种用法，正确的用法是 arr.toString() 返回的是数组的内容

16、在很多时候，我们需要给网页中的一些元素不停的切换样式，那么要怎样实现给元素删除一个样式的同时，添加另外一个样式（ )

A、

$('#ele').removeClass('className');
$('#ele').addClass('ClassName');

B、

$('us').removeClass('className');
$('us').addClass('ClassName');

C、

$('.us').removeClass('className');
$('.us').addClass('ClassName');

D、

$('us').remove('className');
$('us').add('ClassName');

解析：

选A

B选项错

选项使用元素选择器，但是 HTML 中没有 us 标签

C选项错

选项使用类选择器，但是删除了类样式后，如何通过类选择器给元素添加样式

D选项错

add() 方法：把元素添加到已存在的元素组合中。

remove() 方法：移除被选元素，包括所有的文本和子节点。

17、下列代码hasOwnProperty的作用是？（ ）

var obj={}
……..
obj.hasOwnProperty("val")

A、判断obj对象是否具有val属性

B、判断obj对象是否具有val的值

C、判断obj的原型对象是否具有val的属性

D、判断obj的原型对象是否具有val的值

解析：

选A

hasOwnProperty：

是用来判断一个对象是否有你给出名称的属性或对象

isPrototypeOf :

是用来判断要检查其原型链的对象是否存在于指定对象实例中，是则返回true，否则返回false。

18、下列不属于javascript内置对象的是（ ）

A、Math

B、Date

C、RegExp

D、Window

E、Error

解析：

选D

js中的内部对象包括

Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、String以及各种错误类对象，
包括Error、EvalError、RangeError、ReferenceError、SyntaxError和TypeError。

19、javascirpt中的数字在计算机内存储为多少Byte（ ）

A、2 Byte

B、4Byte

C、8Byte

D、16Byte

解析：

选C

"JavaScript内部，所有数字都是以64位浮点数形式储存，即使整数也是如此。"

8 Byte = 64bit ;

8个字节，64位

20、以下运行结果（ ）

for(var i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}

A、0--9

B、10个10

C、10个9

D、无限循环

解析：

选B

setTimeout中的闭包函数是每1s执行一次

由于for循环的执行速度远小于1s，

所以当开始执行闭包函数的时候for循环已经结束了（i=10），

之后闭包函数执行十次（因为循环了10次），所以打印了10个10。

21、若需给子scope发送消息，需使用哪个方法（ ）

A、$emit()

B、$broadcast()

C、$on()

D、$send()

解析：

选B

$broadcast是向下传播事件

22、函数的调用方式有哪些：（ ）

A、直接调用

B、作为对象方法调用

C、作为构造函数调用

D、通过call和apply方法调用

解析：

选A、B、C、D

cmd-markdown-logo

23、下拉菜单中，用户更改表单元素Select中的值时，就会调用（ ）事件处理程序

A、onMouseOver

B、onFocus

C、onChange

D、onClick

解析：

选C

切换下拉菜单更改状态用onchange

A选项：鼠标事件

B选项：焦点事件一般是input

C选项：改变状态

D选项：点击事件

24、在ES6规范中，以下类型哪些属于基本数据类型（ ）

A、String

B、Null

C、Undefined

D、Symbol

解析：

选A、B、C、D

基本数据类型：

Number,String, Null, Undefined,  Boolean，Symbol（es6新增）

引用数据类型：

Object，Function

25、语句var arr=[a,b,c,d];执行后，数组arr中每项都是一个整数，下面得到其中最大整数语句正确的是哪几项？（ ）

A、Math.max(arr)

B、Math.max(arr[0], arr[1], arr[2], arr[3])

C、Math.max.call(Math, arr[0], arr[1], arr[2], arr[3])

D、Math.max.apply(Math,arr)

解析：

选B、C、D

因为传入的数组，所以A选项错误

C选项，Function.call()可以传入任意多个参数，所以C正确

D选项，Function.apply()第二个参数以数组形式传递，所以D正确

26、以下结果里，返回true的是（ ）

A、!![]

B、1===’1’

C、null===undefined

D、!!’’

解析：

选A

A选项，由于数组属于对象类型，所以空的数组转换成布尔型是true，前置！！，两次取反，返回true。A正确。

B选项，“===”同等于（包含数据类型），左右两端数据类型不同，因此返回false。

C选项，同上，由于左右两端数据类型不同，返回false。

D选项，字符的编码值为0的字符，因此返回false。

27、JavaScript实现继承的方式，不正确的是( )

A、原型链继承

B、构造函数继承

C、组合继承

D、关联继承

解析：

选D

JavaScript实现继承共6种方式：

原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承。

28、以下代码执行后，console 的输出是（ ）

let x = 10;
let foo = () => {
console.log(x);
let x = 20;
x++;
}
foo();)

A、抛出 ReferenceError

B、10

C、20

D、21

解析：

选A

let不存在变量提升，所以没有事先声明。

let块级作用域，所以不会去访问外部的x。

既不会访问外部，又没有事先声明，输出x便会报错

29、关于 this 的工作原理，下面 4 种情况的描述哪一个是错误的？（ ）

A、在全局范围内，this指向全局对象（浏览器下指window）

B、对象函数调用时，this指向当前对象

C、全局函数调用时，this指向全局函数

D、使用new实例化对象时，this指向新创建的对象

解析：

选C

this有四种情况！

1、当在函数调用的时候指向widow

2、当方法调用的时候指向调用对象

3、当用apply和call上下文调用的时候指向传入的第一个参数

4、构造函数调用指向实例对象

JS中this关键字， 它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。

全局函数调用时，this指向全局函数； 应该是指向调用全局函数的对象。

30、以下js操作Array的方法中不能添加元素的是：（ ）

A、push

B、pop

C、unshift

D、splice

解析：

选B

数组.pop(): 删除数组的最后一项，该表达式返回最后一项的数据

31、关于javascript，以下选项描述错误的是（ ）

A、在原型上扩展的可枚举方法，会被for in循环出来

B、使用object.defineProperty可向对象添加或者修改属性

C、通过hasOwnProperty可判断一个对象以及其原型链上是否具有指定名称的属性

D、原型链是JS实现继承的一种模型

E、每个对象都有prototype属性，返回对象类型原型的引用

F、For循环是按顺序的，for in 循环是不一定按顺序的

解析：

选C

hasOwnProperty方法是用来检测给定的属性是否在当前对象的实例中。

32、关于ES6的使用以下描述错误的是？（ ）

A、

const a = 1;

const b = 2;

const map = {a, b};

B、

enum TYPE {
OK,
YES
}

C、

class A {
constructor (a) {
this.a = a;
}
}
class AA extends A {
constructor (a, b) {
super(a);
this.b = b;
}
toString () {
return this.a + '' + this.b;
}
}

D、

function* greet(){

yield
"How";

yield
"are";

yield
"you";

}

var greeter = greet();

console.log(greeter.next().value);

console.log(greeter.next().value);

console.log(greeter.next().value);

解析：

选B

es6中将构造方法的function换成了class，

用于与普通函数区分，其中的属性都放在constructor中，

方法在原型中，子类继承采用extends关键字;对于es6中枚举的使用，

只能是以类的方式定义枚举类，不能直接使用enum关键字

33、获取 input 节点的错误方法是( )

<form class="file" name="upload">
<input id="file" name="file" />
</form>

A、document.querySelectorAll('file')[0]

B、document.getElementById('file')[0]

C、document.getElementByTagName('file')[0]

D、document.getElementById('file')

解析：

选A、B、C、D

A选项：应该是 document.querySelectorAll('#file')[0]

B选项：应该是 document.getElementById('file')

C选项：应该是 document.getElementsByTagName('input')[0]

D选项：input标签中就没有class属性

34、下列哪些会返回false（ ）

A、null

B、undefined

C、0

D、‘0'

解析：

选A、B、C

cmd-markdown-logo

35、以下哪些选项可以将集合A转化为数组（ ）

A、Array.form(A)

B、[].slice.apply(A)

C、[…A]

D、[].map.call(A, o => o)

解析：

选A、B、C、D

A选项：可以把对象转换成真正的数组

B选项：slice( )方法可从已有的数组中返回选定的元素

C选项：展开运算符，把A集合的元素展开后，用数组[]承载，返回新的数组

D选项：map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值

36、js数组的方法中，哪些方法不能改变自身数组（ ）

A、splice

B、concat

C、sort

D、pop

解析：

选B

splice删除数据会改变数组

concat连接数组但是不改变院数组

sort排序会改变数组

pop出栈返回最后一个最后一个元素，改变数组

37、下面有关JavaScript中 call和apply的描述，错误的是( )

A、call与apply都属于Function.prototype的一个方法，所以每个function实例都有call、apply属性

B、apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入

C、call传入的则是直接的参数列表。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

D、两者传递的参数不同，call函数第一个参数都是要传入给当前对象的对象，apply不是

解析：

选D

call, apply方法它们除了第一个参数,即执行时上下文对象相同外,

call方法的其它参数将依次传递给借用的方法作参数,而apply就两个参数,

第二个参数为一个数组传递

38、白屏时间first paint和可交互时间dom ready的关系是（ ）

A、先触发first paint ，后触发dom ready

B、先触发dom ready，后触发first paint

C、一起触发

D、没关系

解析：

选A

白屏时间（first Paint Time）——用户从打开页面开始到页面开始有东西呈现为止

首屏时间——用户浏览器首屏内所有内容都呈现出来所花费的时间

用户可操作时间(dom Interactive)——用户可以进行正常的点击、输入等操作，默认可以统计domready时间，因为通常会在这时候绑定事件操作

总下载时间——页面所有资源都加载完成并呈现出来所花的时间，即页面 onload 的时间

39、最后一句alert的输出结果是( )

var msg='hello'; 
for (var i=0; i<10; i++)
 { 
   var msg='hello'+i*2+i; 
 }
 alert(msg);

A、hello

B、hello27

C、hello30

D、hello189

解析：

选D

这里只是for循环不是函数，

因此for内部定义的msg与for外部定义的msg为在同一块作用域，为同一个变量。

输出hello189

hello+9*2+9

40、要在10秒后调用checkState，下列哪个是正确的（ ）

A、window.setTimeout(checkState, 10);

B、window.setTimeout(checkState(), 10);

C、window.setTimeout(checkState, 10000);

D、window.setTimeout(checkState(), 10000);

解析：

选C

checkState加了( )相当于函数表达式，会立即执行，执行的结果作为返回值传递给settimeout

10 s 应该为 10000

所以选C

41、下列代码得到的结果是（ ）

console.log(([])?true:false); 
console.log(([]==false?true:false)); 
console.log(({}==false)?true:false)

A、false true true

B、true true false

C、true false true

D、true true true

解析：

选B
Boolean([]); //true
Number([]); //0
Number({}); // NaN
Number(false); //0
console.log(([])?true:fasle);// => console.log((true)?true:false);
console.log([]==false?true:false); // => console.log(0==0?true:false);
console.log(({}==false)?true:false); // => console.log((NaN==0)?true:false);

第一个

([])布尔转换成true

第二个

==相等比较时，允许类型转换

其他类型值和布尔值==比较时，先将布尔值强制转换为对应数字，再进行比较

[]==false

[]==0

[]和数字相等比较时转数字0

0==0

true

第三个

{}==false

{}==0

NaN==0

false

42、JavaScript定义var a="40",var b=7,则执行a%b会得到( )

A、null

B、undefined

C、5

D、"5"

解析：

选C

运算中，+号，数字隐式转换成字符串

其余的运算符号是字符串隐式转换成数字

43、下列关于闭包描述正确的是？（ ）

A、(function(){})()理论上是一个闭包

B、闭包不耗内存，可以随意使用

C、闭包内变量执行后不会被清除

D、闭包不满足链式作用域结构

解析：

选A、C

逻辑上立即执行函数可以理解为：声明闭包函数-执行-释放内存

闭包内变量要到整个闭包被清除的时候才会清除

44、在ECMAScript6 中,promise的状态有（ ）

A、Pending

B、Pause

C、Resolved

D、Rejected

解析：

选A、C、D

Promise 对象代表一个异步操作，有3种状态：

Pending(进行中)、Resolved(已完成，又称Fulfilled)和Rejected(已完成)’

45、下面有关浏览器中使用js跨域获取数据的描述，说法错误的是（ ）

A、使用window.name来进行跨域

B、域名、端口相同，协议不同，属于相同的域

C、js可以使用jsonp进行跨域

D、通过修改document.domain来跨子域

解析：

选B

只要 协议、域名、端口有任何一个不同, 都被当作是不同的域

46、下面关于DNS说法正确的是（ ）

A、DNS协议端口号为53

B、DNS的作用是域名和IP地址的相互映射

C、DNS协议大多数运行在UDP协议之上

D、DNS的默认缓存时间为1小时

解析：

选A、C

A选项：DNS协议默认端口号是53

B选项：DNS就是将域名翻译成IP地址。

C选项：主要用UDP，但是当请求字节过长超过512字节时用TCP协议，将其分割成多个片段传输

D：操作系统的DNS缓存：windows DNS缓存的默认值是 MaxCacheTTL，它的默认值是86400s，也就是一天。macOS 严格遵循DNS协议中的TTL。
游览器的DNS缓存：chrome对每个域名会默认缓存60s；IE将DNS缓存30min；Firefox默认缓存时间只有1分钟；Safari约为10S。

47、下面运行结果正确的是（ ）

var a = {}, b = Object.prototype;
[a.prototype === b, Object.getPrototypeOf(a) === b]

A、other

B、[true, true]

C、[false, false]

D、[false, true]

解析：

选D

这题考的是__proto__和prototype的区别

Object实际上是一个构造函数（typeof Object的结果为"function"）

使用字面量创建对象和new Object创建对象是一样的，

所以a.__proto__也就是Object.prototype，

而Object.getPrototypeOf(a)与a.__proto__是一样的，所以第二个结果为true

而实例对象是没有prototype属性的，只有函数才有

所以a.prototype其实是undefined，第一个结果为false

48、下面运行结果正确的是（ ）

var a = /678/,
    b = /678/;
a == b
a === b

A、other

B、true，true

C、true、false

D、false、false

解析：

选D

JavaScript中的正则表达式依旧是对象，使用typeof运算符就能得出结果：object

运算符左右两边都是对象时，比较他们是否指向同一个对象

最后

希望看到文章的同学都有收获！

文章要是有不对的地方还望指正！

最后祝大家都越来越优秀！

欢迎大家加入，一起学习前端，共同进步！
cmd-markdown-logo
cmd-markdown-logo

这篇关于80道前端面试经典选择题，值得收藏！的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航