2013年阿里巴巴实习生笔试题

最新推荐文章于 2025-08-10 11:34:37 发布

bit小兵

最新推荐文章于 2025-08-10 11:34:37 发布

阅读量80

点赞数

CC 4.0 BY-SA版权

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/shamoguying1140/archive/2013/05/09/3070193.html

本文分享了一次阿里前端笔试的经历及反思，包括HTML/CSS实践、DOM操作、数组处理等技术要点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前几天参加了阿里的笔试题，题目虽然很简单，但是现在回想下发现出了不少问题，还是基础不牢固啊。把这些题目写出来也算是对自己的一种提升吧。

1.html题

代码：

<!DOCTYPE html>
<html>
    <head> 
    </head>
	<style>
	table,td,th{
		border: 1px solid #000;
		border-collapse: collapse;
		text-align: center;
	}
	</style>
    <body>
    <table class="table" cellspacing="0">
        <thead>
         <tr>
            <th>国家</th>
            <th>名称</th>
            <th>域名</th>
            <th>排名</th>
        </tr>
        </thead> 
        <tbody>
        <tr>
            <td>中国</td>
            <td>淘宝</td>
            <td>www.taobao.com</td>
            <td>1</td>
        </tr>
        <tr>
            <td rowspan="2">美国</td>
            <td>epay</td>
            <td>www.epay.com</td>
            <td>2</td>
        </tr>
        <tr>
            <td>amazon</td>
            <td>www.epay.com</td>
            <td>3</td>
        </tr>
        </tbody>
        <tfoot>
            <tr>
            <td colspan="4" style="text-align:right">www.a.com</td>
        </tr>
        </tfoot>
    </table>
    </body>
</html>

　　2.css选择器的缩写，具体代码记不清楚了，就是涉及background、font、#000000之类、后代选择器的缩写

3.先是语义化一个登录界面，然后是实现css部分（圆角半透明）。当时是想不起来如何实现半透明，找了找资料，发现是通过rgba（r,g,b,a）中的a来实现开透明的，还是基础知识掌握的不牢固啊。下面是自己写的代码，颜色背景什么的没有细致调整，样子大致是这样。

<!DOCTYPE html>
<html>
    <head>
    <style type="text/css">
	*{
	    margin: 0;
	    padding: 0;
	}
        #login{
	    position: relative;
	    margin: 0 auto;
	    width: 300px;
	    border: 10px solid rgba(0,0,0,0.4);
	    border-radius: 3px;
	}
		#delete{
			overflow: hidden;
			background: #555; 
		}
		#delete input{ 
			float: right;
			width: 28px;
			background: url(img/delete.png) no-repeat right top #555;
		}
		#login h3{  
			background: rgb(240, 173, 173);
			padding: 5px 10px;
		}
		#loginForm{
			padding: 10px;
		}
		#loginForm div{
			margin: 5px;
		}
		#submit{
			text-align: center;
		} 
		#submit input{
			margin: 0 10px;
		}
    </style>
    </head>
    <body>
		<div id="login">
			<div id="delete">
				<input type="button"  /> 
			</div>
			<h3>淘宝登录页面</h3>
			<form id="loginForm" action="" method="post">
				<div id="user">
					<label for="userName"> 用户名: </label>
					<input type="text" id="userName"/>
				</div>
				<div id="password">
					<label for="password"> 密  码: </label>
					<input type="password" id="password" />
				</div>
				<div id="submit"> 
					<input type="submit" value="登 录" /><a>请注册</a>
				</div>
			</form>
		</div>
    </body> 
</html>

4.查找页面中所有类为test的节点，当时是对document.body.childNodes进行遍历，没有想到子节点还有可能拥有子节点，此题就此倒下，贴出一个可行的吧：

function getByClass(test){ 
	var lists = document.getElementsByTagName('*');
	var result = [];
	var reg = new RegExp('\\b'+test+'\\b');
	for(var i=0,len=lists.length;i<len;i++){
		if(reg.test(lists[i].className)){
			result.push(lists[i]);
		}
	}
	return result;
}

　　5.删除数组中的重复节点

if(! Array.prototype.unique){

       Array.prototype.unique = function(){
        
             var arr = this, temp = [], result = [];

             for(var i=0,len=arr.length;i<len;i++){
                  if(!temp[arr[i]]) {
                           result.push(arr[i]);
                           temp[arr[i]] = true;
                  }
             }
              return result;

       }


}

　　6.谈谈对前端工程师的认识？这种题目就看自己发挥了。

转载于:https://www.cnblogs.com/shamoguying1140/archive/2013/05/09/3070193.html