2014年3月31日晚，我怀着稍微忐忑的心情（第一次在线笔试^_^!!）进行了笔试。阿里巴巴的笔试题共同拥有10道，差点儿包括了Web前端开发的各个方面，有程序题、有叙述题。时间很紧张，仅仅完毕了大概6道题。

以下把遇到的题目跟大家分享一下！

1、

<pre name="code" class="html"><!doctype html>

<html>

    <head>

        <style type="text/css">

            div:not(.outer) p { color: purple; }

            div.outer p { color: orange; }

        </style>

    </head>  

    <body>

        <div class="outer">

            <p>

                我是 outer 里面的字

            </p>

            <div class="inner">

                <p>

                    我是 inner 里面的字

                </p>

            </div>

        </div>

    </body>

</html>  




问：为什么以上两个<p> 标签中的文字颜色都是橙色的？


这里涉及到了CSS中的层叠和特殊性问题。首先依照上下顺序，第一个<p>元素它的样式非常明显是由div.outer p 定义的，所以是橙色。第二个<p>元素的样式是由样式表中的两个样式同一时候定义，并且相同是color样式。依据《CSS权威指南》中的介绍，当CSS样式发生层叠时，要通过层叠规则来安排终于元素匹配的样式。


CSS2.1的层叠规则中的规定。在没有!important标志时，要依照特殊性排序，假设还不能比較完，就后面覆盖前面。


能够參考：CSS层叠规则


2、请实现一个Event类。继承自此类的对象都会拥有两个方法on和trigger，类声明例如以下，请写出完整代码：







[javascript] view

 plaincopy










  1. function Event() {}
    2. 

  2. Event.prototype.on = function(eventName, callback) {
    3. 

  3. //注冊事件监听
    4. 

  4. }
    5. 

  5. Event.prototype.trigger = function(eventName, data) {
    6. 

  6. //触发事件
    7. 

  7. }




<span style="font-family: Arial, Helvetica, sans-serif;">3、</span>


要求实现一个多行文本输入框，固定宽度。可依据用户输入的内容多少进行高度自适应变化。如。用户输入了1行文字，则输入框显示为1行。而有2行文字，就显示2行。如微博的评论回复。







[javascript] view

 plaincopy










  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <title>文本框换行</title>
    5. 

  5. <meta charset="utf-8">
    6. 

  6. <style>
    7. 

  7. .txt {
    8. 

  8. border: 1px solid #CCC;
    9. 

  9. width: 200px;
    10. 

  10. padding: 3px;
    11. 

  11. font: 12px/16px Simsun;
    12. 

  12. outline: none;
    13. 

  13. resize: none;
    14. 

  14. word-wrap: break-word;
    15. 

  15. word-break: break-all;
    16. 

  16. overflow: hidden;
    17. 

  17. }
    18. 

  18. </style>
    19. 

  19. <script>
    20. 

  20. window.addEventListener('load', function () {
    21. 

  21. (function (o, e, t) {
    22. 

  22. //创建一个pre标签，用来计算文字应有高度
    23. 

  23. e = document.createElement("pre");
    24. 

  24. //给pre加入上和文本域一样的样式
    25. 

  25. e.className = "txt";
    26. 

  26. //设置绝对定位到屏幕外来隐藏它
    27. 

  27. e.style.position = "absolute";
    28. 

  28. e.style.left = "-9999px";
    29. 

  29. //创建一个文本节点来操作，避免直接操作HTML
    30. 

  30. e.appendChild(t = document.createTextNode(""));
    31. 

  31. //给pre的末尾加入一个换行。由于pre会吞掉末尾的一个换行
    32. 

  32. e.appendChild(document.createTextNode("\n"));
    33. 

  33. //把pre放入文档中
    34. 

  34. document.body.appendChild(e);
    35. 

  35. //文本域键盘事件时计算高度
    36. 

  36. o.onkeydown = o.onkeyup = function () {
    37. 

  37. //IE8下\r\n在PRE标签中会被解析为两行，所以须要一个替换
    38. 

  38. //假设认为这样会影响效率能够先推断浏览器
    39. 

  39. t.data = o.value.replace(/\r\n/g, "\n");
    40. 

  40. o.style.height = e.offsetHeight - 8 + "px";
    41. 

  41. };
    42. 

  42. //初始时计算一次
    43. 

  43. o.onkeydown();
    44. 

  44. //为了避免换行时闪的太厉害。略微阻止下滚动
    45. 

  45. o.onscroll = function () {
    46. 

  46. o.scrollTop = 0
    47. 

  47. };
    48. 

  48. })(document.getElementById("o"));
    49. 

  49. }, false);
    50. 

  50. </script>
    51. 

  51. </head>
    52. 

  52. <body>
    53. 

  53. <textarea id="o" class="txt">来呀。来编辑我呀～</textarea>
    54. 

  54. </body>
    55. 

  55. </html>





4、


编写一个JavasSript函数。给定一个DOM节点node和一个正整数n,返回node的全部第n代后代节点（直接子节点为第1代）







[javascript] view

 plaincopy










  1. function getDescendants(node, n) {
    2. 

  2. // return an Array
    3. 

  3. }









[javascript] view

 plaincopy










  1. <script type="text/javascript" >
    2. 

  2. function getDescendants(node, n) {
    3. 

  3. //node, n
    4. 

  4. var childArr = [];
    5. 

  5. var len,tempArr,childNodelist;
    6. 

  6. childArr.push(node);
    7. 

  7. for(var i = 0; i<n ; i++){
    8. 

  8. len = childArr.length;
    9. 

  9. tempArr = [];
    10. 

  10. for(var j = 0;j<len;j++){
    11. 

  11. childNodeList = makeArray(childArr[j].childNodes);
    12. 

  12. tempArr = tempArr.concat(childNodeList);
    13. 

  13. }
    14. 

  14. childArr = tempArr;
    15. 

  15. }
    16. 

  16. return childArr;
    17. 

  17. }
    18. 

  18. var makeArray = function(obj){
    19. 

  19. return Array.prototype.slice.call(obj,0);
    20. 

  20. }
    21. 

  21. var result = getDescendants(document.getElementById("content"),2);
    22. 

  22. alert(result);
    23. 

  23. </script>





5、有2个int型已经去重的数组a和b。都是已经从小到大排序好的。


要求遍历b数组的数字，假设这个数字出如今a中，就将其从a删去。反之将其插入到a的适当位置，使a保持排序状态。







[javascript] view

 plaincopy










  1. <script type="text/javascript" charset="utf-8">
    2. 

  2. //有2个int型已经去重的数组a和b，都是已经从小到大排序好的。
    

    要求遍历b数组的数字。
    3. 

  3. //假设这个数字出如今a中，就将其从a删去。反之将其插入到a的适当位置，使a保持排序状态。
    4. 

  4. var mySort = {};
    5. 

  5. mySort.sortArr = function(a, b) {
    6. 

  6. var pos = 0;
    7. 

  7. for (var i = 0; i < b.length; i++) {
    8. 

  8. pos = mySort.checkRepeat(a, b[i],pos);
    9. 

  9. }
    10. 

  10. }
    11. 

  11. mySort.checkRepeat = function(a, v, pos) {
    12. 

  12. var isChanged = false;
    13. 

  13. if (a != null && a != undefined && a.length > 0) {
    14. 

  14. for (var j = pos; j < a.length; j++) {
    15. 

  15. if (a[j] == v) {
    16. 

  16. a.splice(j, 1);
    17. 

  17. break;
    18. 

  18. } else if (a[j] > v) {
    19. 

  19. a.splice(j, 0, v);
    20. 

  20. break;
    21. 

  21. }
    22. 

  22. }
    23. 

  23. if(j == a.length){
    24. 

  24. a.push(v);
    25. 

  25. }
    26. 

  26. return j;
    27. 

  27. }
    28. 

  28. }
    29. 

  29. var a = [2,7,12,25,36,64];
    30. 

  30. var b = [2,3,9,32,36,56,87];
    31. 

  31. document.write("合并前数组a为："+a.toString()+"<br>");
    32. 

  32. document.write("合并前数组b为："+b.toString()+"<br>");
    33. 

  33. mySort.sortArr(a,b);
    34. 

  34. document.write("合并后数组a为："+a.toString());




//结果是:


合并前数组a为：2,7,12,25,36,64


合并前数组b为：2,3,9,32,36,56,87


合并后数组a为：3,7,9,12,25,32,56,64,87


6、请描写叙述一下从用户输入网址開始。到网页最后呈现出来的全过程。越具体越好。包含各种事件等。


7、8、请评价下面代码并给出改进意见。


<pre name="code" class="javascript">if (window.addEventListener) {

    var addListener = function (el, type, listener, useCapture) {

        el.addEventListener(type, listener, useCapture);

    };

} else if (document.all) {

    addListener = function (el, type, listener) {

        el.attachEvent("on" + type,

            function () {

                listener.apply(el);

            });

    };

}  





问：1、为什么终于小狗叫了200声汪？请具体说明为什么。2、改动代码setTimeout部分代码，实现每隔1秒调用i（从1到10递增）次dog()。


1、第一题重点在于函数作用域的问题。


2、 改动后的setTimeout函数是





[javascript] view

 plaincopy










  1. for (var i = 0; i < 10; i++) {
    2. 

  2. (function(a) {
    3. 

  3. setTimeout(function() {
    4. 

  4. for (var j = 1; j <= a; j++) {
    5. 

  5. document.write(dog()+" "+a+"<br>");
    6. 

  6. }
    7. 

  7. }, 1000);
    8. 

  8. })(i+1);
    9. 

  9. }



												


											
2014阿里巴巴WEB前端实习生在线笔试题的更多相关文章
	

    
								
  1. 2017百度web前端实习生在线笔试题
		
    代码: import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner s ...
    
		
    2. 
						
  2. 2017携程Web前端实习生招聘笔试题总结
		
    考察encodeURI encodeURI(), decodeURI()它们都是Global对象的方法. encodeURI()通过将某些字符的每个实例替换代表字符的UTF-8编码的一个或多个转义字符 ...
    
		
    3. 
						
  3. 2017腾讯Web前端实习生招聘笔试题总结
		
    指针与引用的区别 考察margin塌陷 考察C++继承和~符号 考察TCP通讯过程 位码 三次握手 为什么不是两次握手 为什么不是四次握手 四次挥手 为什么要四次握手 TCP的状态 考察严格模式 进程 ...
    
		
    4. 
						
  4. 2016年4月21百度iOS实习生在线笔试题&编程题
		
    1.一个人上台阶可以一次上1个,2个,或者3个,问这个人上32层的台阶,总共有几种走法? 思路:先建立数学模型,设3步的走 i 次,2步的走 j 次, 1步的走 k 次,上了3*i + 2*j + 1 ...
    
		
    5. 
						
  5. 2014阿里巴巴web前实习生项目分析（1）
		
    以下简化CSS代码: div.container{ width:500px; background-image:url(/img/sprite.png); background-repeat:no-r ...
    
		
    6. 
						
  6. [2014亚马逊amazon] 在线笔试题  大于非负整数N的第一个回文数   Symmetric Number
		
    1.题目 如标题,求大于整数N(N>=0)的第一个回文数的字符串表示形式. 这个题目也是当时笔试第一次见到,花了一个小时才做出了.慢慢总结还是挺简单的. 2.分析 分析如下: (1)一位数N(9 ...
    
		
    7. 
						
  7. Web前端开发工程师面试题
		
    Web前端开发工程师面试题1.说说css的优先级?2.在移动端中,常常使用tap作为点击事件,好处是?会带来什么问题?3.原生JS的window,onload与Jquery的$(document).r ...
    
		
    8. 
						
  8. ThoughtWorks西邮暑期特训营 -- JavaScript在线笔试题
		
    ThoughtWorks 公司在西邮正式开办的只教女生前端开发的女子卓越实验室已经几个月过去了,这次计划于暑期在西邮内部开展面向所有性别所有专业的前端培训. 具体官方安排请戳:ThoughtWorks ...
    
		
    9. 
						
  9. 阿里巴巴 web前端性能优化进阶路
		
    Web前端性能优化WPO,相信大多数前端同学都不会陌生,在各自所负责的站点页面中,也都会或多或少的有过一定的技术实践.可以说,这个领域并不缺乏成熟技术理论和技术牛人:例如Yahoo的web站点性能优化 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. CAD参数绘制多段线（com接口）
			
    多段线又被称为多义线,表示一起画的都是连在一起的一个复合对象,可以是直线也可以是圆弧并且它们还可以加不同的宽度. 主要用到函数说明: _DMxDrawX::PathLineTo 把路径下一个点移到指定 ...
    
			
    2. 
						
  2. 拦截导弹问题(Noip1999)
			
    1322:[例6.4]拦截导弹问题(Noip1999) 时间限制: 1000 ms         内存限制: 65536 KB提交数: 3843     通过数: 1373 [题目描述] 某国为了防 ...
    
			
    3. 
						
  3. pip install MySQL-python error "can't open config-win.h"
			
    http://blog.csdn.net/xxm524/article/details/48754139
    
			
    4. 
						
  4. Android之多种Bitmap效果（4）
			
    1. 将图片变为圆角 2. 获取缩略图图片 3. LOMO特效 4. 旧时光特效 5. 暖意特效 6. 根据饱和度.色相.亮度调整图片 7. 添加图片外边框 8. 添加内边框 9. 创建一个缩放的图片 ...
    
			
    5. 
						
  5. [Luogu] P1865 A % B Problem
			
    题目描述 区间质数个数 输入输出格式 输入格式: 一行两个整数 询问次数n,范围m 接下来n行,每行两个整数 l,r 表示区间 输出格式: 对于每次询问输出个数 t,如l或r∉[1,m]输出 Cros ...
    
			
    6. 
						
  6. bzoj1174 Toponyms
			
    给你一个字符集合,你从其中找出一些字符串出来. 希望你找出来的这些字符串的最长公共前缀*字符串的总个数最大化. 第一行给出数字N.N在[2,1000000] 下面N行描述这些字符串,长度不超过2000 ...
    
			
    7. 
						
  7. group 和 gshadow
			
    group组文件 位置:/etc/group 作用:存放用户的分组信息 使用 /etc/group 命令查看时,得到的数据如下: 分析上图,可以得到以下结果 第1个字段:组名 默认组名与用户名名称一样 ...
    
			
    8. 
						
  8. Centos下PHP7.1打开Oracle扩展
			
    背景 最近因为项目研究了一下PHP集成Oracle,虽然这个组合很奇葩,但万一用到请勿采坑~ 环境 CentOS Linux release 7.3.1611 (Core) PHP7.1.1 安装or ...
    
			
    9. 
						
  9. restframework框架之认证
			
    1. 认证之APIView 在聊APIView之前, 我们先重温一下django2.x的CBV流程 a. 对于django而言, 当浏览器请求到达之后,按照规则首先会经过各大中间件(Middlewar ...
    
			
    10. 
						
  10. 爬虫基础spider 之(一) --- 初识爬虫
			
    爬虫概念 (spider,网络蜘蛛)通过互联网上一个个的网络节点,进行数据的提取.整合以及存储.从而获取我们想要的部分 robots协议 robots协议不是技术层面的协议,只是一个君子协定: 首先在 ...
    
			
    11.