<script language="javascript">
var url="http://www.taobao.com/index.php?key0=0&key1=1&key2=2";
var theUrl=window.prompt("input the url:","");
function parseQueryString(ul){
var firstSplit=ul.split("//");
var secondSplit=firstSplit[1].split("?");
var thirdSplit=secondSplit[1].split("&");
var urlObj=new Object();
for(i=0;i<thirdSplit.length;i++){
var param=thirdSplit[i].split("=");
urlObj[param[0]]=param[1];
}
return urlObj;
}
var obj=parseQueryString(url);
alert(obj.key0);
</script>最近在收集前端开发工程师的笔试题，正好看到Adam Lu.的这篇博客，感觉挺不错的转载过来！
HTML && CSS
1.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? 行内元素有哪些？块级元素有哪些？CSS的盒模型？
2.CSS引入的方式有哪些? link和@import的区别?
3.CSS选择符有哪些？哪些属性可以继承？优先级？内联和important哪个优先级高？
4.经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？
5.如何居中一个浮动元素?
6.HTML5和CSS3的了解情况
7.你怎么来实现下面这个设计图
Javascript
1.怎样添加、移除、移动、复制、创建和查找节点
2.怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别
3.面向对象编程:b怎么继承a
4.看看下面alert的结果是什么
function b(x, y, a) {
arguments[2] = 10;
alert(a);
}
b(1, 2, 3);
如果函数体改成下面，结果又会是什么？
a = 10;
alert(arguments[2] );
5.请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象，如：var url = ”http://www.taobao.com/index.php?key0=0&key1=1& key2=2…..”
var obj = parseQueryString(url);
alert(obj.key0) // 输出0
(来自淘宝网校园招聘笔试题)
6.ajax是什么? ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?
7.什么是闭包？下面这个ul，如何点击每一列的时候alert其index?
<ul id=”test”>
<li>这是第一条</li><li>这是第二条</li><li>这是第三条</li>
</ul>
8.最近看的一篇Javascript的文章
9.你如何去实现这个Tabview
10.常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？
11.性能-Yslow
这份面试题涵盖了很多方面的内容，基础的html+css,语义化，js的基本功，js的库和框架，以及前端工程师的学习能力.不错！如果可以搞定这份面试题，你的月薪基本上上万了~~
更多关于前端面试的博文：
Nicholas C. Zakas谈怎样才能成为优秀的前端工程师
解答：5. 请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象，如：var url = ”http://www.taobao.com/index.php?key0=0&key1=1& key2=2…..”
var obj = parseQueryString(url);
alert(obj.key0) // 输出0
解答：CSS的盒模型
网页设计中的每个元素都是长方形的盒子，盒子的尺寸是怎样精确计算的，请看下图：
下图表很好地展示了作用于页面上任意盒子的数值：
以上两个例子中，margin 都是白色的。Margin 比较特别，它不会影响盒子本身的大小，但是它会影响和盒子有关的其他内容，因此margin 是盒模型的一个重要的组成部分。
盒子本身的大小是这样计算的：
Width：width + padding-left + padding-right + border-left + border-right
Hight：height + padding-top + padding-bottom + border-top + border-bottom
同时注意在CSS盒模型在IE浏览器和更符合WEB标准的现代浏览器之间的差别：
现在确定了IE6及后续版本都会遵循标准兼容模式，那现在唯一要关注的事情就是如何令IE5.5及更早版本中的网页和其在更现代的浏览器中呈现出的是一致的。如果你目前就遇到了这个问题，那么下面的几个方法会帮助到你，我以我的喜好为它们列出了优先顺序。
（1）避免导致这个问题的情景
（2）插入额外的标记
<div id="news"><div><h2>News</h2><ul>...</ul></div></div>
#news {width:250px} #news div { padding:10px; border:1px solid;}
（3）使用条件注释判断语句
<!--[if lt IE 6]><style type="text/css">#news {width:250px}</style><![endif]-->
（4）使用CSS hacks
#news {
padding:10px;
border:1px solid;
width:250px;
width:228px;
}
所有的浏览器都会看到并理解“width:250px”，但IE 5.*/Win不会读取下面的一行，width:228px，但这行会被其余的浏览器解析。所以最后，IE 5.*/Win得到的width值是250px，其他浏览器得到的是228px。这样，在全部的浏览器中我们的新闻列表的总宽度就一致了。
解答：2.CSS引入的方式有哪些? link和@import的区别?
引入CSS样式的五种方式：
一、使用STYLE属性
将STYLE属性直接加在个别的元件标签里，<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}，
这种用法的优点是可灵巧应用样式於各标签中，但是缺点则是没有整篇文件的『统一性』。
二、使用STYLE标签
将样式规则写在<STYLE>...</STYLE>标签之中。
<STYLE TYPE="text/css">
<!--
样式规则表
-->
</STYLE>
通常是将整个的 <STYLE>...</STYLE>结构写在网页的<HEAD> </HEAD>部份之中。这种用法的优点就是在於整篇文件的统一性，只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。
三、使用 LINK标签
将样式规则写在.css的样式档案中，再以<LINK>标签引入。
假设我们把样式规则存成一个example.css的档案，我们只要在网页中加入<LINK REL=STYLESHEET TYPE="text/css" HREF="example.css">即可套用该样式档案中所制定好的样式了。 通常是将LINK标签写在网页的<head></head>部份之中。
这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。
四、使用@import引入
跟LINK用法很像，但必放在<STYLE>...</STYLE> 中。
<STYLE TYPE="text/css">
<!--
@import url(引入的样式表的位址、路径与档名);
-->
</STYLE>
例如：
<STYLE TYPE="text/css">
<!--
@import url(http://yourweb/ example.css);
-->
</STYLE>
要注意的是，行末的分号是绝对不可少的。
五、使用<span></span>标记引入样式
例如：<span style="font:12px/20px 宋体 #000000;"></span>
link和@import的区别：
引入css外部文件的两种方法为在html页面通过link，src属性，再者是通过CSS文件本身通过@import url()引入，虽然这两种方式都可以加载进来CSS文件，可是link和@import也存在着细微的差别。
一、隶属上的差别
link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。此处注意浏览器的link src为空时候时会导致页面加载次数增多。
二、@import次数限制
传闻在IE6下，@import只能引入31次css文件，可是可以通过在css文件中再次import来垂直扩展，这个没有测试过。
三、加载顺序的不同
当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS文件会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式，然后突然样式会出现，网速慢的时候还挺明显，@import这点跟把CSS文件放在页面结尾效果相同，不过如果我们一些样式开始页面并不会出现，而是在交互时才出现的CSS样式，可以通过这个方法引入，时间上错开。例如：Ajax的html，交互时的弹出框，弹出div等。
四、兼容性上的差别
由于@import是CSS2.1提出的，@import只有在IE5以上的才能识别，而link标签无此问题（似乎影响不大）。
五、使用DOM控制样式时的差别
当使用javascript控制DOM(document.styleSheets)去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
所以，无特殊情况推荐使用link来引入样式，尽量避免使用@import，而如果进行Ajax或者交互的样式，则可以通过@import引入。
解答：CSS3
配合HTML5的CSS3 还处在草案中，关于它的中文资料很少，其主要是在页面的修饰效果上增添了一些功能，并且语法更加简单，逻辑更加清晰。主要增加的现实效果有：圆角，多背景，用户自定义字体，动画与渐变，渐变色，盒阴影，加入透明色，文字阴影，具体参看css3中文手册http://soeasy.duapp.com/css3.0.chm
解答: 4.看看下面alert的结果是什么
function b(x, y, a) {
arguments[2] = 10;
alert(a);
}
b(1, 2, 3);
如果函数体改成下面，结果又会是什么？
a = 10;
alert(arguments[2] );
alert结果10，10，都是10.
关于arguments用法：
例子，var $ = function() { return document.getElementById(arguments[0]); }，在function定义的时候，可以定义参数，也可以不定义，如果调用这个函数的时候给了它参数，那么就可以通过这个数组来得到所有参数。
在javas
js不会主动为你判断你到底给函数传了多少个参数，如果你多传了，多余的部分就没有被使用，如果你少传了，那么没传的参数值就是undefined。所以我们可以借助arguments的length属性来检测调用函数时是否使用了正确数目的实际参数，因为javas
function f(x,y,z)
{
//首先检查传递的参数数量是否正确
if(arguments.length != 3)
{
throw new Error("function f called with " + arguments.length + "arguments ,but it not 3 arguments.");
}
//下面运行真正的函数
}arguments还为我们提供了这样一种可能，就是为一个函数传任意数目的实际参数，比如说，我想判断你传给我的一些数字的大小，取出最大的那个，对，没错，你传多少参数都行，但是前提是你要传数字，因为我在函数内部懒得判断了。
function max()
{
//这已经是JavaScript内最小的数字了
var m = Number.NEGATIVE_INFINITY;
for(var i = 0; i < arguments.length; i++)
{
//只要有任何一个参数比m大，那么m就变成了这个参数的值
if(arguments[i]> m)
m = arguments[i];
}
return m;
}arguments的callee属性是用来引用当前正在执行的函数，这对未命名的函数调用自身非常有好处。
//用函数直接量，采用arguments.callee属性实现递归函数
var result = function(x){
if(x<=1) return 1;
return x*arguments.callee(x-1);
};
arguments.callee一般来说，它会和匿名函数一起结合来用。再看一递归调用例子，求一个数的阶乘：
//普通实现
function fun2(n) {
if (n > 1) {
return n * fun2(n -1);
}
return 1;
}
var r1 = fun2(3);
//使用匿名函数
var r2 = (function(n) {
if (n > 1) {
return n * arguments.callee(n -1);
}
return 1;
})(3);解答：
4.CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？
回答：ID 和 CLASS
Class 可继承
伪类A标签可以继承
列表 UL LI DL DD DT 可继承
优先级就近原则，样式定义最近者为准
载入样式以最后载入的定位为准
优先级为
!important > [ id > class > tag ]
Important 比内联优先级高，!important的出现就是为了让用户自己设置被执行语句的优先级，比如：
.home{
margin-left:20px!important;
margin-left:40px;
}
margin-left:20px!important;
margin-left:40px;
}
那么在火狐、google浏览器以及IE7以上版本下将会按照20px来执行，而在IE6下却仍然按照40px来执行，因为IE6并不支持!important规范，我们就可以按照这个规则来满足IE6的设计需要，什么时候发现IE6和其他浏览器显示效果不同，那么就设置两个，在上面的一个加入!important标记，而下面的一句则不需要添加，这样IE6就按照下面的来执行了。资深的CSSer说：如今的CSS处处!important。
5:前端页面有哪三层构成，分别是什么？作用是什么？
5:前端页面有哪三层构成，分别是什么？作用是什么？
回答：结构层，表现层，定义层；
6:css的基本语句构成是？
回答：选择器、属性和属性值。
8：你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？
回答：涉及到效率 一般就在IEtext firefox 3.5 软件上测试 模拟 IE6 IE7 IE8 内核是IE7 的
浏览器PNG8格式背景图透明 JS 报错，浏览器本身的兼容问题 有些电脑IE7 IE6 下正常，有些提示错误
9.如何居中一个浮动元素?
回答：设置容器的浮动方式为相对定位，然后确定容器的宽高 比如宽500 高 300 的层，然后设置层的外边距。
.Div {
Width:500px ; height:300px;
Margin: -150px 0 0 -250px;
position: absolute;
left:50%;
top:50%;
}
10.有没有关注HTML5和CSS3?如有请简单说一些您对它们的了解情况！
回答：HTML5 没有关注CSS3 有关注
比如对多背景图 圆角 投影 等样式的关注
13:如果让你来制作一个访问量很高的大型网站，你会如何来管理所有CSS文件、JS与图片？
回答：涉及到人手、分工、同步；
先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等；
编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；
标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；
页面进行标注（例如 页面 模块 开始和结束）；
CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）；
JS 分文件夹存放 命民以该JS 功能为准英文翻译；
图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理。
14：你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？
回答：是策划、UI设计需要转换成程序可实施中的必须的中间环节，这个环节直接关系到页面的正确高效稳定，还原策划和UI 设计的效果，同时为程序套接做好程序表现基础载体。这个工作的前景，只能是深造技术流的，模块化管理，新的技术不断更新，对于向后兼容思维的逐步放弃，比如真的淘汰掉IE6后，向前的空间还是有的。前端开发工程师的前景是非常不错的。现在各大IT企业都在招聘这方面的人才。WEB2.0的普及会更加促进本行业本工种的繁荣。
1.Doctype? 严格型与框架型-如何触发这两种模式，区分它们有何意义?
回答：在严格模式下，一个最简单的区别就是，IE的盒模型将遵循标准。
IE 6,7,8 触发混杂模式的办法，一是不加DTD，二是就算加了DTD，再加点其他内容也会触发混杂模式。
2：行内元素有哪些？块级元素有哪些？CSS的盒模型？
回答：内联元素(inline element)
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* big - 大字体
* br - 换行
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* label - 表格标签
* s - 中划线(不推荐)
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器，定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量
块级元素
* address - 地址
* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级容易，也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容）
* noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
3.CSS引入的方式有哪些? link和@import的区别是?
回答：有三种
1）link方法 <link href="css/style.css" rel="stylesheet" type="text/css" />
2）使用@import引入
<STYLE TYPE="text/css">
<!--
@import url(css/example.css);
-->
</STYLE>
3）页面直接加样式
例如使用<span></span>标记引入样式，<span style="font:12px/20px #000000;">文字内容</span>
差别1：link属于XHTML标签，而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
差别2：加载顺序的差别，当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
差别4：使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
大致就这几种差别了（如果还有什么差别，大家告诉我，我再补充上去），其它的都一样，从上面的分析来看，还是使用link标签比较好。
标准网页制作加载CSS文件时，还应该选定要加载的媒体（media），比如screen，print。
6025
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
