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. hdfs深入：03、hdfs的架构以及副本机制和block块存储
			
    HDFS分布式文件系统设计目标 1.            硬件错误  由于集群很多时候由数量众多的廉价机组成,使得硬件错误成为常态 2.            数据流访问  所有应用以流的方式访问数 ...
    
			
    2. 
						
  2. BZOJ 3876 支线剧情  有源汇有上下界最小费用可行流
			
    题意: 给定一张拓扑图,每条边有边权,每次只能从第一个点出发沿着拓扑图走一条路径,求遍历所有边所需要的最小边权和 分析: 这道题乍一看,可能会想到什么最小链覆盖之类的,但是仔细一想,会发现不行,一是因 ...
    
			
    3. 
						
  3. spring Boot 不认Mapper.xml
			
    很久以前的笔记了,大约就是用Generatro工具自动生成代码的时候,springboot找不到mapper.xml 之前,由于用mybatis-generator自动生成了entity,dao,ma ...
    
			
    4. 
						
  4. PHP解惑(一)
			
    PHP给人的印象是入门简单的语言.当你的技术能力达到一定阶段时,会发现情况并非如此. PHP采用"极简主义",就是以入门容易为准则设计的,在十几年的持续发展历程中,它早已成为一个开 ...
    
			
    5. 
						
  5. Kvm：通过 libvirt 远程管理虚拟机
			
    1.通过qemu+ssh方式 2.通过qemu+tcp方式 主控端需要安装相关工具包: #yum groupinstall "Virtualization" #yum instal ...
    
			
    6. 
						
  6. 分布式集群环境下运行Wordcount程序
			
    1.分布式环境的Hadoop提交作业方式与本地安装的Hadoop作业提交方式相似,但有两点不同: 1)作业输入输出都存储在HDFS 2)本地Hadoop提交作业时将作业放在本地JVM执行,而分布式集群 ...
    
			
    7. 
						
  7. 将一个list中的元素的某一属性取出来单独放到一个list里面
			
    有很多时候我们会遇到这样的场景,就是要将一个list中的某一个元素中的某一属性单独拿出来放在一个新的list里面,这中时候,我们就可以用以下的方法来进行实现: List<DTO> item ...
    
			
    8. 
						
  8. windows事件查看器
			
    如果一个软件发生异常,软件本身没有提示异常信息, 需要从事件查看器中查看产生的错误事件 运行输入eventvwr或者win + X
    
			
    9. 
						
  9. Quartz --Scheduler
			
    
			
    10. 
						
  10. UVa 514 铁轨
			
    题意: #include <bits/stdc++.h> using namespace std; int main() { int n; ]; ; ) { ]) && n ...
    
			
    11.