阿里2014前端线上笔试题

8月20号阿里巴巴前端岗位校园招聘的线上笔试题，因为是面向2014界的应届生，哥不符合要求了，但也看了看题，哥也不是什么前端大拿，必然无法评价题的质量了，不过玉伯，寒冬等大拿都评价题还是不错的，区分度很好，由于题目是随机的，囧。自码答案，有误欢迎指正，部分问题还没添加答案~

No.1

下图绿色区域的宽度为100%，其中有三个矩形，第一个矩形的宽度是200px，第二个和第三个矩形的宽度相等。请使用css3中的功能实现它们的布局。

已知html结构是：

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

No.2

有两个盒子 A、B，B 在 A 盒子中，它们的 css 是这么定义的：

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中看到如下图所示的功能：

请通过代码完成它，它至少应该：
1. 良好结构、语义化的HTML
2. 兼容主流的浏览器；
3. JS应该包括： 1) 实时计数功能 2)校验字数限制 3) 防止重复提交；
4. 如果时间所限，无法100%，但请说明实现方案及思路；

No.4

//现有代码如下:

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是对运行结果的影响.

No.5

当我们使用CSS3新属性，比如：box-shadow或者transition时，我们怎么检测浏览器是否支持这些属性？
请设计一个javascript函数，该函数接受一个CSS属性名作为参数，并返回一个boolean值，表明浏览器是否支持这个属性。

No.6

如果你现在使用的是 Google Chrome 或 Apple Safari，如何让 input 元素在默认情况下显示 “alipay WD Team”，而在光标移入后则显示空白？

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库）