阿里最前端工程师面试题和答案题

灰太狼 2021-02-01 17:57 1375阅读 0赞

**一、单选题（共21题，每题5分）**

**1.为每一个指定元素的指定事件（像click）绑定一个事件处理器函数，下面哪个是用来实现该功能的？**

A、trigger (type)

B、bind(type)

C、one(type)

D、bind

**参考答案：B**

答案解析：暂无

**2.哪一个html盒模型中的border的正确写法？**

A、p\{ border:5px solid red;\}

B、p\{border:5px <br> red solid; \}

C、p\{border: red solid 5px; \}

D、p\{border: solid red 5px; \}

**参考答案：A**

答案解析：为了代码的可读性，建议按照，border-width，border-style，border-color，的顺序书写。

但其实顺序调换是不影响呈现的

**3.关于适配器模式，说法错误的是？**

A、适配器继承或依赖已有的对象，实现想要的目标接口

B、主要解决在软件系统中，常常要将一些"现存的对象"放到新的环境中，而新环境要求的接口是现对象不能满足的

C、定义了算法家族，分别封装起来，让他们之间可以相互替换，此模式让算法的变化不会影响到使用算法的客户

D、将一个类的接口转换成客户希望的另外一个接口。适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。

**参考答案：C**

答案解析：将一个类的接口转换成客户希望的另外一个接口。适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作 适配器继承或依赖已有的对象，实现想要的目标接口 主要解决在软件系统中，常常要将一些"现存的对象"放到新的环境中，而新环境要求的接口是现对象不能满足的

**4.以下几种在HTML文档中通过CSS的方式将文档颜色设置为红色背景错误的是：（  ）**

A、内联样式表：`<body style=”background-Color:red”></body>`

B、嵌入样式表：`<style> body \{ background-Color:red \} </style>`

C、外部样式表：在当前目录下创 建一个test.css文件，在文件中声明一条`<style> body \{ background-Color:red \} </style>`代码，并在HTML文档中通过`<link style=”text/css” rel=”stylesheet” href=”test.css”>`将其链接到本文档中使用

D、输入样式表：在当前目录下创建一个test.css文件，在文件中声明一条body \{ background-Color:red \} 代码，并在HTML文档中通过`<style>@import url(test.css);</style>`输入到本文档中使用

**参考答案：C**

答案解析：暂无

**5.在 HTML5 中，哪个方法用于获得用户的当前位置？**

A、getPosition()

B、getCurrentPosition()

C、getUserPosition()

D、getLocation()

**参考答案：B**

答案解析：getCurrentPosition（）获取用户当前位置放入一个值中保存，getLocation()地图定位

**6.对于下拉菜单，错误的是？**

pre class="prettyprint"><div class="dropdown"> <button class="btn btn-" tabindex="-1">Separated link</a></li>
    defaultdropdowtoggle" data-toggle="dropdown" id="dropdownMenu1" type="button">
    
     Dropdown
    
     <span class="caret"></span>
    
     </button>
    
     <ul aria-labelledby="dropdownMenu1" class="dropdown-menu" role="menu"><li role="presentation"><#" role="menuitem" tabindex="-1">Action</a></li> <li r"presentation"><a href="#" role="menuitem" tabindex="-1">Anotheaction</a></li>
    
     <li rolef="#" role="menuitem" tabindex="-1">Something else here</a></li>
    
     <li role="presentation"><a href="#" role="menuitem" tabindex="-1">Separated link</a></li>
    
    <pre class="prettyprint"><div class="dropdown">
    
     <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1" type="button">
    
     Dropdown
    
     <span class="caret"></span>
    
     </button>
    
     <ul aria-labelledby="dropdownMenu1" class="dropdown-menu" role="menu"><li role="presentation"><a href="#" role="menuitem" tabindex="-1">Action</a></li>
    
     <li role="presentation"><a href="#" role="menuitem" tabindex="-1">Another action</a></li>
    
     <li role="presentation"><a href="#" role="menuitem" tabindex="-1">Something else here</a></li>
    
     <li role="presentation"><a href="#" role="menuitem

A、表示了一个有五个下拉选项的下拉菜单

B、`<span class="caret"></span>`可以去掉而不影响功能

C、可以加入pull-right使菜单右对齐

D、可加入dropdown-menu-right使菜单右对齐

**参考答案：A**

答案解析：这道题我一眼就看出A有错了，可是还是让我纠结了好久，怎么会有这么低级的问题，空城计吗

**7.下面关于 CSS 布局的描述，不正确的是？（ ）**

下面关于CSS布局的描述，不正确的是？（）

A、块级元素实际占用的宽度与它的 width 属性有关；

B、块级元素实际占用的宽度与它的 border 属性有关；

C、块级元素实际占用的宽度与它的 padding 属性有关；

D、块级元素实际占用的宽度与它的 background 属性有关。

**参考答案：D**

答案解析：D 块级元素实际占用的宽度=width+border\*2+padding\*2+margin\*2 所以与width border padding margin有关，与background无关

**8.以下JavaScript代码输出的结果是？**

var a = '5' + 3var b = '5' - 3
    
    console.log(a, b)

JavaScript

A、53, 2

B、8, 2

C、error

D、都不对

**参考答案：A**

答案解析：这是一道隐式类型转换的题 加法： 加法运算中，如果有一个操作值为字符串类型，则将另一个操作值转换为字符串，最后连接起来 减法： 如果操作值之一不是数值，则被隐式调用Number()函数进行转换 所以第一行结果为字符串运算，为'53'。第二行结果为2，选A**9.在jQuery中，有以下代码， 以下说法正确的是 ？**

$(".btn").click(function () {
    
        var json = [{"S_Name": "周颜", "S_Sex": "男"}, {"S_Name": "周颖", "S_Sex": "女"}];
    
        $.each(json, function (index, s) {
    
            alert(s.S_Name + "," + s.S_Sex);//语句1
    
        });});

JavaScript

A、此代码不会正常运行

B、语句1会被执行1次

C、语句1会被执行2次

D、$.each()函数的用法有误

**10.虽然不同的操作系统可能装有不同的浏览器。但是这些浏览器都符合（ ）协议。**

A、SNMP

B、 HTTP

C、HTML

D、SMTP

**参考答案：B**

答案解析：

简单网络管理协议（SNMP），由一组网络管理的标准组成，该协议能够支持网络管理

系统，用以监测连接到网络上的设备是否有任何引起管理上关注的情况。

HTTP协议（HyperText Transfer Protocol，超文本传输协议）是客户端浏览器或其他程序与WEB服务器之间的应用层通信协议。

超文本标记语言（HTML），标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。

SMTP（Simple Mail Transfer Protocol，简单邮件传输协议）,它是一组用于由源地址到目的地址传送邮件的规则，由它来控制信件的中转方式。SMTP协议属于TCP/IP协议簇，它帮助每台计算机在发送或中转信件时找到下一个目的地。

**11.css属性position的值不包含**

A、absolute

B、inherit

C、box

D、static

**参考答案：C**

答案解析：absolute，生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位； 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定； fixed，生成绝对定位的元素，相对于浏览器窗口进行定位； 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 relative，生成相对定位的元素，相对于其正常位置进行定位； static，默认值，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）； inherit，规定应该从父元素继承 position 属性的值。.

**12.以下全部属于块级标签的是？**

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**

答案解析：

**13.关于下面HTML代码，说法正确的是?**

</table
    
    HTML

A、该表格共有2行3列

B、该表格的边框宽度为10毫米

C、该表格中的文字均居中显示

D、"公司"单元格跨2行

**14.基于哈希算法在信息安全中主要应用在？**

*  (1) 文件校验
 *  (2) 数字签名
 *  (3) 鉴权协议

A、(1)(2)

B、(1)(3)

C、(2)(3)

D、(1)(2)(3)

**参考答案：D**

答案解析：Hash算法在信息安全方面的应用主要体现在以下的3个方面： （1)文件校验 我们比较熟悉的校验算法有奇偶校验和CRC校验，这2种校验并没有抗数据篡改的能力，它们一定程度上能检测并纠正数据传输中的信道误码，但却不能防止对数据的恶意破坏。 MD5 Hash算法的"数字指纹"特性，使它成为目前应用最广泛的一种文件完整性校验和(Checksum)算法，不少Unix系统有提供计算md5 checksum的命令。 （2)数字签名 Hash 算法也是现代密码体系中的一个重要组成部分。由于非对称算法的运算速度较慢，所以在数字签名协议中，单向散列函数扮演了一个重要的角色。对 Hash 值，又称"数字摘要"进行数字签名，在统计上可以认为与对文件本身进行数字签名是等效的。而且这样的协议还有其他的优点。 （3) 鉴权协议 如下的鉴权协议又被称作挑战--认证模式：在传输信道是可被侦听，但不可被篡改的情况下，这是一种简单而安全的方法。以上就是一些关于hash以及其相关的一些基本预备知识。

**15.下面哪条声明能固定背景图片（）**

A、background-attachment:fixed;

B、background-attachment:scroll;

C、background-origin: initial;

D、background-clip: initial;

**参考答案：A**

答案解析：

background-attachment

有三个值，scroll是默认值，背景图像会随着页面其余部分的滚动而移动。

fixed当页面的其余部分滚动时，背景图像不会移动。

inherit规定应该从父元素继承 background-attachment 属性的设置。

background-origin

属性规定 background-position 属性相对于什么位置来定位。

background-clip

属性规定背景的绘制区域。

**16.以下选项不能够正确地得到这个标签：（）**

**`<input class="btn" id="btnGo" type="button" value="单击我"></input>`**

A、  $("\#btnGo")

B、  $(".btnGo")

C、  $(".btn")

D、  $("input\[type='button'\]")

**参考答案：B**

答案解析：注意是题目是选不能

**17.在jquery中想要实现通过远程http get请求载入信息功能的是下面的哪一下事件？**

A、$.ajax()

B、load(url)

C、$.get(url)

D、$. getScript(url)

**18.在进行面向对象设计时，采用设计模式能够（ ） 。**

A、复用相似问题的相同解决方案

B、改善代码的平台可移植性

C、改善代码的可理解性

D、增强软件的易安装性

**19.标记符title是放在以下哪个标记符之间的？（  ）**

A、html与html

B、head与head

C、body与body

D、head与body

**参考答案：B**

**20.如果在 HTML 页面中包含如下图片标签，则选项中的（）语句能够实现隐藏该图片的功能。**

**`<img id="pic" src="Sunset.jpg" width="400" height="300">`**

A、document.getElementById(“pic”).style.display=”visible”;

B、document.getElementById(“pic”).style.display=”disvisible”;

C、document.getElementById(“pic”).style.display=”block”;

D、document.getElementById(“pic”).style.display=”none”;

**参考答案：D**

答案解析：D，display没有visible这个， visibility才有这个值

**21.以下 jquery 对象方法中，使用了事件委托的是**

A、bind

B、mousedown

C、click

D、change

E、on

**参考答案：E**

答案解析：

**jQuery中实现事件委托的三种方法：**

*  $.on: 基本用法:$('.parent').on('click', 'a', function () \{ console.log('click event on tag a'); \})，它是 .parent 元素之下的 a 元素的事件代理到$('.parent')之上，只要在这个元素上有点击事件，就会自动寻找到.parent元素下的a元素，然后响应事件；
 *  $.delegate: 基本用法:$('.parent').delegate('a', 'click', function () \{ console.log('click event on tag a'); \})，同上，并且还有相对应的$.delegate来删除代理的事件；
 *  $.live: 基本使用方法:$('a', $('.parent')).live('click', function () \{ console.log('click event on tag a'); \})，同上，然而如果没有传入父层元素$(.parent)，那事件会默认委托到$(document)上；(已废除)

**事件委托原理：**  
事件委托是通过事件冒泡的原理，利用父级去触发子级的事件。  
如果不用事件委托，将ul下每一个li都去添加click事件监听，非常麻烦，而且对于内存消耗是非常大的，效率上需要消耗很多性能；  
另外就是如果通过js动态创建的子节点，需要重新绑定事件。

而利用事件委托的话，只需要给父级绑定一个事件监听，即可让每个li都绑定上相应的事件，让你避免对特定的每个节点添加事件监听器；事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。

**二、多选题（共9题，每题5分）**

**1.当元素的一个继承属性没有指定值时，则取父元素的同属性的计算值，以下哪些不是...**

当元素的一个继承属性没有指定值时，则取父元素的同属性的计算值，以下哪些不是CSS中的继承属性？

A、color

B、display

C、border-style

D、text-align

**参考答案：B,C**

答案解析：

不可继承：display，margin，border，padding，background，height，width，position

**2.在下面的标签中哪些是struts标签**

A、html:form

B、html:text

C、html:errors

D、html:message

**参考答案：A,B,C,D**

答案解析：暂无

**3.下面有关html结构描述正确的有？**

A、`<ul> <li> </li> </ul>`

B、`<ol> <li> </li> </ol>`

C、`<dl><dt><dd></dd></dt></dl>`

D、`<table> <tr> <td></td> </tr> </table>`

**参考答案：A,B,D**

**4.Ruby中， 下面定义一个正则表达式正确的方法是（）**

A、re = /\\w+/

B、re = //usr/local?/etc/

C、re = %r\{/usr/local?/etc\}

D、re = Regexp.escape("usr/local/etc")

**参考答案：A,C**答案解析：暂无

**5.哪些是正确的bootstrap辅助类**

A、text-muted

B、text-success

C、text-info

D、text-warning

**参考答案：A,B,C,D 。**答案解析：.text-muted:文字的颜色换成灰色 /.text-primary:文字的颜色变成蓝色 / .text-success:文字的颜色变成绿色 /.text-info:文字的颜色变成暗蓝色 /.text-warning:文字颜色变成暗黄色 /.text-danger：文字的颜色变成红色

**6.下列哪些是块级元素（）**

A、input

B、ul

C、hr

D、li

E、div

F、form

**参考答案：B,C,D,E,F**

答案解析：

（1）行内元素有：a b span img input select strong

（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

（3）常见的空元素：