2014阿里巴巴前端线上笔试题以及答案

站长经验

首页 > 科技资讯 > 站长经验 >

 admin  2013-12-03 22:02:00 

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

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

已知HTML结构是：

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

解答：

.box {  
    background-color:green;  
    display:-moz-box;  
display:-webkit-box;  
display:box;  
    height:50px;  
    line-height:30px;  
    text-indent:10px;  
    width:100%;  
}  
.item {  
    box-flex:1;  
    -moz-box-flex:1;  
    -webkit-box-flex:1;  
    margin:10px;  
    background:#fff  
}  
.item:first-child {  
box-flex:0;  
    -moz-box-flex:0;  
    -webkit-box-flex:0;  
    width:200px;  
    background:#fff;  
    margin:10px  
}  
.item:nth-child(2) {  
    margin:10px 0  
}

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 中水平方向和垂直方向居中

解答

说实话这题我没太看懂，我就说下垂直居中和水平居中的方法吧。
水平居中大家都知道margin:0 auto就行了，垂直居中也有display:table，然后vertical-align: middle;这都是基本方法，但是我目测这道题考察的是css3吧。css3可以用下面的方法实现子元素居中（不同浏览器需要写私有属性）

display: box;   
box-orient: horizontal;   
box-pack: center;   
box-align: center;

No.3
经常在SNS中看到如下图所示的功能：

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

解答

jQuery(document).ready(function(a){a("#message").bind
("focus keyup input paste",function()
{this.value.length>1500?(this.value=
a(this).attr("value").substring(0,1500),a("#num").
text("u6700u591a1500")):a(".ali-num").text(a(this).attr("value").length)})
}
);

html

dsd

css

dsd

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

解答

按顺序分别会alert2 3 0，时间顺序为 3 1 2

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

var supports = (function() {  
   var div = document.createElement('div'),  
      vendors = 'Khtml Ms O Moz Webkit'.split(' '),  
      len = vendors.length;  
   
   return function(prop) {  
      if ( prop in div.style ) return true;  
   
      propprop = prop.replace(/^[a-z]/, function(val) {  
         return val.toUpperCase();  
      });  
   
      while(len--) {  
         if ( vendors[len] + prop in div.style ) {  
            // browser supports box-shadow. Do what you need.  
            // Or use a bang (!) to test if the browser doesn't.  
            return true;  
         }  
      }  
      return false;  
   };  
})();  
   
if ( supports('textShadow') ) {  
   document.documentElement.className += ' textShadow';

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

解答

css3 placeholder必须输入文字才会消失，所以不行，用JS实现

onblur="this.value = this.value == '' ? 
this.defaultValue : this.value" onfocus="
this.value = this.value == this.defaultValue ? '
' : this.value"

No.7
解释一下

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

这个结果。

Object, Function, Array等等这些都被称作是构造“函数”，他们都是函数。而所有的函数都是构造函数Function的实例。从原型链机制的的角度来说，那就是说所有的函数都能通过原型链找到创建他们的Function构造函数的构造原型Function.protorype对象，所以：
alert(Object instanceof Function);// return true
与此同时，又因为Function.prototype是一个对象，所以他的构造函数是Object. 从原型链机制的的角度来说，那就是说所有的函数都能通过原型链找到创建他们的Object构造函数的构造原型Object.prototype对象，所以：
alert(Function instanceof Object);// return true
延伸
有趣的是根据我们通过原型链机制对instanceof进行的分析，我们不难得出一个结论：Function instanceof Function 依然返回true, 原理是一样的

Function是构造函数，所以它是函数对象
函数对象都是由Function构造函数创建而来的，原型链机制解释为：函数对象的原型链中存在Function.prototype
instanceof查找原型链中的每一个节点，如果Function.prototype的构造函数Function的原型链中被查到，返回true
因此下面代码依然返回true
alert(Function instanceof Function);// still true
结论

在JavaScript语言中，一切的一切都是对象，它们全部继承自Object. 或者说所有对象的原型链的根节点都是Object.prototype
理解原型链机制在JavaScript中式如何工作的是非常重要的。掌握了它，不管一个对象多么复杂，你总能够轻而易举地将它攻破。
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函数?

1、var m1=main()时，alert的结果是undefined和1,原因是首先在alert(foo)的时候，foo在main()函数域内还没有被定义，因此提示undefined,而在输出this.foo时，因为此时的函数执行环境是全局域，相当于window.main()，因此this=window，所以this.foo=window.foo=1
var m2=new main()时,alert的结果是undefined和undefined，第一个undefined的原因与前面一种情况相同，而第二个提示undefined的原因是在这种情况下用new构造了一个main()的实例，因此执行环境发生了改变，不再是全局域，而是m2，因此此时的this=m2，因此this.foo=m2.foo，但是由于在alert(this.foo)时，m2中的this.foo还未被定义,因此提示undefined
2、若要m1=main()与前面的m2产生的效果一致，则main()函数要修改成为function main(){alert(foo);foo=undefined;alert(this.foo);}即可

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代码：
（提示，可以使用media query来检测浏览器窗口宽度）

No.10
写一段脚本，实现：当页面上任意一个链接被点击的时候，alert出这个链接在页面上的顺序号，如第一个链接则alert(1), 依次类推；

window.onload = function() {  
    var l = document.links.length;  
    for (var i = 0; i < l; i++) {  
        document.links[i].onclick = function(x) {  
            return function() {  
                alert(x + 1);  
            };  
        }(i);  
    }  
};

No.11
请用html5标准完成以下页面布局（要求完整书写整个页面的html代码，不需要写CSS）

解答

<!DOCTYPE html> 
<html> 
<head> 
<title>html5</title> 
</head> 
<body> 
</body> 
<header></header> 
<nav></nav> 
<div> 
    <aside></aside> 
    <section></section> 
</div> 
<footer></footer> 
</body> 
</html>

No.12
有一个页面区块如图所示，请用符合语义化的标签书写HTML代码。

解答

<div> 
  <h4> 店铺动态评分 <span>与同行业相比</span> </h4> 
  <ul> 
    <li> 描述相符： <a href="" target="_blank"> <em title="4.8">4.8</em> 
<span title=""> <b></b> <em>16.14%</em> </span> </a> </li> 
    <li> 服务态度： <a href="" target="_blank"> <em title="4.8">4.8</em> 
<span title=""> <b></b> <em>13.32%</em> </span> </a> </li> 
    <li> 发货速度： <a href="" target="_blank"> <em title="4.8">4.8</em> 
<span title=""> <b></b> <em>29.57%</em> </span> </a> </li> 
  </ul> 
</div>

No.13
在CSS样式中常使用px、em两种长度单位，各有什么优劣，在表现上有什么区别？

px是像素，em是相对单位，em，在缩放查看网页时，能准确缩放文字。使用px作为尺寸时，部分浏览器中放大页面时，文字不会变大。

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

这题太囧了，我这个肯定不是最佳答案了，欢迎给出更简洁的方法

http://s0.qhimg.com/static/1b896cf9f0a841a7.js

父页面监听

var cb = function(json){  
            if(json){  
                if(json == 'SUCC') {  
                    QT.WM.close();  
                } else {  
                    json = $.parseJSON(json);  
                    wan360.appurl = json.appurl;  
                    wan360.appname = json.appname;  
                }  
            }  
        };  
        wan360.xdomain.listen({APP: cb});

子页面发送：

wan360.xdomain.sendMessage(window.parent,'{"appurl":"'+app.appurl+'","appname":"'
+app.appname+'"}','APP');

好吧，答案应该是html5的postMessage，下面的代码可能有误~

var onmessage = function(e) {  
           var data = e.data,p = document.createElement_x('p');  
           p.innerHTML = data;  
           document.getElementById('J_iframe_taobao').appendChild(p);  
        };  
        //监听postMessage消息事件  
        if (typeof window.addEventListener != 'undefined') {  
          window.addEventListener('message', onmessage, false);  
        } else if (typeof window.attachEvent != 'undefined') {  
          window.attachEvent('onmessage', onmessage);  
        }

No.16
请写一个 getParents 方法让它可以获取某一个 DOM 元素的所有父亲节点。

No.17
请写出至少5个html5新增的标签，并说明其语义和应用场景

canvas 标签定义图形，比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

command 标签定义命令按钮，比如单选按钮、复选框或按钮。

datalist 标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。

details 标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。与 legend 一起使用，来制作 detail 的标题。该标题对用户是可见的，当在其上点击时可打开或关闭 detail。

hgroup 标签用于对网页或区段（section）的标题进行组合。

mark主要用来在视觉上向用户呈现那些需要突出的文字。mark标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。

No.18
有哪些前端代码优化/性能优化的方法？

Yslow-23条规则

pagespeed

No.19
请列举所知道的css选择器，并说明怎么判断优先级？

标签名选择器，如：p{}，即直接使用HTML标签作为选择器。
类选择器，如.polaris{}。
ID选择器，如#polaris{}。
后代选择器，如.polaris span img{}，后代选贼器实际上是使用多个选择器加上中间的空格来找到具体的要控制标签。
群组选择器，如div,span,img{}，群组选择器实际上是对CSS的一种简化写法，只不过把有相同定义的不同选择器放在一起，省了很多代码。
一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。

No.20
有一个数组，其中保存的都是小写英文字符串，现在要把它按照除了第一个字母外的字符的字典顺序(字典顺序就是按首字母从a-z顺序排列，如果首字母相同则按第二个字母……)排序，请编写代码：

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

#include <iostream.h> 
#include <cstdio.h> 
#include <cstring.h> 
#include <algorithm.h> 
using namespace std;  
#define STRINGN 128  
#define MAXN 1024  
struct data  
{  
    char name[STRINGN];  
};  
data array[MAXN];  
bool cmp(data x,data y)  
{  
    return strcmp(x.name + 1, y.name + 1) < 0; } int main() { 
#ifdef TEST   freopen("input", "r", stdin);   freopen("output", "w", stdout); 
#endif  int n;  for (n = 0; cin >> array[n].name; ++ n);  
   
    sort(array,array+n,cmp);  
    for (int i = 0; i < n; ++ i)  
        cout << array[i].name << endl;  
    return 0;  
}  
/*code by lihao*/

No.21
1.你了解arguments对象么,它有哪些属性?
2.arguments是数组么?如果不是请写一段代码将其转化为真正的数组,什么情况下需要这么做?
3.arguments有什么特性,可以用这些特性做什么?、

function A(){  
　　　var  Args = Array.prototype.slice.call(arguments, 0);  
　　　B(Args.slice(1));  
　　}

No.22
请为JavaScript每个Array对象添加一个类似于PHP的shuffle()的方法。

var data = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);      
    if (!Array.prototype.shuffle) {  
        Array.prototype.shuffle = function() {  
            for(var j, x, i = this.length; i; j = 
parseInt(Math.random() * i), x = this[--i], this[i] = this[j], this[j] = x);  
            return this;  
        };  
    }       
    alert(data.shuffle());

No.23
CSS的“伪类”和“伪元素”有什么区别？请举例伪元素的几种应用场景。

No.24
页面中有个id为J_banner的区块，请使用CSS实现在普通屏幕上使用图片banner.png为背景，在retina屏幕上显示更高分辨率的图片banner_retina.png作为背景

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

css3的images-set属性

background-image: url(1x.png);  
background-image: -webkit-image-set(url(1x.png) 1x,url(2x.png) 2x);

No.25
下面是一段html代码，展示效果如图A所示。请给出一段css，使这段代码达到图B的展示效果。

要求：
1.不允许修改html结构；
2.css不必考虑浏览器默认样式的因素，布局正确即可；
3.不要求严格对齐，如有需要，元素尺寸可自定义。

页面上有一个节点 <div id=”a” style=”background-color:#000; width:200px; height:200px;”></div>，请实现当鼠标移至该节点时，该节点的透明度从 100 渐变为 20：

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颜色变蓝

p:first-child{color:blue}

No.29
请让页面中的一个元素（10px*10px）围绕坐标(200, 300) 做圆周运动

No.30
用HTML实现下面表格的结构：

No.31
‘data-’属性的作用是什么？

data-为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过getAttribute方法获取。ppk提到过使用rel属性，lightbox库推广了rel属性，HTML5提供了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标签用法有何不同？

em 表示内容的着重点（stress emphasis），strong 表示内容的重要性（strong importance），strong 不会改变所在句子的语意，em 则会改变所在句子的语义。

No.37
请用实现一个最简单的输入框提示功能

要求：
1.输入框内默认显示提示文案，当用户点击输入框后，光标定位到输入框最前，并继续显示提示文案，当用户输入后替换默认提示文案，当用户清空输入框后从新显示默认提示文案
2.要求支持ie（6，7，8，9），firefox，chrome等浏览器
3.请写出html结构，javascript代码逻辑部分写出实现思路即可（有时间能写出代码者最佳，可以使用js库）

￥打赏

如果您觉得文章帮助了您就打赏一下吧

非常感谢你的打赏，我们将继续分享更多优质内容，让我们一起创建更加美好的网络世界！