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. vue之package.json文件解析
			
    1.package.json是什么? 什么是Node.js的模块(Module)?在Node.js中,模块是一个库或框架,也是一个Node.js项目.Node.js项目遵循模块化的架构,当我们创建了一 ...
    
			
    2. 
						
  2. 【计算机网络】2.2 Web和HTTP
			
    第二章第二节 Web和HTTP 这一章中,我们需要讨论5种重要的应用:Web.文件传输.电子邮件.目录服务.P2P:这一节中,我们将讨论Web和它的应用层协议HTTP. Outline Web简介 H ...
    
			
    3. 
						
  3. RestTemplate接收HashMap变为LinkedHashMap，RestTemplate接收数据后转成json数据出现反斜杠
			
    使用postForObject方法远程调用接口,正常会返回List<HashMap>,然而实际上却返回List<LinkedHashMap>,同时将此数据进行json转换,变成 ...
    
			
    4. 
						
  4. 修改python注册表
			
    转自:http://blog.csdn.net/u014680513/article/details/51005650 # script to register Python 2.0 or later ...
    
			
    5. 
						
  5. python3+beautifulSoup4.6抓取某网站小说（二）基础功能设计
			
    本章学习内容:1.网页编码还原读取2.功能设计 stuep1:网页编码还原读取 本次抓取对象: http://www.cuiweijuxs.com/jingpinxiaoshuo/ 按照第一篇的代码来 ...
    
			
    6. 
						
  6. nginx下TP5 隐藏入口文件+支持pathinfo模式+配置多项目根目录
			
    首先说下项目目录情况  跟目录/usr/share/nginx/html/(别说怎么这么深  0.0) html文件夹下面两个目录 pssh  pssh_shop 两个tp5项目分别对应两个二级域名  ...
    
			
    7. 
						
  7. (八)python3 迭代
			
    迭代:如果给定一个 list 或 tuple,我们可以通过 for 循环来遍历这个 list 或tuple,这种遍历我们称为迭代(Iteration) 字典: >>> d = {'a ...
    
			
    8. 
						
  8. 【转载】Hadoop NameNode 高可用 (High Availability) 实现解析
			
    转载:https://www.ibm.com/developerworks/cn/opensource/os-cn-hadoop-name-node/ NameNode 高可用整体架构概述 在 Had ...
    
			
    9. 
						
  9. <struct、union、enum>差异
			
    关于C++和C的区别 区别最大的是struct,C++中的struct几乎和class一样了,可以有成员函数,而C中的struct只能包含成员变量. enum,union没区别. struct的定义  ...
    
			
    10. 
						
  10. input输入框的readonly属性-----http://www.w3school.com.cn/tags/tag_input.asp
			
    http://www.w3school.com.cn/tags/tag_input.asp input输入框的readonly属性 查询方法: 1.先找官方的文档,api 2.官方的有看不懂的再百度相 ...
    
			
    11.