2019年阿里最新前端工程師面試題及答案題
我要評論一、單選題（共21題，每題5分）
1.為每一個(gè)指定元素的指定事件（像click）綁定一個(gè)事件處理器函數(shù)，下面哪個(gè)是用來實(shí)現(xiàn)該功能的？
A、trigger (type)
B、bind(type)
C、one(type)
D、bind
參考答案：B
答案解析：暫無
2.哪一個(gè)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，的順序書寫。
但其實(shí)順序調(diào)換是不影響呈現(xiàn)的
3.關(guān)于適配器模式，說法錯(cuò)誤的是？
A、適配器繼承或依賴已有的對象，實(shí)現(xiàn)想要的目標(biāo)接口
B、主要解決在軟件系統(tǒng)中，常常要將一些"現(xiàn)存的對象"放到新的環(huán)境中，而新環(huán)境要求的接口是現(xiàn)對象不能滿足的
C、定義了算法家族，分別封裝起來，讓他們之間可以相互替換，此模式讓算法的變化不會(huì)影響到使用算法的客戶
D、將一個(gè)類的接口轉(zhuǎn)換成客戶希望的另外一個(gè)接口。適配器模式使得原本由于接口不兼容而不能一起工作的那些類可以一起工作。
參考答案：C
答案解析：將一個(gè)類的接口轉(zhuǎn)換成客戶希望的另外一個(gè)接口。適配器模式使得原本由于接口不兼容而不能一起工作的那些類可以一起工作 適配器繼承或依賴已有的對象，實(shí)現(xiàn)想要的目標(biāo)接口 主要解決在軟件系統(tǒng)中，常常要將一些"現(xiàn)存的對象"放到新的環(huán)境中，而新環(huán)境要求的接口是現(xiàn)對象不能滿足的
4.以下幾種在HTML文檔中通過CSS的方式將文檔顏色設(shè)置為紅色背景錯(cuò)誤的是：（ ）
A、內(nèi)聯(lián)樣式表：<body style=”background-Color:red”></body>
B、嵌入樣式表：<style> body { background-Color:red } </style>
C、外部樣式表：在當(dāng)前目錄下創(chuàng) 建一個(gè)test.css文件，在文件中聲明一條<style> body { background-Color:red } </style>代碼，并在HTML文檔中通過<link style=”text/css” rel=”stylesheet” href=”test.css”>將其鏈接到本文檔中使用
D、輸入樣式表：在當(dāng)前目錄下創(chuàng)建一個(gè)test.css文件，在文件中聲明一條body { background-Color:red } 代碼，并在HTML文檔中通過<style>@import url(test.css);</style>輸入到本文檔中使用
參考答案：C
答案解析：暫無
5.在 HTML5 中，哪個(gè)方法用于獲得用戶的當(dāng)前位置？
A、getPosition()
B、getCurrentPosition()
C、getUserPosition()
D、getLocation()
參考答案：B
答案解析：getCurrentPosition（）獲取用戶當(dāng)前位置放入一個(gè)值中保存，getLocation()地圖定位
6.對于下拉菜單，錯(cuò)誤的是？
<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" tabindex="-1">Something else here</a></li>
A、表示了一個(gè)有五個(gè)下拉選項(xiàng)的下拉菜單
B、<span class="caret"></span>可以去掉而不影響功能
C、可以加入pull-right使菜單右對齊
D、可加入dropdown-menu-right使菜單右對齊
參考答案：A
答案解析：這道題我一眼就看出A有錯(cuò)了，可是還是讓我糾結(jié)了好久，怎么會(huì)有這么低級的問題，空城計(jì)嗎
7.下面關(guān)于 CSS 布局的描述，不正確的是？（ ）
下面關(guān)于CSS布局的描述，不正確的是？（）
A、塊級元素實(shí)際占用的寬度與它的 width 屬性有關(guān)；
B、塊級元素實(shí)際占用的寬度與它的 border 屬性有關(guān)；
C、塊級元素實(shí)際占用的寬度與它的 padding 屬性有關(guān)；
D、塊級元素實(shí)際占用的寬度與它的 background 屬性有關(guān)。
參考答案：D
答案解析：D 塊級元素實(shí)際占用的寬度=width+border*2+padding*2+margin*2 所以與width border padding margin有關(guān)，與background無關(guān)
8.以下JavaScript代碼輸出的結(jié)果是？
var a = '5' + 3var b = '5' - 3
console.log(a, b)
JavaScript
A、53, 2
B、8, 2
C、error
D、都不對
參考答案：A
答案解析：這是一道隱式類型轉(zhuǎn)換的題 加法： 加法運(yùn)算中，如果有一個(gè)操作值為字符串類型，則將另一個(gè)操作值轉(zhuǎn)換為字符串，最后連接起來 減法： 如果操作值之一不是數(shù)值，則被隱式調(diào)用Number()函數(shù)進(jìn)行轉(zhuǎn)換 所以第一行結(jié)果為字符串運(yùn)算，為'53'。第二行結(jié)果為2，選A9.在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
});});
A、此代碼不會(huì)正常運(yùn)行
B、語句1會(huì)被執(zhí)行1次
C、語句1會(huì)被執(zhí)行2次
D、$.each()函數(shù)的用法有誤
10.雖然不同的操作系統(tǒng)可能裝有不同的瀏覽器。但是這些瀏覽器都符合（ ）協(xié)議。
A、SNMP
B、 HTTP
C、HTML
D、SMTP
參考答案：B
答案解析：
簡單網(wǎng)絡(luò)管理協(xié)議（SNMP），由一組網(wǎng)絡(luò)管理的標(biāo)準(zhǔn)組成，該協(xié)議能夠支持網(wǎng)絡(luò)管理
系統(tǒng)，用以監(jiān)測連接到網(wǎng)絡(luò)上的設(shè)備是否有任何引起管理上關(guān)注的情況。
HTTP協(xié)議（HyperText Transfer Protocol，超文本傳輸協(xié)議）是客戶端瀏覽器或其他程序與WEB服務(wù)器之間的應(yīng)用層通信協(xié)議。
超文本標(biāo)記語言（HTML），標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用，也是一種規(guī)范，一種標(biāo)準(zhǔn)，它通過標(biāo)記符號來標(biāo)記要顯示的網(wǎng)頁中的各個(gè)部分。網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。
SMTP（Simple Mail Transfer Protocol，簡單郵件傳輸協(xié)議）,它是一組用于由源地址到目的地址傳送郵件的規(guī)則，由它來控制信件的中轉(zhuǎn)方式。SMTP協(xié)議屬于TCP/IP協(xié)議簇，它幫助每臺(tái)計(jì)算機(jī)在發(fā)送或中轉(zhuǎn)信件時(shí)找到下一個(gè)目的地。
11.css屬性position的值不包含
A、absolute
B、inherit
C、box
D、static
參考答案：C
答案解析：absolute，生成絕對定位的元素，相對于 static 定位以外的第一個(gè)父元素進(jìn)行定位； 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定； fixed，生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位； 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。 relative，生成相對定位的元素，相對于其正常位置進(jìn)行定位； static，默認(rèn)值，沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）； inherit，規(guī)定應(yīng)該從父元素繼承 position 屬性的值。.
12.以下全部屬于塊級標(biāo)簽的是？
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.關(guān)于下面HTML代碼，說法正確的是?
<table border="10">
<tr>
<td align="center" colspan="2">公司</td>
</tr>
<tr>
<td align="center" rowspan="2">名字</td>
<td align="center">百度</td>
</tr>
<tr>
<td align="center" colspan="2">百度</td>
</tr>
<table></table>
A、該表格共有2行3列
B、該表格的邊框?qū)挾葹?0毫米
C、該表格中的文字均居中顯示
D、"公司"單元格跨2行
14.基于哈希算法在信息安全中主要應(yīng)用在？
(1) 文件校驗(yàn)
(2) 數(shù)字簽名
(3) 鑒權(quán)協(xié)議
A、(1)(2)
B、(1)(3)
C、(2)(3)
D、(1)(2)(3)
參考答案：D
答案解析：Hash算法在信息安全方面的應(yīng)用主要體現(xiàn)在以下的3個(gè)方面： （1)文件校驗(yàn) 我們比較熟悉的校驗(yàn)算法有奇偶校驗(yàn)和CRC校驗(yàn)，這2種校驗(yàn)并沒有抗數(shù)據(jù)篡改的能力，它們一定程度上能檢測并糾正數(shù)據(jù)傳輸中的信道誤碼，但卻不能防止對數(shù)據(jù)的惡意破壞。 MD5 Hash算法的"數(shù)字指紋"特性，使它成為目前應(yīng)用最廣泛的一種文件完整性校驗(yàn)和(Checksum)算法，不少Unix系統(tǒng)有提供計(jì)算md5 checksum的命令。 （2)數(shù)字簽名 Hash 算法也是現(xiàn)代密碼體系中的一個(gè)重要組成部分。由于非對稱算法的運(yùn)算速度較慢，所以在數(shù)字簽名協(xié)議中，單向散列函數(shù)扮演了一個(gè)重要的角色。對 Hash 值，又稱"數(shù)字摘要"進(jìn)行數(shù)字簽名，在統(tǒng)計(jì)上可以認(rèn)為與對文件本身進(jìn)行數(shù)字簽名是等效的。而且這樣的協(xié)議還有其他的優(yōu)點(diǎn)。 （3) 鑒權(quán)協(xié)議 如下的鑒權(quán)協(xié)議又被稱作挑戰(zhàn)--認(rèn)證模式：在傳輸信道是可被偵聽，但不可被篡改的情況下，這是一種簡單而安全的方法。以上就是一些關(guān)于hash以及其相關(guān)的一些基本預(yù)備知識。
15.下面哪條聲明能固定背景圖片（）
A、background-attachment:fixed;
B、background-attachment:scroll;
C、background-origin: initial;
D、background-clip: initial;
參考答案：A
答案解析：
background-attachment
有三個(gè)值，scroll是默認(rèn)值，背景圖像會(huì)隨著頁面其余部分的滾動(dòng)而移動(dòng)。
fixed當(dāng)頁面的其余部分滾動(dòng)時(shí)，背景圖像不會(huì)移動(dòng)。
inherit規(guī)定應(yīng)該從父元素繼承 background-attachment 屬性的設(shè)置。
background-origin
屬性規(guī)定 background-position 屬性相對于什么位置來定位。
background-clip
屬性規(guī)定背景的繪制區(qū)域。
16.以下選項(xiàng)不能夠正確地得到這個(gè)標(biāo)簽：（）
<input class="btn" id="btnGo" type="button" value="單擊我"></input>
A、 $("#btnGo")
B、 $(".btnGo")
C、 $(".btn")
D、 $("input[type='button']")
參考答案：B
答案解析：注意是題目是選不能
17.在jquery中想要實(shí)現(xiàn)通過遠(yuǎn)程http get請求載入信息功能的是下面的哪一下事件？
A、$.ajax()
B、load(url)
C、$.get(url)
D、$. getScript(url)
18.在進(jìn)行面向?qū)ο笤O(shè)計(jì)時(shí)，采用設(shè)計(jì)模式能夠（ ） 。
A、復(fù)用相似問題的相同解決方案
B、改善代碼的平臺(tái)可移植性
C、改善代碼的可理解性
D、增強(qiáng)軟件的易安裝性
19.標(biāo)記符title是放在以下哪個(gè)標(biāo)記符之間的？（ ）
A、html與html
B、head與head
C、body與body
D、head與body
參考答案：B
20.如果在 HTML 頁面中包含如下圖片標(biāo)簽，則選項(xiàng)中的（）語句能夠?qū)崿F(xiàn)隱藏該圖片的功能。
<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這個(gè)， visibility才有這個(gè)值
21.以下 jquery 對象方法中，使用了事件委托的是
A、bind
B、mousedown
C、click
D、change
E、on
參考答案：E
答案解析：
jQuery中實(shí)現(xiàn)事件委托的三種方法：
$.on: 基本用法:$('.parent').on('click', 'a', function () { console.log('click event on tag a'); })，它是 .parent 元素之下的 a 元素的事件代理到$('.parent')之上，只要在這個(gè)元素上有點(diǎn)擊事件，就會(huì)自動(dòng)尋找到.parent元素下的a元素，然后響應(yīng)事件；
$.delegate: 基本用法:$('.parent').delegate('a', 'click', function () { console.log('click event on tag a'); })，同上，并且還有相對應(yīng)的$.delegate來刪除代理的事件；
$.live: 基本使用方法:$('a', $('.parent')).live('click', function () { console.log('click event on tag a'); })，同上，然而如果沒有傳入父層元素$(.parent)，那事件會(huì)默認(rèn)委托到$(document)上；(已廢除)
事件委托原理：
事件委托是通過事件冒泡的原理，利用父級去觸發(fā)子級的事件。
如果不用事件委托，將ul下每一個(gè)li都去添加click事件監(jiān)聽，非常麻煩，而且對于內(nèi)存消耗是非常大的，效率上需要消耗很多性能；
另外就是如果通過js動(dòng)態(tài)創(chuàng)建的子節(jié)點(diǎn)，需要重新綁定事件。
而利用事件委托的話，只需要給父級綁定一個(gè)事件監(jiān)聽，即可讓每個(gè)li都綁定上相應(yīng)的事件，讓你避免對特定的每個(gè)節(jié)點(diǎn)添加事件監(jiān)聽器；事件監(jiān)聽器是被添加到它們的父元素上。事件監(jiān)聽器會(huì)分析從子元素冒泡上來的事件，找到是哪個(gè)子元素的事件。
二、多選題（共9題，每題5分）
1.當(dāng)元素的一個(gè)繼承屬性沒有指定值時(shí)，則取父元素的同屬性的計(jì)算值，以下哪些不是...
當(dāng)元素的一個(gè)繼承屬性沒有指定值時(shí)，則取父元素的同屬性的計(jì)算值，以下哪些不是CSS中的繼承屬性？
A、color
B、display
C、border-style
D、text-align
參考答案：B,C
答案解析：
不可繼承：display，margin，border，padding，background，height，width，position
2.在下面的標(biāo)簽中哪些是struts標(biāo)簽
A、html:form
B、html:text
C、html:errors
D、html:message
參考答案：A,B,C,D
答案解析：暫無
3.下面有關(guān)html結(jié)構(gòu)描述正確的有？
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中， 下面定義一個(gè)正則表達(dá)式正確的方法是（）
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:文字的顏色變成藍(lán)色 / .text-success:文字的顏色變成綠色 /.text-info:文字的顏色變成暗藍(lán)色 /.text-warning:文字顏色變成暗黃色 /.text-danger：文字的顏色變成紅色
6.下列哪些是塊級元素（）
A、input
B、ul
C、hr
D、li
E、div
F、form
參考答案：B,C,D,E,F
答案解析：
（1）行內(nèi)元素有：a b span img input select strong
（2）塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常見的空元素：
<div></div> <span></span><input></input><link></link><meta></meta><span> </span>
鮮為人知的是：
<area></area><base></base><col></col><command><embed><keygen><param></param><source><track><wbr></wbr></track></source></keygen></embed></command>
7.以下選項(xiàng)正確的是
A、<p />
B、<br />
C、<hr />
D、<img />
8關(guān)于Web 語義化的說法，正確的有？
A、語義化的含義就是用正確的標(biāo)簽做正確的事情
B、語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰
C、語義化便于對瀏覽器、便于代碼閱讀、便于維護(hù)
D、語義化便于SEO, 頁面中多放置一些H1標(biāo)簽，會(huì)提高網(wǎng)頁的排名
9.以下標(biāo)簽中，默認(rèn)是塊級元素的標(biāo)簽有：
A、span
B、div
C、p
D、img
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
- 這篇文章主要介紹了Web前端面試筆試題總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2020-02-18
- 這篇文章主要介紹了80道前端面試經(jīng)典選擇題匯總，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)2020-01-08
- 這篇文章主要介紹了面試官常問的web前端問題大全,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-03
- 這篇文章主要介紹了前端十幾道含答案的大廠面試題總結(jié),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2020-01-02
- 這篇文章主要介紹了超實(shí)用前端面試題整理(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-12-19
- 這篇文章主要介紹了2020最新Web前端經(jīng)典面試試題,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-19
這篇文章主要介紹了解析前端面試題2019年小米工程師面試題(附答案)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-11-27- 這篇文章主要介紹了2019年京東前端工程師面試題(附答案)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-11-26
- 這篇文章主要介紹了2019年滴滴出行前端工程師面試題(附答案)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來2019-11-25
- 這篇文章主要介紹了2019年百度前端工程師面試題(附答案)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-11-22
