2019年阿裡最新前端工程師面試題及答案題

来源:https://www.cnblogs.com/xsd1/archive/2019/11/19/11890273.html
-Advertisement-
Play Games

一、單選題（共21題，每題5分） 1.為每一個指定元素的指定事件（像click）綁定一個事件處理器函數，下麵哪個是用來實現該功能的？ A、trigger (type) B、bind(type) C、one(type) D、bind 參考答案：B 答案解析：暫無 2.哪一個html盒模型中的borde ...


一、單選題（共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，選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

    });});
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 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>

 




</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）常見的空元素：

<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.以下選項正確的是

A、<p />

B、<br />

C、<hr />

D、<img />

 

8關於Web 語義化的說法，正確的有？

A、語義化的含義就是用正確的標簽做正確的事情

B、語義化讓頁面的內容結構化，結構更清晰

C、語義化便於對瀏覽器、便於代碼閱讀、便於維護

D、語義化便於SEO, 頁面中多放置一些H1標簽，會提高網頁的排名

 

9.以下標簽中，預設是塊級元素的標簽有：

A、span

B、div

C、p

D、img

推薦閱讀：

2019年騰訊前端工程師面試題及答案解

 2019年滴滴出行前端工程師面試題及答案解

2019年百度前端工程師面試題及答案解  2019年阿裡前端工程師面試題及答案題    2019年京東前端工程師面試題及解答

 

     


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 【前端知識體系-CSS相關】Bootstrap相關知識
    本文介紹瞭如何使用Bootstrap實現響應式佈局，如何定製自己的響應式框架，Bootstrap響應式底層原理和模擬實現。 ...
  • 【前端知識體系-CSS相關】CSS預處理器
    css預處理器：用一種專門的編程語言，為CSS增加了一些編程的特性，將CSS作為目標生成文件，然後開發者就只要使用這種語言進行編碼工作，可以讓你的CSS更加簡潔、適應性更強、可讀性更佳，更易於代碼的維護等諸多好處。 ...
  • 按需動態載入js
    有些時間我們希望能按需動態載入js文件，而不是直接在HTML中寫script標簽。 以下為示例代碼： 1 var js = document.createElement('script'); 2 js.async = true; 3 js.src = jsSrc; 4 js.onload = fun ...
  • day 49
    [TOC] jQuery的補充 基本篩選器 屬性選擇器 表單選擇器 篩選器方法 下一個元素 上一個元素 父親元素 兒子和兄弟元素 操作標簽 樣式操作 樣式類 位置操作 尺寸 文本操作 HTML代碼 文本值 值 屬性操作 用於 和`radio` == 和`attr`的區別== 全稱 (屬性) 全稱 ( ...
  • day 48
    [TOC] js BOM(瀏覽器對象模型) 由上圖可知，window對象是 BOM 的核心對象，所有對象都是通過它延伸出來的，也可以稱為window的子對象。 DOM是BOM的一部分 window對象 所有瀏覽器都支持window對象，它表示瀏覽器的介面。 常用window方法 :：瀏覽器視窗的內部 ...
  • JavaScript 之 對象屬性的特性 和defineProperty方法
    對象是無序屬性的集合，而這些屬性在創建是都帶有一些特征值（可以理解為屬性的屬性,天生自帶的），這些特征值是為了實現JavaScript引擎用的，因此JavaScript不能直接訪問。 JavaScript通過這些特征值來定義屬性的行為（屬性是否刪除，枚舉，修改等）。 例如，在全局定義的屬性是會掛載到 ...
  • 易優CMS：channelartlist 獲取當前頻道的下級欄目的內容列表
    咚！channelartlist來啦！不瞭解的伙伴們快來看看把@所有人 ...
  • 瀏覽器去除內外邊距
    1.body{margin:0;padding:0} 2.https://www.bootcdn.cn/normalize/ 複製link標簽引入 <link href="https://cdn.bootcss.com/normalize/8.0.1/normalize.css" rel="styl ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類