2014阿里前端線上筆試題

時間 2019-11-18

原文原文鏈接

8月20號阿里巴巴前端崗位校園招聘的線上筆試題，由於是面向2014界的應屆生，哥不符合要求了，但也看了看題，哥也不是什麼前端大拿，必然沒法評價題的質量了，不過玉伯，寒冬等大拿都評價題仍是不錯的，區分度很好，因爲題目是隨機的，囧。自碼答案，有誤歡迎指正，部分問題還沒添加答案~javascript

No.1

下圖綠色區域的寬度爲100%，其中有三個矩形，第一個矩形的寬度是200px，第二個和第三個矩形的寬度相等。請使用css3中的功能實現它們的佈局。

已知html結構是：css

<div>
 <div>column 1</div>
 <div>column 2</div>
 <div>column 3</div>
</div>

No.2

有兩個盒子 A、B，B 在 A 盒子中，它們的 css 是這麼定義的：html

A {
    position:relative;
    width:500px;
    height: 500px;
    background-color:green;
}
B {
    position:absolute;
    max-width:300px;
    max-height:300px;
    background-color:blue;
}

如何實現 B 在 A 中水平方向和垂直方向居中前端

No.3

常常在SNS中看到以下圖所示的功能：html5

請經過代碼完成它，它至少應該：
1. 良好結構、語義化的HTML
2. 兼容主流的瀏覽器；
3. JS應該包括： 1) 實時計數功能 2)校驗字數限制 3) 防止重複提交；
4. 若是時間所限，沒法100%，但請說明實現方案及思路；java

No.4

//現有代碼以下:jquery

function test() {
	var a = 1;
	setTimeout(function() {
		alert(a);
		a = 3;
	}, 1000);
	a = 2;
	setTimeout(function() {
		alert(a);
		a = 4;
	}, 3000);
}
test();
alert(0);

//請注意,代碼中有三處alert.他們分別會alert出什麼值,時間上的順序是怎樣的?
//請詳述獲得這個答案的緣由,特別是test函數的局部變量a是對運行結果的影響.css3

No.5

當我們使用CSS3新屬性，好比：box-shadow或者transition時，咱們怎麼檢測瀏覽器是否支持這些屬性？
請設計一個javascript函數，該函數接受一個CSS屬性名做爲參數，並返回一個boolean值，代表瀏覽器是否支持這個屬性。web

No.6

若是你如今使用的是 Google Chrome 或 Apple Safari，如何讓 input 元素在默認狀況下顯示「alipay WD Team」，而在光標移入後則顯示空白？chrome

No.7

解釋一下

alert(Function instanceof Object);
alert(Object instanceof Function);

這個結果。

No.8

//現有代碼以下：
var foo = 1;
function main(){
alert(foo);
var foo = 2;
alert(this.foo)
this.foo = 3;
}
//1.請給出如下兩種方式調用函數時，alert的結果，並說明緣由。
var m1 = main();
var m2 = new main();
//2.若是想要var m1 = main()產生的m1和前面的m2徹底一致,又該如何改造main函數?

No.9

實現以下圖所示的佈局
要求：
sidebar 固定寬度200px，content和header寬度自適應
當window寬度小於600px時，變成三行佈局

默認以下

寬度小於600px時以下

下面是html結構：

<div class='header'>
            <h1>header</h1>
        </div>
        <div>sidebar"</h1>
        </div>
        <div>
            <h1>content</h1>
        </div>

請寫出其css代碼.

No.10

寫一段腳本，實現：當頁面上任意一個連接被點擊的時候，alert出這個連接在頁面上的順序號，如第一個連接則alert(1), 依次類推；

No.11

請用html5標準完成如下頁面佈局（要求完整書寫整個頁面的html代碼，不須要寫CSS）

No.12

有一個頁面區塊如圖所示，請用符合語義化的標籤書寫HTML代碼。

No.13

在CSS樣式中常使用px、em兩種長度單位，各有什麼優劣，在表現上有什麼區別？

No.14

(new Date).getTime() 和 +new Date() 均可以取到當前時間戳，它們的實現原理是什麼，哪一個效率更高？

No.15

在tmall.com的某個頁面中存在一個id等於J_iframe_taobao的iframe，該iframe的域名是taobao.com。在不考慮IE瀏覽器的狀況下，用最簡潔的代碼實現頁面與該iframe進行雙向通訊？

...
<iframe id="J_iframe_taobao" src="http://taobao.com/xxx"></iframe>
...

No.16

請寫一個 getParents 方法讓它能夠獲取某一個 DOM 元素的全部父親節點。

No.17

請寫出至少5個html5新增的標籤，並說明其語義和應用場景

No.18

有哪些前端代碼優化/性能優化的方法？

No.19

請列舉所知道的css選擇器，並說明怎麼判斷優先級？

No.20

有一個數組，其中保存的都是小寫英文字符串，如今要把它按照除了第一個字母外的字符的字典順序(字典順序就是按首字母從a-z順序排列，若是首字母相同則按第二個字母……)排序，請編寫代碼：

例：
["abd","cba","ba",]
排序後
["ba","cba","abd"]

No.21

1.你瞭解arguments對象麼,它有哪些屬性?
2.arguments是數組麼?若是不是請寫一段代碼將其轉化爲真正的數組,什麼狀況下須要這麼作?
3.arguments有什麼特性,能夠用這些特性作什麼?

No.22

請爲JavaScript每一個Array對象添加一個相似於PHP的shuffle()的方法。

No.23

CSS的「僞類」和「僞元素」有什麼區別？請舉例僞元素的幾種應用場景。

No.24

頁面中有個id爲J_banner的區塊，請使用CSS實如今普通屏幕上使用圖片banner.png爲背景，在retina屏幕上顯示更高分辨率的圖片banner_retina.png做爲背景

<div id="J_banner"> ... </div>

No.25

下面是一段html代碼，展現效果如圖A所示。請給出一段css，使這段代碼達到圖B的展現效果。

<ul>
<li>
<a href="#"><img width="100" height="100" src="a.jpg /></a>
<p>文字一</p>
</li>
<li>
<a href="#"><img width="100" height="100" src="a.jpg" /></a>
<p>文字二</p>
</li>
</ul>
<ul>
<li>文字三</li>
<li>文字四</li>
<li>文字五</li>
<li>文字六</li>
</ul>

要求：
1.不容許修改html結構；
2.css沒必要考慮瀏覽器默認樣式的因素，佈局正確便可；
3.不要求嚴格對齊，若有須要，元素尺寸可自定義。

No.26

var a = [-3,-1,0,1,3,5,7,9], b = [-4,-2,0,2,3,4,5,6,7,8];
//返回一個合併過的數組[-4,-3,-2,-1,0,0,1,2,3,3,4,5,5,6,7,7,8,9]

No.27

//請補全下面的函數，僅當p爲數組時返回true.
//可給出多種實現方式,每種實現方式不必定完美,若是不完美,須要說明每種實現的限制
function isArray(p) {
//你的代碼在這裏
}

No.28

<p>1</p>
<p>2</p>
<p>3</p>

請編寫一段css，讓數字1顏色變藍

No.29

請讓頁面中的一個元素（10px*10px）圍繞座標(200, 300) 作圓周運動

No.30

用HTML實現下面表格的結構：

No.31

‘data-’屬性的做用是什麼？

No.32

請列舉CSS中用於隱藏元素的兩個屬性？二者的差別？

display:none和visibility: hidden;前者不佔位，後者佔位。

No.33

在jquery中，選擇器使用的是sizzle，sizzle的基本原理是」從後往前查找」，好比選擇器「 .a > .b > .c」，是先查找」.c」而不是」.a」。請解釋爲何大部分狀況下「從後往前」比「從前日後」查找速度更快

No.34

//現有代碼以下:
var a = 1;
var obj = { b : 2 };
var fn = function() {};
fn.c = 3;
function test(x, y, z) {
x = 4;
y.b = 5;
z.c = 6;
return z;
}
test(a, obj, fn);
alert(a + obj.b + fn.c);
//這段代碼可以正常運行麼?若是不能正常運行,請說明緣由.
//若是能夠運行,最後一行alert的值是多少,並請說明緣由.

No.35

請編寫一段程序，將一個對象和它直接、間接引用的全部對象的屬性字符串放入一個數組。

如
var o = {a:1,{b:2,c:{d:1}}}

這裏o通過處理後，應該獲得
["a","b","c","d"]

No.36

請舉兩個例子，解釋一下strong和em標籤用法有何不一樣？

No.37

請用實現一個最簡單的輸入框提示功能
要求： 1.輸入框內默認顯示提示文案，當用戶點擊輸入框後，光標定位到輸入框最前，並繼續顯示提示文案，當用戶輸入後替換默認提示文案，當用戶清空輸入框後重新顯示默認提示文案 2.要求支持ie（6，7，8，9），firefox，chrome等瀏覽器 3.請寫出html結構，javascript代碼邏輯部分寫出實現思路便可（有時間能寫出代碼者最佳，可使用js庫）