目录

内容简介

前言

第1篇 烽烟起，剑在手——JavaScript永不休

第1章 未入江湖，先定三分［JavaScript初级面试题］

1.1 面试从这里开始（关于JavaScript）

1.2 这题很简单（字符串）

1.3 我面试，我快乐（变量）

1.4 平平淡淡搞定面试（数据类型）

1.5 哎呦，这题不错哦（window的属性和方法）

1.6 让你魂牵梦绕的题（元素）

1.7 “神马”题都是浮云（cIassName）

1.8 看完这题，花儿都笑了（保留字和关键字）

1.9 我懂的题，你懂吗（循环语句）

第2章 能文能武，身怀绝技［JavaScript中级面试题］

2.1 小考题，大味道（表达式）

2.2 让人叹为观止的考题（String对象）

2.3 让人绞尽脑汁的考题（Math对象）

2.4 令人陶醉的考题（数组）

2.5 令人难过的考题（函数）

2.6 令人抑郁的考题（对象）

2.7 夜以继日难以攻克的考题（定时器）

2.8 学无止境（日期和时间）

2.9 主流技术的“最爱”（typeof、instanceof）

第3章 进得武林，入得四方［JavaScript高级面试题］

3.1 轻松解决缠绕你的考题（this）

3.2 细心可以拿满分的题（事件）

3.3 不可忽视的小漏洞（表单、文本框）

3.4 “照镜子”看题（对称数）

3.5 让你坚定不移看下去（JavaScript客户端检测）

3.6 过了这题，公司随便挑（排序）

3.7 看了这题，收获多多（caII、appIy）

3.8 看懂必高薪的面试题（继承和多态）

3.9 大型企业面试必考（charAt()、indexOf()）

3.10 五年前端，三年必考（substr、substring）

3.11 这题如此而已，我会为你加油（iframe）

第4章 一手遮天，大名远扬［JavaScript终极面试题］

4.1 让人暴走的考题（Ajax）

4.2 面对这些考题，除了崩溃我不知道还能说什么（XMLHttpRequest对象）

4.3 感慨“时间太瘦”的考题（关于继承）

4.4 高级前端必考试题（闭包）

4.5 值得思考和深钻的考题（video）

4.6 这些年，一直“陪伴我”的考题（urI参数）

4.7 小心陷阱！总是被坑的考题（JavaScript模仿块级作用域）

4.8 错误率最高的考题（正则表达式）

4.9 前端最新技术考题（转换大写）

4.10 总有一种题，叫看起来都对（JSON）

4.11 最难回答的考题（事件委托）

4.12 高智商考题（事件流）

4.13 前端压轴考题（错误处理与调试）

4.14 你值得拥有的考题（Cookie）

综合提升

第2篇 驾骏马，拉长弓——HTML5+CSS3我独行

第5章 博学多才，雄韬伟略［HTML5+CSS3初级面试题］

5.1 做了这些，不再是菜鸟（关于HTML5）

5.2 真本事，更自信（HTML5语法）

5.3 这些题总能温暖你（HTML5+CSS3新增属性）

5.4 最实用的题（HTML5与XML）

5.5 KO这些题，前端岗位不是梦（HTML5结构）

5.6 前端好考题（HTML5布局）

5.7 这些题，让你赢在起跑线上（关于CSS3）

5.8 领先别人一步（CSS3选择器）

5.9 从最陌生到最熟悉的题（切图）

5.10 做好当下（定位相关）

第6章 不鸣则已，一鸣惊人［HTML5+CSS3中级面试题］

6.1 没有你们，我会不安（HTML5音频与视频）

6.2 终是拨开云雾见月明（弹性盒布局）

6.3 心在天上，题在手上（HTML5常见问题）

6.4 多几分钟的准备，少几小时的麻烦（HTML元素）

6.5 经久不衰的考题（代码纠错）

6.6 比上不足，比下有余（代码优化）

6.7 非常可乐，非常选择（上传）

6.8 爱上面试的感觉（文本）

6.9 你想摆谱，先干掉我（字体）

6.10 前端深处考题（边框背景）

6.11 有这些，更自信（多列布局）

6.12 总有些考题念念不忘（多列显示样式）

6.13 深入每道题的世界（盒布局）

第7章 运筹帷幄，决胜千里［HTML5+CSS3高级面试题］

7.1 就这些，永不过期（模式）

7.2 这些题，让你前端技艺更高一筹（HTML5页面）

7.3 考题中的钉子户（Canvas的使用）

7.4 点面试，闯全关（媒体查询）

7.5 面试一大坎儿（浏览器缓存与本地储存）

7.6 这些让你更强大（媒体调用标签）

7.7 脑若一动，题就千行（HTML、CSS综合）

7.8 有了我就知足吧（兼容问题）

7.9 一直在寻找，直到遇见你（响应式布局）

7.10 一直在寻觅的考题（关于浏览器）

7.11 无法轻描淡写的考题（PC、移动）

7.12 最难懂的题给真心的你（HTML5效果）

7.13 从此，面试不重来（控件相关）

第8章 见多识广，独霸一方［HTML5+CSS3终极面试题］

8.1 这些题必须认真对待（HTML5应用程序缓存）

8.2 这些题“包罗万象”（HTML5常见API）

8.3 再深的题海，也能乘风破浪（HTML5数据存储）

8.4 这些题让你相信能，就能！（HTML5编辑API）

8.5 搞清楚这些让你“屌炸天”（CSS动画）

8.6 前端面试独家宝贝（cache机制）

8.7 前端大牛的看家本事（workers多线处理）

8.8 一入考题深似海，从此面试是浮云（GeoIocation地理位置）

8.9 前端大“虾”必考题（编码问题）

综合提升

第3篇 箭在弦，不回头——DIV+CSS向前冲

第9章 夯实基础，厚积薄发［DIV+CSS初级面试题］

9.1 有一种题叫边做边流泪（浮动）

9.2 想登上理想的高峰吗？那就来吧（块级元素）

9.3 时间很短，面试赶紧（行内元素）

9.4 面试就像半杯水，你能看到什么（CSS图片）

9.5 面试是一场旅行，正在进行时（CSS引入）

9.6 面对考题不曾退缩（CSS概述）

9.7 面试者就像蒲公英，看似自由，却身不由己（CSS选择器）

9.8 绝地逢生之“路”（CSS规范）

9.9 能磨炼薄弱意志的考题（HTML结构）

9.10 看的越少，失去的越多（隐藏DOM元素）

9.11 喜欢前进，看的题就越来越多（CSS文字样式）

第10章 百折不挠，历经磨难［DIV+CSS中级面试题］

10.1 有一种题做起来很崩溃（inIine-bIock特性）

10.2 快到题里来（布局）

10.3 思想太满，就会学不来（CSS属性）

10.4 面试失败十次，找第十一次坚持的借口（清除浮动与闭合浮动）

10.5 多项选择，任你选择（CSS定义标签）

10.6 不满足昨天的难度（简化CSS代码）

10.7 华丽的跌倒，胜过无谓的徘徊（CSS设置图片效果）

10.8 缘分是一本书，翻得不经意会错过（CSS设置表格）

10.9 不要在错的题上犹豫不决（背景图片）

10.10 面试是一把锁，你拿对钥匙了吗（CSS与表单）

10.11 有思维才是王牌（CSS定位）

10.12 提前进入，囤积自信（DIV布局）

10.13 拥有别人没有的（盒子布局）

10.14 既然无处可逃，不如帅气迎接（CSS排版）

10.15 “限量版”的题（CSS注释）

10.16 值得分享的考题（iframe）

第11章 出类拔萃，终成大器［DIV+CSS高级面试题］

11.1 程序“猿”你懂了吗（DOCTYPE）

11.2 面试其实很简单，就看你了（CSS Hack）

11.3 别让面试，输给了心情（悬浮效果）

11.4 面试不要瞎忙，不经意的才是最好的（CSS优先级）

11.5 我不知将去何方，但我已在路上（定位）

11.6 面试如一道弧线，却能摆平一切（页面布局）

11.7 程序员，我不知道你心里是怎么想的（CSS字体）

11.8 面试时谁没有耐心，谁就没有智慧（CSS表格）

11.9 面试，你紧张了吗（CSS内外边距）

11.10 不能白看，看完必过（CSS文本）

11.11 面试如同千军万马，更是使人心惊胆战（CSS链接）

第12章 炉火纯青，大杀四方［DIV+CSS终极面试题］

12.1 面试就像自行车，说得简单，其实还要靠自己（三层构成）

12.2 面试就算终有一散，也别辜负相遇（CSS Sprites）

12.3 面试短短的话语，却包含万千（CSS中a的伪类）

12.4 面试要勇敢，前方的路很长（CSS浏览器兼容）

12.5 程序“猿”看完就乐了（CSS水平对齐）

12.6 “面试”是一件多么美的事（CSS浮动）

12.7 面试是不可缺少的美好亮点（CSS优势）

12.8 你可知道面试的重要（IE6常见问题）

综合提升

第4篇 江湖路，无尽头——jQuery任逍遥

第13章 刻苦学艺，心无旁骛［jQuery初级面试题］

13.1 要想简单，那就简单（选择器）

13.2 面试总会有不期而遇的温暖（属性）

13.3 不要为面试而烦恼（绑定事件）

13.4 不要害怕面试，因为你需要（表单）

13.5 说多了都是眼泪，还是来点实在的吧（文档处理）

13.6 最怕的东西，最应该去突破（筛选）

第14章 学贯古今，中流砥柱［jQuery中级面试题］

14.1 你还在“泡”招聘，“奔”面试吗（DOM加载）

14.2 你能让面试官惊呆吗（移动端事件）

14.3 面试是一张网，你收获了吗（取HTML、文本的值）

14.4 每天超越自己一点点（事件）

第15章 出神入化，学贯古今［jQuery高级面试题］

15.1 做小题，成大事（read、onIoad的区别）

15.2 让愤怒多些实力（效果）

第16章 英姿勃发，独当一面［jQuery终极面试题］

16.1 困难的考题能让你看到更多的风景（get和post）

16.2 想知道你能力的边界在哪吗（优化）

16.3 其实成功一直在你的旁边（Ajax）

16.4 放手做，勇敢错（jQuery、DOM对象）

16.5 断了退路，才有出路（$.getScript()和$.getJSON()）

综合提升

第5篇 清风落，江湖生——「17助力」泯恩仇

第17章 万事俱备，只欠东风［“17助力”，助你一臂之力］

17.1 “助力1”：浏览器和兼容差异

17.2 “助力2”：前端优化

17.3 “助力3”：开发者工具

17.4 “助力4”：JS库和框架

17.5 “助力5”：cookie

17.6 “助力6”：超级素数

17.7 “助力7”：主流技术

17.8 “助力8”：进制转化

17.9 “助力9”：追加字符串

17.10 “助力10”：模块模式

17.11 “助力11”：效果题

17.12 “助力12”：跨域问题

17.13 “助力13”：前端交谈

17.14 “助力14”：综合考察

17.15 “助力15”：项目问题

17.16 “助力16”：FIash

17.17 “助力17”：逻辑题

第6篇 功成时，把酒笑 ——综合测试莫言愁

第18章 前端开发面试题

18.1 前端面试模拟试题一

18.2 前端面试模拟试题二

第19章 人资问题

图书在版编目（CIP）数据

前端面试江湖/李红米编著. —北京：电子工业出版社，2016.5

ISBN 978-7-121-28507-3

Ⅰ. ①前…　Ⅱ. ①李…　Ⅲ. ①JAVA语言－程序设计　②超文本标记语言－程序设计　③网页制作工具　Ⅳ. ①TP312　②TP393.092

中国版本图书馆CIP数据核字（2016）第066169号

策划编辑：陈晓猛

责任编辑：张　玲

印　　刷：三河市双峰印刷装订有限公司

装　　订：三河市双峰印刷装订有限公司

出版发行：电子工业出版社

北京市海淀区万寿路173信箱　邮编 100036

开　　本：720×1 000　1/16

印　　张：23.25

字　　数：446.4千字

版　　次：2016年5月第1版

印　　次：2016年5月第1次印刷

定　　价：69.00元

凡所购买电子工业出版社图书有缺损问题，请向购买书店调换。若书店售缺，请与本社发行部联系，联系及邮购电话：（010）88254888。

质量投诉请发邮件至zlts@phei.com.cn，盗版侵权举报请发邮件至dbqq@phei.com.cn。

服务热线：（010）88258888。

未经许可，不得以任何方式复制或抄袭本书之部分或全部内容。

版权所有，侵权必究。

内容简介

本书融合了Web前端面试题和主流开发技术，涵盖了JavaScript、HTML5+CSS3、DIV+CSS、jQuery等几大前端主流技术，结构清晰，层次明了。从知识点来说，基本上覆盖了近几年这个行业都会涉及的前端面试题；从实战经验来说，可以提高读者独立思考的能力，增加读者的实际应用技能。另外，本书的王牌“17助力”，更能助读者在面试中的一臂之力。走进《前端面试江湖》不再为面试而苦恼！

本书适合从事前端工作或即将从事前端工作的读者阅读。

前言

互联网技术日新月异。2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种丰富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。

Web前端开发是一项很特殊的工作，涵盖的知识面非常广，它既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。随着前端开发涉及的领域愈发的广泛，各大企业对招聘的Web前端开发工程师岗位提出了更多的需求，对应聘者面试内容的知识面也不断拓宽，这就使很多应聘者卡在了面试这道坎儿上。

本书系统地划分了近几年来Web前端的主流模块和常用的框架、库等，整理了大量企业面试题，并附有资深前端工程师的详细讲解，独具特色的笔风让读者在学习的同时，也不会觉得枯燥。

为何写作本书

前端开发是个非常新的职业，对一些规范和最佳实践的研究都处于探索阶段，总有新的灵感和技术不时闪现出来，所以对前端开发工程师的能力要求越来越高。由于前端开发人员的需求越来越大，更多的人愿意学前端，做前端，所以前端开发的就业前景越来越广，竞争也越来越激烈。一位好的Web前端开发工程师在知识体系上既要有深度，又要有广度，所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。然而公司对应聘者的初次了解就在面试中，可见这“第一印象”很重要。

为了有效地应对面试，“面经”这个新兴概念应运而生。笔者在当初找工作阶段也从“面经”中获益匪浅。但“面经”中的分类不是很清晰，具有针对性的试题和经验也很难找到。为了方便后来者，笔者花费大量时间对企业真实面试题进行了改编，并从自身专业出发，着重关注前端程序员面试，并从中精选出若干具有代表性的技术类面试题进行深入剖析，希望能给前端面试人员提供更多参考。

本书特色

面试实战

本书面试题全都来源于企业面试。近几年来，关于Web前端开发职位的要求越来越高，致使大多数人在面试时出师不利。本书所包含的面试题中，涵盖了前端最新的几大主流技术，以及近几年前端所涉及的大多数知识。

深入解析

本书用相当多的篇幅重点剖析试题，并配有Web前端资深工程师的解答，其中不乏前端应用中的方法与技巧。通过解析模拟面试题，能有效帮助读者掌握Web前端技术，使读者对前端面试更有把握。

笔风特色

本书名为《前端面试江湖》，笔者在编著此书时，将前端当成一个江湖，江湖分支有JavaScript、HTML5+CSS3、DIV+CSS、jQuery等几大前端主流技术，书中还汇聚了从筑基修炼到终极飞升的面试题。相信读者会在阅读的过程中感觉到做Web前端的不易，但我们也相信，你们会有斗志继续攻克前端，并在学习与拓宽前端的路上越走越远。

本书内容结构

本书分为六篇，共19章，具体结构划分如下。

第1～4篇：试题演练讲解部分，共16章。这部分主要介绍JavaScript、HTML5+CSS3、DIV+CSS、jQuery等几大前端主流技术。其中包含初级面试题、中级面试题、高级面试题、终极面试题。

第5篇：本篇内容是前端开发“17助力”，记录一些有关前端岗位的综合面试题，以及在面试过程中，除了我们在前面提出的几大主流技术外，大多数企业面试题会涉及的知识点，提升读者对前端知识的认识，并且本篇还有考验程序员的逻辑思维的试题。

第6篇：本篇共两章，主要内容为综合测试题和人力资源面试相关的技巧，为读者提供模拟面试题和人力资源常问的问题，为您的面试保驾护航。

本书面向的读者

- 具有一定的Web前端基础的求职者

- 具有计算机编程基础或从计算机后端转前端的求职者

- 各大院校学习计算机课程，并今后想从事Web前端工作的求职者

- Web前端开发在职人员

关于我们

在本书的写作过程中，策划编辑陈晓猛给予了很大的帮助和支持，在此表示感谢。

另外，书中教给读者的方法是次要的，重要的是这本书可以增加读者的思维能力，能够让人做到举一反三。

由于时间有限，书中可能会出现一些错误或读者不理解的地方，读者可以发送邮件到kf@qdjhu.com，也可以登录前端江湖的官网（www.qdjhu.com），在我们的问答模块上提出您的反馈意见。我们谨以最真诚的心，希望能与读者共同交流，共同成长。

“只会在水泥上走路的人，永远不会留下深深的脚印”，亲爱的读者朋友，希望在前端的道路上我们一起走过！

李红米

2016.2.1

第1篇　烽烟起，剑在手

——JavaScript永不休

JavaScript（JS，JavaScript的简写形式），一种直译式脚本语言，为浏览器的一部分，最早是在HTML网页上用来给HTML网页增加动态功能的。本篇全面涵盖了JavaScript的各种初级、高级、主流的特性，能够让我们更好地认识和接触JavaScript的强大功能。

第1章

未入江湖，先定三分［JavaScript初级面试题］

踏入江湖第一步，首先要有最基本的保命能力，JavaScript中最基本的原理将带领你踏入江湖，领悟其中奥妙，即可称霸JS江湖。

1.1　面试从这里开始（关于JavaScript）

第1道：
关于JavaScript说法正确的是（　）

A. 它是面向对象的

B. 它是基于对象的

C. 它是面向过程的

D. 以上说法都不正确

答案：
B

解析：

JavaScript是基于对象的、事件驱动的脚本程序设计语言。所谓对象是指任何事物都可以封装成类，而一个类中具体的某个事物就是这个类的对象；所谓事件是指为这些事件定义一些动作，当处理这些事件后就执行相关代码，进行一些操作。

第2道：
下列选择中写法正确的有（　）

A. <script language="javascript"></script>

B. <javascript language="javascript"></javascript>

C. <javascript script="javascript"></javascript>

D. <script javascript></script>

答案：
A

解析：

<script language="javascript">用来告诉浏览器，这是用JavaScript写的程序，需要调动相应的解释程序进行解释。

第3道：
请选择对JavaScript理解有误的项（　）（多选）

A. Jscript是JavaScript的简称

B. JavaScript是网景公司开发的一种Java脚本语言，其目的是为了简化Java的开发难度

C. Firefox和IE存在大量兼容性问题，其主要原因在于它们对JavaScript的支持不同

D. Ajax技术一定要使用JavaScript

答案：
AB

解析：

JavaScript，简称JS。它是通过嵌入或调入标准的HTML语言来实现的。Ajax的全称是Asynchronous JavaScript and XML，基于XML的异步JavaScript。Firefox和IE存在大量兼容性问题，主要原因在于它们对Web的标准支持不同。

1.2　这题很简单（字符串）

第4道：
如何截取字符串www.qdjhu.com中的qdjhu？

解析：

采用substr方法。

定义和用法：substr方法用于返回一个从指定位置开始的指定长度的子字符串。

语法：stringObject.substr(start [, length ])

参数描述：

- start必需。它是所需的子字符串的起始位置。字符串中的第一个字符的索引为0。

- length可选。指在返回的子字符串中应包括的字符个数。

示例代码：

var siteurl = 'www.qdjhu.com'; //前端江湖网址
var result = siteurl.substr(4,5);

第5道：
判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下画线、总长度为5～20。

解析：

采用正则的匹配方法。^[a-z]是匹配小写的26个字母，[A-Z]是匹配大写的26个字母，{n}表示匹配几位，\w表示任意的字母、数字、下画线。

注意：正则有大小写之分。

代码如下：

var c = /^[a-zA-Z]{1}\w{4,19}/;

第6道：
编写一个方法，求一个字符串的字符长度。

解析：

用length方法来获取，返回值为Number。

代码如下：

function getLength(str){
return str.length;
}
var result=getLength("www.qdjhu.com");

第7道：
给你一个字符串String="adadfdfseffqdjhuserfefsefseetsdg"，要求找出里面的字符串qdjhu，使用JavaScript实现。

解析：

这里要用到indexOf()。

返回字符indexOf（string）中字符串string在父串首次出现的位置，从0开始！没有返回-1；方便判断和截取字符串！

代码如下：

var str="adadfdfseffqdjhuserfefsefseetsdg";
var search='qdjhu';
var start=str.indexOf(search);
var result=str.substring(start,start+search.length);

第8道：
如何获取浏览器URL中查询字符串的参数?

解析：

function getQuery(name)
{
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r!=null) return unescape(r[2]); return null;
}

第9道：
如何实现一个删除字符串左边空白字符的方法?

解析：

去掉字符串左边的空格：

function leftTrim(str){
return str.replace(/^\s*/g,"");//^符号表示从开头（即左边）进行匹配
}

第10道：
JavaScript的typeof都返回哪些数据类型？

解析：

undefined、boolean、string、number、object、function。

第11道：
写出以下语句运算结果的语句。

A. typeof（null）

B. typeof（undefined）

C. typeof（NaN）

D. typeof（NaN==undefined）

解析：

A. “object”

B. “undefined”

C. “number”

D. “boolean”

第12道：
"5"+3的结果是多少？为什么？

解析：

结果是53。这时的“5”是一个字符串，“+”起的是连接的作用，不是相加，所以结果是53。

第13道：
请自定义一个函数，实现字符串反转。

解析：

JavaScript实现字符串反转主要是把字符串从末尾开始的每一个元素截取后，再重新组成一个新的字符串。代码如下：

function revStr(str){
var tmpStr="";
for(var l=str.length-1;l>=0;l--){
tmpStr+=str.charAt(l);
}
return tmpStr;
}
var str="abcdeg";
console.log(revStr(str));

第14道：
字符串操作主要有哪些？

解析：

（1）求字符串长。

（2）字符串赋值。

（3）连接字符串操作。

（4）求子串。

（5）字符串比较。

（6）子串定位。

（7）字符串插入。

（8）字符串删除。

（9）字符串替换。

1.3　我面试，我快乐（变量）

第15道：
JavaScript中变量声明有var和没var的区别。

解析：

JavaScript中变量声明的作用域是以函数为单位的，在函数内部，有var和没var声明的变量是不一样的。有var声明的是局部变量，没var声明的是全局变量。在JavaScript的函数作用域内，声明的变量或内部函数在函数体内都是可见的。这意味着，函数在定义之前可能已经可用。函数定义有两种方式，一种是函数定义表达式，一种是函数声明语句。函数声明语句“被提前”到外部脚本或外部函数作用域的顶部。所以，以这种方式声明的函数，可以被它定义之前出现的代码所调用。而函数定义表达式中，变量的声明被提前了，但是给变量的赋值是不会提前的。所以，以表达式方式定义的函数在函数定义之前无法调用。

在全局作用域内声明变量时，有var和没var是有区别的。使用var语句重复声明语句是合法且无害的。如果重复声明且带有赋值，那么就和一般的赋值语句没差别。如果尝试读取没有声明过的变量，JavaScript会报错。

第16道：
在JavaScript中，以下哪个变量名是非法的（　）？

A. Name

B. 9Name

C. Name_a

D. Name9

答案：
B

解析：

第一个字符必须是一个ASCII字母（大小写均可），或一个下画线“_”。注意第一个字符不能是数字，后续的字符必须是字母、数字或下画线。

第17道：
在JavaScript中，（　）变量在函数外声明，并可从脚本的任意位置访问。

A. 局部

B. 全局

C. typeof

D. New

答案：
B

解析：

全局变量无论是在函数内部还是外部都可以访问，而局部变量只能在函数内部访问。

第18道：
JavaScript中如何检测一个变量是一个string类型？请写出函数实现。

解析：

var str = "hello world";
function isString(str) {
if (typeof str == "string" || str.constructor == String) {
return true;
}else{
return false;
}
}

第19道：
计算下面的变量值：

var a=(Math.PI++);
var b=(Math.PI++);
alert(a);
alert(b);

解析：

Math.PI是圆周率数值。输出是3.141592653589793，没有改变，说明系统对象的属性是只读的。

第20道：
有一个字符串abcd-ef-ghi，请用JavaScript将它处理成ghi&ef&abcd。

解析：

var str='abcd-ef-ghi';
var arr1=str.split('-');
var result=arr1.reverse().join("&");

第21道：
“undefined”变量和“undeclared”变量分别指什么？

解析：

根本的区别在于，undefined是JavaScript语言类型，而undeclared却是一种JavaScript语法错误。

在JavaScript中，有两个表示“空”的值：undefined和null，其中比较有用的是undefined。undefined是一个值为undefined的类型。JavaScript语言也定义了一个全局变量，它的值是undefined，这个变量也被称为undefined。但是这个变量不是一个常量，也不是一个关键字。这意味着它的值可以轻易被覆盖。为了避免可能对undefined值的改变，一个常用的技巧是使用一个传递到匿名包装器的额外参数。在调用时，这个参数不会获取任何值。

而undeclared则是一种语法错误，其实访问undeclared的变量并非会中断浏览器执行。在浏览器运行上下文中，undeclared出来的变量简单可以认为没有var a这样定义变量。JavaScript引擎执行的时候，由于无法找到其对应的上下文（scope），所以会简单地认为该变量是全局的变量，就是会把该变量定义到window中去。

第22道：
JavaScript的两种变量范围有什么不同？

解析：

全局变量：当前页面内有效。

局部变量：方法内有效。

1.4　平平淡淡搞定面试（数据类型）

第23道：
列举JavaScript中的数据类型。

解析：

原始数据类型：

1. Undefined类型

Undefined类型只有一个值，就是undefined。当声明变量未初始化时，该变量默认就是undefined。如果函数没有返回值，也会显示undefined。

2. Null类型

Null类型（空型）只有一个值，就是null。

undefined实际上是从null派生来的，所以显示true。

undefined是声明了变量但是未赋值，null是找不到对象。

3. Boolean类型

非0即真，0可以看成false。

4. Number类型

Number类型中的所有值都在最大值和最小值之间。如果非数字NaN（Not a Number）是一个特殊的值。判断是否是数字用isNaN()。

5. String类型

理论上String可以无限制存放Unicode字符。赋值时双引号和单引号都一样。

复合数据类型：

function函数类型[*]object对象类型，object本质是由一组无序的名值对组成的。

array数组类型（它是一种特殊的object对象类型）检查一个变量的数据类型。

第24道：
JavaScript中基本数据类型有哪些？与primitive数据类型有哪些不同？

解析：

在JavaScript中有4种基本的数据类型：数值（整数和实数）、字符串型（用""或' '括起来的字符或数值）、布尔型（用true或false表示）和空值。在JavaScript的基本类型中的数据可以是常量，也可以变量。

primitive数据类型有：byte（字节）、short（短整型）、int（整型）、long（长整型）、float（浮点型）、double（双精度）、char（字符串）。

第25道：
false==0的结果是多少？

解析：

因为逻辑值真（True）和假（False被当作数值运算时，其值分别为1和0。

所以MAX(0,-1,True)结果为1，MIN(False,1,2)结果为0。

故false==0结果为false。

1.5　哎呦，这题不错哦（window的属性和方法）

第26道：
如何实现alert中的换行？

解析：

alert中实现换行的是\n。代码如下：

<script language="JavaScript" type="text/javascript">
alert("hello\nworld");
</script>

第27道：
要动态改变层中内容可以使用的方法有（　）（多选）

A. innerHTML

B. innerText

C. 通过设置层的隐藏和显示来实现

D. 通过设置层的样式属性的display属性

答案：
AB

解析：

通过改变DIV的innerHTML属性值动态改变页面内容。这种情况适合动态显示的内容较少时使用，所以，当动态显示的内容（如“用户名”不能为空）占据一行时比较适合此种方法，使用mydiv.innerHTML="html代码"来动态改变页面内容。

第28道：
document.write和innerHTML的区别。

解析：

write是document对象的一个方法，是在页面里写内容，它会覆盖页面内容，是写死的；innerHTML是DOM元素对象的一个属性，用于设置内容。

第29道：
在HTML中，下面属于段落标签的是（　）

A. <html></html>

B. <head></head>

C. <body></body>

D. <p></p>

答案：
D

解析：

网页的内容需在<html>标签中，标题、字符格式、语言、兼容性、关键字、描述等信息显示在<head>标签中，而网页需展示的内容需嵌套在<body>标签中，段落文本则需在<p>标签中。

第30道：
有如下代码，在不改写已有body部分代码情况下，编写JavaScript函数来实现单击id为test的列表中的li时，获取其内容，比如点第一个li时，alert出“第一行”。

<body onload="getTestLi()">
<ul　id="test">
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
</body>

解析：

function getTestLi(){
var
objUlLi=document.getElemen
tById('test').getElementsB
yTagName('li');

for(i=0,l=objUlLi.length;i
<l;i++){
objUlLi[i].onclick=functio
n(){ alert(this.innerHTML)
; };
}
}

第31道：
JavaScript中的三种弹出式消息提醒，分别为alert、confirm、prompt，请简要阐述。

解析：

（1）alert——弹出警告框。在文本里面加入“\n”就可以换行。

（2）confirm——弹出确认框。会返回布尔值，通过这个值可以判断单击时是“确认”还是“取消”。true表示单击了“确认”，false表示单击了“取消”。

（3）prompt——弹出输入框。单击“确认”返回输入框中的值，单击“取消”返回null。

第32道：
请实现鼠标单击页面中的任意标签，alert该标签的名称（注意兼容性）。

解析：

<script type="text/JavaScript">
document.onclick=function(e){
var e=(e||event);
var o=e["target"]||e["srcElement"];
alert(o.tagName.toLowerCase());
}
</script>

有些标签没有click事件，例如当标签是object时，就没有click事件。

第33道：
下面的JavaScript代码段中，alert的结果是多少？

var a=1;
function f(){
alert(a);
var a=2;
}
f();

解析：

函数a与变量b重名，后面的赋值语句会使前面的函数对象失效，而使a变成一个普通变量。

JavaScript是预编译机制，会使函数定义被优先处理，即使改变语句顺序也不会改变输出结果，所以alert的结果是1。

第34道：
结合<span id="outer"><span id="inner">text</span></span>这段结构，谈谈innerHTML、outerHTML之间的区别。

解析：

innerHTML设置或获取位于对象起始和结束标签内的HTML；

outerHTML设置或获取对象及其内容的HTML形式。

第35道：
关于IE的window对象表述正确的有（　）（多选）

A. window.opener属性本身就是指向window对象

B. window.reload()方法可以用来刷新当前页面

C. window.location="a.html"和window.location.href="a.html"的作用都是把当前页面替换成a.html页面

D. 定义了全局变量g，可以用window.g的方式来存取该变量

答案：
ACD

解析：

window.opener是JavaScript中window的一个属性，它返回的是打开当前窗口的窗口对象。如果窗口A弹出一个窗口B，那么在B中window.opener就是窗口对象A；window.location.reload()方法是用来刷新当前整个页面的。

第36道：
单击一个按钮，如何刷新整个页面？

解析：

首先介绍两个方法的语法：

（1）reload方法强迫浏览器刷新当前页面。

语法：location.reload([bForceGet]);

参数：bForceGet，可选参数，默认为false，从客户端缓存里取当前页。如果为true，则以GET方式，从服务端取最新的页面，相当于客户端单击“F5”（刷新）。

（2）replace方法通过指定URL来替换当前缓存在历史里（客户端）的项目。因此，当使用replace方法之后，不能通过“前进”和“后退”来访问已经被替换的URL。

语法：location.replace(URL);

在实际应用中，当重新刷新页面时，我们通常使用location.reload()或者是history.go(0)。因为这种做法就像在是在客户端单击“F5”刷新页面，所以页面的method="post"的时候，会出现“网页过期”的提示。那是因为Session的安全保护机制。可以想到，当调用location.reload()方法时，此时aspx页面在服务端内存里已经存在，因此必定是IsPostback的。如果有这种应用，我们需要重新加载该页面，也就是说我们期望页面能够在服务端重新被创建，我们期望是Not IsPostback的。这里，location.replace()就可以完成此任务。被replace的页面每次都在服务端重新生成。你可以这么写：location.replace(location.href)。

1.6　让你魂牵梦绕的题（元素）

第37道：
JavaScript中获取某个元素有哪几种方式？

解析：

document.getElementById()用于获得名为ID值的元素；

document.myform.xxx按照层次结构来获取；

document.getElementsByName()用于获得所有的名字相同的元素。

第38道：
怎样创建、查找、删除DOM节点，如何修改DOM相应属性？

解析：

创建DOM节点：var odiv = document.createElement('div');

查找DOM节点：getElementById();

删除DOM节点：document.body.removeChild(oP)。

第39道：
怎么捕获节点（问的频率高）？解释一下getElementById()和getElementsByTagName()。

解析：

document.getElementById("节点id")；//根据节点id”获取节点，返回节点对象

document.getElementsByTagName("标签名")；//根据标签名获取该标签表示的节点对象数组

doucment.getElementsByName("name属性值")；//根据name属性值获取该值表示节点的对象数组，如radio单选框

第40道：
下列哪一个选项不属于document对象的方法？（　）

A. focus()

B. getElementById()

C. getElementsByName()

D. bgColor()

答案：
D

解析：

bgColor()不属于document对象的方法；

focus()获得焦点的对象；

getElementByName()方法可返回对拥有指定ID的第一个对象的引用。

第41道：
nodeType是用来干什么的？空白节点的nodeType等于多少？

解析：

nodeType是用来判断节点类型的，nodeType等于3。

第42道：
找出ID为“newsList”的HTML元素下的第一个节点，并将其移动到“newsList”的最后。

<div id="newsList">
<p class="a">1</p>
<p class="b">2</p>
<p class="c">3</p>
</div>

解析：

<script type="text/javascript">
var ul = document.getElementById("newsList");
ul.appendChild(ul.firstChild);
</script>

第43道：
怎样添加、移除、复制、创建节点和查找节点？

解析：

appendChild添加节点；

removeChild移除节点；

cloneNode复制节点；

createElement创建元素；

getElementById、getElementsByTagName、getElementsByName查找节点。

第44道：
写出7个操作HTML DOM对象的方法？

解析：

getElementById(id)获取带有指定id的节点（元素）；

removeChild(node)删除子节点（元素）；

appendChild(node)插入新的子节点（元素）；

createElement()用指定的标记名创建新的Element节点对象；

createTextNode()用指定的文本创建新的文本节点对象；

createAttibute()用指定名字创建新的Attr节点对象。

第45道：
简述列举文档对象模型DOM里document的常用查找访问节点的方法？

解析：

document.getElementById根据元素id查找元素；

document.getElementsByName根据元素name查找元素；

document.getElementsByTagName根据标签名查找元素。

第46道：
下面哪一个是用来追加到指定元素的末尾的（　）

A. insertAfter()

B. append()

C. appendTo()

D. after()

答案：
C

解析：

insertAfter()是在元素后插入，append()是向尾部追加。

第47道：
请说明JavaScript中的nodeName、nodeValue和nodeType的区别。

解析：

1. nodeName

nodeName属性含有某个节点的名称。

- 元素节点的nodeName是标签名称；

- 属性节点的nodeName是属性名称；

- 文本节点的nodeName永远是#text；

- 文档节点的nodeName永远是#document。

注意：nodeName所包含的XML元素的标签名称永远是大写的。

2. nodeValue

对于文本节点，nodeValue属性包含文本。

对于属性节点，nodeValue属性包含属性值。

nodeValue属性对于文档节点和元素节点是不可用的。

3. nodeType

nodeType属性可返回节点的类型。

最重要的节点类型是：

元素类型

节点类型

元素element

1

属性attr

2

文本text

3

注释comments

8

文档document

9

第48道：
实现输出document对象中的所有成员的名称和类型。

解析：

<script language="javascript">
for(key in document){
document.write(key +'==='+ document[key]+'<br />');
}
</script>

1.7　“神马”题都是浮云（cIassName）

第49道：
请运用JavaScript找出所有className包含text的标签<li>，并将它们的背景颜色设置为黄色。

解析：

}
var list=document.getElementsByTagname("a");
for (i=0;i<list.length;i++){
if(list[i].getAttribute("class")=="test"){
//把背景色设置成黄色
}
}

1.8　看完这题，花儿都笑了（保留字和关键字）

第50道：
以下哪个字不属于JavaScript的保留字（　）（多选）

A. with

B. parent

C. class

D. void

E. arguments

答案：
ABDE

解析：

保留字在某种意义上是为将来的关键字而保留的单词，不能被用来作为变量名和函数名。parent不属于JavaScript的保留字。

第51道：
以下哪个字不属于JavaScript的关键字（　）（多选）

A. abstract

B. import

C. return

D. void

E. if

答案：
AB

解析：

JavaScript的关键字对JavaScript的编译器有特殊的意义，它们用来表示一种数据类型，或者表示程序的结构等，关键字不能作为变量名、方法名、类名、包名。

第52道：
关键字与保留字的区别？

解析：

从字面含义上理解，保留字是语言中已经定义过的字，使用者不能再将这些字作为变量名或过程名使用。而关键字则指在语言中有特定的含义，成为语法中一部分的那些字。在一些语言中，一些保留字可能并没有应用于当前的语法中，这就成了保留字与关键字的区别。一般出现这种情况可能是由于考虑了扩展性。例如，JavaScript有一些未来保留字，如abstract、double、goto等。

1.9　我懂的题，你懂吗（循环语句）

第53道：
JavaScript有几种循环语句的写法？

解析：

（1）for循环结构语句（可以嵌套）。

（2）for-in循环结构语句。

（3）while循环语句结构。

（4）do-while循环语句结构。

第54道：
下列JavaScript代码执行后，iNum的值是________

var iNum=0;
for(var i=1;i<10;i++){
if(i%5==0){
Continue;
}
iNum++;
}

答案：
8

解析：

continue只是退出当前循环，进入下一次循环。要详细了解continue和break的用法。

第55道：
下列JavaScript代码执行后，alert()的结果是什么？

for(i=0;j=0;i<10,j<6;i++;j++){
k=i+j;
}
alert(k);　　//返回什么

解析：

alert()的结果是18，这个循环要进行10次，第一次，j和i均为0……第十次，j=9，i=9，自加1，进行条件判断，10<10不成立，循环停止。

第2章

能文能武，身怀绝技［JavaScript中级面试题］

恭喜你已修炼到中级了，相信已经有一定的能力可以独自处理一些事情，然而你还需要修炼，在这里表达式带你出神入化，string对象引领你步入巅峰，数组让你大彻大悟，函数让你得到飞升。

2.1　小考题，大味道（表达式）

第56道：
请选择结果为真的表达式（　）

A. null instanceof Object

B. null===undefined

C. null==undefined

D. NaN==NaN

答案：
C

解析：

null确实可以理解为原始类型，但不能当Object理解。null、int、float等这些用关键字表示的类型，都不属于Object。至于可以把null作为参数，只是特殊规定而已。对象的引用代表的是一个内存的值，null是一个空引用，可以理解为内存的值为0。

第57道：
请说明JavaScript中“==”和“===”的区别。

解析：

在JavaScript中，“==”直接比较两个变量的值，但“===”则比较两个变量的值和类型，前者在对不同类型比较时JavaScript会做出相应的类型转换，转换之后若相等返回true，否则返回false。

第58道：
请选择结果为真的表达式（　）（多选）

A. null instanceof object

B. null = = = undefined

C. null = = undefined

D. NaN = = NaN

E. null = = null

F. null = = = null

答案：
CEF

解析：

除“空”之外所有的字符串，以及除0之外所有的数字，转换为布尔型都是true。

第59道：
简要描述下列符号在JavaScript中的作用，“||”，“eval”，“call”。

解析：

“||”是或的意思。

“eval”是把一个字符串当作一个JavaScript表达式一样去执行。

“call”可以用来代替另一个对象调用一个方法。call方法可将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象。

第60道：
JavaScript中表达式parseInt（"X8X8"）+paseFloat（"8"）的结果是（　）

A. 8+8

B. 88

C. 16

D. "8"+8

答案：
C

解析：

parseInt()提取整数部分，parseFloat()提取浮点数部分。

第61道：
统计从1至400亿之间的自然数中含有多少个1？比如从1～21，1、10、11、21这4个自然数中共含有5个1。

解析：

（1）定义初始个数。

（2）把每个数拆分成单个数字，如123拆分成"1","2","3"。

（3）用toString()方法进行判断，如果包含1，则统计1的个数。

第62道：
分析下面的JavaScript代码：

x=11; y='number'; m=x+y;

m的值为多少？

答案：
11number

解析：

在parseFloat中，相加的话，加号表示连接。

第63道：
什么是三元条件语句？

解析：

三元条件语句是“条件？结果1：结果2；”，这里把条件写在问号（？）的前面，后面跟着用冒号（：）分隔结果1和结果2。满足条件时为结果1，否则为结果2。

2.2　让人叹为观止的考题（String对象）

第64道：
在JavaScript中，String对象的方法不包括（　）

A. charAt()

B. substring()

C. toUpperCase()

D. length

答案：
D

解析：

charAt()从某个字符串取得具体的字符；

substring()截取字符串；

toUpperCase()将字符串中的小写字母转换成大写字母；

length不是方法。

第65道：
请编写代码扩展JavaScript的string对象，让其拥有一个新的方法killpoint()来删除字符串中的所有英文句号“.”，请用尽量少的代码实现。

解析：

String.prototype.killpoint=function(){
return this.replace(/\./g,'');
}

第66道：
对string对象进行扩展，使其具有删除前后空格的方法。

解析：

String.prototype.deletSpace = function(){
var str = this; //提取需要操作的字符串
while(str[0] == " "){ //删除前面的空格
str = str.substring(1);
}
while(str[str.length - 1] == " "){//删除后面的空格
str = str.substring(0,str.length-1);
}
return str;
}

第67道：
如何扩展JavaScript中原生的String对象？String对象中的哪些方法可返回字符串的指定部分？

解析：

（1）用prototype添加方法。

（2）substring()函数是返回截取之后的字符串，不会对原字符串进行修改。

//获取字符数组
String.prototype.toCharArray = function() {
return this.split("");
}
//获取N

个相同的字符串
String.prototype.repeat = function(num) {
var tmpArr = [];
for ( var i = 0; i < num; i++)
tmpArr.push(this);
return tmpArr.join("");
}
//逆序
String.prototype.reverse = function() {
return this.split("").reverse().join("");
}
//测试是否是数字
String.prototype.isNumeric = function() {
var tmpFloat = parseFloat(this);
if (isNaN(tmpFloat))
return false;
var tmpLen = this.length - tmpFloat.toString().length;
return tmpFloat + "0".Repeat(tmpLen) == this;
}
//测试是否是整数
String.prototype.isInt = function() {
if (this == "NaN")
return false;
return this == parseInt(this).toString();
}
// 合并多个空白为一个空白
String.prototype.resetBlank = function() {
return this.replace(/s+/g, " ");
}
// 除去左边空白
String.prototype.LTrim = function() {
return this.replace(/^s+/g, "");
}
// 除去右边空白
String.prototype.RTrim = function() {
return this.replace(/s+$/g, "");
}
// 除去两边空白
String.prototype.Trim = function() {
return this.replace(/(^s+)|(s+$)/g, "");
}
// 保留数字
String.prototype.getNum = function() {
return this.replace(/[^d]/g, "");
}
// 保留字母
String.prototype.getEn = function() {
return this.replace(/[^A-Za-z]/g, "");
}
// 保留中文
String.prototype.getCn = function() {
return this.replace(/[^u4e00-u9fa5uf900-ufa2d]/g, "");
}
// 得到字节长度
String.prototype.getRealLength = function() {
return this.replace(/[^x00-xff]/g, "--").length;
}
// 从左截取指定长度的字串
String.prototype.left = function(n) {
return this.slice(0, n);
}
// 从右截取指定长度的字串
String.prototype.right = function(n) {
return this.slice(this.length - n);
}
// html编码
String.prototype.htmlEncode = function() {
var re = this;
var q1 = [ /x26/g, /x3C/g, /x3E/g, /x20/g ];
var q2 = [ "&", "<", ">", " " ];
for ( var i = 0; i < q1.length; i++)
re = re.replace(q1[i], q2[i]);
return re;
}
// Unicode转化
String.prototype.ascW = function() {
var strText = "";
for ( var i = 0; i < this.length; i++)
strText += "&#" + this.charCodeAt(i) + ";";
return strText;
}

String对象的方法slice()、substring()和substr()（不建议使用）都可返回字符串的指定部分。

2.3　让人绞尽脑汁的考题（Math对象）

第68道：
请用JavaScript实现获取5个0～99之间不相同的随机数。

解析：

思路：首先创建一个0～99的数组，每次取一个数，然后去除数组中取出的这个数，这样就可以实现永不重复。

公式：document.write(Math.floor(Math.random()*10+1));

使用函数：

（1）Math.random();结果为0～1间的一个随机数（包括0，不包括1）。

（2）Math.floor(num);参数num为一个数值，函数结果为num的整数部分。

（3）Math.round(num);参数num为一个数值，函数结果为num四舍五入后的整数。

第69道：
请给出下面a、b、c的输出结果______。

var a=parseInt("11",2);
var b=parseInt("02",10);
var c=parseInt("09/08/2009");

答案：
3, 2, 9

解析：

parseInt()的用法：parseInt()函数可解析一个字符串，并返回一个整数。

语法：parseInt(string, radix);

c的首字符是0，一般想法是按8进制进行解析。但是我们发现第二个字符9已经不是8进制数，也就是说，9是第一个不能解析的字符。parseInt("09/08/2009")也就变成了parseInt("0")；结果再明显不过了，是0。

如果我们稍加变化parseInt("0119/08/2009")，首字符是0，按8进制解析，同样读到9时不能再解析了，也就变成了parseInt("011")，结果也很明显，是9。

第70道：
编写JavaScript脚本，生成0～7之间的随机整数。

解析：

公式：document.write(Math.floor(Math.random()*7));

使用函数：

（1）Math.random();结果为0～1间的一个随机数（包括0，不包括1）。

（2）Math.floor(num);参数num为一个数值，函数结果为num的整数部分。

（3）Math.round(num);参数num为一个数值，函数结果为num四舍五入后的整数。

第71道：
使用JavaScript求两个数的最大公约数。

解析：

function f(num1, num2){
for(var i = Math.min(num1, num2); i > 0; i--){
if(num1%i == 0 && num2%i == 0)
return i;
}
}

第72道：
获取一个1～50的随机不重复数组。

解析：

var arr=[];
var number=50;
for(var i=1;i<=number;i++){
arr.push(i);
}
var result=[];
for(var j=number-1;j>=0;j--){
var rand=Math.ceil(Math.random()*j);
result.push(arr.splice(rand,1));
}

第73道：
Math.ceil()、Math.floor()和Math.round()三个方法都是四舍五入，请问有什么区别？Math.round(-11.5)的值是多少？

解析：

（1）Math.ceil()用于向上取整。

（2）Math.floor()用于向下取整。

（3）Math.round()用于四舍五入取整。

（4）Math.round(-11.5)的值是-11。

2.4　令人陶醉的考题（数组）

第74道：
在JavaScript里，下列选项中不属于数组方法的是（　）

A. sort()

B. length()

C. concat()

D. reverse()

答案：
B

解析：

sort()方法用于对数组的元素进行排序。

length()返回的是字符串的长度。

concat()方法用于连接两个或多个数组。

reverse()方法用于颠倒数组中元素的顺序。

第75道：
请见如下代码：

var emp=new Array(3);
for(var i in emp)

以下答案中能与for循环代码互换的是（　）

A. for(var i=0;i<emp;i++)

B. for(var i=0;i<Array(3);i++)

C. for(var i=0;i<emp.length();i++)

D. for(var i=0;i<emp.length;i++)

答案：
D

解析：

for/in循环遍历对象的属性，而length不是方法，也不是对象的属性。

第76道：
下列声明数组的语句中，错误的选项是（　）

A. var arry=new Array()

B. var arry=new Array(3)

C. var arry[]=new Array(3)(4)

D. var arry=new Array("3","4")

答案：
C

解析：

创建一个数组：

arrayObj = new Array(); //创建一个数组
arrayObj = new Array([size]);　//创建一个数组并指定长度，注意不是上限，是长度
arrayObj = new Array([element0[, element1[, ...[, elementN]]]]);　//创建一个数组并赋值
arrayObj = [element0, element1, ..., elementN];　//创建一个数组并赋值的简写，注意这里中括号不表示可省略

第77道：
请编写尽可能简洁的JavaScript代码，找到在第一个数组array1中出现，而在第二个数组array2中没有出现的数字。

解析：

indexof()判断数字是否出现，join()用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。

function findNullofNum(arr1,arr2) {
var str = arr2.join("");
var result = [];
for (var i = 0,x =0;i<arr1.length;i++) {
if (str.indexOf(arr1[i]) == -1)
result[x]=arr1[i];
x++;
}
return result;
}
var b = findNullofNum(arr1,arr2);

第78道：
编写函数，用于过滤一个数组内重复的元素，并用这些元素重构一个新数组，新数组内也不能有重复元素。

var arrNum=[1,4,1,1,3,3,4,6,7,8,3,7,0,11,22,22];

解析：

将数组中重复的元素去掉，并将各元素放到新的数组中。原理：将重复的元素替换为空。

var str = arrNum.join(',');
var newArr = [];
for(var i = 0; i < arrNum.length; i++){
if(str.indexOf(arrNum[i]) != -1){
newArr[newArr.length] = arr[i];
}
while(str.indexOf(arrNum[i]) != -1){
str = str.replace(arrNum[i], ' ');
}
}

第79道：
现有一个数组（元素为数字，并且有可能重复），请给Array.prototype增加一个方法（方法名自取），该方法能去掉数组中全部最大和最小的数字。

解析：

数组最大值

Array.prototype.max=function
{
return Math.max.apply(null,this);
}

数组最小值

Array.prototype.min=function
{
return Math.min.apply(mull,this);
}

第80道：
给定一个数组实现字符串反转，要求原地实现。

解析：

使用循环数组的方法：

var arr = new Array();
function myreverse(arr) {
for (var i = 0; i < arr.length / 2; i++) {
var temp = arr[i]; //交换变量
arr[i] = arr[arr.length - i - 1];
arr[arr.length-i-1]=temp;
}
}

第81道：
如何准确判断一个JavaScript对象是数组？

解析：

标准方法：

if(object.prototype.toString.call(a) == '[object Array]'){
//是数组对象
}

常用方法：

if(a.constructor == Array){
//是数组对象；
}

第82道：
在如下数组的第二个元素后插入一个元素3。

var arr=[1,2,4,5,6];

解析：

语法：arr.splice(index,howmany,element1,…,elementN);

参数解释：

（1）index——从该下标开始删除。

（2）howmany——删除指定数量的元素。

（3）elements——插入的元素。

作用：从指定位置删除部分元素并增加新的元素

（1）该方法返回值是被删除的元素组成的数组。

（2）splice是直接对数组进行操作，而slice函数则是取arr的一段元素，原数组不变。

arr.splice(2,0,3)

第83道：
以空格字符串作为分隔字符串，将如下字符串拆分成数组（每个元素不能含有空格字符）。

var str='ab c 20 d e f g 123';

解析：

str.split(/\s+/);

语法：stringObject.split(separator,howmany);

参数：separator

描述：必需。字符串或正则表达式，从该参数指定的地方分割stringObject。

参数：howmany

描述：可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。

第84道：
怎么判断一个对象为数组类型？

解析：

typeof操作符：

typeof可以解决大部分的数据类型判断，它是一个一元运算，放在一个运算值之前，其返回值为一个字符串。该字符串说明运算数的类型，所以判断某个是否为String类型，可以直接if(typeof(你的值) == "string"){}；

instanceof操作符：

instance，顾名思义，实例、例子。所以instanceof用于判断一个变量是否为某个对象的实例，是一个三目运算式，这是它和typeof最实质上的区别。

a instanceof b?alert("true"):alert("false") //注意b值是你想要判断的那种数据类型，不是一个字符串，比如Array对象的constructor属性

constructor属性返回对创建此对象的数组函数的引用就是返回对象相对应的构造函数。从定义上来说，已跟instanceof不太一致，但效果都是一样的。

如：

(a instanceof Array) //a是否为Array的实例？true or false
(a.constructor == Array) // a实例所对应的构造函数是否为Array?true or false

第85道：

var aPush = [1, 2, 3];
console.log("len："+aPush.push(4)+",push后数组："+aPush);

解析：

len：4；push后数组：1，2，3，4。

push()方法可向数组的末尾添加一个或多个元素，并返回新的长度。

语法：arrayObject.push(newelement1,newelement2,…,newelementX)

参数：newelement1

描述：必需。要添加到数组的第一个元素。

参数：newelement2

描述：可选。要添加到数组的第二个元素。

参数：newelementX

描述：可选。可添加多个元素。

返回值：把指定的值添加到数组后的新长度。

第86道：

var aPop = ["a", "b", "c"];
console.log("返回："+aPop.pop()+"，pop后数组："+aPop);

解析：

返回：c；pop后数组：a，b。

pop()方法用于删除并返回数组的最后一个元素。

语法：arrayObject.pop()

返回值：arrayObject的最后一个元素。

第87道：

var aUnshift = [1, 2, 3];
console.log("len:"+aUnshift.unshift(0)+"，unshift后数组:"+aUnshift);

解析：

len：4；unshift后数组：0，1，2，3。

unshift()方法可向数组的开头添加一个或更多元素，并返回新的长度。

语法：arrayObject.unshift(newelement1,newelement2,…,newelementX)

参数：newelement1

描述：必需。向数组添加的第一个元素。

参数：newelement2

描述：可选。向数组添加的第二个元素。

参数：newelementX

描述：可选。可添加若干个元素。

第88道：

var aShift = ["a", "b", "c"];
console.log("返回:"+aShift.shift()+"，shift后数组:"+aShift);

解析：

返回：a，shift后数组：b，c。

shift()方法用于把数组的第一个元素从中删除，并返回第一个元素的值。

语法：arrayObject.shift()

返回值：数组原来的第一个元素的值。

说明：如果数组是空的，那么shift()方法将不进行任何操作，返回undefined值。请注意，该方法不创建新数组，而是直接修改原有的arrayObject。

第89道：

var sSplice = [1, 2, 3],sSplice2 = [1, 2, 3],sSplice3 = [1, 2, 3];
sSplice.splice(0, 0, 0);
console.log(sSplice);//添加
sSplice2.splice(0, 1);
console.log(sSplice2);//删除
sSplice3.splice(0, 1, "a");
console.log(sSplice3);//替换

解析：

[0, 1, 2, 3]

[2, 3]

["a", 2, 3]

Splice()方法从数组中添加/删除项目，然后返回被删除的项目。

注释：该方法会改变原始数组。

语法：arrayObject.splice(index,howmany,item1,…,itemX)

参数：index

描述：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。

参数：howmany

描述：必需。要删除的项目数量。如果设置为0，则不会删除项目。

参数：item1,…, itemX

描述：可选。向数组添加的新项目。

第90道：
console.log([1, 2, 3].slice(0, 2));

解析：

[1, 2]

slice()方法可从已有的数组中返回选定的元素。

语法：arrayObject.slice(start,end)

参数：start

描述：必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始选取。也就是说，-1指最后一个元素，-2指倒数第二个元素，以此类推。

参数：end

描述：可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从开始到结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

第91道：

console.log(["a", "c", "d", "b"].sort());
console.log(["10", "1", "2", "5"].sort(function(v1, v2){
return v1 - v2;
}));

解析：

["a", "b", "c", "d"]

["1", "2", "5", "10"]

push()方法可向数组的末尾添加一个或多个元素，并返回新的长度。

语法：arrayObject.push(newelement1,newelement2,…,newelementX)

参数：newelement1

描述：必需。要添加到数组的第一个元素。

参数：newelement2

描述：可选。要添加到数组的第二个元素。

参数：newelementX

描述：可选。可添加多个元素。

第92道：
将数组["a","b"]和["c","d"]合并，并且删除第二个元素。

解析：

合并数组：

Array.prototype.push.apply（mergeTo,mergeFrom）；

删除数组中某个值：

splice（index,len,[item]）；

注释：该方法会改变原始数组。

splice有3个参数，它可以用来替换/删除/添加数组内某一个或者几个值。

- index：数组开始下标。

- len：替换/删除的长度。

- item：替换的值，删除操作的话，item为空。

第93道：
Javascripit数组方法sort()的作用是________

解析：

sort()方法用于实现对数组元素的排序，该方法默认按照数组项ASCII码字符的顺序升序排列。在执行过程中并不会创建新的Array对象。

如果为sort()参数提供了一个函数，那么该函数必须返回下列值之一：

- 负值（如果所传递的第一个参数比第二个参数小）；

- 零（如果两个参数相等）；

- 正值（如果第一个参数比第二个参数大）。

第94道：
写出一个JavaScript的函数，实现对一个数组去重的功能。

解析：

思路：

（1）构建一个新的数组存放结果。

（2）for循环中每次从原数组中取出一个元素，用这个元素循环与结果数组对比。

（3）若结果数组中没有该元素，则存到结果数组中

Array.prototype.unique1 = function(){
var res = [this[0]];
for(var i = 1; i < this.length; i++){
var repeat = false;
for(var j = 0; j < res.length; j++){
if(this[i] == res[j]){
repeat = true;
break;
}
}
if(!repeat){
res.push(this[i]);
}
}
return res;
}

第95道：
请写出如下JavaScript代码的运行结果。

var name="zhangsan";
function GetNAme(){
var arr=[1,2,3];
var name="list"+arr;
document.write(name+"</br>");
}
getName();
document.write(name);

答案：
list1,2,3　zhangsan

解析：

用于显式指定函数的调用对象方法有三个：

（1）如果一个函数被赋为一个对象的属性值，这个函数只能通过该对象来访问（但并非是说该函数只能被该对象调用），通过该对象调用这个函数的方式类似以面向对象编程语言中的方法调用（实际上在JavaScript中也习惯使用方法这种称呼）。

（2）任意指定函数的调用对象，在某个语法环境中，如果可以同时访问到函数fun和对象obj，只要你愿意，可以指定通过obj对象来调用fun函数。指定方法有两种：call方法和apply方法。

（3）另一种比较容易疏忽的错误是，在A对象的方法中，执行了使用B对象的方法调用，试图在B对象的方法里使用this来访问A对象。这在各种回调函数中比较常见，最常见的情形就是Ajax回调函数中使用this。

第96道：
请写出如下JavaScript代码片段的运行结果。

var my_arr=[];
for(var i=0;i<=5;i++){
my_arr.push(i*(i+1));
}
var val=0;
while(val=my_arr.pop()){
document.write(val+" ");
}

答案：
数组为：2,6,12,20,30

解析：

my_arr.pop()一个一个删除数组最后一个元素，当删除到第一个0之后，返回的值为undefined，那么就跟下面的while条件不符合了。故最后一个0是不会输出的。

while语句总是先检测循环表达式，所以它的循环体可能一次都不执行。

while循环会在指定条件为真时，循环执行代码块。

第97道：
JavaScript中给全部都是数字元素的数组排序的原生方法是____，其中使用的是_____的排序方法？

答案：
sort()、自定义排序规则。

解析：

JavaScript中将数组排序的方法有很多，其中sort()方法默认是按字符来排序的，所以在对数字型数组排序时，不可想当然地以为会按数字大小排序。要想改变默认的sort行为（即按字符排序），可以自行指定排序规则函数。

下面写一段脚本来验证一下：

<script type="text/JavaScript">
$(document).ready(function() {
var list = [1,2,12,43,5,64,7];
$('p').html(list.sort(function(a,b){
return a-b;
}).join("<br/>"));
});
</script>

执行脚本后页面中会换行依次显示1、2、5、7、12、43、64。

第98道：
join()和split()的区别？

解析：

join函数获取一批字符串，然后用分隔符字符串将它们连接起来，从而返回一个字符串。split函数获取一个字符串，然后在分隔符处将其断开，从而返回一批字符串。但是，这两个函数之间的主要区别在于，join可以使用任何分隔符字符串将多个字符串连接起来，而split只能使用一个字符分隔符将字符串断开。

简单地说，split是把一串字符（根据某个分隔符）分成若干个元素存放在一个数组里，而join是把数组中的字符串连成一个长串，可以大体上认为是split的逆操作。

第99道：
console.log([1,2,3].length);

答案：
3

解析：

length属性表示数组的长度，即其中元素的个数。因为数组的索引总是从0开始的，所以一个数组的上下限分别是0和length-1。

第100道：
console.log([1, 2, 3].concat("a", "b"))的结果是什么？

答案：[1, 2, 3, "a", "b"]

解析：

concat()方法用于连接两个或多个数组。

该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本，返回一个新的数组。该数组是通过把所有arrayX参数添加到arrayObject中生成的。如果要进行concat()操作的参数是数组，那么添加的是数组中的元素，而不是数组。

第101道：
console.log([2013,10,1].join(""))的结果是什么？

答案：
2013101

解析：

join()方法用于把数组中的所有元素放入一个字符串。

元素是通过指定的分隔符进行分隔的。

返回一个字符串，此字符串由包含在数组中的许多子字符串连接创建。

语法：join(list[，delimiter])

join函数的语法有以下参数：

list，必选。包含要连接的子字符串一维数组。

delimiter，可选。在返回字符串中用于分隔子字符串的字符。如果省略，将使用空字符（""）。如果delimiter是零长度字符串，则在同一列表中列出全部项，没有分界符。

第102道：
slice()与splice()分别具备什么功能？有什么区别？

解析：

slice()方法：接收1个或2个参数，即要提取的项的起始位置和结束位置。如果只有一个参数，该方法返回从该位置开始到数组结尾的所有项，如果有2个参数，该方法返回第一个位置和第二个位置的所有项，不包括第二个位置的项。

splice()方法：把数据项插入数组中部。调用该方法时传入的参数不同，就用不同方法删除。传入2个参数，这2个参数是要删除的第一个项的位置和要删除的项的个数，替换而不删除；传入3个参数，这3个参数是起始位置和0（要删除的个数），要插入的项，替换并删除。

第103道：
请写出一个函数，功能是删除数组的指定下标元素。

解析：

array.pop();//删除最后一个元素，并返回该元素
array.shift();//删除第一个元素，数组元素位置自动前移，返回被删除的元素
array.splice(start,delCount);//从start的位置开始向后删除delCount个元素
Array.prototype.del=function(index){
if(isNaN(index)||index>=this.length){
return false;
}
for(var i=0,n=0;i
if(this[i]!=this[index]){
this[n++]=this[i];
}
}
this.length-=1;
};

第104道：
请写一个函数removeVoid(arr)，删除该数组中值为“null, undefined”的项，返回原数组。

解析：

function ClearNullArr(arr)
{
for(var i=0,len=arr.length;i<len;i++)
{
if(!arr[i]||arr[i]==''||arr[i] === undefined)
{
arr.splice(i,1);
len--;
i--;
}
}
return arr;
}

第105道：
数组方法pop()、push()、unshift()和shift()分别具备什么功能？

解析：

pop()：从集合中把最后一个元素删除，并返回这个元素的值。

push()：在集合中添加元素，并返回新的长度。

unshift()：在集合开头添加一个或更多元素，并返回新的长度。

shift()：从集合中把第一个元素删除，并返回这个元素的值。

第106道：
请给Array本地对象增加一个原型方法，它的用途是删除数组中重复的条目，并将数组返回。

解析：

<script type="text/javascript">
Array.prototype.delrepeat = function(){
var arr = this;
var _arr = new Array();
for (var i in arr){
if (i == 'delrepeat')continue;
if (_arr.length == 0) _arr.push(arr[i]);
for (var j = 0; j < _arr.length; j++){
if (arr[i] == _arr[j]){
break;
}
if(j > _arr.length - 2) _arr.push(arr[i]);
}
return _arr;
}
</script>

2.5　令人难过的考题（函数）

第107道：
在JavaScript中如何写定时调用函数foo()？

解析：

function foo(){ alert("qdjhu");
setTimeout(foo,1000);

第108道：在
JavaScript中如何规避多人开发函数重名问题？

解析：

（1）命名空间，根据不同开发人员开发的功能在函数前加前缀；

（2）立即执行函数模式（即时对象初始化），避免污染全局环境。

第109道：
请分别描述JavaScript中prototype、constructor、this、argument的含义。

解析：

prototype：prototype的行为类似于C++中的静态域，将一个属性添加为prototype的属性，这个属性将被该类型创建的所有实例所共享，但是这种共享是只读的。在任何一个实例中只能够用自己的同名属性覆盖这个属性，而不能够改变它。换句话说，对象在读取某个属性时，总是先检查自身域的属性表，如果有这个属性，则会返回这个属性，否则就去读取prototype域，返回protoype域上的属性。另外，JavaScript允许protoype域引用任何类型的对象。因此，如果对protoype域的读取依然没有找到这个属性，则JavaScript将递归地查找prototype域所指向对象的prototype域，直到这个对象的prototype域为它本身或者出现循环为止。

constructor：即构造函数，在对象创建或者实例化时被调用的方法。通常使用该方法来初始化数据成员和所需资源。构造器constructor不能被继承，因此不能重写overriding，但可以被重载overloading。对象的constructor属性返回创建该对象的函数的引用。

this：在JavaScript中，this通常指向的是正在执行的函数本身，或者是指向该函数所属的对象（运行时）。当我们在页面中定义函数doSomething()时，它的owner是页面，或者是JavaScript中的window对象（或global对象）。对于一个onclick属性，则为它所属的HTML元素所拥有，this应该指向该HTML元素。

argument：所有的函数都有属于自己的一个arguments对象，它包括了函数所要调用的参数。它不是一个数组，如果用typeof arguments，那么返回的是object。虽然我们可以用调用数据的方法来调用arguments。比如length、index方法。但是数组的push和pop对象是不适用的。

第110道：
写一个函数，参数为一个元素，返回指定元素的第一个子元素，要求兼容IE6/IE7/IE8/Firefox/Safari/Chrome，函数越简单越好，代码大概如下：

function getfirst(el){
//...
}

解析：

function getfirst(el){
var nodes=el.children; //获取元素下所有的子节点
retrun nodes.length!=0?nodes[0]:null; //判断子节点是否存在，如果存在，那么返回该元素下第一个子节点，不存在则返回空
}

第111道：
写出下面函数console的值，并说出为什么？

var b=1;
function c(){
console.log(b);
if(!b){
var b=2;
}
console.log(b);
}
c();

解析：

此题考查的是JS局部变量声明前置。也就是说，函数中语句var b=2; b声明在函数的最前面，但赋值语句不变，因此答案为先输出undefined再输出2。

第112道：
看下面一段代码，请写出结果。

function b(){
a=10;
alert(arguments[1]);
}
b(1,2,3);

答案：
弹出的结果是2。

解析：

arguments对象不能显式创建，arguments对象只有函数开始时才可用。函数的arguments对象并不是一个数组，访问单个参数的方式与访问数组元素的方式相同。索引n实际上是arguments对象的0～n属性的其中一个参数。

arguments对象和function对象紧密地联系在一起。也就是说，每一个函数都有自己的arguments属性。

通过arguments属性（相对于function来说），函数可以处理可变数量的参数。arguments对象的length属性包含了传递给函数的参数的数目。对于arguments对象所包含的单个参数，其访问方法与数组中所包含的参数的访问方法相同，用0到arguments.length-1来枚举每一个元素。callee属性是arguments对象的一个成员，仅当相关函数正在执行时才可用。callee属性的初始值就是正被执行的function对象，这允许匿名的递归函数。

第113道：
简述JavaScript封装。

解析：

封装可以被定义为对对象的内部数据表现形式和实现细节进行隐藏。通过封装可以强制实施信息隐藏。

在JavaScript中，并没有显式的声明私有成员的关键字等。所以要想实现封装或信息隐藏，就需要从另外的思路出发。我们可以使用闭包的概念来创建只允许从对象内部访问的方法和属性，来达到封装的要求。

第114道：
下面JavaScript代码的运算结果是2还是undefined？请阐述原因。

function show(){
var b=1;
a=++b;
}
show();
alert(a);

答案：
2。

解析：

++b先返回递增以后的值。

第115道：
判断以下两段代码的正误，并阐述错误代码为何报错。

sum(1);
function sum(){
alert(sum);
}

sum(1);
var sum=function(){
alert(sum);
}

解析：

JavaScript中需要创建函数的话，有两种方法：函数声明、函数表达式。各自写法如下。

方法一：函数声明。

function foo() {}

方法二：函数表达式。

var foo = function () {};

另外，还有一种自执行函数表达式，主要用于创建一个新的作用域，在此作用域内声明的变量不会和其他作用域内的变量冲突或混淆，大多是以匿名函数的方式存在，且立即自动执行：

(function () {
// var x = ...
})();

此种自动执行函数表达式归类于以上两种方法中的第二种，也算是函数表达式。

第116道：
JavaScript中，有一个函数，在执行对象查找时，永远不会去查找原型，这个函数是什么？

解析：

JavaScript中hasOwnProperty函数方法是返回一个布尔值，并指出一个对象是否具有指定名称的属性。使用方法：object.hasOwnProperty（proName）。其中，参数object是必选项，一个对象的示例，proName是必选项，一个属性名称的字符串值。如果object具有指定名称的属性，那么JavaScript中hasOwnProperty函数方法返回true；反之则返回false。此方法无法检查该对象的原型链中是否具有该属性，该属性必须是对象本身的一个成员。

第117道：
请写一个函数closest(element,className)，传入DOM对象及CSS名称，或者标签名称，查找到离它自身最近的父节点。

解析：

<script>
function closest(element,classname){
if(element){ //判断元素是否存在
if(element.className==classname){ //如果存在，则判断当前元素的CSS名称是否等于接收的CSS名称
return element.parentNode; //如果等于，返回当前元素最近的父节点
}else{
return element.parentNode=null;
//否则返回“null”
}
}else{
console.log("该元素不存在"); //否则该元素不存在
}
}
</script>

第118道：
请写一个函数getParamenters()来获取浏览器地址栏URL全部参数，并返回一个JSON串。

解析：

采用正则表达式获取地址栏参数：

function getParamenters(name){
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null)return unescape(r[2]); return null;
}
// 调用方法
alert(GetQueryString("参数名1"));
alert(GetQueryString("参数名2"));
alert(GetQueryString("参数名3"));

第119道：
请写一个函数来验证电子邮件的格式是否正确。

解析：

function CheckMail($mailaddress){
if(eregi('^[a-zA-Z0-9_-.]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$',$mailaddress)){
return true;
}else{
return false;
}
}

对于正则的解释：

^[a-zA-Z0-9_-.]是至少由一个字符、数字、下画线、连字符、点为开始的字符串；$更多。

第120道：
写一个获取非行间样式的函数。

解析：

function getStyle(obj,attr,value){
if(!value){
if(obj.currentStyle){
return obj.currentStyle(attr);
} else{
obj.getComputedStyle(attr,false);
}
} else{
obj.style[attr]=value;
}
}

第121道：
写一个函数来验证E-mail的有效性。

解析：

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=GB2312" />
</head>
<body>
<input type="text" id="email"/>
<input type="button" value="提交" onclick="doSubmit()"/>
<script type="text/JavaScript">
// 来自 JavaScriptCN
var email = document.getElementById('email');
function doSubmit() {
var emailText = email.value;
// 输入是否为空
if(emailText!=null && emailText!='') {
// 长度不能小于6位
if(emailText.length>=6) {
// 使用@分割成数组
var temp = emailText.split('@');
if(temp.length==2) {
// 包含且只包含一个@符号
// 获取 @ 符号后面的部分（即域名）
var domain = temp[1];
var lastChar = domain.substring(domain.
length - 1, domain.length);
// 最后一个字符不是数字（非数字的转换结果为 NaN）
if(parseInt(lastChar).toString()=='NaN'){
// 域名包含.才是正确的
if(domain.indexOf('.')!=-1) {
var darr = domain.split('.');
var name = darr[0].toUpperCase();
alert('您好，来自' + name + '的
用户。');
return;
}
}
}
}
}
alert('请输入正确的E-mail地址！');
}
</script>
</body>
</html>

第122道：
以下哪些是JavaScript的全局函数（　）（多选）

A. escape

B. parseFloat

C. eval

D. settimeout

E. alert

答案：
ABCE

2.6　令人抑郁的考题（对象）

第123道：
foo对象有att属性，那么获取att属性的值，以下哪些做法是可以的（　）（多选）

A. foo.att

B. foo("att")

C. foo["att"] / foo.style.["att"]

D. foo{"att"}

E. foo["a"+"t"+"t"]

答案：
ACE

解析：

通过Object.params直接获取对象的属性值。

第124道：
以下哪条语句会产生错误（　）（多选）

A. var obj=();

B. var obj={}'

C. var obj=//;

D. var obj=[];

E. var obj=new Object();

答案：
ABC

解析：

对象创建方式：

objectName = {property1:value1, property2:value2,…,propertyN:valueN}

其中，property是对象的属性；

value则是对象的值，值可以是字符串、数字或对象三者之一。

构造函数方式：

编写一个构造函数，并通过new方式来创建对象，构造函数本可以带有构造参数。

例如：

function User(name,age){
this.name=name;
this.age=age;
this.canFly=false;
}
var use=new User();

私有属性定义：

私有属性只能在构造函数内部定义与使用。

语法格式：var propertyName=value；

实例属性定义存在两种方式。

（1）prototype方式。

语法格式：functionName.prototype.propertyName=value

（2）this方式。

语法格式：this.propertyName=value。

注意后面例子中this使用的位置。

上面value可以是字符串、数字和对象。

第125道：
已知对象var obj = {……….}，但对象的属性未知，如何对该对象的属性进行遍历？

解析：

function allPrpos(obj) {
// 用来保存所有的属性名称和值
var props = "";
// 开始遍历
for(var p in obj){
// 方法
if(typeof(obj[p])=="function"){
obj[p]();
}else{
// p 为属性名称，obj[p]为对应属性的值
props+= p + "=" + obj[p] + "\t";
}
}
// 最后显示所有的属性
alert(props);
}

第126道：
在JavaScript中，如何实现对象的私有属性，并说明原理。

解析：

在JavaScript中没有块级作用域的概念，同样也没有私有属性的概念，但是存在私有变量。如果我们想把一些数据封装隐藏起来要怎么做呢？想必大家已经想到了，可以通过使用闭包+私有变量的方式来实现对象的私有属性。

1. 实例私有属性

实例私有属性的特点就是每个对象都会包含独立的属性，对象和对象之间没有共享。为了实现这个目标，可以在构造函数中增加一个私有变量，然后定义公共方法来访问这个私有变量。

2. 静态私有属性

在有些情况下，我们可能希望数据全局共享，那么就会用到静态属性，同时，我们还希望这个属性为私有的，那么怎样实现静态私有属性呢？首先这个私有应该在构造函数的外部，为了把构造函数外部的变量和构造函数结合为一体，可以使用闭包把私有变量和构造函数都包含在其作用域中，为了在闭包外面访问内部的构造函数，可以使用一个全局变量来引用构造函数。

第127道：
请使用JavaScript语言创建一个对象来代表一个学生，学生主要有以下属性：姓名Jeriy（字符串类型）/年龄22（整型）/三个朋友（Li、Chen、Zhang，数组）/会踢足球（类型为方法，弹出'football'字符串即可），并调用Jeriy踢足球（弹出football字符）。

解析：

function xs(name,age,frIEnd){
this.name=name;
this.age=age;
this.frIEnd=frIEnd;
}
xs.prototype.play=function(){
alert("football")
}
var s = new xs("Jeriy",22,["li","chen","zhang"]);
s.play();

第128道：
在JavaScripit中，obj.childNodes()和obj.children()的区别是什么？

解析：

（1）childNodes：标准属性，它返回指定元素的子元素集合，包括HTML节点、所有属性、文本节点。

可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，值为2时是属性节点，值为3时是文本节点。

（2）children：非标准属性，它返回指定元素的子元素集合。

但它只返回HTML节点，甚至不返回文本节点，虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几乎所有浏览器的支持。

因此，如果想获取指定元素的第一个HTML节点，可以使用children[0]来替代getFirst函数。

第129道：
编写一个函数，去掉数组的重复元素。

解析：

function unique(arr) {
var result = [], isRepeated;
for (var i = 0, len = arr.length; i < len; i++) {
isRepeated = false;
for (var j = 0, len = result.length; j < len; j++) {
if (arr[i] == result[j]) {
isRepeated = true;
break;
}
}
if (!isRepeated) {
result.push(arr[i]);
}
}
return result;
}

第130道：
如何创建一个对象？请举例说明。

解析：

我们可以利用JavaScript的语法特征，以类的思想来创建对象。

（1）原始方法，代码如下。

<script type="text/javascript">
var obj = new Object();
obj.name = "Koji"; //为对象添加属性
obj.age = 21;
obj.showName = function(){ //为对象添加方法
alert(this.name);
}
obj.showAge = function(){
alert(this.age);
}
obj.showName(); //Koji
obj.showAge(); //21
</script>

上面的方式通过new关键字生成一个对象，然后根据JavaScript是动态语言的特性来添加属性和方法，构造一个对象。其中的this表示调用该方法的对象。

这种方式的问题是如果需要多次创建对象，那么需要重复代码多次，不利于代码的复用。

（2）工厂方法，代码如下。

<script type="text/javascript">
function createObj(){
var obj = new Object(); //创建对象
obj.name = "Koji";
obj.age = 21;
obj.showName = function(){
alert(this.name);
}
obj.showAge = function(){
alert(this.age);
}

return obj; //返回对象
}

var obj1 = createObj();
var obj2 = createObj();

obj1.showName(); //Koji
obj2.showAge(); //21
</script>

下面这种方式提高了代码重用率，还可以改变工厂方法，传入参数赋值。

代码如下：

<script type="text/javascript">
function createObj(name, age){ //构造对象时可以传入初始化参数
var obj = new Object(); //创建对象
obj.name = name;
obj.age = age;
obj.showName = function(){
alert(this.name);
}
obj.showAge = function(){
alert(this.age);
}
return obj; //返回对象
}
var obj1 = createObj("Koji", 22);
var obj2 = createObj("Luo", 21);
obj1.showName(); //Koji
obj1.showAge(); //22
obj2.showName(); //Luo
obj2.showAge(); //21
</script>

该方式虽然可以提高代码的重用率，但和面向对象中类的概念相比，有一个很大的缺陷。面向对象强调对象的属性私有，但对象的方法是共享的。而上面的工厂方法在创建对象时，要为每个对象创建各自私有的方法。同时，由于为每个对象都创建逻辑相同的方法，所以很浪费内存。

改进代码如下：

<script type="text/javascript">
function createObj(name, age){
var obj = new Object(); //创建对象
obj.name = name;
obj.age = age;
obj.showName = showName;
obj.showAge = showAge;
return obj; //返回对象
}
function showName(){ //函数也是一个对象
alert(this.name);
}

function showAge(){
alert(this.age);
}
var obj1 = createObj("Koji", 22);
var obj2 = createObj("Luo", 21);
obj1.showName(); //Koji
obj1.showAge(); //22
obj2.showName(); //Luo
obj2.showAge(); //21

</script>

上面通过定义几个函数对象，解决了不同对象持有函数对象的私有问题。现在所有对象的方法都持有上面两个函数的引用。但这么一来，对象的函数又和对象相互独立了，这和面向对象中特定方法属于特定类的思想不符合。

（3）构造函数方式，代码如下：

<script type="text/javascript">
//定义一个构造函数，用来生成对应的对象，可以类比Java中的构造函数
function Person(name, age){
//当调用new Person时，在执行第一行代码前，先生成一个Person对
象，并将对象在内存中的索引赋值给this关键字，此时可以通过this
关键字操作新生成的对象，如下面的添加属性或方法
this.name = name; //this关键字不能少。为当前对象，即this
关键字引用的对象的name属性赋值实际相当于为当前对象添加name属
性后，再为其name属性赋值
this.age = age;
this.showName = function(){ //为当前对象添加方法
alert(this.name);
}
this.showAge = function(){
alert(this.age);
}
//将当前对象返回给赋值符号左边的变量（不必明确使用return）
}
var obj1 = new Person("Koji", 22); //生成一个Person对象
var obj2 = new Person("Luo", 21);
obj1.showName(); //Koji
obj1.showAge(); //22
obj2.showName(); //Luo
obj2.showAge(); //21

</script>

构造函数的方式和工厂方式一样，会为每个对象创建独享的函数对象。当然也可以将这些函数对象定义在构造函数外面，这样又有了对象和方法相互独立的问题。

（4）原型方法，代码如下：

<script type="text/javascript">
function Person(){} //定义一个空构造函数，且不能传递参数
//将所有的属性的方法都赋予prototype属性
Person.prototype.name = "Koji"; //添加属性
Person.prototype.age = 22;
Person.prototype.showName = function(){ //添加方法
alert(this.name);
}
Person.prototype.showAge = function(){
alert(this.age);
}
var obj1 = new Person(); //生成一个Person对象
var obj2 = new Person();
obj1.showName(); //Koji
obj1.showAge(); //22
obj2.showName(); //Koji
obj2.showAge(); //22
</script>

当生成Person对象时，prototype的属性都赋值给了新的对象。那么属性和方法是共享的。首先，该方法的问题是构造函数不能传递参数，每个新生成的对象都有默认值。其次，方法共享没有任何问题，但是，当属性是可改变状态的对象时，属性共享就有问题了。

代码如下：

<script type="text/javascript">
function Person(){} //定义一个空构造函数，且不能传递参数
Person.prototype.age = 22;
Person.prototype.array = new Array("Koji", "Luo");
Person.prototype.showAge = function(){
alert(this.age);
}
Person.prototype.showArray = function(){
alert(this.array);
}
var obj1 = new Person(); //生成一个Person对象
var obj2 = new Person();
obj1.array.push("Kyo"); //向obj1的array属性添加一个元素
obj1.showArray(); //Koji,Luo,Kyo
obj2.showArray(); //Koji,Luo,Kyo
</script>

上面的代码通过obj1向obj1的属性array添加元素时，obj2的array属性的元素也跟着受到影响，原因就在于obj1和obj2对象的array属性引用的是同一个Array对象，那么改变这个Array对象，另一引用该Array对象的属性自然也会受到影响，混合的构造函数/原型方式使用构造函数定义对象的属性，使用原型（prototype）定义对象的方法，这样就可以做到属性私有，而方法共享。

（5）混合的构造函数/原型方式，代码如下。

<script type="text/javascript">
function Person(name, age) {
this.name = name;
this.age = age;
this.array = new Array("Koji", "Luo");
}
Person.prototype.showName = function() {
alert(this.name);
}
Person.prototype.showArray = function() {
alert(this.array);
}
var obj1 = new Person("Koji", 22); //生成一个Person对象
var obj2 = new Person("Luo", 21);
obj1.array.push("Kyo"); //向obj1的array属性添加一个元素
obj1.showArray(); //Koji,Luo,Kyo
obj1.showName(); //Koji
obj2.showArray(); //Koji,Luo
obj2.showName(); //Luo
</script>

属性私有后，改变各自的属性不会影响别的对象。同时，方法也是由各个对象共享的。在语义上，这符合了面向对象编程的要求。

（6）动态原型方法，代码如下：

<script type="text/javascript">
function Person(name, age) {
this.name = name;
this.age = age;
this.array = new Array("Koji", "Luo");
//如果Person对象中的_initialized为undefined，表明还没有为Person的原型添加方法
if (typeof Person._initialized == "undefined")
{
Person.prototype.showName = function() {
alert(this.name);
}

Person.prototype.showArray = function() {
alert(this.array);
}

Person._initialized = true; //设置为true，不必再为prototype添加方法
}
}
var obj1 = new Person("Koji", 22); //生成一个Person对象
var obj2 = new Person("Luo", 21);
obj1.array.push("Kyo"); //向obj1的array属性添加一个元素
obj1.showArray(); //Koji,Luo,Kyo
obj1.showName(); //Koji
obj2.showArray(); //Koji,Luo
obj2.showName(); //Luo
</script>

这种方法和构造函数/原型方式大同小异。只是将方法的添加放到了构造函数之中，同时在构造函数Person上添加了一个属性用来保证if语句只能成功执行一次。在实际应用中，采用最广泛的是构造函数/原型方法。动态原型方法也很流行，它在功能上和构造函数/原型方法是等价的。不要单独使用构造函数/原型方法。

第131道：
以下哪个不是JavaScript的内置对象（　）

A. Time

B. Array

C. Date

D. Math

答案：
A

解析：

内置对象是指由ECMAScript规范定义的对象或者类。例如，数据、函数、日期等。

JavaScript有11种内置对象：Array、String、Date、Math、Boolean、Number、Function、Global、Error、RegExp、Object。

第132道：
什么是JS的原型模型及原型链？

解析：

原型模型的主要思想是，先借用已有系统作为原型模型，通过不断改进“样品”，使得最后的产品就是用户所需要的。原型模型通过向用户提供原型来获取用户的反馈，使开发出的软件能够真正反映用户的需求。同时，原型模型采用逐步求精的方法完善原型，使得原型能够快速开发，避免了像瀑布模型一样在冗长的开发过程中难以对用户的反馈做出快速的响应。相对瀑布模型而言，原型模型更符合人们开发软件的习惯，是目前较流行的一种实用软件生存期模型。

原型链一般在定义构造函数时用到，可以认为是针对构造函数的或者说是针对构造函数对应的类的。JavaScript没有对应继承的关键字，所以用原型链来模拟继承的效果。

2.7　夜以继日难以攻克的考题（定时器）

第133道：
注释的代码是否可以实现？如不能实现请修改。

function test(){
this.name="taobao";
this.waitMes=function(){
//隔5秒钟执行alert（this.name）
}
}

解析：

不能实现，修改如下：

function test(){
this.name="taobao";
this.waitMes=function(){
var that=this;
setInterval(function(){
alert(that.name);
},5000);
};
}

第134道：
请选择以下代码输出的值（　）

console.log(1);
setTimeout (function(){
console.log(2);
},0);
setTimeout (function(){
console.log(3);
},0);
console.log(4);

A. 1,2,3,4

B. 1,3,2,4

C. 1,4,2,3

D. 1,4,3,2

答案：
C

解析：

JavaScript代码是按顺序执行的，所以先输出1。setTimeout（function(){f},0）,0的作用很简单，就是为了把f放到运行队列的最后去执行。也就是说，无论setTimeoutfunction(){f},0）写在哪，都可以保证在队列的最后执行。因此，结果就是1,4,2,3。

第135道：
setInterval(function() { setTimeout(function() { alert('say!') }，5000) }, 1000);代码运行后，多久提示一次？

解析：

进入页面6秒后弹出“say!”，之后1秒弹出一次“say!”。

先碰到setInterval间歇定时器1秒后执行，再碰到setTimeout延时定时器5秒后执行。可想而知，第一次在6秒后弹出，setTimeout()从载入后延迟指定的时间去执行一个表达式或者函数，仅执行一次。setTimeout()只执行code一次，1秒弹出一次。如果要多次调用，请使用setInterval()或者让code自身再次调用setTimeout()。

第136道：
关于setTimeout("check",10)中说法正确的是（　）

A. 程序循环执行10次

B. Check函数每10毫秒执行一次

C. 10作为参数传给函数check

D. Check函数每10秒执行一次

答案：
B

解析：

setTimeout：延迟执行一次定时器上的时间是以毫秒为单位的。

第137道：
请描述setTimeout和setInterval的区别？在性能上谁更好？为什么要用setTimeout和setInterval？

解析：

因为setTimeout（表达式，延时时间）在执行时，是在载入后的延迟指定时间去执行一次表达式，记住，次数是一次；而setInterval（表达式，交互时间）则不一样，它从载入后，每隔指定的时间就执行一次表达式。所以，两者完全是不一样的。很多人习惯将setTimeout包含于被执行函数中，然后在函数外再次使用setTimeout来达到定时执行的目的。这样，函数外的setTimeout在执行函数时再次触发setTimeout，从而形成周而复始的定时效果，使用时各有各的优势。使用setInterval，需要手动停止tick触发。而使用嵌套setTimeout，可以根据方法内部本身的逻辑不再调用setTimeout，此时就等于停止了触发。其实两种方法完全可以相互模拟，具体使用哪个，就要看当时的需要而定了。

第138道：
下面三个alert的执行顺序是怎么样的？结果是什么？

function test(){
var a=1;
setTimeout(function(){
alert(a);
a=3;
},1000);
a=2;
setTimeout(function(){
alert(a);
a=4
},3000)
}
test();
alert(0)

答案：
结果是0 2 3

解析：

首先setTimeout是一个异步延迟函数，此时先弹0是很明显的，因为test中的两个alert()都是延迟的，在弹0之前test中的a是2，0之后就是第一个定时器的函数alert(a)，此时弹2，原因在上面解释了，在弹2之后执行了a=3。然后是第二个定时器，所以弹3。

2.8　学无止境（日期和时间）

第139道：
按照格式××××年××月××日××时××分××秒动态显示时间，要求不满10的在前面补0。

解析：

<script type="text/javascript"><!--
new function() {
with(new Date())
{
var t=function(a){return a<10?"0"+a:a;}
alert(getFullYear()+"年"+t(getMonth()+1)+"月
"+t(getDate())+"日"+t(getHours())+"时"+t(getMinutes())+"分
"+t(getSeconds())+"秒");
}
}
// --></script>

第140道：
输出明天的日期。

解析：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>JS获取明天日期</title>
</head>

<body>
<script language="javascript" type="text/javascript">
function GetDateStr(AddDayCount) {
var dd = new Date();
dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期
var y = dd.getFullYear();
var m = dd.getMonth()+1;//获取当前月份

日期
var d = dd.getDate();
return y+"-"+m+"-"+d;
}
document.write("<br />明天："+GetDateStr(1));
</script>

</body>
</html>

第141道：
编写一个JavaScript函数，实时显示当前时间，格式“-年-月-日时：分：秒”。

解析：

<script type="text/javascript">
function getTime() {
var now_Date = new Date();
var nowYear;
var nowMonth;
var nowDay;
var nowdate;
var nowHourse;
var nowMinutes;
var nowSeconds;
nowYear = now_Date.getYear();
nowMonth = now_Date.getMonth() + 1;
nowDay = now_Date.getDay();
if(nowDay == 0){
nowDay = "日";
}
nowdate= now_Date.getDate();
nowHourse = now_Date.getHours();
if(nowHourse == 0){
nowHourse = 12;
}
nowMinutes = now_Date.getMinutes();
nowSeconds = now_Date.getSeconds();
var timerDetails = '今天是:'+nowYear+'年'+nowMonth+'
月'+nowdate+'日'+' '+'星'+nowDay+ ' '+nowHourse+'
时'+nowMinutes+'分'+nowSeconds+'秒'+' ';
alert(timerDetails);
}
</script>

2.9　主流技术的“最爱”（typeof、instanceof）

第142道：
在JavaScript中typeof返回的结果有哪几种？

解析：

JavaScript里面的typeof有6种：object、function、string、boolean、number、undefined。

第143道：
下列JavaScript代码执行后，依次alert的结果是_______。

(function test(){
var a=b=5;
alert(typeof a);
alert(typeof b);
})()
alert(typeof a);
alert(typeof b)

答案：
number　number　undefined　undefined

解析：

作用域问题，外边的访问不到里面的。所以，外边的会出undefined。

第144道：
写出下面的输出结果，并说出原因。

typeof("string")
typeof(new String("string"))
typeof(Array)
typeof(new Array())
typeof("s123")
Typeof("123s")

解析：

typeof可以用来检测给定变量的数据类型，可能的返回值：

（1）'undefined'——这个值未定义。

（2）'boolean'——这个值是布尔值。

（3）'string'——这个值是字符串。

（4）'number'——这个值是数值。

（5）'object'——这个值是对象或null。

（6）'function'——这个值是函数。

- typeof("string")返回类型就是string类型；

- typeof(new String("string"))返回类型是object。new String("string")创建一个String对象，其语法为newString(stringValue)，这个调用会将参数转换为字符串，并作为一个String对象；

- typeof(Array)返回类型是object；

- typeof(new Array())返回类型是object；

- typeof("s123")返回类型是string；

- typeof("123s")返回类型是string。

第145道：
简述typeof和instanceof的作用。

解析：

typeof返回一个字符串，用于说明元算数的类型；

instanceof判断一个变量是否是某个对象（类）的实例，返回值是布尔类型的。

第3章

进得武林，入得四方［JavaScript高级面试题］

想要在武林中站稳脚跟，毫无疑问你需要多方面发展，“对称数”使你应对自如，“继承和多态”使你出神入化，“表单”让你意气风发，“this”应用博大精深，这个阶段会给你带来更强的战斗力。

3.1　轻松解决缠绕你的考题（this）

第146道：
this和a是什么？

(function(a){
console.log(this);
return a;
}).apply(0,[4,3]);

解析：

这是this的作用域的问题，这里的this并不指向函数，而是指向调用它的主体对象，a指的是接收的参数。

第147道：

(function(global, undefined){
//code
})(this)

说说这段代码中，this和undefined的作用。

解析：

因为ECMAScript是从里到外执行JavaScript代码的，因此把全局变量window或jQuery对象传进来，就避免了到外层去寻找，从而提高了效率。undefined在老一辈的浏览器是不被支持的，直接使用会报错，JavaScript框架要考虑到兼容性，因此增加一个形参：undefined。

还有，不要用window.undefined传递给形参，因为有可能window.undefined被其他人修改了，所以最好就是什么都不传，此时形参的undefined就是真正的undefined了。

第148道：
简述JavaScript中对this的理解，并举例说明（至少两个场景）

解析：

this代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。比如

function test(){
this.x = 1;
}

随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是调用函数的那个对象。

下面分四种情况，详细讨论this的用法。

情况一：纯粹的函数调用。

这是函数的最通常用法，属于全局性调用，因此this就代表全局对象Global。

请看下面这段代码，它的运行结果是1。

function test(){
this.x = 1;
alert(this.x);
}
test(); // 1

为了证明this就是全局对象，这里对代码做一些改变：

var x = 1;
function test(){
alert(this.x);
}
test(); // 1

运行结果还是1。再变一下：

var x = 1;
function test(){
this.x = 0;
}
test();
alert(x); //0

情况二：作为对象方法的调用。

函数还可以作为某个对象的方法调用，这时this就指这个上级对象。

function test(){
alert(this.x);
}
var o = {};
o.x = 1;
o.m = test;
o.m(); // 1

情况三：作为构造函数调用。

所谓构造函数，就是通过这个函数生成一个新对象（object）。这时，this就指这个新对象。

function test(){
this.x = 1;
}
var o = new test();
alert(o.x); // 1

运行结果仍然为1。为了表明这时this不是全局对象，这里对代码做一些改变：

var x = 2;
function test(){
this.x = 1;
}
var o = new test();
alert(x); //2

运行结果为2，表明全局变量x的值根本没变。

情况四：apply调用。

apply()是函数对象的一个方法，它的作用是改变函数的调用对象，它的第一个参数就表示改变后的调用这个函数的对象。因此，this指的就是第一个参数。

var x = 0;
function test(){
alert(this.x);
}
var o={};
o.x = 1;
o.m = test;
o.m.apply(); //0

当apply()的参数为空时，默认调用全局对象。因此，这时的运行结果为0，证明this指的是全局对象。如果把最后一行代码修改为o.m.apply(o); //1，运行结果就变成了1，证明了这时this代表的是对象o。

3.2　细心可以拿满分的题（事件）

第149道：
在下拉菜单中，用户更改表单元素Select中的值时，就会调用（　）事件处理程序。

A. onChange

B. onFocus

C. onMouseOver

D. onClick

答案：
A

解析：

JavaScript中onChange事件是在客户端改变输入控件的值。

第150道：
（　）事件处理程序可用于在用户单击按钮时执行函数。

A. onSubmit

B. onChange

C. onClick

D. onBlur

答案：
C

解析：

事件就是用户或浏览器自身执行的某种动作，如click、laod、mouseover都是事件的名称。

第151道：
下列哪项是按下键盘事件（　）（多选）

A. onKeyDowm

B. onKeyPress

C. keyCode

D. onMouseOver

答案：
AB

解析：

（1）keydown()。

keydown事件会在按下键盘时触发。

（2）keypress()。

keypress事件会在敲击按键时触发，我们可以理解为按下并抬起同一个按键。

第152道：
写一段JavaScript，实现监听页面上所有a标签的click事件。

解析：

原生的写法：

document.getElementsByTagName('a').onclick = function () {}

用jQuery的话就这么写：

$('a').click(function(){
});

第153道：
IE和标准DOM的事件模型有什么不同？

解析：

IE内核的浏览器事件模型是冒泡型事件。也就是说，在IE内核下，事件句柄的触发顺序是从ChildNode到ParentNode。

<div id="ancestor">
<button id="child">
Open the console and click me
</button>
</div>

以上的HTML代码在IE内核下，事件是这样传播的：

Button#child;
div#ancestor;
Body;
Document

切记！IE的内核是没有捕获事件过程的，那么在DOM标准的浏览器中，事件传播的过程又是怎样的呢？我们依然拿上面的HTML代码作为例子，在DOM标准的浏览器事件中是这样传播的：

Window
Document
Body
div#ancestor
Button#child

捕获事件
div#ancestor
Body
Document
Window

DOM标准的浏览器中多了一个事件捕获过程，也就是说，当开发者在一个元素上注册了事件后，这个事件的响应顺序是从window（顶层）开始一级一级地向下传播，然后到了该元素后事件捕获过程结束，事件开始冒泡，一级一级向父层元素冒泡（请注意第6步）。当然了，开发者可以很轻松地决定DOM标准的浏览器中的事件需要在哪个传播过程触发，这就需要谈一下事件的注册机制。DOM标准的浏览器事件是通过addEventListener方法注册的，而IE内核的浏览器则是通过attachEvent方法注册的。

第154道：
当单击按钮时，如何实现两个id的值互换。

解析：

例如：

<html>
<head>
<script>
function subOnClick(){
var text1=document.getElementById("txt1").value;//取txt1文本
var text2=document.getElementById("txt2").value;//取txt2文本
//开始互换
document.getElementById("txt1").value=text2;
document.getElementById("txt2").value=text1;
}
window.onload=function(){
document.getElementById("submitBtn1").onclick=
subOnClick;
document.getElementById("submitBtn2").onclick=
subOnClick;
}
</script>
</head>

<body>
<input type="text" value="12345666" id="txt1" />
<input type="submit" id="submitBtn1" />
<input type="text" value="12345222" id="txt2" />
<input type="submit" id="submitBtn2" />
</body>
</html>

第155道：
怎样使用事件？IE和DOM事件模型之间存在哪些主要差别？

解析：

使用事件：

（1）当我们要阻止浏览器中某个DOM元素的默认行为时，在W3C标准里调用e.preventDefault()，而在IE下则通过设置window.event.returnValue=false来实现。

（2）当我们要阻止冒泡事件时，在W3C标准里调用e.stopPropagation()，而在IE下通过设置window.event.cancelBubble=true来实现。

差别：

（1）Traditional Module。

传统方式的事件模型即直接在DOM元素上绑定事件处理器，例如：

window.onload=function(){…}
obj.onmouseover=function(e){…}
obj.onclick=function(){…}

首先这种方式无论在IE还是Firefox等其他浏览器上，都可以成功运行，这便是它最大的优势，而且在Event处理函数内部的this变量无一例外都被绑定到当前DOM元素，这使得JavaScript程序员可以大大利用this关键字做很多事情。至于它的缺点也很明显，就是传统方式只支持Bubbling，而不支持Capturing，并且在DOM元素上一次只能绑定一个事件处理器，无法实现多Handler绑定，最后就是function参数中的event参数只对非IE浏览器有效果（因为IE有window.event）。

（2）W3C (Firefox.e.g) Event Module。

Firefox等浏览器很坚决地遵循W3C标准来制定浏览器事件模型，使用addEventListener和removeEventListener两个函数，看几个例子：

indow.addEventListener("load",function(){…},false);
document.body.addEventListener("keypress",function{…},false);
obj.addEventListener("mouseover",MV,true);
function MV(){…}

addEventListener带有三个参数，第一个参数是事件类型，就是我们熟知的那些事件名字去掉前面的“on”，第二个参数是处理函数，可以直接给函数自变量或者函数名，第三个参数是boolean值，表示事件是否支持Capturing。

W3C的事件模型优点是Bubbling和Capturing都支持，并且可以在一个DOM元素上绑定多个事件处理器，各自并不会冲突。并且在处理函数内部时，this关键字仍然可以使用只想被绑定的DOM元素。另外function参数列表的第一个位置（不管是否显示调用）永远都是event对象的引用。

至于它的缺点，很不幸地就是在市场份额最大的IE浏览器下不可使用这一点。

（3）IE Event Module。

IE自己的事件模型跟W3C类似，但主要是通过attachEvent和detachEvent两个函数来实现的。依旧看几个例子：

window.attachEvent("onload",function(){…});
document.body.attachEvent("onkeypress",myKeyHandler);

可以发现，它跟W3C的区别是没有第三个参数，而且第一个表示事件类型的参数也必须把“on”加上。

这种方式的优点就是在同一个DOM元素上能绑定多个事件处理函数。

至于它的缺点，为什么如今在实际开发中很少见呢？首先IE浏览器本身只支持Bubbling，不支持Capturing；而且在事件处理的function内部，this关键字也无法使用，因为this永远都只想得到window object这个全局对象。要想得到event对象，必须通过window.event方式；最后一点，在别的浏览器中，它显然是无法工作的。

第156道：
IE和Firefox事件对象怎么处理兼容性？

解析：

如果在使用JavaScript时涉及event处理，就需要知道event在不同的浏览器中的差异，主要的JavaScript事件模型有三种，它们分别是NN4、IE4+和W3C/Safar。

1. window.event

【分析说明】先看一段代码：

function et(){
alert(event);//IE: [object]
}

以上代码在IE中运行的结果是[object]，而在Firefox中无法运行。

因为在IE中event作为window对象的一个属性可以直接使用，但是在Firefox中却使用了W3C的模型，它是通过传参的方法来传播事件的，也就是说，你需要为你的函数提供一个事件响应的接口。

【兼容处理】添加对event的判断，根据浏览器的不同来得到正确的event。

function et(){
evt=evt?evt:(window.event?window.event:null);
//兼容IE和Firefox
alert(evt);
}

2. 键盘值的取得

【分析说明】IE和Firefox获取键盘值的方法不同，可以理解为，Firefox下的event.which与IE下的event.keyCode相当。

function myKeyPress(evt){
//兼容IE和Firefox获得keyBoardEvent对象
evt = (evt) ? evt : ((window.event) ? window.event : "")
//兼容IE和Firefox获得keyBoardEvent对象的键值
var key = evt.keyCode?evt.keyCode:evt.which;
if(evt.ctrlKey && (key == 13 || key == 10)){
//同时按下Ctrl+Enter组合键
//do something;
}
}

3. 事件源的获取

【分析说明】在使用事件委托时，通过事件源获取来判断事件到底来自哪个元素，但是，在IE下，event对象有srcElement属性，却没有target属性；在Firefox下，even对象有target属性，却没有srcElement属性。

【兼容处理】

ele=function(evt){ //捕获当前事件作用的对象
evt=evt||window.event;
return
(obj=event.srcElement?event.srcElement:event.target;);
}

4. 事件监听

【分析说明】在事件监听处理方面，IE提供了attachEvent和detachEvent两个接口，而Firefox提供的是addEventListener和removeEventListener。

【兼容处理】最简单的兼容性处理就是封装这两套接口。

function addEvent(elem, eventName, handler) {
if (elem.attachEvent) {
elem.attachEvent("on" + eventName, function(){
handler.call(elem)});
//此处使用回调函数call()，让this指向elem
} else if (elem.addEventListener) {
elem.addEventListener(eventName, handler, false);
}
}
function removeEvent(elem, eventName, handler) {
if (elem.detachEvent) {
elem.detachEvent("on" + eventName, function(){
handler.call(elem)});
//此处使用回调函数call()，让this指向elem
} else if (elem.removeEventListener) {
elem.removeEventListener(eventName, handler,
false);
}
}

需要特别注意，在Firefox下，事件处理函数中的this指向被监听元素本身，而在IE下则不然，可使用回调函数call，让当前上下文指向监听的元素。

5. 鼠标位置

【分析说明】在IE下，even对象有x、y属性，但是没有pageX、pageY属性；在Firefox下，even对象有pageX、pageY属性，但是没有x、y属性。

【兼容处理】使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX。复杂点还要考虑绝对位置。

function getAbsPoint(e){
var x = e.offsetLeft, y = e.offsetTop;
while (e = e.offsetParent) {
x += e.offsetLeft;
y += e.offsetTop;
}
alert("x:" + x + "," + "y:" + y);
}

第157道：
如何为元素绑定多个事件，要求同时支持Firefox和IE。

解析：

event = event || window.event; //使event兼容Firefox与IE

Firefox的Firebug，不仅能测试JavaScript，还能检查CSS错误，是一般常用的。但它主要检查Firefox方面的错误，对IE就无能为力了。

要测试IE，就用IETester，它几乎可以测试IE所有版本（1.0版本恐怕也用不着测试了），用法也很方便。至于JavaScript对不同浏览器的兼容注意事项，的确很多，下面给出的仅仅只是一部分。

一般建议还是采用jQuery、prototype等一些已经处理好了兼容的脚本库，更重要的是，它们简化了很多操作，还提供了平常你很难实现的增强功能。

JavaScript兼容浏览器Firefox和IE技巧：

做B/S开发难免会用到JavaScript，而每个浏览器对JavaScript的支持有所不同，这就需要程序员去兼容它们，不然有些浏览器就无法运行我们的代码。

第158道：
请写一个通用的事件侦听器函数。

解析：

关于JavaScript中的事件监听大家用得比较多了，无非是判断浏览器是否支持addEventListener和attachEvent，网上搜索关于事件监听的方法也很多，但是总有些不是很完善。下面的方法中对于添加事件监听的方法是一样的，只不过在取消事件绑定上做了点“手术”，现在可以支持匿名函数的使用，所以在绑定事件时不再需要给函数单独命名了。

主要代码如下：

/ *绑定事件与取消绑定*/
var handleHash = {};
var bind = (function() {
if (window.addEventListener) {
return function(el, type, fn, capture) {
el.addEventListener(type, function(){
fn();
handleHash[type] = handleHash[type] || [];
handleHash[type].push(arguments.callee);
}, capture);
};
} else if (window.attachEvent) {
return function(el, type, fn, capture) {
el.attachEvent("on" + type, function(){
fn();
handleHash[type] = handleHash[type] || [];
handleHash[type].push(arguments.callee);
});
};
}
})();
var unbind = (function(){
if (window.addEventListener) {
return function(el, type ) {
if(handleHash[type]){
var i = 0, len = handleHash[type].length;
for (i; i<len ; i += 1){
el.removeEventListener(type,
handleHash[type][i]);
}
};
};
} else if (window.attachEvent) {
return function(el, type) {
if(handleHash[type]){
var i = 0, len = handleHash[type].length;
for (i; i<len ; i += 1){
el.detachEvent("on" + type,
handleHash[type][i]);
}
};
};
}
})();

原理解析：

handleHash用作哈希表缓存事件的function，handleHash['事件名称']是一个数组，用来添加多个事件监听的方法，当需要移除哪个事件时，遍历handleHash['事件名称']的数组，然后移除。

使用方法：

bind(obj,'click',function(){
alert ('click');
});
unbind(obj,'click');

第159道：
当浏览器窗体大小发生变化时，哪个事件将会被触发？

解析：

当浏览器的窗口大小被改变时，触发的事件window.onresize为事件指定代码：window.onresize = function(){}。

例如浏览器可见区域信息如下：

<span id="info_keleyi_com">请改变浏览器窗口大小</span>
<script>
window.onresize = function(){
document.getElementById("info_ke"+"leyi_com").innerhtml="宽
度："+document.documentElement.clIEntWidth+"，高度：
"+document.documentElement.clIEntHeight;
}
</script>

第160道：
简述JavaScript的事件模型。

解析：

1. 原始事件模型

属性事件处理模式如下。

（1）基本事件处理。其实大多数人使用的JavaScript事件处理模式都是这种代码方式。

（2）事件类型。分为“输入事件（如onclick）”和“语义事件（如onsubmit）”。

2. 标准事件模型

DOM2对其作了标准化。

（1）先由document向目标对象传播，称之为捕捉阶段。

（2）目标对象的事件处理程序运行。

（3）从目标对象向document起泡。

3. IE事件模型（IE5.5/IE6）

（1）传播过程只起泡，不捕捉。起泡中断方法：window.event.cancelBulle=true。

（2）event对象不是事件处理程序的函数参数，而是window的全局变量。

（3）事件注册函数attachEvent()和反注册函数detachEvent()。

4. Netscape事件模型

由于Netscape已经完全停止开发，所以就不详述了，简单地说，就是只捕捉不冒泡。

第161道：
JavaScript中mouseover与mouseenter，mouseout与mouseleave的区别。

解析：

mouseover与mouseenter的区别：

- 不论鼠标指针穿过被选元素或其子元素，都会触发mouseover事件。

- 只有在鼠标指针穿过被选元素时，才会触发mouseenter事件。

mouseout与mouseleave的区别：

- 不论鼠标指针离开被选元素还是任何子元素，都会触发mouseout事件。

- 只有在鼠标指针离开被选元素时，才会触发mouseleave事件。

第162道：
简述addEventListener和attachEvent的作用，两者是否有区别？

解析：

1. 支持的浏览器

（1）addEventListener在支持DOM2的浏览器中使用，如Firefox、Chrome等。

（2）attachEvent为IE所用。

2. 处理程序执行阶段

（1）addEventListener的第三个参数为true时，在捕获阶段执行；为false时，在冒泡阶段执行。

（2）attachEvent均在冒泡阶段执行。

3. 作用域

（1）addEventListener的作用域为元素作用域，this为element引用。

（2）addEvent的作用域为全局作用域，this为window引用。

4. 事件处理程序执行顺序

（1）addEventHander：执行顺序与添加顺序一致。

（2）attachEvent：执行顺序与添加顺序相反。

第163道：
document.load和document.ready有何区别？

解析：

页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）；二是onload，表示页面包含图片等文件在内的所有元素都加载完成。

第164道：
讲述JavaScript的事件绑定的方法，并举例说明。

解析：

1. 在DOM中直接绑定

例如：

<input onclick="alert('谢谢支持')"type="button" value="单击我，弹出警告框">

2. 在JavaScript代码中绑定

例如，为id="demo"的按钮绑定一个事件，显示它的type属性。

<input id="demo" type="button" value="单击我，显示type属性">

<script type="text/javascript">
document.getElementById("demo").onclick=function(){
alert(this.getAttribute("type")); // this指当前发生
事件的HTML元素，这里是<div>标签
}
</script>

3. 绑定事件监听函数

绑定事件的另一种方法是用addEventListener()或attachEvent()来绑定事件监听函数。

3.3　不可忽视的小漏洞（表单、文本框）

第165道：
下列选项中，描述正确的是（　）（多选）

A. options.add(new Option("a","A"))可以动态添加一个下拉列表选项

B. option.add(new Option("a","A"))可以动态添加一个下拉列表选项

C. new Option("a","A")中"a"表示列表选项的值，"A"用于在页面中显示

D. new Option("a","A")中"A"表示列表选项的值，"a"用于在页面中显示

答案：
AD

解析：

new option(text,value,defaultSelected,selected);

- text：字符串，指定option对象的text属性，即<option></option>之间的文字；

- value：字符串，指定option对象的value属性；

- defaultSelected：布尔值，指定option对象的defaultSelected属性；

- selected：布尔值，指定option对象的selected属性。

第166道：
JavaScript进行表单验证的目的是（　）

A. 把用户的正确信息提交给服务器

B. 检查提交的数据必须符合实际

C. 使得页面变得美观、大方

D. 减轻服务器端的压力

答案：
B

解析：

JavaScript可用来在数据被送往服务器前对HTML表单中的这些输入数据进行验证。

第167道：
如何限制多行文本框内容长度在10以内？

解析：

<textarea name="txt1" cols="45" rows="2" onKeyDown='if
(this.value.length>=10){event.returnValue=false}'></textarea>

第168道：
如何获取下拉框中选中项的内容？

解析：

<select id="test" name="">
<option value="1">text1</option>
<option value="2">text2</option>
</select>

code：

1. JavaScript原生的方法

- 拿到select对象：Var myselect=document.getElementById("test")；

- 拿到选中项的索引：var index=myselect.selectedIndex// selectedIndex代表的是你所选中项的index；

- 拿到选中项options的value：myselect.options[index].value；

- 拿到选中项options的text：myselect.options[index].text。

2. jQuery方法（前提是已经加载了jQuery库）

- var options=$("#test option:selected") //获取选中的项；

- alert(options.val()) //拿到选中项的值；

- alert(options.text()) //拿到选中项的文本。

第169道：
在IE9、Opera、Chrome和Safari浏览器中，在用户选择了文本并释放鼠标的情况下触发（　）事件

A. blur

B. focus

C. select

D. change

答案：
C

解析：

textarea和input文本框都支持select()方法，这个方法用于选择文本框的所有文本。

与select()方法对应的是一个select事件。在选择了文本框时，就会触发select事件。不过，到底什么时候触发select事件，还因浏览器而异。在IE9、Opera、Firefox、Chrome和Safair中，只有用户选择了文本（而且要释放鼠标），才会触发select事件。而在IE8及更早版本中，只要用户选择了一个字母（不必释放鼠标），就会触发select事件。另外，在调用select()方法时也会触发select事件。

第170道：
table标签中border、cellpadding，以及td标签中colspan、rowspan分别起什么作用？

解析：

- border：边界；

- cellpadding：边距；

- colspan：跨列数；

- rowspan：跨行数。

第171道：
在Form中的input可以设置readonly和disable，请问这两项属性有什么区别？

解析：

<input name="country" id="country" size=12 value="disabled/>提交时得不到该值" disabled="disabled" >放在Form表单中提交后得不到该值。将disabled= "disabled"改为readonly = "readonly"即可。

设置为disabled的input将会有下面的限制：不能接收焦点，使用Tab键时将被跳过，被限制的对象值将不会被传递到后台程序。

设置为readonly的input将会有下面的限制：可以接收焦点，但不能被修改，可以使用Tab键进行导航，只有successful的表单元素才是有效数据，才可以进行提交。被限制的对象值与后台交互时值才传递。

第172道：
表单中的输入域input和文本框textarea的异同？

解析：

相同点——input标签和textarea标签的使用目的都是让用户或站长来提交数据，为了让另一方看到想要的数据资料，特别说明的是提交后处理数据都是一样的。

区别：

（1）input标签只能设置单行文本，input标签填写格式是单独出现的，而textarea可设置多行文本，带滚动条的标签填写格式是成对出现的。

（2）input标签编写代码时大多用来放置字数较少的单行文字内容，而textarea一般让用户可以输入多行文字，输入的文字信息量比较大。

（3）input标签的value值可以直接写在元素里面，而textarea标签的value值必须写在开始标签和结束标签之间。

第173道：
如何获得表单<select>域的选择部分的文本？

解析：

<!DOCTYPE html PUBLIC "-//W3C//DTD xhtml 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>
<title>如何获取表单<select>域的选择部分的文本zgbn</title>
</head>

<script type="text/JavaScript">
function test() {
var selectO = document.getElementById("select");

var s = selectO.value ; //获取已经选择的值

var i = selectO.selectedIndex ;//获取选择第几个选项的索引

var op = selectO.options ;//获取所有选项的集合

var t = op.text ;//获取指定索引的集合中元素的文本

alert(t) ;
}
</script>

<body>
<select name="select" id="select">
<option value=1>11</option>
<option value=2>22</option>
<option value=3>33</option>
<option value=4>44</option>
<option value=5>55</option>
</select>

<input type="button" value="单击" onclick="test()" />

</body>
</html>

<html>
<head>
<title></title>
<script>
function sel(obj){
alert("显示文本："+obj.options[obj.selectedIndex].text);
alert("值："+obj.options[obj.
selectedIndex].value);
}
</script>
</head>
<body>
<form name="a">
<select name="a" size="1" onchange="sel(this)">

<option value="a" >1</option>
<option value="b" >2</option>
<option value="c" >3</option>
</select>
</form>
</body>
</html>

第174道：
在Form表单中get与post方式提交的区别。

解析：

（1）get是从服务器上获取数据，post是向服务器传送数据。

（2）get是把参数数据队列加到提交表单的action属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到action属性所指的URL地址。用户看不到这个过程。

（3）get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般默认为不受限制。但理论上，IIS4中最大值为80KB，IIS5中最大值为100KB。

（4）get安全性非常低，post安全性较高。

（5）get限制Form表单的数据集的值必须为ASCII字符，不是ASCII字符时要转换为ASCII字符，也就是“%XX”（其中XX为该符号以16进制数表示的ASCII或ISO Latin-1值）这种；而post支持整个ISO10646字符集。

第175道：
使用JavaScript输出下拉列表中所有的选项的文本。

<form>
请选择您喜欢的水果
<select id="mySelect">
<option>苹果</option>
<option>桃子</option>
<option>香蕉</option>
<option>橘子</option>
</select>
<br/><br/>
<input type="button" onclick="getOption()" value="输出所有选项"/>
</form>

解析：

<script type="text/javascript">
function getOptions()
{
var x=document.getElementById("mySelect");
var y="";
for (i=0;i<x.length;i++)
{
y+=x.options[i].text;
y+="<br />";
}
document.write(y);
}
</script>

option集合可返回包含<select>元素中所有<option>的一个数组。

注释：数组中的每个元素对应一个<option>标签，由0起始。语法为：selectObject.options[]。

第176道：
写一个简单的Form表单，当光标离开表单时把表单的值发送给后台。

解析：

<script type="text/javascript">

$("#o_form").blur(function(){
var vals=$(this).val();
$.Ajax({
url:"./index.php", //传给后台的地址
type:"post", //传输方式
data:{$val:vals}, //传输数据
success: function (data) { //如果执行成功，那么执行
此方法
alert(data); //用data来获取后台传过
来的数据，或者是单纯的语句
}
})
});
</script>

第177道：
在Form中的input有哪些类型？

解析：

类型有：text、radio、checkbox、file、button、image、submit、reset、hidden。

submit是button的一个特例，也是button的一种，它把提交这个动作自动集成了。

如果表单在单击提交按钮后需要用JavaScript进行处理（包括输入验证）后再提交的话，那么必须把submit改成button，即取消其自动提交的行为，否则，将会造成提交两次的结果，对于动态网页来说，也就是对数据库操作两次。

button具有name、value属性，能触发onclick事件。

submit继承了button。

button提交的是innerText。

submit增加了触发表单onsubmit事件的功能、增加了执行表单的submit()方法的功能。

input type=submit，按回车提交表单。

第178道：
当单击按钮时，如何实现两个td值的互换？用JavaScript实现此功能。

解析：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title> </title>
<script type="text/JavaScript">
//<![CDATA[
/*

分析：

这道题首先考变量传值，其次考如何取元素的值。

代码如下：

*/
function submitbtn()
{
var tText1 = document.getElementById('txt1');
var SubmitBtn1 = document.getElementById('submitBtn1');
var tText2 = document.getElementById('txt2');
var SubmitBtn2 = document.getElementById('submitBtn2');

SubmitBtn1.onclick = function()
{
var temp = tText1.value;
tText1.value = tText2.value;
tText2.value = temp;
};
SubmitBtn2.onclick = function()
{
var temp = tText2.value;
tText2.value = tText1.value;
tText1.value = temp;
};

}

window.onload = function()//窗口加载的时候
{
submitbtn();
}
</script>

</head>
<body>
<input type="text" value="12345666" id="txt1" />
<input type="button" id="submitBtn1" />
<input type="text" value="12345222" id="txt2" />
<input type="button" id="submitBtn2" />
</body>
</html>

第179道：
希望图片具有“提交”按钮的功能，该如何编写表单提交（　）

A. 在图片的onClick事件中手动提交

B. 在图片上添加onSubmit事件

C. 在图片的onSubmit事件中手动提交

D. 在表单中自动提交

答案：
B

解析：

首先用图片代替提交按钮submit和重置按钮reset，然后给图片加onclick事件。

<script language="javascript">
function fsubmit(obj){
obj.submit();
}
function freset(obj){
obj.reset();
}
</script>
<form id="form1" name="form1" method="post" action="login.asp">
姓名 <input type="text" name="textfIEld" />
<img src="uploads/200707/30_145425_001.jpg"
onClick="JavaScript:fsubmit(document.form1);">
<img src="uploads/200707/30_145428_002.jpg"
onClick="JavaScript:freset(document.form1);">
</form>

第180道：
创建一个文本框，让其宽度为120像素，高度为20像素，对齐方式为居中对齐，写出该代码。

解析：

<textarea name="" id="" cols="30" rows="10"
style="width:120px;
height: 20px; text-align: center;"></textarea>

第181道：
如何用JavaScript获取所有选中的checkbox的值？

解析：

// 说明：用JavaScript验证表单（Form）中多选框（checkbox）的值
function getCheckboxValue(checkbox) {

if (!checkbox.length && checkbox.type.toLowerCase() ==
'checkbox')
{ return (checkbox.checked)?checkbox.value:''; }
if (checkbox[0].tagName.toLowerCase() != 'input' || chec
kbox[0].type.toLowerCase() != 'checkbox')
{ return ''; }
var val = [];
var len = checkbox.length;
for(i=0; i<len; i++)
{
if (checkbox[i].checked)
{
val[val.length] = checkbox[i].value;
}
}
return (val.length)?val:'';
}

注意：上面的代码传入的参数是checkbox对象，如果页面报错，那么可以删除代码中的第一个if。

3.4　“照镜子”看题（对称数）

第182道：
一个数字倒着读时，和原数字相同，我们将这个数字称之为对称数，例如（1,121,88,8998），在不考虑性能的情况下，请找出1～10000之间的对称数，要求用JavaScript实现。

解析：

<script>
for(var i=1;i<=10000;i++){
var str_i=i.toString(),l=str_i.length; //将数字转化
为字符串，获取字符串的长度
var arr_i=str_i.split(""); //将字符串转化为数组
var rev_arr=[]; //命名一个空数组
for(var j=0;j<l;j++){ //遍历1～10000之间的所有数字
rev_arr.unshift(arr_i[j]); //实现数组反转
}

var rev_str=rev_arr.join(""); //将数组转化为数字
if(str_i==rev_str){ //将原来的数字与反转后的数字作比较
document.write(str_i+"<br>"); //如果是相等的，就是
对称数，并返回
}

}
</script>

3.5　让你坚定不移看下去（JavaScript客户端检测）

第183道：
什么是富客户端，什么是薄（瘦）客户端？

解析：

富客户端，英文名为Rich Client。简单地讲，非IE浏览器的程序一般可以看作胖客户端，IE浏览器可以看作瘦客户端。详细地讲，可以这么说：一个程序能够通过下载文件来操作、运行一个应用，或者从一个文件服务器请求一个基于应用的服务。它需要安装，并且不同于一个薄客户端（Thin Client），比如一个普通的Web页面。富客户端为一个客户端，它有着复杂的UI界面和交互。下面用例子来说明什么是富客户端。

（1）Java Applet，应用于Web页面。

（2）JavaScript Application，比如Bindows。

（3）J2ME MIDP Midlets on a phone/PDA。

（4）Macromedia Application公司的Flash技术。

（5）微软公司的MFC应用程序。

（6）Eclipse的Rcp程序。

（7）Flex程序（属于Flash一类的比较新的技术）。

第184道：
JavaScript可以在以下什么地方执行（　）？

A. 服务器端的IE浏览器

B. 客户端的IE浏览器

C. 在服务器端的Tomcat容器里

D. 在客户端的Tomcat容器里

答案：
B

解析：

JavaScript没有独立的运行窗口，浏览器当前窗口就是它的运行窗口。

3.6　过了这题，公司随便挑（排序）

第185道：
请根据每个元素的i属性，由小到大排序如下数组。

var ar=[{i:5,v:1},{i:2,v:4},{i:3,v:2},{i:1,v:5},{i:4,v:3}];

解析：

ar.sort(function(a, b) {
5 return a.i - b.i;
6 })

对于一个数组，sort()默认按字符编码排序：

var testArray=[3,324,5345,6546,134,5654,665];
testArray.sort();
alert(testArray);

输出结果是：134 3 324 5345 5654 6546 665

现在要让它按照数值大小排序：

var testArray=[3,324,5345,6546,134,5654,665];
testArray.sort(function(a,b){return a-b;});
alert(testArray);

这里传递一个比较函数给sort，比较函数的逻辑是：如果两参数的差值小于0，则表示a必须出现在b前面，否则在b后面。

输出结果是：3 134 324 665 5345 5654 6546

第186道：
说说JavaScript数组排序方法sort()的使用，重点介绍sort()参数的使用及其内部机制。

解析：

sort()方法用于对数组的元素进行排序。

语法：arrayObject.sort(sortby)

参数：sortby

描述：可选。规定排序顺序。必须是函数。

返回值：对数组的引用。请注意，数组在原数组上进行排序，不生成副本。

【说明】

（1）如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。

（2）如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个，用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数：a和b，其返回值如下：

若a小于b，在排序后的数组中a应该出现在b之前，返回一个小于0的值。

- 若a等于b，则返回0；

- 若a大于b，则返回一个大于0的值。

3.7　看了这题，收获多多（caII、appIy）

第187道：
call和apply的区别。

解析：

对于第一个参数，其意义都一样，但对第二个参数：apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始），如func.call(func1, var1, var2, var3)对应的apply写法为：

func.apply(func1,[var1,var2,var3])

同时使用apply的好处是可以直接将当前函数的arguments对象作为apply的第二个参数传入。

第188道：
call的作用是什么？它的参数是如何传递的？

解析：

call方法在msdn中的解释为，调用一个对象的一个方法，以另一个对象替换当前对象。

JavaScript中，call的语法为：call(thisObj,arg1,…,argn)。

- 参数thisObj：可选项，将被用作当前对象的对象。

- 参数arg1,…,argn：可选项，将被传递方法参数序列。

3.8　看懂必高薪的面试题（继承和多态）

第189道：
请用代码说明JavaScript如何实现继承和多态。

解析：

1. 继承

（1）原型继承法。

function parentClass(){
//private fIEld
var x = "I'm a parentClass fIEld!";
//private method
function method1() {
alert(x);
alert("I'm a parentClass method!");
}
// public fIEld
this.x = "I'm a parentClass object fIEld!";
// public method
this.method1 = function() {
alert(x);
alert(this.x);
method1();
}
}
parentClass.prototype.method = function () {
alert("I'm a parentClass prototype method!");
}
parentClass.staticMethod = function () {
alert("I'm a parentClass static method!");
}

（2）调用继承法。

function parentClass() {
// private fIEld
var x = "I'm a parentClass fIEld!";
// private method
function method1() {
alert(x);
alert("I'm a parentClass method!");
}
// public fIEld
this.x = "I'm a parentClass object fIEld!";
// public method
this.method1 = function() {
alert(x);
alert(this.x);
method1();
}
}
parentClass.prototype.method = function () {
alert("I'm a parentClass prototype method!");
}
parentClass.staticMethod = function () {
alert("I'm a parentClass static method!");
}

2. 多态（1）重载。

function add(){
var sum=0;
for(var i=0;i<arguments.length;i++){
sum+=arguments[i];
}
return sum;
}

（2）覆盖。

function parentClass() {
this.method = function() {
alert("parentClass method");
}
}
function subClass() {
this.method = function() {
alert("subClass method");
}
}
subClass.prototype = new parentClass();
subClass.prototype.constructor = subClass;

var o = new subClass();
o.method();

3.9　大型企业面试必考（charAt()、indexOf()）

第190道：
讲述JavaScript函数中charAt()和indexOf()的区别。

解析：

charAt()语法：strObj.charAt(index)

返回指定索引位置处的字符；

indexOf()语法：strObj.indexOf(subString[,startIndex])

返回String对象内第一次出现子字符串的字符位置。

3.10　五年前端，三年必考（substr、substring）

第191道：
JavaScript中substr和substring的区别是什么？

解析：

stringvar.substr(start[,length])返回一个从指定位置开始的指定长度的子字符串。如果length为0或负数，将返回一个空字符串。如果没有指定该参数，则子字符串将延续到stringvar的最后。

strVariable.substring(start, end)返回位于String对象中指定位置的子字符串。返回一个包含从开始到最后（不包含end）的字符串。

第192道：
用JavaScript取www.qdjhu.com/public/images/test.jpg字符串test.jpg的扩展名。

解析：

用url=www.qdjhu.com/public/images/test.jpg存储网址，m=url.lastIndexOf(".")存储最后一个“.”在字符串中的索引，fileName=url.substr(m+1)得到“jpg”。

3.11　这题如此而已，我会为你加油（iframe）

第193道：
关于iframe表述正确的有（　）（多选）

A. 通过iframe，网页可以嵌入其他网页内容，并可以动态更改

B. 在相同域名下，内嵌的iframe可以获取外层网页的对象

C. 在相同域名下，外层网页脚本可以获取iframe网页内的对象

D. 可以通过脚本调整iframe的大小

答案：
ABCD

解析：

iframe元素也就是文档中的文档，或者好像浮动的框架（frame）。通过iframe对象所在页面的对象模型，用户可以访问iframe对象的属性，但不能访问其内容。所以本题正确答案为ABCD。

第4章

一手遮天，大名远扬［JavaScript终极面试题］

一路走来不容易，在这最后时刻，恭喜你，你已成功修炼了一本秘籍，可以在JavaScript界大名远扬了。Ajax独霸一方，无刷新更是让你闻风丧胆，逃之夭夭。

4.1　让人暴走的考题（Ajax）

第194道：
Ajax是什么？它的全称是？

解析：

Ajax的全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），它是一种创建交互式网页应用的网页开发技术。

第195道：
简述Ajax中JavaScript脚本缓存问题，如何解决？

解析：

修改JavaScript内容，调试时并不能显示新写的代码的结果，是因为JavaScript为了加速页面执行，当前页面会使用缓存来保持当前调用的相同链接。

解决方法：为了开发时调试方便，可以在链接地址的后面增加一个随机函数。

第196道：
Ajax和JavaScript的区别？

解析：

JavaScript是一种在浏览器端执行的脚本语言；Ajax是一种创建交互式网页应用的开发技术，它利用了一系列相关的技术，其中就包括JavaScript。

JavaScript是由网景公司开发的一种脚本语言，它和Sun公司的Java语言是没有任何关系的，它们相似的名称只是一种营销策略。在一般的Web开发中，JavaScript是在浏览器端执行的，我们可以用JavaScript控制浏览器的行为和内容。在Ajax应用中，信息在浏览器和服务器之间是传递是通过XML数据或者字符串实现的。

第197道：
Ajax应用和传统Web应用有什么不同？

解析：

在传统的JavaScript编程中，如果想得到服务器端数据库或文件上的信息，或者发送客户端信息到服务器，需要建立一个HTML form，然后get或者post数据到服务器端。用户需要单击“submit”按钮来发送或者接收数据信息，然后等待服务器响应请求，页面重新加载。因为服务器每次都会返回一个新的页面，所以传统的Web应用有可能很慢，而且交互不太好。使用Ajax技术，就可以使JavaScript通过XMLHttpRequest对象直接与服务器进行交互。通过HTTP Request，一个Web页面可以发送一个请求到Web服务器，并且接收Web服务器返回的信息（不用重新加载页面），展示给用户的还是同一个页面，用户感觉页面刷新了，但看不到JavaScript后台进行的发送请求和接受响应。

第198道：
Ajax有哪些优点和缺点？

解析：

优点：

（1）最大的优点是页面无刷新，用户的体验非常好。

（2）使用异步方式与服务器通信，具有更加迅速的响应能力。

（3）可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，Ajax的原则是“按需取数据”，可以最大程度地减少冗余请求和响应对服务器造成的负担。

（4）基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

缺点：

（1）Ajax不支持浏览器返回按钮。

（2）安全问题，Ajax暴露了与服务器交互的细节。

（3）对搜索引擎的支持比较弱。

（4）破坏了程序的异常机制。

（5）不容易调试。

第199道：
主要的Ajax框架都有什么？

解析：

Dojo(dojotoolkit.org)；

Prototype和Scriptaculous (www.prototypeJS.org和script.aculo.us)；

Direct Web Reporting (fetahead.org/dwr)；

Yahoo! User Interface Library (devveloper.yahoo.com/yui)；

Google Web Toolkit ( code.google.com/webtoolkit)；

jQuery。

第200道：
如何处理Ajax的中文乱码问题？

解析：

有中文乱码是因为JavaScript页面和action类中使用的编码方式不一致造成的，可采用如下两种方式解决：

（1）页面的JavaScript做两次encodeURI，服务器的serverlet获取后做一次UTF-8转码，因为前两次进行编码后都变成了英文的字节码，所以到服务器端无论如何解码都不会错误，推荐使用该方法。

- JavaScript的代码var url="Ajaxserver?name="+encodeURI(encodeURI($("#userName").val()));

- 服务器端的代码

String old = httpServletRequest.getParameter("name");
String name = URLDecoder.decode(old,"UTF-8");

（2）在客户端JavaScript做一次编码，在服务器端做一次ISO-8859-1和UTF-8转换。

- JavaScript代码

var url = "Ajaxserver?name=" +encodeURI($("#userName").val());

- 服务器端的代码

String old = httpServletRequest.getParameter("name");
String name = new String(old.getBytes("ISO-8859-1"),"UTF-8");

此处采用了硬编码，在个别浏览器中会出现问题，不建议使用。

第201道：
Ajax的交互模型（流程）是什么样的？

解析：

Ajax的交互模型如下图所示。

Ajax的交互流程如下。

（1）启动获取XMLHttpRequest对象。

（2）open打URL通道，并设置异步传输。

（3）发送数据到服务器。

（4）服务器接受数据并处理，处理完成后返回结果。

（5）客户端接收服务器端返回。

第202道：
简述一下Ajax的工作原理。

解析：

通过XMLHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用JavaScript来操作DOM，从而更新页面。这其中最关键的一步就是从服务器获得请求数据。

第203道：
Ajax跨域的解决办法？

解析：

（1）Web代理的方式。即用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面，由该页面代替用户页面完成交互，从而返回合适的结果。此方案可以解决现阶段所能够想到的多数跨域访问问题，但要求A网站提供Web代理的支持，因此A网站与B网站之间必须是紧密协作的，且每次交互过程，A网站的服务器负担增加，无法代用户保存session状态。

（2）on-Demand方式。MYMSN的门户就是用的这种方式，不过MYMSN中不涉及跨域访问问题。动态控制script标记的生成，通过修改script标记的src属性完成对跨域页面的调用。此方案存在的缺陷是，script的src属性完成该调用时，采取的是get方式，如果请求时传递的字符串过大，程序可能会无法正常运行。不过此方案非常适合聚合类门户使用。

（3）iframe方式。在javaeye上有一篇关于跨域访问的帖子，它提到有人已经用iframe的方式解决了跨域访问问题。数据提交和获取，采用iframe这种方式的确可以，但由于父窗口与子窗口之间不能交互（跨域访问的情况下，这种交互被拒绝），因此无法完成对父窗口效果的影响。

（4）用户本地转储方式。IE本身依附于Windows平台的特性为我们提供了一种基于iframe利用内存来“绕行”的方案，即两个Window之间可以在客户端通过Windows剪贴板的方式进行数据传输，只需要在接收数据的一方设置Interval进行轮询，获得结果后清除Interval即可。Firefox的平台独立性决定了它不支持剪贴板这种方式，而以往版本的Firefox中存在的插件漏洞又被fixed了，所以Firefox无法通过内存来完成暗度陈仓。而由于文件操作Firefox也没有提供支持（无法通过Cookie跨域完成数据传递），致使这种技巧性的方式只能在IE中使用。

（5）结合了前面几种方式，在访问A网站时，先请求B网站完成数据处理，再根据返回的标识来获得所需的结果。这种方法的缺点也很明显，即B网站的负载增大了。其优点在于，对session实现了保持，同时A网站与B网站页面间的交互能力增强了。

第204道：
编写Ajax的4个主要步骤是什么？

解析：

1. 创建引擎（XMLHttpRequest对象）。

2. 事件处理函数，处理服务器的响应结果。

3. 打开一个连接：open(method, url, asynch)。

4. 发送数据：send(data)。

第205道：
请写出一个最熟悉的JavaScript框架（架包），以及该框架中Ajax的使用方法。

解析：

jQuery

使用方法：jQuery里的$.Ajax方法的作用是通过HTTP请求加载远程数据。该方法是由jQuery底层Ajax实现的。常用参数$.Ajax({type：数据提交方式；url：数据提交路径；data：需要提交的数据；dataType：服务器返回数据的类型；success：请求成功后的回调函数；error：请求失败后的回调函数})在回调函数中执行操作。

第206道：
简述Ajax的实现步骤。

解析：

1. 创建XMLHttpRequest对象，也就是创建一个异步调用对象。

2. 创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息。

3. 设置响应HTTP请求状态变化的函数。

4. 发送HTTP请求。

5. 获取异步调用返回的数据。

6. 使用JavaScript和DOM实现局部刷新。

第207道：
如何解决Ajax的安全性问题。

解析：

增加验证码、增加随机Token、约束同一请求在规定时间内的最大请求数量、服务器端校验数据的正确性、尽量运用post办法。

第208道：
简述Ajax异步机制，Ajax如何实现？

解析：

XMLHttpRequest对象是Ajax技术的核心。XMLHttpRequest对象使得JavaScript脚本能够实现对服务器的异步请求，即向后台发送请求并接收服务器响应，通过动态获取响应数据来更新局部页面。

第209道：
Ajax请求时，如何解释JSON数据？

解析：

首先写客户端的HTML代码。

代码如下：

<table>
<thead>
<tr>
<td>学号</td>
<td>姓名</td>
<td>班别</td>
<td>性别</td>
<td>电话</td>
</tr>
</thead>
<tbody></tbody>
</table>
<input id="btnget" type="button" value="加载数据" />

其次写JavaScript代码。

代码如下：

$(function () {
$("#btnget").click(function () {
$.Ajax({
type: "post",
dataType: "Json",
url: "data.ashx",
success: function (msg) {
var str = "";
for (i in msg) {
str += "<tr><td>" + msg[i].id +
"</td><td>" + msg[i].name +
"</td><td>" + msg[i].cla +
"</td><td>" + msg[i].sex +
"</td><td>" + msg[i].tel +
"</td></tr>";
}
$("tbody").append(str);
}
});
});
});

为了使表格好看一些，我们定义一下它的样式。

代码如下：

<style type="text/css">
table {
border-collapse: collapse;
}
table td {
text-align: center;
border: 1px solid gray;
padding: 3px 10px;
}
</style>

最后写服务器端返回Json数据的代码。

代码如下：

string data = [{\"id\":\"2010324268\",\"name\":\"林宇
\",\"cla\":\"10软件\",\"sex\":\"男
\",\"tel\":\"13800138000\"},{\"id\":\"2010324256\",
\"name\":\"李四\",\"cla\":\"10网络\",\"sex\":\"女
\",\"tel\":\"10010\"},{\"id\":\"2010324264\",\"name\":\"张三
\",\"cla\":\"10软件\",\"sex\":\"男\",\"tel\":\"10086\"}]";
context.Response.Write(data);

4.2　面对这些考题，除了崩溃我不知道还能说什么（XMLHttpRequest对象）

第210道：
使用open方法打开具有浏览器工具条、地址栏、菜单栏的窗口，下列选项正确的是（　）

A. open("x.html","HI","toolba=1,scrollbars=1,status=1");

B. open("HI","scrollbars=1,location=1,status=1");

C. open("x.html","status=yes,menubar=1,location=1");

D. open("x.html","HI","toolba=yes,menubar=1,location=1");

解析：

答案：
A

open()方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

语法window.open(url,name,features,replace)

参数含义：

url——一个可选的字符串，声明了要在新窗口中显示文档的URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。

name——一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下画线，该字符声明了新窗口的名称。这个名称可以用作标记<a>和<form>的属性target的值。如果该参数指定了一个已经存在的窗口，那么open()方法就不再创建一个新窗口，而只是返回对指定窗口的引用。

features——一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。在窗口特征这个表格中，我们对该字符串的格式进行了详细的说明。

replace——一个可选的布尔值。规定了装载到窗口的URL是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：

true，URL替换浏览历史中的当前条目。false，URL在浏览历史中创建新的条目。

窗口特征：toolbar=yes|no|1|0是否显示浏览器的工具栏。默认是yes。

location=yes|no|1|是否显示地址字段。默认是yes。

menubar=yes|no|1|是否显示菜单栏。默认是yes。

第211道：
介绍一下XMLHttpRequest对象的常用方法和属性。

解析：

三个常用的属性如下：

1. onreadystatechange属性（存有处理服务器响应的函数）。

2. readyState属性（存有服务器响应的状态信息）。

3. responseText属性（取回由服务器返回的数据）。

两个方法如下：

1. open()方法。第一个参数定义发送请求所使用的方法，第二个参数规定服务器端脚本的URL，第三个参数规定应当对请求进行异步处理。

2. send()方法。将请求送往服务器。

第212道：
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同？

解析：

有，该对象在IE中通过new ActiveXObject()得到，而在Firefox中通过newXMLHttpRequest()得到。

第213道：
HTTP协议的状态消息有哪些？200、302的对应描述。

解析：

HTTP协议的状态消息有：

1xx：信息（100 Continue，101 Switching Protocols）

2xx：成功（200 OK，201 Created，202 Accepted，203 Non-authoritative Information，204 No Content，205 Reset Content，206 Partial Content）

3xx：重定向（300 Multiple Choices，301 Moved Permanently，302 Found，303 See Other，304 Not ModifIEd，305 Use Proxy，306 Unused，307 Temporary Redirect）

4xx：客户端错误（400 Bad Request，401 Unauthorized，402 Payment Required，403 Forbidden，404 Not Found，405 Method Not Allowed，406 Not Acceptable，407 Proxy Authentication Required，408 Request Timeout，409 Conflict，410 Gone，411 Length Required，412 Precondition Failed，413 Request Entity Too Large，414 Request-url Too Long，415 Unsupported Media Type，416 Request Range not satis fiable，417 Expectation Failed）

5xx：服务器错误（500 Internal Server Error，501 Not Implemented，502 Bad Gateway，503 Service Unavailable，504 Gateway Timeout，505 HTTP Version Not Supported）

200 OK：请求成功（其后是对get和post请求的应答文档）。

302 Found：所请求的页面已经临时转移至新的URL。

第214道：
简述JavaScript中的XMLHttpRequest对象，并说明此对象的属性onreadystatechange的作用。

解析：

XMLHttpRequest对象暴露各种属性、方法和事件，以便于脚本处理和控制HTTP请求与响应。XMLHttpRequest对象提供了对HTTP协议的完全的访问，包括做出post和head请求，以及普通的get请求的能力。XMLHttpRequest可以同步或异步地返回Web服务器的响应，并且能够以文本或者一个DOM文档的形式返回内容。

onreadyStateChange的作用：当readyState属性发生变化时触发此事件，用于触发回调函数。

第215道：
JavaScript如何得到HTTP的请求头信息和返回的头信息？

解析：

getResponseHeader从响应信息中获取指定的http头信息。

语法：strValue= oXMLHttpRequest.getResponseHeader(bstrHeader);

getAllResponseHeaders获取响应的所有HTTP头信息。

语法：strValue=oXMLHttpRequest.getAllResponseHeaders();

第216道：
HTTP协议中，以下status code返回值的含义是什么？

302、304、404、500。

解析：

使用ASP.NET/PHP/JSP或者JavaScript都会用到HTTP的不同状态，一些常见的状态码含义如下。

302（临时移动）：服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

304（未修改）：自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。

404（未找到）：服务器找不到请求的网页。

500（服务器内部错误）：服务器遇到错误，无法完成请求。

4.3　感慨“时间太瘦”的考题（关于继承）

第217道：
JavaScript如何实现面向对象中的继承，请写段简单的代码。

解析：

原型链继承，通过对象Child的prototype属性指向父对象Parent的实例，使Child对象实例能通过原型链访问到父对象构造所定义的属性、方法等。

使用apply、call方法，由于JavaScript内置的Function对象的apply、call方法改变了对象构造中“this”的上下文环境，使特定的对象实例具有对象构造中所定义的属性、方法。

对象实例间的继承，JavaScript对象的多态性，允许实例动态地添加属性、方法。该特性造就了JavaScript中的另一种继承手法——对象实例间的继承。

例：function Parent(){};

function Child(){};

Child.prototype = new Parent();

Child.prototype.constructor = Child;

var child = new Child();

alert(child.constructor);//function Parent(){};

alert(child instanceof Child);//true

第218道：
JavaScript有哪几种形式可以实现继承，各有什么优缺点？

解析：

（1）构造继承法：在子类中执行父类的构造函数。

（2）原型继承法：prototype的最大特性是能够让对象实例共享原型对象的属性，因此，如果把某个对象作为一个类型的原型，那么我们说这个类型的所有实例都以这个对象为原型。此时，这个对象的类型也可以作为那些以这个对象为原型的实例的类型。

（3）实例继承法：子类的原型=父类的实例。

（4）复制继承法：复制继承法是通过对象属性的拷贝来实现继承的。

优缺点比较：

第219道：
怎样体现JavaScript的继承关系？

解析：

由于JavaScript是prototype的对象模型，所以没有严格意义上的类class。全部都是对象Object实现继承，可以先创建一个父对象。

oldObject=function(){
this.a="属性1"
}
//复制出一个新对象，新对象里面已经具有旧对象的内容
newOject=new oldObject();
//新增些内容，扩展新对象
newObject.b="属性2";
newObject.function(){
//新方法1
}
//新对象具有旧对象的属性
alert（newObject.a）;

第220道：
编写一段代码，让f1继承f2的所有成员。

function f2(){
this.a2=3;
this.b2=4;
}

function f1(){
this.a1=1;
this.b1=2;
}

解析：

f1.prototype = new f2();
f1.prototype.constructor = f1;

第221道：
选择JavaScript的一项特性，例如原型链继承、闭包模型、对象模型，对其进行简单的介绍或者给出一个实例。

解析：

我们经常需要将一个函数对象暂时挂到一个引用上留待后面执行，因为不到执行时是很难知道其具体参数的，而先前将它赋给那个引用时更是不知道。

执行一个与特定的JavaScript对象关联的事件处理函数，并且要知道调用该对象的哪个方法。相关的例子是，用JavaScript对象来封装与特定DOM元素的交互。这个JavaScript对象具有doOnClick、doMouseOver和doMouseOut方法，并且当用户在该特定的DOM元素中触发了相应的事件时要执行这些方法。不过，可能会创建与不同的DOM元素关联的任意数量的JavaScript对象，而且每个对象实例并不知道实例化它们的代码将会如何操纵它们（即注册事件处理函数与定义相应的事件处理函数分离）。这些对象实例并不知道如何在全局环境中引用自身，因为它们不知道引用它们的实例将会指定哪个全局变量（如果有）。

<input type="button" name="按钮名字" value="button" id="testbt" />
<script type="text/javascript">
function associateObjWithEvent(obj, methodName) {
return (function(e) {
e = e || window.event;
return obj[methodName](e, this);
});
}

function DhtmlObject(elementId) {
var el = document.getElementById(elementId);
if(el) {
el.onmouseover = associateObjWithEvent(this,
"doMouseOver");
}
}

DhtmlObject.prototype.doMouseOver = function(event,
element) {
alert(element.name + " " + event.target + " " +
event.screenX);
}

var bt = new DhtmlObject("testbt");
//bt();
</script>

第222道：
写一个让b继承a的方法。

解析：

function a(name,age){
this.age = age ? age : 30;
this.name = name ? name : '小明'
this.say = function(){
alert(this.name + '今年' + this.age + '岁了！');
}
}
function b){}
B.prototype = new a();
var c = new b();
c.say();

第223道：
JavaScript实现一个类A，包含私有属性、公有属性、私有方法和公有方法。

解析：

现在写一个class1类：

function A(){
this.name="world";//公有属性
var message="No Messages!";//私有属性
this.sayHello=function(){//公有方法(可访问所有权限的方法和属性)
alert("hello !"+this.name+"I want to say:"+message);
}
function getMessage(){//私有方法(只能访问私有的方法和属性)
alert(message);
}
}
class1.staticMethod=function(){//定义该类的一个静态方法
alert("staticMethod()");
}

说起类，其实JavaScript中所有的function都可以当作一个类来使用，从上述的例子可以看出，可以new（实例化）一个类，也可以直接当作function调用。

第224道：
JavaScript如何实现继承？请举例说明。

解析：

JavaScript要实现继承，其实就是实现三层含义：

（1）子类的实例可以共享父类的方法。

（2）子类可以覆盖父类的方法或者扩展新的方法。

（3）子类和父类都是子类实例的“类型”。

例子：

使用原型继承，中间使用临时对象作为Child的原型属性，临时对象的原型属性再指向父类的原型，防止所有子类和父类原型属性都指向同一个对象，这样当修改子类的原型属性，就不会影响其他子类和父类。

function extend(Child, Parent) {
var F = function(){};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
Child.base = Parent.prototype;
}

function Parent(name)
{
this.aa = 123;
this.getName = function() {return name;}; //使用闭包模拟私有成员
this.setName = function(value){name=value;};
}
Parent.prototype.print = function(){alert("print!");};
Parent.prototype.hello = function()
{
alert(this.getName() + "Parent")
};

function Child(name,age)
{
Parent.apply(this, arguments);//调用父类构造函数来继承父类定义的属性
this.age = age;
}
extend(Child,Parent); //继承Parent

Child.prototype.hello = function() //重写父类hello方法
{
alert(this.getName() + "Child");
Parent.prototype.hello.apply(this,arguments); //调用父类同名方法
};
//子类方法
Child.prototype.doSomething = function(){
alert(this.age + "Child doSomething");
};

var p1 = new Child("xhan",22);

var p2 = new Child("xxx",33);

p1.hello();
p2.hello();

p1.doSomething(); //子类方法
p1.print(); //父类方法

alert(p1 instanceof Child); //true
alert(p1 instanceof Parent);//true

4.4　高级前端必考试题（闭包）

第225道：
什么是闭包？

解析：

闭包就是能够读取其他函数内部变量的函数。

（1）闭包外层是一个函数。

（2）闭包内部都有函数。

（3）闭包会return内部函数。

（4）闭包返回的函数内部不能有return（因为这样就真的结束了）。

（5）执行闭包后，闭包内部变量会存在，而闭包内部函数的内部变量不会存在。

第226道：
闭包有什么特性？对页面有什么影响？

解析：

闭包特性：

（1）作为函数变量的一个引用。当函数返回时，其处于激活状态。

（2）闭包就是当一个函数返回时，并没有释放资源的栈区。

闭包对页面的影响：

通过使用闭包，我们可以做很多事情。比如模拟面向对象的代码风格；更优雅、更简洁的表达出代码；在某些方面提升代码的执行效率。

第227道：
闭包的含义是什么？它的作用和原理是什么？具体能在什么场景使用？

解析：

闭包的含义：

闭包就是能够读取其他函数内部变量的函数。

作用和原理：

因为闭包只有在被调用时才执行操作，所以它可以被用来定义控制结构。

多个函数可以使用一个相同的环境，这使得它们可以通过改变那个环境相互交流。

闭包可以用来实现对象系统。

使用的场景：

（1）采用函数引用方式的setTimeout调用。

（2）将函数关联到对象的实例方法。

（3）封装相关的功能集。

第228道：
闭包的好处和坏处。

解析：

闭包的好处：

（1）逻辑连续，当闭包作为另一个函数调用参数时，避免脱离当前逻辑而单独编写额外逻辑。

（2）方便调用上下文的局部变量。

（3）加强封装性，是第2点的延伸，可以达到对变量的保护作用。

闭包的坏处：

闭包有一个非常严重的问题，即浪费内存，浪费内存不仅仅因为它常驻内存，更重要的是，对闭包的使用不当会造成无效内存的产生。

第229道：
请写出一个闭包的简单实例。

解析：

function a(){
var i=0;
function b(){
alert(++i);
}
return b;
}
var c=a();
c();

这是个标准的闭包。在函数a中，定义了函数b，a又return了b的值。

var c=a();
c();

这两句执行很重要。var c=a();在这里执行了a函数，那么a肯定经过了return，按照主流语言的函数特性，现在c的值就是a的返回值。

第二行c()实际执行的就是b的函数。最后不管执行的是谁，会弹出一个值为0的窗口。到此为止，按理论来说所有的生命周期就算是全部结束了。可是如果我们再多执行一行var c=a(); c();c();第一次弹出0，第二次弹出执行的却是1。也就是说第一次c()后，a中的i依然保留，所以a在内存的栈区依然保留。

4.5　值得思考和深钻的考题（video）

第230道：
请使用JavaScript创建video标签，并创建播放、暂停方法。

解析：

<!DOCTYPE html>
<html>
<head>
<title>Simple javascript Controller</title>
<script type="text/javascript">
function playPause() {
var myVideo = document.getElementsByTagName('video')[0];
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig() {
var myVideo = document.getElementsByTagName('video')[0];

myVideo.height = (myVideo.videoHeight * 2 ) ;
}
function makeNormal() {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.height = (myVideo.videoHeight) ;
}
</script>
</head>
<body>

<div class="video-player" align="center">
<video src="myMovIE.m4v" poster="poster.jpg" ></video>
<br>
<a href="javascript:playPause();">Play/Pause</a> <br>
<a href="javascript:makeBig();">2x Size</a> |
<a href="javascript:makeNormal();">1x Size</a> <br>
</div>
</body>
</html>

4.6　这些年，一直“陪伴我”的考题（urI参数）

第231道：
请编写一个JavaScript函数parseQueryString，它的用途是把url参数解析为一个对象，如：

var url="http://www.qdjhu.com/index.asp?keyO=O & key1=1 & key2=2…";
var obj=parseQueryString(url);
alert(obj.keyO);//输出O

解析：

var url="http://www.qdjhu.com/index.php?key0=0&key1=1&key2=2";
function parseQueryString(url){
var str=url.split("?")[1];
var items=str.split("&");
var result={}
var arr=;
for(var i=0; i&lt;items.length; i++){
arr=items.split('=');
result[arr[0]]=arr[1];
}
return result;
var obj=parseQueryString(url);
console.log(obj)

第232道：
获取当前url，并将url的参数遍历数组打印出来，并在3秒自动返回前一个页面。

解析：

function getUrlPars(){
var url=location.search;
var theRequest=new Object();
if(url.indexOf("?")!=-1){
var str=url.substr(1),
strs=str.split("&");
for(var i=0;i<strs.length;i++){
var sTemp=strs[i].split("=");
theRequest[sTemp[0]]=(sTemp[1])

}
}
return theRequest;
}
var mYRequest = GetUrlPars();
var 参数1值 = mYRequest["参数1"];

4.7　小心陷阱！总是被坑的考题（JavaScript模仿块级作用域）

第233道：
下面JavaScript代码的运算结果是2还是undefined？请阐述原因。

function show(){
var b=1;
a=++b;
}
show();
alert(a);

解析：

运算结果是2。

原因：

因为b=1，

a=++b，

所以a=1+1=2。

4.8　错误率最高的考题（正则表达式）

第234道：
请写出一个方法，验证用户输入是否为数字。

解析：

<script type="text/javascript">
function validate(){
var reg=new RegExp("^[0-9]*$");
var obj=document.getElementById("name");
if(!reg.test(obj.value)){
alert(请输入数字!");
if(!/^[0-9]*$/.test(obj.value)){
alert("请输入数字!");
}
}
</script>

第235道：
写一个匹配手机号的正则表达式。

解析：

/^13[0-9]{1}[0-9]{8}|^15[9]{1}[0-9]{8}/

第236道：
请写出一个正则表达式，验证以下数列：

1，2，3，4，5，6，7，8，9，10，11，12

规律是一个数字后面跟一个逗号，最后一个数字后面没有逗号，并且数字只能是1到12中的任意一个。

解析：

/^(1[0-2],|[0-9],)*(1[0-2]|[0-9])/

第237道：
用正则表达式怎样去掉重复的字符串，而只保留其中的一个？

解析：

var str="aaadcccdddd";
str = str.replace(/(.)\1+/g,'$1');

第238道：
用正则表达式判断手机、邮箱、电话、中文。

解析：

手机：/ ^13[0-9]{1}[0-9]{8}|^15[9]{1}[0-9]{8}/

邮箱：/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/

电话：/((\(\d{3}\)|\d{3}-)|(\(\d{4}\)|\d{4}-))?(\d{8}|\d{7})/

中文：/^[\u4e00-\u9fa5]{0,}$/

4.9　前端最新技术考题（转换大写）

第239道：
使用JavaScript将字符串中由空格隔开的每个单词首字母大写。

解析：

字符串中，每个单词由空格隔开，空格的个数不限。

代码如下：

function capitalize(sting) {
var words = string.split(" ");
for(var i = 0; i < words.length; i++) {
words[i] = words[i].charAt(0).toUpperCase() +
words[i].slice(1);
}
return words.join(" ");
}
var string = "Ajax Cookie Event object";
capitalize(string); // "Ajax Cookie Event Object"

第240道：
如何把一个字符串里的所有单词的第一个字符转换为大写？

解析：

var words = string.split(" ");
for(var i = 0; i < words.length; i++) {
words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);
}
return words.join(" ");

4.10　总有一种题，叫看起来都对（JSON）

第241道：
解释一下JSON是如何进行跨域的？

解析：

Json可以跨域，但是必须有Jsoncallback这个参数约定。

比如：

$.getJson('http://www.qdjhu.com/api/users/items/?username=desandro' + '&apike y=8b604e5d4841c2cd976241dd90d319d7' +'&tag=bestofisotope&callback=?')

对方必须有callback=?这个约定。如果没有这个约定，JSON硬直跨域，难度太大，最后你会发现，费了九牛二虎之力还不如用服务器写个services去抓取，然后用JSON去请求自己这个services地址，因为服务器不涉及跨域安全性问题，JavaScript是有这个安全性限制的。

第242道：
请实现一个Json.stringify(Json)方法，能够对标准的JSON序列化。

解析：

JSON对象有两个方法：stringify()和parse()。在最简单的情况下，这两个方法分别用于把JavaScript对象序列化为JSON字符串，以及把JSON字符串解析为原生JavaScript，早期的Json解析器基本上就是使用JavaScript的eval()函数。由于JSON是JavaScript自己的语法，因此eval()函数可以解析、解释并返回JavaScript的对象和数组。ECMAScript 5对解析JSON的行为进行了规范，定义了全局对象JSON。

代码如下：

<html>
<head>
<title></title>
<script type="text/javascript">
function init(){
var book={
title:"JavaScript高级程序设计",
authors:["Nicholas C. Zakas"],
edition:3,
year:2011
};
var JsonBook=Json.stringify(book);
var objectBook=Json.parse(JsonBook);
var title=objectBook.title;}
</script>
</head>
<body>
<input type="button" onclick="init()" value="测试" />
</body>
</html>

默认情况下，Json.stringify()输出的JSON字符串不包含任何空字符或缩进，因此保存在JsonBook中的字符串如下所示：

{"title":"JavaScript高级程序设计","authors":["Nicholas C.Zaka s"],"edition":3,"year":2011}

在序列化JavaScript对象时，所有函数及原型成员都会被有意忽略，不体现在结果中。此外，值为undefined的任何属性也都会被跳过。最后，结果中都是值为有效JSON数据类型的实例属性。

注意，虽然book与objectBook具有相同的属性，但它们是两个独立的、没有任何关系的对象。如果传给Json.parse()的字符串不是有效的JSON，该方法会显示错误。

第243道：
说说Jsonp的实现方式。

解析：

最简单的Jsonp实现方式如下。

var Jsonp = document.createElement("script") ;
//Firefox:onload IE:onreadystatechange
Jsonp.onload = Jsonp.onreadystatechange = function(){
//onreadystatechange，仅IE
if (!this.readyState || this.readyState === "loaded" ||
this.readyState === "complete") {
alert($("#demo").html());
Jsonp.onload = Jsonp.onreadystatechange = null//清理
防止IE memory leaks
}
}
Jsonp.type = "text/javascript";
Jsonp.src = "http://www.qdjhu.com/2010/JS/jQuery.JS";
//在head之后添加JS文件
document.getElementsByTagName("head")[0].appendChild(Jsonp);

简单解释：我们通过创建script，指定它的src等属性，然后插入head执行。建议onload、onreadystatechange写在src赋值之前，防止载入JavaScript太快而没有给onload、onreadystatechange赋值（Image对象在IE下具有此类现象）。

Jsonp实例：

首先我们可以定义一个函数来执行Jsonp返回的数据，然后通过Jsonp的src传此函数给后台，进行处理，返回可执行的函数。例如下面代码：

function JsonpHandle(a){
alert(a);
}
var Jsonp=document.createElement("script") ;
Jsonp.type="text/javascript";
Jsonp.src = http://www.qdjhu.com/Jsonp.php?callback=JsonpHandle";
//在head之后添加JavaScript文件
document.getElementsByTagName("head")[0].appendChild(Jsonp);
后台Jsonp.php的代码：
echo $_GET["callback"]."('hello,world')";

第244道：
Jsonp是解决跨域的唯一途径吗？可异步吗？实现机制是什么？Jsonp和Json有关系吗？

解析：

（1）Jsonp不是解决跨域的唯一途径。

（2）可以异步。

（3）实现机制如下。

Jsonp的全称是Jsonp with Padding，是为了解决跨域请求资源而产生的解决方案。很多时候我们需要在客户端获取服务器数据进行操作，一般我们会使用Ajax+Web Service做此事，但是如果我们希望获取的数据和当前页面并不是一个域，著名的同源策略（不同域的客户端脚本在没明确授权的情况下，不能读写对方的资源）会因为安全原因拒绝请求，也就是说，我们不能向其他域直接发送请求以获取资源，在localhot域上有一个books.php，里面包含脚本对test.com域的books.php发送get请求，希望获取其book列表资源，这就是一个跨域请求资源。

代码如下：

$.ajax({
type:'get',
url:'http://www.qdjhu.com/books.php'
});

页面会报一个这样的错误：XMLHttpRequest cannot load。而http://www.qdjhu.com/books.php. Origin http://localhost is not allowed by Access-Control-AllowOrigin.Jsonp是为了解决这个问题出现的。

（4）Jsonp和JSON的关系。

Json（JavaScript Object Notation）和Jsonp（Json with Padding）虽然只有一个字母的差别，但其实它们根本不是一回事儿。JSON是一种数据交换格式，而Jsonp是一种依靠开发人员的聪明才智创造出来的一种非官方跨域数据交互协议。我们拿谍战片来打个比方，JSON是地下党用来书写和交换情报的“暗号”，而Jsonp则是把用暗号书写的情报传递给自己同志时使用的接头方式。

第245道：
解释Jsonp的原理，以及它为什么不是真正的Ajax。

解析：

1. Jsonp原理

虽然有同源策略的限制，但是并不是HTML上所有资源都必须是同一个域，我们常见的页面为了节省流量或加载速度，采用Google或微软的jQuery CDN，在页面上我们可以这样写以下代码，此时就可以引用jQuery了。iframe、img、style、script等元素的src属性可以直接向不同域请求资源，Jsonp正是利用script标签实现跨域请求资源。

代码如下：

<script type="text/javascript">
src="http://www.qdjhu.com/Ajax/libs/jQuery/1.7.1/
jQuery.min.JS">
</script>

2. 原因

Jsonp是需要动态创建script标签的，是回调函数。

Ajax是页面无刷新请求数据操作。

4.11　最难回答的考题（事件委托）

第246道：
假如一个父容器里有一万个子元素，要给它们全部绑定事件，如何绑性最好？

解析：

有这样一道JavaScript题目：在如下DOM结构中，如何高效地给li元素绑定click事件，从而当用户单击li元素时能够提示li中的内容？

<ul>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
……
……
</ul>

最初想法就是遍历每个li元素，循环给li绑定onclick事件，代码如下：

window.onload = function() {
var ul = document.getElementById('ul');
var lis = ul.getElementsByTagName('li');
for (var i = lis.length-1; i >= 0; i--) {
lis[i].onclick = function(e) {
alert(this.innerhtml);
}
}
};

这种想法当然是最简单、最直观、也是正确的，但是存在一点问题，当DOM中的li元素特别多时，这样循环遍历的绑定操作势必会占用大量的资源，这时候我们可以使用事件的一些特性，将操作绑定到ul元素上面，当事件触发时，自动获取当前事件操作的对象，然后再完成操作。如下面代码：

window.onload = function() {
var ul = document.getElementById('ul');

ul.onclick = function(e) {
e = window.event ? window.event : e;
var who = e.target ? e.target : e.srcElement;
alert(who.innerHTML);
};
};

这里我们用到了Event对象的target属性，该属性能够获取事件发生所在的元素。当然在IE下，该功能被srcElement代替。

第247道：
描述一下事件冒泡，介绍事件委托（事件代理）的实现方法，以及它的原理和优点。

解析：

（1）事件冒泡。在一个对象上触发某类事件（比如单击onclick事件），如果该对象定义了此事件的处理程序，那么此事件就会调用这个处理程序；如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的顶层，即document对象（有些浏览器是window）。

（2）事件委托的实现方法。通俗地讲，onclick、onmouseover、onmouseout等就是事件。而委托，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，以完成这个事件。也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。

（3）事件委托的原理。事件委托，其实从名字上就很好理解，就是自己的事件交给别人去做，即将事件委托给别人。

（4）事件委托的优点。比如有很多li元素，我们想为每一个li元素注册一个单击事件，当然你可以将每个元素挨个进行注册，但是如果有100个或者更多个li元素的话，这绝对是一项海量的工作，如果我们利用冒泡原理，将事件委托给li元素的父级元素处理，那么无论有多少个li元素，都能够轻松搞定。

例如：

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" />
<title>耶耶耶</title>
<style type="text/css">
ul{
list-style:none;
}
</style>
<script type="text/javascript">
window.onload=function(){
var obox=document.getElementById("box");
var oshow=document.getElementById("show");
obox.onclick=function(ev){
var ev=ev||window.event;
var target=ev.target||ev.srcElement;
oshow.innerHTML=target.innerHTML;
}
}
</script>
</head>
<body>
<div id="show"></div>
<ul id="box">
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
</ul>
</body>
</html>

第248道：
事件委托是什么？

解析：

利用事件冒泡的原理，自己所触发的事件，由它的父元素代替执行。

4.12　高智商考题（事件流）

第249道：
解释JavaScript事件冒泡机制。

解析：

事件：在浏览器客户端应用平台，基本上都是以事件驱动的，即某个事件发生，然后做出相应的动作。浏览器的事件表示的是某些事情发生的信号。

冒泡：例如，气泡从水底开始往上升，由深到浅，升到最上面。在上升的过程中，气泡会经过不同深度层次的水。这个气泡就相当于这里的事件，而水则相当于整个DOM树；事件从DOM树的底层一层一层往上传递，直至传递到DOM的根节点。

第250道：
使用JavaScript语言，编写一个由小到大的冒泡排序算法。

解析：

<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<script language="javascript" type="text/javascript"> <!--
function bubbleSort(arr){
//外层循环，共要进行arr.length次的求最大值的操作
for(var i=0;i<arr.length;i++){
//内层循环，找到第i大的元素，并将其和第i个元素交换
for(var j=i;j<arr.length;j++){
if(arr[i]<arr[j]){ //交换两个元素的位置
var temp=arr[i];
arr[i]=arr[j];
arr[j]=temp;
}
}
}
}

var arr=[32,55,78,43,78,10,45,20,9,89],
bubbleSort(arr);
//输出：89,78,78,55,45,43,32,20,10,9
for(var i=0;i<arr.length;i++){
document.write(arr[i]+",");
}
//-->
</script>
</body>
</html>

第251道：
分别写出普通与绑定的阻止默认事件。

解析：

普通：

return false;

绑定：

preventDefault();
if(oEvent.preventDefault) {
oEvent.preventDefault();
}
return false;

第252道：
事件处理程序及事件对象的跨浏览器实现。

解析：

varEventUtil = (function() {
var EventUtil, //事件处理对象
eventList = [], //事件列表
//浏览器兼容的鼠标滚动事件type
mouseWheelType = typeof window.opera !== "object"&& !/
(Khtml|AppleWebKit|Konqueror)/.test(navigator.userAgent) &&
/Gecko/.test(navigator.userAgent) ? "DOMMouseScroll":
"mousewheel", //鼠标滚动事件type正则
mouseWheelRegExp = /^mousewheel|DOMMouseScroll$/;
//事件详细信息构造器
function EventDetail(element, type, handler, proxy) {
this.element = element;
this.type = type;
this.handler = handler;
this.proxy = proxy;
}
//将事件对象处理成DOM标准的事件对象
function eventObjHandler(event, element) {
event = event || window.event;
if(!event.target) {
event.target = event.srcElement;
}
if(event.cancelable === undefined) {
event.cancelable = true;
}
if(!event.preventDefault) {
event.preventDefault = function() {
event.returnValue = false;
};
}
if(event.bubbles === undefined) {
event.bubbles = true;
}
if(!event.stopPropagation) {
event.stopPropagation = function() {
event.cancelBubble = true;
};
}
if(!event.currentTarget) {
event.currentTarget = element;
}
if(!event.eventPhase) {
event.eventPhase = event.target === event.
currentTarget ? 2: 3;
}
if(mouseWheelRegExp.test(event.type) && !event.wheelDelta) {
event.wheelDelta = -event.detail * 40;
}
return event;
}
//创建handler的代理函数，用于修正this引用
function createProxyFunc(ele, type, handler) {
var proxy = function(event) {
handler.call(ele, eventObjHandler(event, ele));
};
eventList.push(newEventDetail(ele, type, handler, proxy));
return proxy;
}
//从eventList中找出真正绑定到事件中的处理函数，并删除相应的EventDetail
function findTheTrueEventHandler(ele, type, handler) {
var i, eventDetail;
for(i = eventList.length - 1; i >= 0; i--) {
eventDetail = eventList[i];
if(eventDetail.element === ele && eventDetail.
type === type && eventDetail.handler === handler) {
break;
}
}
if(i > -1) {
handler = eventList[i].proxy; eventList.
splice(i, 1);
}
return handler;
}
//修正鼠标滚轮事件名
function repairMouseWheel(type) {
return mouseWheelRegExp.test(type) ? mouseWheelType :
type;
}
EventUtil = {
//添加事件绑定
add: function(ele, type, handler) {
type = repairMouseWheel(type); //修正type
if(ele.addEventListener) { //标准
ele.addEventListener(type,
type === "DOMMouseScroll"?
createProxyFunc(ele, type, handler) : handler, false);
} else if(ele.attachEvent) { //IE
ele.attachEvent("on"+ type,
createProxyFunc(ele, type, handler));
} else{ //DOM1
ele["on"+ type] = function(event) {
handler.call(ele, eventObjHandler(event));
};
}
},
//移除事件绑定
remove: function(ele, type, handler) {
type = repairMouseWheel(type); //修正type
if(ele.removeEventListener) { //标准
ele.removeEventListener(type,
type === "DOMMouseScroll"?
findTheTrueEventHandler(ele, type, handler) :
handler, false);
} else if(ele.detachEvent) { //IE
ele.detachEvent("on"+ type,
findTheTrueEventHandler(ele, type, handler));
} else{ //DOM1
ele["on"+ type] = null;
}
}
};
//绑定页面关闭事件，当页面关闭时移除所有事件
EventUtil.add(window, "unload", function() {
var i, eventDetail;
for(i = eventList.length - 1; i >= 0; i--) {
eventDetail = eventList[i];
if(eventDetail.type === "DOMMouseScroll") {
eventDetail.element.removeEventListener
(eventDetail.type, eventDetail.proxy, false);
} else{
eventDetail.element.detachEvent("on"+
eventDetail.type, eventDetail.proxy, false);
}
eventList[i] = null;
}
eventList = [];
});
return EventUtil;
})();

第253道：
event.preventDefault的作用是什么？与event.stopPropagation有什么区别？请举例说明。

解析：

event.preventDefault()和event.stopPropagation()不是jQuery的方法，而是js本身自带的。

event.preventDefault()用法：介绍该方法将通知Web浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果type属性是“submit”，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果Event对象的cancelable属性是fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。

event.stopPropagation()用法：介绍该方法将停止事件的传播，阻止它被分派到其他document节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个document节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。

第254道：
如何阻止冒泡事件和默认事件？

解析：

阻止冒泡事件发生需要调用以下函数：

function stopBubble(e){
if(e&&e.stopPropagation){//非IE
e.stopPropagation();
}else{//IE
window.event.cancelBubble=true;
}
}

阻止默认事件发生需要调用以下函数：

function stopDefault( e ) {
//阻止默认浏览器动作(W3C)
if ( e && e.preventDefault )
e.preventDefault();
//IE中阻止浏览器默认动作的方式
else
window.event.returnValue = false;
return false;
}

4.13　前端压轴考题（错误处理与调试）

第255道：
JavaScript程序中异常捕获的方法有哪些？

解析：

使用Try…catch…来异常捕获（主要适用于IE5以上内核的浏览器，也是最常用的异常捕获方式）。

使用onerror事件异常捕获，这种捕获方式是比较古老的一种方式，目前一些主流的浏览器暂不支持此种捕获方式。

4.14　你值得拥有的考题（Cookie）

第256道：
写一个设置Cookie值的封装函数。

解析：

（1）encodeURI()转换字符编码为统一编码（涉及中文编码）。

（2）toUTCString()将时间转换为字符串，Cookie只能接收字符串形式。

function setCookie(key, value, t) {
var oDate = new Date();
oDate.setDate(oDate.getDate() + t);
document.Cookie = key + '='+ encodeURI(value)
+';expires='+oDate.toUTCString();
}

第257道：
列举3～6个Cookie的属性。

解析：

Cookie的属性有Comment、Domain、Max-Age、Path、Secure、Version。

第258道：
简述一下Cookie的操作，以及Cookie的属性都有哪些？

解析：

Cookie是浏览器提供的一种机制，它将document对象的Cookie属性提供给JavaScript。可以由JavaScript对其进行控制，而并不是JavaScript本身的性质。Cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个Cookie可用。因此，Cookie可以跨越一个域名下的多个网页，但不能跨越多个域名使用。可用在保存用户的登录状态、跟踪用户行为、定制页面、创建购物车。

$.Cookie("CookieName","CookieValue",｛expires:7, path:"/",domain: "qdjhu.com", secure: false, raw:false｝);

expires：有效时间；path：设置能够读取Cookie的顶级目录；domain：创建Cookie所在网页所拥有的域名；secure：默认是false，如果为true，Cookie的传输协议为https；raw：默认为false，读取和写入时自动进行编码和解码（使用encodeURIComponent编码，使用decodeURIComponent解码），要关闭这个功能，需设置为true。

综合提升

第259道：
异步加载JavaScript的方式有哪些？请分别举例。

解析：

1. $.getScript(URL, callback)

这个方法提供了异步加载script资源的方式，对于一些Web网页内容比较多，需要按需加载的情况，提供了很大的帮助，jQuery1.2之后的这个方法可以跨域访问，它通过动态创建script，在加载成功后删除script节点。使用方法：$.getScript("/JS/user.JS");

2. $.getJson()

该方法提供了访问同一个域中的JSON数据。

$("#AjaxLoadJson").click(function(){
$.getJson("JS/user.Json", function(data) {
$("#divTip").empty(); //先清空标记中的内容
var strhtml = ""; //初始化保存内容变量
$.each(data, function(InfoIndex, Info) { //遍历获取的数据
strhtml += "姓名：" + Info["name"] + "<br>";
strhtml += "性别：" + Info["sex"] + "<br>";
})
$("#divTip").html(strhtml); //显示处理后的数据
})
});

对应的user.Json：

[
{
"name": "a",
"sex": "男",
"email": "a@163.com"
},
{
"name": "b",
"sex": "女",
"email": "b@163.com"
}
]

URL表示请求的地址，data表示请求的参数，可选参数CALLBACK在回调函数中执行操作。

3. $("#div").load(URL selecter)

该方法提供了异步获取HTML数据的方式，这个方法也不能跨域访问，在URL后面可以指定异步请求的网页的哪些部分被加载到该div中，举个例子：

$("#AjaxLoadhtml").click(function() { //按钮单击事件
$("#Ajax").load("index.Jsonp h3"); //load()方法加载数据
})
index.JSP代码
<html>
<head>
</head>
<body>
<h2>Hello World!</h2>
<h3>你好</h3>
</body>
</html>

第260道：
请简述同步和异步的区别。

解析：

同步是指发送方发出数据，等接收方发回响应以后才发下一个数据包的通信方式。

异步是指发送方发出数据后，不等接收方发回响应，接着发送下一个数据包的通信方式。

第261道：
请写一段代码，判断当前脚本运行在浏览器中还是node环境中。

解析：

判断Global对象是否为window，如果不为window，那么当前脚本没有运行在浏览器中。

第262道：
location.search()是什么？

解析：

设置或获取网页地址跟在问号后面的部分。

当以get方式在URL中传递了请求参数时，可以利用location的search属性提取参数的值。

第263道：
模拟一个HashTable类，包含add、remove、contains、length方法。

解析：

function Hashtable()
{
this.container = new Object();
/**//** put element */
this.put = function (key, value)
{
if (typeof (key) == "undefined")
{
return false;
}
if (this.contains(key))
{
return false;
}
this.container[key] = typeof (value) ==
"undefined" ?null : value;
return true;
};
/**//** remove element */
this.remove = function (key)
{
delete this.container[key];
};
/**//** get size */
this.size = function ()
{
var size = 0;
for (var attr in this.container)
{
size++;
}
return size;
};
/**//** get value by key */
this.get = function (key)
{
return this.container[key];
};
/**//** containts a key */
this.contains = function (key)
{
return typeof (this.container[key]) != "undefined";
};
/**//** clear all entrys */
this.clear = function ()
{
for (var attr in this.container)
{
delete this.container[attr];
}
};
/**//** hashTable 2 string */
this.toString = function()
{
var str = "";
for (var attr in this.container)
{
str += "," + attr + "=" + this.container[attr];
}
if(str.length>0)
{
str = str.substr(1, str.length);
}
return "{" + str + "}";
};
}

第264道：
JavaScript如何实现面向对象和继承机制？

解析：

面向对象：

function MyObject(){
this.name = "myObject";
this.type = "class";
this.methodA = function(){
alert(this.name);
}
this.methodB = function(){
return this.type;
}
}
var myObject = new MyObject();
myObject.methodA();
var type = myObject.methodB();
alert(type);

继承机制：

（1）构造继承适合单个class，优点是继承关系明确。

（2）原型链方式，适合无参数继承。

（3）混合方式，根据情况而定。

第265道：
请看下面这段代码：

var a=document.getElementsByTagName("a");
for(var i=0;i<a.length;i++){
a[i].onclick=function(){
alert(i);
}
}

本程序要完成的功能是：单击页面中的超链接时，弹出该链接的编号。请问该程序执行后，单击页面中的超链接时，会弹出什么值？然后修改这段代码来达到预期效果。

解析：

会弹出 a元素的个数
var a=document.getElementsByTagName("a");
for(var i=0;i<a.length;i++){
a[i].onclick=(function(i){
alert(i);
})(i);
}

第266道：
编写一个类，类中定义如下属性和方法：共有属性和共有方法、共有静态属性和共有静态方法、私有属性和私有方法、特权属性和特权方法、静态属性和静态方法。然后，在代码中通过注释的形式注明上述每个属性和方法。

解析：

function User(){
//公有属性：
//特权属性：
this.name='byronvis';
//特权方法：
//公有方法：
this.sayName=function(){
alert(this.name);
alert(this.school);
alert(age);//变量声明会自动提前
alert(this.sex);
};
//私有属性：
var age=22;
//私有方法：
function sayAge(){
alert(age);
}
sayAge();
}
//共有属性： 共享内存
//共有静态属性
User.prototype.school='zky';
//共有方法：可访问公有属性
//共有静态方法
User.prototype.saySchool=function(){
alert(this.school);
alert(this.name);
alert(this.sex);
alert(age);
};
var obj=new User();
//静态属性：就是动态添加的实例属性
obj.sex='man';
//静态方法：就是动态添加的实例方法
obj.saySex=function(){
alert(this.sex);
alert(this.name);
alert(this.school);
alert(age);
};

第267道：
JavaScript里面的基础对象和基础数据类型有哪些？

解析：

基础对象：

1. 函数构造法

function funcName(){};

2. 对象生成法

var obj={};
obj.x=1;
obj.y=2;

3. 对象直接生成法

var obj={x:1,y:2}

基础数据类型：JavaScript中有5种简单数据类型（也称为基本数据类型）：Undefined、Null、Boolean、Number和String。还有一种复杂数据类型——Object，Object本质上是由一组无序的名值对组成的。

介于JavaScript是松散类型的，因此需要有一种手段来检测给定变量的数据类型，而typeof就是负责提供这方面信息的操作符。对一个值使用typeof操作符可能返回下列某个字符串：

- "undefined"——如果这个值未定义；

- "boolean"——如果这个值是布尔值；

- "string"——如果这个值是字符串；

- "number"——如果这个值是数值；

- "object"——如果这个值是对象或null；

- "function"——如果这个值是函数。

第268道：
怎样将一个过大的模块分开放在不同的JavaScript文件中？

解析：

最早的时候，所有JavaScript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文件不够了，必须分成多个文件，依次加载。下面的网页代码，相信很多人都见过。

代码如下:

<script src="1.JS"></script>
<script src="2.JS"></script>
<script src="3.JS"></script>

这段代码依次加载多个JavaScript文件。

这样的写法有很大的缺点。首先，加载时，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；其次，由于JavaScript文件之间存在依赖关系，因此必须严格保证加载顺序（比如上例的1.JS要在2.JS的前面），依赖性最大的模块一定要放到最后加载，当依赖关系很复杂时，代码的编写和维护都会变得困难。

require.JS的诞生，就是为了解决以下这两个问题：

（1）实现JavaScript文件的异步加载，避免网页失去响应；

（2）管理模块之间的依赖性，便于代码的编写和维护。

第269道：
请解释一下JavaScript的本地对象，内置对象和数组对象。

解析：

1. 本地对象

ECMA-262把本地对象（native object）定义为“独立于宿主环境的ECMAScript实现提供的对象”。

本地对象包含以下内容：

Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError。

由此可以看出，本地对象就是ECMA-262定义的类（引用类型）。

2. 内置对象

ECMA-262把内置对象（built-in object）定义为“由ECMAScript实现提供的、独立于宿主环境的所有对象，在ECMAScript程序开始执行时出现”。这意味着开发者不必明确实例化内置对象，它已被实例化了。

同样是“独立于宿主环境”。根据定义我们似乎很难分清“内置对象”与“本地对象”的区别。而ECMA-262只定义了两个内置对象，即Global和Math根据定义，每个内置对象都是本地对象，所以它们也是本地对象。

如此就可以理解了，内置对象是本地对象的一种，而其包含的两种对象中，Math对象我们经常用到，可Global对象是什么呢？

Global对象是ECMAScript中最特别的对象，因为实际上它根本不存在，但大家要清楚，在ECMAScript中，不存在独立的函数，所有函数都必须是某个对象的方法。类似于isNaN()、parseInt()和parseFloat()方法等，看起来都是函数，而实际上，它们都是Global对象的方法。而且Global对象的方法还不止这些。

3. 数组对象

由ECMAScript实现的宿主环境提供的对象，可以理解为浏览器提供的对象。所有的BOM和DOM都是数组对象。

第270道：
解释一下JavaScript的同源策略。

解析：

同源策略限制了一个源（origin）中加载文本或脚本与来自其他源中资源的交互方式。

第271道：
给你一个100×100的照片，每单击一下照片绕中心点旋转30°。

解析：

（1）将所有图片放置在合成中心。

（2）用360除以图片数量，得到每个图片旋转的角度。比如你现在有12张图片，每一张图片旋转角度为30°（第一张不动，第二张旋转30°，第二张旋转60°，第三张旋转90°，以此类推）。

（3）旋转完了所有图片之后，选择所有图片层，按下A键调出定位点关键帧，拖动Y轴数值让所有的图片散开，形成一个环。

（4）通过定位点的调节得到你想要的大小之后，在合成中间添加一个空白对象层。

（5）选择所有的图片层，将父级下面的橡皮带全部扯到空白对象上面。

（6）单独选中空白对象层，R键打开旋转属性，旋转空白对象的同时所有的图片都跟着旋转了。

（7）把空白对象移动到你给的那张示例图的圆圈中心位置（图片会跟着走）。

（8）设置空白对象的旋转关键帧即可。

第272道：
你能解释一下JavaScript中的继承是如何工作的吗？

解析：

（1）在子构造函数中执行父构造函数，并用call/apply改变this。

（2）克隆父构造函数原型上的方法。

第273道：
简单阐述设计模式中工厂方法模式、单列模式和观察者模式。

解析：

1. 工厂方法模式

一个抽象产品类，可以派生出多个具体产品类。

一个抽象工厂类，可以派生出多个具体工厂类。

每个具体工厂类只能创建一个具体产品类的实例。

2. 单列模式保证类只有一个实例

3. 观察者模式

举例阐述：游戏情节，一个小男孩，丢到众多鬼子附近，爆炸啦，根据炸弹的威力计算爆炸后鬼子的血量，假定有些鬼子有防具，有些鬼子没有防具。

分析：这种情况，使用观察者模式是比较理想的，因为观察者模式就是处理对象间一对多的依赖关系的，当一个对象发生变化，其他依赖他的对象都要得到通知并更新。

定义：在观察者模式中，上述小男孩被称为主题，而小鬼子们就被称为观察者。

274道：
JavaScript实现数组升序排序。

解析：

var arr=[2,3,5,1,15,8,12,11,7];
function des(a,b){
return a-b;
}
console.log(arr.sort(des));

第275道：
常见的浏览器内核有哪些？

解析：

（1）IE浏览器的内核：Trident。

（2）Mozilla的Gecko。

（3）Chrome的Blink（WebKit的分支）。

（4）Opera的内核原为Presto，现为Blink。

第276道：
请简单说明JavaScript实现拖曳的原理。

解析：

（1）拖曳的基本原理：当mousedown时，记下鼠标单击位置离拖曳容器左边沿的距离和上边沿的距离，即tmpX/tmpY；当mousemove时，通过定位拖曳容器的style.left/style.top，使拖曳容器进行移动，定位到哪里则由刚刚的tmpX/tmpY和当前鼠标所在的位置计算得出；当mouseup时，结束移动。

（2）“var dragObj = this;”这句是为了在mousedown/mouseup/mousemove事件里对Drag对象的相关变量进行引用。因为在mousedown里的this是titleBar，而mouseup/mousemove里的this是document。

（3）当拖曳速度太快导致鼠标移出拖曳容器，而拖曳容器位置未变时，用document.mousemove代替titleBar.mousemove即可。

（4）设置拖曳容器可拖曳的范围，若未设置，则默认为当前窗口可视范围。Note：在设置范围时使用Math.max/min来处理，而不是用if语句判断，用后者的话会导致快速拖曳时未达到容许范围边沿即停止的状况。

（5）在拖曳过程中，可设置是否保留原来拖曳容器，当拖曳结束时，隐藏原来容器，默认不保留。

（6）当拖曳时，可设置拖曳的容器是否透明及透明度是多少，默认为不透明。但若拖曳过程中设置保留原来拖曳容器，即keepOrigin: true，则设置透明度为50%。

（7）单击鼠标右键、鼠标中键等不能拖动，仅单击鼠标左键可以拖动。Note：IE鼠标左键为event.Button=1；Firefox鼠标左键为event.Button=0。

（8）解决单击图片无法拖曳的问题：非常“杯具”的是IE通过ev.returnValue = false来防止图片的事件，注意是放在document.onmousemove中，而FireFox通过ev.preventDefault();ev.stopPropagation();来防止图片的事件，但是却放在titleBar的mousedown事件中。

（9）有一种情况，当浏览器窗口不是最大化时，你希望鼠标在浏览器外移动时浏览器里的拖曳容器仍然移动，这时就要使用鼠标事件捕获，IE中相应的是dragdiv.setCapture();与dragdiv.releaseCapture();而Firefor中相应的是window.captureEvents(Event.mousemove);与window.releaseEvents(dragdiv.mousemove)。

（10）确保当每次拖曳时，拖曳容器中的zindex都不会被其他块元素覆盖。

第2篇　驾骏马，拉长弓

——HTML5+CSS3我独行

HTML5+CSS3不仅是两项新的Web技术标准，而且代表了下一代HTML和CSS技术。各大主流浏览器厂家已经积极更新自己的产品，以便好地支持HTML5。HTML5与CSS3相辅相成，使互联网进入了一个崭新的时代。

第5章

博学多才，雄韬伟略［HTML5+CSS3初级面试题］

能文能武之人方为可怕之人，HTML5+CSS3将会祝你大展雄风。天下第一神器“Photoshop”刀光剑影，未闻其人先见其影；葵花点穴手（position）瞬间让你驻足而观。

5.1　做了这些，不再是菜鸟（关于HTML5）

第277道：
您有没有关注过HTML5和CSS3？如有请简单说一下您对它们的了解情况。

解析：

HTML5和CSS3不仅是两项新的Web技术标准，而且代表了下一代HTML和CSS技术。其未来的发展前景已经可以预见，那就是HTML5必将被越来越多的Web开发人员所使用。各大主流浏览器厂家已经积极更新自己的产品，以更好地支持HTML5。它的优势主要有以下几点：

（1）更多的描述性标签：HTML5引入非常多的描述性标签。

（2）良好的多媒体支持：对于先前以插件的方式播放音频、视频带来的麻烦，HTML5有了解决方案，audio标签和video标签能够方便地实现应变。

（3）更强大的Web应用：HTML5提供了令人称奇的功能，在某些情况下，你甚至可以完全放弃使用第三方技术。

（4）跨文档消息通信：Web浏览器会组织不同域间的脚本交互或影响，但是对于可信任的脚本或许就是麻烦。HTML5引入了一套安全且易于实现的应对方案。

（5）Web Sockets：HTML5提供了对Web Sockets的支持。

（6）客户端存储：HTML5的Web Storage和Web SQL Database API，可以在浏览器中构建Web应用的客户端持久化数据。

（7）更加精美的界面：HTML5+CSS3组合渲染出来的界面效果更加精美。

（8）更强大的表单：HTML5提供了功能更加强大的表单界面控件，使用非常方便。

（9）提升可访问性：内容更加清晰，使用户的操作更加简单方便，提升用户体验。

（10）先进的选择器：CSS3选择器可以方便地识别出表格的奇偶行、复选框等，代码标记更少。

（11）视觉效果：具有精美的界面，有阴影、渐变、圆角、旋转等视觉效果。

CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。作为一个模块，以前的规范太庞大，而且比较复杂，所以，把它分解为一些小的模块，使更多新的模块被加进来。这些模块包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。

第278道：
如果把HTML5看成一个开放平台，那它的构建模块有哪些？

解析：

如果把HTML5看成一个开放平台，它的构建模块至少应该包括以下几个：<nav>、<header>、<section>、<footer>。

<nav>标签用来将具有导航性质的链接划分在一起，使代码结构在语义化方面更加准确。

<header>标签用来定义文档的页眉（介绍信息）。

<section>标签用来描述文档的结构。

<footer>标签用来定义section或document的页脚。在典型情况下，该元素会包含创作者的姓名、文档的创作日期及联系信息。

5.2　真本事，更自信（HTML5语法）

第279道：
HTML标记<pre>…</pre>表示___________

解析：

<pre>是预格式化标记，被包围在pre元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

例如：

<html>
<head>
<title>pre</title>
</head>
<body>
<pre>
你好!
你好!
</pre>
</body>
</html>

显示的结果就是：

你好!
你好!

第280道：
HTML5不支持下面哪个元素（　）

A. <p>

B. <ins>

C. <menu>

D. <font>

答案：
D

解析：

<font>标签规定文本的字体外观、字体尺寸和字体颜色。在HTML5中不使用该元素而使用CSS向元素添加样式。

第281道：
HTML5不支持下面哪个元素（　）

A. <cite>

B. <acronym>

C. <abbr>

D. <hase>

答案：
B

解析：

<acronym>标签定义首字母缩写，比如“NASA”，通过对首字母缩写进行标记，您就能够为浏览器、拼写检查程序、翻译系统，以及搜索引擎分度器提供有用的信息。在HTML5中不支持<acronym>，而使用<abbr>代替。

第282道：
在HTML5中，哪个元素用于组合标题元素（　）

A. <group>

B. <header>

C. <headings>

D. <hgroup>

答案：
D

解析：

<hgroup>标签用于对网页或区段（section）的标题进行组合。<group>将一组元素声明归在一起，以便将它们作为一个组合并到复杂类型定义中。

第283道：
哪个HTML5元素用于显示已知范围内的标量测量（　）

A. <gauge>

B. <range>

C. <measure>

D. <meter>

答案：
D

解析：

<meter>标签定义度量衡。仅用于已知最大和最小值的度量。

第284道：
描述一下section、article、nav、footer这几个HTML5的标签定义。

解析：

<section>标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

<article>标签定义外部的内容。外部内容可以来自一个外部的新闻提供者的一篇新的文章，或者来自blog的文本，或者来自论坛的文本，抑或来自其他外部源内容。

<nav>标签定义导航链接的部分。

<footer>标签定义section或document的页脚。

5.3　这些题总能温暖你（HTML5+CSS3新增属性）

第285道：
CSS3有哪些新内容，请至少说出5个。

解析：

（1）CSS3圆角表格，对应属性：border-radius;。

（2）以往对网页上的文字加特效只能用filter属性，但是在CSS3中专门制订了一个加文字特效的属性，而且不止加阴影这种效果。对应属性：fonteffect;。

（3）丰富了对链接下画线的样式，以往的下画线都是直线，这次可不一样了，有波浪线、点线、虚线等，更可对下画线的颜色和位置进行任意改变（还有对应顶线和中横线的样式，效果与下画线类似）。对应属性：text-underline-style;text-underline-color;text-underline-mode;text-underline-position;。

（4）在文字下画几个点或打个圈以示重点，CSS3也开始加入了这项功能，这应该在某些特定网页上很有用。对应属性：font-emphasize-style; font-emphasize-position;。

（5）Font-face可以用来加载字体样式，而且它还能够加载服务器端的字体文件，显示客户端没有安装的字体。

第286道：
HTML5有哪些新内容，请至少写出5个。

解析：

HTML5增添了不少新标签和新属性，能使页面更优化，代码更简洁。例如：

（1）HTML5已经确定引入canvas标签，通过canvas，用户可以动态地生成各种图形图像、图表及动画。canvas标签还能够配合JavaScript利用键盘来控制图形图像。

（2）在HTML5中包含Web Forms 2.0，用来描绘如何进行页面表格操作。其中最大的特点就是“表格确认”。当前，开发者通常使用JavaScript（客户端）和PHP（服务端）代码来确认输入的内容。

（3）HTML5中为新元素和现有的元素提供更多的API，旨在改进页面程序开发和增加HTML4所缺乏的特性。比如，一个视频和音频方面的API将与<audio>和<video>元素一起使用，它将提供视频和音频回放功能，而无需依赖第三方程序，比如Flash。

（4）HTML5中的User Interaction用来描述页面内容交互工作的新方式。它的content editable属性可以让开发者决定，页面哪部分内容允许进行用户更改，这对于wiki类的网站更为有用。

（5）HTML的主要任务是描述页面的架构，例如在<p>…</p>元素之间的文本内容，HTML将告诉浏览器这些文本是一个段落。

第287道：
HTML5新增的语义化标签有哪些？

解析：

HTML5新增的语义化标签有很多，比如说：

- <article>标签定义外部的内容，可以是一篇新的文章。

- <aside>标签定义article以外的内容，aside的内容可用作文章的侧栏。

- <fig caption>标签定义figure元素的标题。

- <figure>标签用于对元素进行组合，使用fig caption元素为元素组添加标题。

- <footer>标签定义section或文档的页脚。

- <header>标签定义文档的页眉。

- <hgroup>标签用于对section或网页的标题进行组合，使用fig caption元素为元素组添加标题。

- <nav>标签定义导航链接的部分。

- <section>标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

<time>标签定义日期或时间。

第288道：
HTML5新增的属性有哪些？

解析：

HTML5新增的属性有auto complete、min、max、multiple、pattern和step。还有list属性与datalist元素配合使用；datalist元素与autocomplete属性配合使用。multiple属性允许一次上传多个文件；pattern属性用于验证输入字段的模式，其实就是正则表达式。step属性规定输入字段的合法数字间隔（假如step="3"，则合法数字应该是-3、0、3、6，以此类推），step属性可以与max及min属性配合使用，以创建合法值的范围。

为input、button元素增加formaction、formenctype、formmethod、formnovalidate和formtarget属性。用户重载form元素的action、enctype、method、novalidate和target属性。为fieldset元素增加disabled属性，可以把它的子元素设为disabled状态。

为input、button、form增加novalidate属性，可以取消提交时进行的有关检查，表单可以被无条件地提交。

5.4　最实用的题（HTML5与XML）

第289道：
在HTML5中如何使用XML？

解析：

HTML和XML有着显著的差别，尤其是在解析需求方面，并且无法使用针对一方设计的工具去处理另一方的问题。但是，由于HTML5是根据DOM定义的，所以在大多数情况下，可使用HTML或XHTML序列化来表示同一文档。

第290道：
HTML5的页面中可以使用XHTML的语法吗？

解析：

可以，HTML5向下兼容所有存在的HTML语法。

通过不同的头部声明DTD来设置怪异模式和标准模式。标准模式下，HTML4.0提供了三种DOCTYPE（DOCument TYPE，文档类型），XHTML1.0提供了三种类型，它们是transitional（过渡型）、strict（严格型）、frameset（框架型）。XHTML可以理解为HTML+XML，就是用XML的语法来规范HTML。其实，早期的HTML语言是比较散漫的，像<p>1234532是可以被浏览器正常解析的，后来引入的XHTML和相应的DTD，将HTML语言规范化，结构化。

第291道：
找几条XHTML规范的内容。

解析：

（1）所有的标记都必须要有一个相应的结束标记。

（2）所有标签的元素和属性的名字都必须使用小写。

（3）所有的XML标记都必须合理嵌套。

（4）所有的属性必须用引号""。

（5）所有的<和&特殊符号都要用编码表示。

5.5　KO这些题，前端岗位不是梦（HTML5结构）

第292道：
请用HTML5标签写一个符合语义化的页面，页面中有导航栏、页眉、页脚、文字内容以及图片内容。

解析：

<! DOCTYPE html>
<html>
<head>
<Title>Page title</title>
</head>
<body>
<header>
<h1>Page title</h1>
</header>
<nav>
<!--Navigation-->
</nav>
<section id="intro">
<!--Introduction-->
</section>
<section>
<!--Main content area-->
</section>
<aside>
<!--Sidebar-->
</aside>
<footer>
<!--Footer-->
</footer>
</body>
</html>

第293道：
在HTML5中不再支持<script>元素的哪个属性（　）

A. rel

B. href

C. type

D. src

答案：
C

解析：

HTML5新增属性async，之前被废弃的属性是language，并且type是用来替代它的。在HTML5中，type属性不再是必需的，默认值是“text/javascript”。

5.6　前端好考题（HTML5布局）

第294道：
实现布局，side左边宽度固定，main右边宽度自适应。

解析：

HTML代码：

<div class="main">
<div class="content">主栏1内容区内容区内容区内容区内容区内容区</div>
</div>
<div class="side">内容区内容区内容区内容区内容区内容区
</div>

CSS代码：

.main {float: right; width:100%;margin-left:-220px;}
.content {margin-left:220px;}
.side{float:left;width:200px;}

第295道：
实现布局，两列和左边宽度自适应，右边宽度固定为200px。

解析：

<div style="width:90%; margin:0 auto;">
<div style="width:200px; float:right;">这是右侧的内容</div>
<div style=" margin-right:210px;">这是左侧的内容，宽度自适应</div>
</div>

第296道：
分别使用2个、3个、5个div画出一个大的红十字。

解析：

用div创建一个矩形，然后复制一个，以中心点旋转90度，两个合并就可以了。

用div创建一个矩形，然后复制一个，以中心点旋转90度，两个合并，然后在外面包一个空的div盒子。

红十字标志由五个正方形组成，代表五大洲，画一个正方形，然后复制成五个，再将五个正方形摆放好位置，组成红十字形状，圈选五个正方形之后，选择焊接选项，再填充红色（C:0，M:100，Y:100，K:0），去除边框颜色即可。

5.7　这些题，让你赢在起跑线上（关于CSS3）

第297道：
谈一下你对CSS Reset的了解情况。

解析：

CSS Reset，我们可以把它叫作CSS重设，也有人叫作CSS复位、默认CSS、CSS重置等。CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同，导致设计师在没有定义某个CSS属性时，不同的浏览器会按照自己的默认值来为没有定义的样式赋值，所以我们要先定义好一些CSS样式，来让所有浏览器都按照同样的规则解释CSS，这样就能避免发生以下问题：

（1）标题部分采用的是line-height来实现标题中文字的间距，由于中英文有别，一般我们在实际项目中h2的大小设为14px，高度设为30px。而bootstrap或normalize.css面对的都是英文字体，所以它们默认设置的字体比中文的要大，且间距也比较大。

（2）根据我们常用的需求给ul添加两个class样式，一个为has-style，顾名思义就是拥有列表样式，因为我们在一开始重置了没有样式，但是偶尔我们又确实需要前面的那个小圆点，所以就用这个class来还原；另一个为inline-style，即li浮动，一般和clearfix结合使用以清除浮动。

（3）对于normalize.css不支持的IE6，我们添加了class用以支持。因为IE6不支持属性选择器，所以Form表单元素的一些重置，我们在normalize.css的基础上添加了class用以支持。

（4）可以根据自己的需要，把用不到的HTML5或CSS3标签的那部分直接删掉，以精简。

5.8　领先别人一步（CSS3选择器）

第298道：
请解释浏览器是如何根据CSS3选择器选择对应元素的？

解析：

IE-CSS3.JS下载页面的每一个样式文件并解析它的CSS3伪选择器。如果一个选择器被找到，它就会被替换为同名的CSS class。比如：div:nth-child(2)将会变成div._IEcss-nth-child-2。接着，Robert Nyman的DOMAssistant用于寻找匹配元素CSS3选择器的DOM节点，然后将相应的CSS类添加给它。最终，元素的样式表会被新的版本替代，实现用CSS3选择器对相应元素添加对应的样式。

5.9　从最陌生到最熟悉的题（切图）

第299道：
你排App时是怎么切图的？

解析：

排版时切图可使用的软件很多，以下说一款PS切图。

打开Photoshop，左边工具栏有个小刀形状的工具，叫“切片工具”，用小刀按照想要的样子在图片上切割，做好之后，点“文件→存储为Web所用格式”，选择路径后单击“确定”按钮，之后在所选的路径下有一个新的文件夹和一个HTML文件，文件夹里是切好的图片。

5.10　做好当下（定位相关）

第300道：
关于元素的定位有哪些？其中对z-index样式的理解及z-index对不同浏览器默认的样式是什么？

解析：

position属性规定元素的定位类型，position属性的几个取值定义有：static、relative、absolute。

static：默认值。如果没有指定position属性，支持position属性的HTML对象都默认为static，可以这么理解，把HTML页面看作一个文档流，源代码中各个标签的先后位置就是它们所对应的对象的呈现次序，所有取值为static的对象都按照所编写的HTML标签的顺序依次呈现。

relative：相对定位。这个属性值保持对象所在文档流中的位置，也就是说，它具有和static相同的呈现方式，它同样占有在文档流中的固定位置，后面的对象不会侵占或覆盖；与static属性值不同的是，它设置了relative的对象，可以通过top、left、right、bottom属性设定新的显示位置，这4个属性的取值是相对于文档流的前一个对象的，你可以自由设置这4个属性，偏移到新的位置而不对文档流中的其他对象产生任何影响，原来的页面呈现仍然会我行我素。

absolute：绝对定位。和relative不同的是，这个属性值会将当前对象拖出文档流，后面的对象会占有原来的位置，也就是说，当前对象的呈现是独立显示的，但是它的位置在指定top、left、right、bottom任一属性之前仍是有继承性的，这时的4个属性的取值是相对于浏览器的，和文档流无关。属性值为absolute对象的z-index属性可以设置层叠显示的次序，它是直接有效的；而属性值为relative对象的z-index属性在设置时要小心，把当前对象的z-index设置为-1是不行的，在Firefox中它无法显示（注意，不是说浏览器有误，而是指如果父对象是根元素body，那么z-index是无效的，任何z-index设置都不会显示在根元素之后，除了IE的解析bug），必须设置为0以上，如果我们想让别的对象挡住它，只有将其他对象也设置position为relative，并将z-index属性取一个比它大的值即可。

z-index属性的默认值是0。

元素可拥有负的z-index属性值，如z-index:-1。

z-index属性无继承性。

z-index属性在JavaScript中使用语法：object.style.zIndex="1"。

几乎所有的主流浏览器都支持z-index属性。

z-index在IE和Firefox下的默认值不同，在IE下z-index默认值为0；在Firefox下其默认值为auto。

第6章

不鸣则已，一鸣惊人［HTML5+CSS3中级面试题］

音频视频独揽群雄，盒布局助你收缩有度，代码纠错、优化让你游刃有余。

PHP文件上传助你穿越时空，多列布局排列有序，稍有不慎，就会误入陷阱，切记！谨慎布局。

6.1　没有你们，我会不安（HTML5音频与视频）

第301道：
请用代码写出<video>标签的使用方法。

解析：

HTML5的video标签是HTML5的一大特色，它有以下几种方法。

方法一：<video src="test.mp4">您的浏览器不支持video标签</video>

方法二：<video><source src="test.3gp">您的浏览器不支持video标签</video>

因为现阶段不同的浏览器支持的视频格式是不同的，当我们有多种格式的视频样式时，我们会用第二种写法来做兼容调试。

第302道：
用于播放HTML5视频文件的正确HTML5元素是（　）

A. <movie>

B. <medio>

C. <video>

答案：
C

解析：

在HTML5中，“视频”标签<video>用于定义视频，比如电影片段或其他视频流。

第303道：
请简单结合HTML5，说说常用的流媒体视频格式有哪几种？

解析：

HTML5常用的流媒体视频格式主要有6种：

（1）RealVideo的.rm视频影像格式和.ra的音频格式，主要用来在低速率的网络上实时传输活动视频影像，可以根据网络数据传输速率的不同而采用不同的压缩比率，在数据传输过程中边下载边播放视频影像，从而实现影像数据的实时传送和播放。

（2）Microsoft Media Technology的.asf格式，其播放器Microsoft Media Player已经与Windows捆绑在一起，不仅用于Web方式播放，还可以用于在浏览器以外来播放影音文件。

（3）QuickTime的.qt、.mov格式，用于保存音频和视频信息，具有先进的音频和视频功能，支持包括Apple Mac OS、Microsoft Windows95/98/NT在内的所有主流计算机操作系统。QuickTime文件格式支持25位彩色，支持RLC、JPEG等领先的集成压缩技术，提供150多种视频效果。

（4）Flash的.swf格式，具有体积小、功能强、交互能力好、支持多个层和时间线层等特点，故越来越多地应用到网络动画中。

（5）MetaStream的.mts格式，它是一种新兴的网上3D开放文件标准（基于Intel构架），主要用于创建、发布及浏览可以防缩的3D图形和开发电脑游戏。

（6）Authorware的.aam多媒体教学课件格式，这类课件利用Shockwave技术和Web Package软件，可以把Authorware生成的文件压缩为.aam和.aas流式文件格式播放；也可以用Director生成后，利用Shockwave技术改造为网上传输的流式多媒体课件。

6.2　终是拨开云雾见月明（弹性盒布局）

第304道：
说说弹性盒布局。

解析：

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常工作。在该布局模型中，容器会根据布局的需要，调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。当容器的尺寸由于屏幕大小或窗口尺寸发生变化时，其中包含的条目也会被动态地调整。比如，当容器尺寸变大时，其中包含的条目会拉伸以占满多余的空白空间；当容器尺寸变小时，条目会缩小以防止超出容器的范围。弹性盒布局是与方向无关的。在传统的布局方式中，block布局是把块在垂直方向从上到下依次排列的；而inline布局则是在水平方向来排列的。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。

第305道：
了解弹性盒模型属性（Flexible Box）。

解析：

- box-orient：设置或检索弹性盒模型对象的子元素的排列方式。

- box-pack：设置或检索弹性盒模型对象的子元素的左右对齐方式。

- box-align：设置或检索弹性盒模型对象的子元素的上下对齐方式。

- box-flex：设置或检索弹性盒模型对象的子元素如何分配其剩余元素。

- box-flex-group：设置或检索弹性盒模型对象的子元素的所属组。

- box-ordinal-group：设置或检索弹性盒模型对象的子元素的显示顺序。

- box-direction：设置或检索弹性盒模型对象的子元素的排列顺序是否反转。

- box-lines：设置或检索弹性盒模型对象的子元素是否可以显示换行。

6.3　心在天上，题在手上（HTML5常见问题）

第306道：
给如下HTML5代码片段

<input type="button" id="but1" value="but1" onclick=""?>
<input type="button" id="but2" value="but2"/>

中的but1添加适当的事件，使单击but1时，交换两个按钮。

解析：

<input type="button" id="but1" value="but1" onclick="this.parentNode.insertBefore(document.getElementById('but2'), this)"/>
<input type="button" id="but2" value="but2"/>

第307道：
如何在HTML5页面中嵌入音频？

解析：

HTML5包含嵌入音频文件的标准方式，支持的格式包括mp3、wav和ogg。

<audio controls>
<source src="1.mp3" type="audio/mpeg"/>
Your browser doesn't support audio embedding feature.
</audio>

第308道：
HTML5有哪些不同类型的存储？

解析：

HTML5支持本地存储，速度快而且安全，在之前版本中是通过Cookie实现的。

有两种不同的对象可用来存储数据。

- 第一种：localStorage，适用于长期存储数据，浏览器关闭后数据不丢失；

- 第二种：sessionStorage，存储的数据在浏览器关闭之后自动删除。

6.4　多几分钟的准备，少几小时的麻烦（HTML元素）

第309道：
写出Web 1.0和Web 2.0常用的HTML标签。

解析：

Web 1.0常用的HTML标签：<u>、<b>、<i>、<table>、<p>、</br>、<nobr>、<hr>。

Web 2.0常用的HTML标签：<article>、<header>、<nav>、<section>、<meter>、<progress>、<datalist>

第310道：
HTML元素的分类及其特点。

解析：

1. HTML元素分为块级元素和行内元素

块级元素：dl、div、from、h1-h6、p、ul等。

行内元素：a、br、input、span、select等。

2. 块级元素和行内元素的特点

（1）块级元素的特点：

- 总是在新行上开始；

- 高度、行高及外边距和内边距可以控制；

- 宽度默认是它的容器的100%；

- 可以容纳内联元素和其他块元素。

（2）行内元素特点：

- 和其他元素都在一行上；

- 高和外边距不可改变；

- 宽度就是它的文字和图片的宽度，不可改变；

- 内联元素只能容纳文本或者其他内联元素。

6.5　经久不衰的考题（代码纠错）

第311道：
<p>&nbsp;&nbsp;哥写的不是HTML，是寂寞.<br><br> &nbsp; &nbsp;我说：</p>

以上这段HTML5代码有什么问题？

解析：

<br>标签是空标签，意味着它没有结束标签，因此<br></br>是错误的。在XHTML中，应把结束标签放在开始标签中，也就是<br />。

正确写法：<p>&nbsp;&nbsp;哥写的不是HTML，是寂寞.<br /> <br/> &nbsp; &nbsp;我说：</p>

第312道：
请描述一下cookie、sessionStorage和localStorage的区别？

解析：

sessionStorage用于在本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

Web Storage和cookie的区别：

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。cookie的大小是受限的，并且每次请求一个新的页面的时候cookie都会被发送过去，这样无形中浪费了带宽。另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem、getItem、removeItem、clear等方法，不像cookie需要前端开发者自己封装setCookie、getCookie。但是cookie也是不可以或缺的：cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生的。

6.6　比上不足，比下有余（代码优化）

第313道：
请简化这段CSS代码。

abc{
padding-left:50px;
padding-top:10px;
padding-bottom:5px;
padding-right:15px;
}

解析：

padding属性的书写格式总共有以下几种。

（1）padding:10px的意思是上下左右值全是10px。

（2）padding:5px 10px的意思是上下为5px，左右为10px。

（3）padding:1px 2px 3px 4px的意思是：上为1px，右为2px，下为3px，左为4px。

（4）padding:5px 10px 7px的意思是：上为5px，左右为10px，下为7px。

padding后面4个值定义的顺序分别为：上、右、下、左，而padding-top或者padding-bottom这种写法，只是单方面的定义了一个方向的值，这样写会增加CSS代码的长度，增加CSS样式的代码量，拖慢页面的加载速度。

第314道：
请列出CSS代码的7个优化准则。

解析：

（1）使用简写。

（2）避免使用hack。

（3）使用留白。

（4）移除多余的结构（frameworks）和重设（resets）。

（5）让CSS保证日后的维护。

（6）记录工作（标记向导和样式表向导）。

（7）压缩使用。

6.7　非常可乐，非常选择（上传）

第315道：
请写出可以实现上传且只能上传图片的标签。

解析：

HTML自带一个上传文件控件：

<input type="file" name="uploadFile" />

再给input标签添加一个accept="image/*"的属性就只能上传图片了。

第316道：
请写一段JavaScript代码，实现input type="file"文件上传实例的代码。

解析：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
._box
{
position: relative;
width: 119px;
height: 37px;
background-color: #53AD3F;
background-image: url(images/bg.png);
background-repeat: no-repeat;
background-position: 0 0;
background-attachment: scroll;
line-height: 37px;
text-align: center;
color: white;
cursor: pointer;
overflow: hidden;
z-index: 1;
}
._box input
{
position: absolute;
width: 119px;
height: 40px;
line-height: 40px;
font-size: 23px;
opacity: 0;
filter: "alpha(opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
left: -5px;
top: -2px;
cursor: pointer;
z-index: 2;
}
</style>
<title>js 实现 input file 文件上传 /></title>
</head>
<body>
<form id="form1" runat="server" method="post"
enctype= "multipart/form-data">
<div>
<div class="_box">
<input type="file" name="_f" id="_f" />
选择图片
</div>
</div>
</form>
</body>

</html>用一个不透明度为0的<input type="file"/>盖在要让用户可见的标签（或图片）上，让用户单击。

【总结】

用width height line-height font-size来控制<input type="file"/>右侧浏览器按钮的大小。用left top(right、bottom)来控制<input type="file"/>右侧浏览器按钮的位置，可以设置为负值。用-index来设置它们的层覆盖关系。From必须有enctype="multipart/from-data"标记才能上传文件。

6.8　爱上面试的感觉（文本）

第317道：
写出中英文强制换行的代码，以及文字超长显示的代码。

解析：

（1）word-break:break-all;只对英文起作用，以字母作为换行依据。

（2）word-wrap:break-word;只对英文起作用，以单词作为换行依据。

（3）white-space:pre-wrap;只对中文起作用，强制换行。

（4）white-space:nowrap;强制不换行，都起作用。

（5）white-space:nowrap;overflow:hidden;text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现。

第318道：
在不指定特殊属性的情况下，哪几种HTML标签可以手动输入文本？（　）（多选）

A. <textarea> </ textarea >

B. <input type ="text">

C. <input type ="hidden">

D. <div> </div>

答案：
AB

解析：

<textarea>可以输入复数行的文本输入框。写在<textarea>～</textarea>之间的文本会成为此文本输入框中内容的初始值。

<input type="text">的默认值最基本的就是用value设置，例如<input type="text" value="默认值">。

<input type="hidden" name="参数名" value="这里填你的参数值">。其实hidden只是将输入框隐藏了，里面可以默认赋值或通过JavaScript赋值，提交Form时跟其他的都是一样的。

<div></div>标签只可以赋给定的值，不可以手动输入值。

第319道：
如这段HTML代码：<div>这是div中的内容</div>
，如何得到div元素中文本的内容？如何清空div元素中的文本？

解析：

$("div").text();获取中间的文本，不包括HTML标签。

$("div").html();获取中间的所有内容。

$("div").empty();清空div元素中的文本。

第320道：
font-size:62.5%，解释一下如此设计字体大小的原因。

解析：

在网页设计中我们经常看见body{font-size: 62.5%;}这样的设置，这主要是为了方便em与px相互转换，em的初始值为1em=16px，显然这样的话，1.2em=19.2px，可是我们在设置时很少看见19.2px这样表示的大小，也就是在用px表示大小时数值是不带小数位的。当设置了body{font-size: 62.5%;}时，则1em =16px*62.5%=10px，1.2em=12px，这样会使页面更精确。

第321道：
<div id="mydiv"><h2>通过Ajax改变文本</h2></div>

<button id="b01" type="button">改变文本</button>

（1）使用$(selector).load(url)把HTML文本内容改为XX.txt内容。

（2）使用$.Ajax(option)把HTML文本内容改为XX.txt内容。

解析：

1.

$(document).ready(function(){
$("#b01").click(function(){
$("#mydiv").load("/jQuery/xx.txt");
});

2.

$.Ajax({
type: "POST"，
url: "xx.txt"，
success: function(msg){
$('#id').txt(msg);
}
});

6.9　你想摆谱，先干掉我（字体）

第322道：
请指出以下结构中A标签内的字体颜色值。

<style>
A{color:#ccc;}
#contact a{color:#336699;}
.safelink a{color:#eee;}
H1 a{color:#eee;}
</style>

<div id="contact">
<h1 class="safelink"><a
href="http://www.qdjhu.com">前端江湖</a></h1>
</div>

解析：

A标签内的字体颜色是#eee;因为指定的优先级最高，越具体越强大。

第323道：
请写出如下代码片段在不同浏览器IE、Firefox、Chrome、Opera中的字体颜色，并给出理由。

<style>
#tip{
color:blue;
color:red\9;
*color:black;
_color:orange;
}
</style>

解析：

#tip {
color: blue;/*所有现代浏览器*/
color: red\9;/*所有IE浏览器*/
*color: black;/*IE6、IE7浏览器*/
_color: orange;/*IE6浏览器*/
}

IE6：orange；IE6以上：red\9；Firefox：blue；Chrome：blue；opera：blue；

第324道：

<style type="text/css">
#text{color:red;}
P#text{color:brown;}
P.text{color:green;}
P{color:white;}
</style>
<p id="text" class="text">请说出我的颜色</p>

请问p标签的文本颜色是什么？

解析：

p标签的文本颜色是brown，因为在选择器中，id的优先级最高。

6.10　前端深处考题（边框背景）

第325道：
CSS3如何实现圆角、阴影效果？

解析：

（1）CSS3实现圆角有两种方法：

第一种方法是添加背景图像，传统的CSS每个元素只能有一个背景图像，但是CSS3可以允许一个元素有多个背景图像。这样给一个元素添加4个1/4圆的背景图像，分别位于4个角上就可以实现圆角效果了。

.box {
/* 首先，定义要使用的4幅图像为背景图 */
background-image: url(/img/top-left.gif)，
url(/img/top-right.gif)，
url(/img/bottom-left.gif)，
url(/img/bottom-right.gif);
/* 然后，定义不重复显示 */
background-repeat: no-repeat，
no-repeat，
no-repeat，
no-repeat;
/* 最后，定义4幅图分别显示在4个角上 */
background-position: top left，
top right，
bottom left，
bottom right;
}

第二种方法就简洁了，直接用CSS实现，不需要用图片。

.box {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}

（2）CSS3的box-shadow属性可以直接实现阴影效果。

img {
-webkit-box-shadow: 3px 3px 6px #666;
-moz-box-shadow: 3px 3px 6px #666;
box-shadow: 3px 3px 6px #666;
}

这个属性的4个参数是：垂直偏移、水平偏移、投影的宽度（模糊程度）、颜色。

第326道：
box-sizing属性有哪些，各代表什么含义？

解析：

box-sizing属性允许以特定的方式定义匹配某个区域的特定元素。

content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width、border、padding以及margin之和，即（Element width = width + border + padding+margin），此属性表现为标准模式下的盒模型。

border-box：padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即(Element width = width)，此属性表现为怪异模式下的盒模型。

6.11　有这些，更自信（多列布局）

第327道：
宽度自适应三栏的布局方式有哪些？

解析：

宽度自适应三栏的布局方式，在这里我们介绍两种：

1. 绝对定位法

左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离，于是实现了三栏自适应布局。

2. 自身浮动法

此方法代码最简单，应用了标签浮动跟随的特性。左栏左浮动，右栏右浮动，主体直接放后面，就实现了自适应。

第328道：
说说CSS3的多列布局。

解析：

CSS3中新出现的多列布局（multi-column）是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让Web开发人员轻松地让文本呈现多列显示。我们知道，当一行文字太长时，读者读起来比较费劲，有可能读错行或读串行。人们的视点从文本的一端移到另一端，然后换到下一行的行首，如果眼球移动浮动过大，注意力就会减退，容易读不下去。所以，为了最大效率地使用大屏幕显示器，页面设计中需要限制文本的宽度，让文本按多列呈现，就像报纸上的新闻排版一样。

6.12　总有些考题念念不忘（多列显示样式）

第329道：
写出三列布局的CSS，其中HTML为：<div id="A"></div><div id= " B"></div><div id="C"></div>，要求不改变HTML结构，用CSS分别实现，按照ABC排列、按照BAC排列、按照CBA排列。其中AB为定宽，尽量让B为自适应宽度，不能使用CSS hack。

解析：

CSS三列布局走出HTML布局阴影，两端固定宽度，中间自适应结构，以下代码仅供参考。

HTML代码：

<div class="wrap">
<div class="main">
<div id="A"></div>
</div>
<div id="B"></div>
<div id="C"></div>
</div>

CSS代码：

.wrap{width: 500px;border: 1px solid;overflow: hidden;}
.main{float: left;width: 100%;}
#A{height: 50px;margin: 0 150px;background-color: #f60;}
#B{float:left;width:150px;height:50px;margin-left:-100%;background-color: #6f0;}
#C{float:left;width:150px;height:50px;margin-left:-150px;background-color: #06f;}

6.13　深入每道题的世界（盒布局）

第330道：
画出CSS的盒模型。

解析：

盒模型是CSS中的重要概念之一，它是所有布局控制的基础，在CSS标准中，一个盒模型包括4个区，分别是内框、内边距、边框和外边距。在指定一个元素的大小时，就是根据盒模型中各个部分的大小来决定的。CSS的盒模型如下图所示。

CSS的盒模型

第7章

运筹帷幄，决胜千里［HTML5+CSS3高级面试题］

永不过期的模式相关，闯全关的媒体查询，适应于任何恶劣的战斗环境，让你更强大的媒体调用标签，Canvas统筹布局，变化多端，有七十八般武艺让你眼花缭乱。

7.1　就这些，永不过期（模式）

第331道：
什么是DOCTYPE？如何触发严格模式与混杂模式，这两种模式，它们有何区别？

解析：

DOCTYPE（是DOCument TYPE的简写，即文档类型）是一组机器可读的规则，它们指示(X)HTML文档中允许有什么，不允许有什么。DOCTYPE正是用来告诉浏览器使用哪种DTD，一般放在(X)HTML文档开头表示声明，用以告诉其他人这个文档的类型风格。

触发：根据不同的DTD触发，如果没有声明，那么默认为混杂模式。

区别：严格模式是浏览器根据Web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法，如<br/>，混杂模式则是一种向后兼容的解析方法。

第332道：
Strict与Transitional这两种模式有何意义？如何声明HTML5？

解析：

Strict是需求最苛刻的XHTML规范，但是它提供了最干净的结构化标记。Strict编码独立于任何定义外观的标记语言。它使用层叠样式表（CSS）来控制表示外观。这种与表示相独立的结构模式，使得XHTML Strict能够相当灵活地在不同的设备上显示。而其控制和表示对CSS的依赖，对于程序员来说又比较麻烦，因为如果想要在那些不能识别样式表的设备或浏览器中显示Web内容，它并不是一个好的选择。

Transitional是更加宽容的规范。Strict完全将结构与表示分离，而Transitional允许使用标签来控制外观。它的目的是要在允许用标记来控制表示的HTML页面和二者完全分离的XHTML Strict之间架起桥梁。它最大的好处是克服了Strict对CSS的依赖。Transitional页面对于使用旧式浏览器或不能识别样式表的用户来说也是可以访问的。

HTML5的声明：<!DOCTYPE html>

7.2　这些题，让你前端技艺更高一筹（HTML5页面）

第333道：
如何触发页面reflow，repaint？

解析：

除了页面在首次加载时必然要经历该过程之外，还有以下行为会触发这个行为：

（1）DOM元素的添加、修改（内容）、删除（reflow+ repaint）；

（2）仅修改DOM元素的字体颜色（只有repaint，因为不需要调整布局）；

（3）应用新的样式或者修改任何影响元素外观的属性；

（4）resize浏览器窗口、滚动页面；

（5）读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/HeightclIEntTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))。

第334道：
如何将一个表单中的值同时提交到两个页面？写出代码。

解析：

<script>
function send_2page_f(formname,page1,target1,page2,target2)
{
with(eval("document."+formname))
{
action=page1
target=target1
submit()
action=page2
target=target2
submit()
} }
</script>
<form name="form">
<input type="button"
onclick='send_2page_f("form","01.
asp","01","02.asp","02")' value="提交">
</form>

7.3　考题中的钉子户（Canvas的使用）

第335道：
哪个HTML5内建对象用于在画布上绘制？（　）

A. getContent

B. getContext

C. getGraphics

D. getCanvas

答案：
B

解析：

getContext()方法返回一个用于在画布上绘图的环境。

Graphics是Java绘图的核心类，它可以支持两种绘图方式：一种是基本的绘图，如画线、矩形、圆等；另一种是画图像，主要用于动画制作。

第336道：
HTML5中的<canvas>元素用于（　）

A. 显示数据库记录

B. 操作MySQL中的数据

C. 绘制图形

D. 创建可拖动的元素

答案：
C

解析：

Canvas API（画布）用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。

Canvas对象表示一个HTML画布元素<canvas>。它没有自己的行为，但是定义了一个API支持脚本化客户端绘图操作。

你可以直接在该对象上指定宽度和高度，但是，其大多数功能都可以通过CanvasRenderingContext2D对象获得。这是通过Canvas对象的getContext()方法并且把直接量字符串“2d”作为唯一的参数传递给它而获得的。

<canvas>标记在Safari 1.3中引入，在制作此参考页时，它在Firefox 1.5和Opera 9中也得到了支持。在IE中，<canvas>标记及其API可以使用位于excanvas.sourceforge.net的ExplorerCanvas开源项目来模拟。

第337道：
写出在Canvas中画圆的代码，直径为150px，边框宽度为5px。

解析：

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="200"style="border:2px solid blue;">
您的浏览器不支持。
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(100, 100, 75, 0, Math.PI*2, true);
cxt.closePath();
cxt.fill();
</script>
</body>
</html>

7.4　点面试，闯全关（媒体查询）

第338道：
<meta name="viewport" content="width=device-width，minimum-scale=1.0，maximum-scale=1.0"/>

解释这个标签行的作用。

解析：

网页手机Wap2.0网页的head里加入这条元标签，在iPhone的浏览器中，页面将以原始大小显示，并不允许缩放。

width —— viewport的宽度；

height —— viewport的高度；

initial-scale ——初始的缩放比例；

minimum-scale ——允许用户缩放到的最小比例；

maximum-scale ——允许用户缩放到的最大比例；

user-scalable ——用户是否可以手动缩放。

第339道：
写出media type的几种使用方法。

解析：

方法一：<link href= "style.css" media= "screen print"...

方法二：< ?Xml-stylesheet media= "screen " href= "style.css"...

方法三：@import url( "style.css" ) screen;

方法四：<style media= "screen" >

@import url( "style.css")

</style>

方法五：media screen{

Selector {rules}

}

7.5　面试一大坎儿（浏览器缓存与本地储存）

第340道：
HTML5的存储类型有哪些？

解析：

HTML5支持本地存储，在之前版本中是通过Cookie实现的。HTML5本地存储速度快而且安全。

HTML5有两种不同的对象可用来存储数据。

localStorage：适用于长期存储数据，浏览器关闭后数据不丢失；

sessionStorage：存储的数据在浏览器关闭后自动删除。

第341道：
HTML5应用程序缓存为应用带来什么优势？

解析：

应用程序缓存为应用带来三个优势。

- 离线浏览——用户可在应用离线时使用它们；

- 速度——已缓存资源加载得更快；

- 减少服务器负载——浏览器将只从服务器下载更新过或更改过的资源

7.6　这些让你更强大（媒体调用标签）

第342道：
请写出可以调用手机照相机的标签。

解析：

<input type="file" accept"audio/*;capture=microphone"/>

第343道：
标签代码调用大全。

解析：

关键描述调用标签：<meta name="keywords" content="{dede:field name= 'keywords'/}">

<meta name="description" content="{dede:field name='description' function='html2text(@me)'/}">

模板路径调用标签：{dede:field name='templeturl'/}

网站标题调用标签：{dede:global name='cfg_webname'/}

栏目导航调用标签：<a href="/">首页</a></li>

{dede:channel type='top' row='8' currentstyle="<li class='thisclass'><a href='~typelink~'>~typename~</a> </li>"}

<li><a href='[field:typelink/]' target="_blank">[field:typename/]</a> </li>

{/dede:channel}

指定栏目调用标签：{dede:onetype typeid='ID'}[field:typename /]{/dede:onetype}

频道栏目调用标签：{dede:channel type='self'}<li><a href='[field:typelink/]'>[field:typename/]</a></li>{/dede:channel}

友情链接调用标签：{dede:flink row='24' linktype=2/}

网站版权调用标签：{dede:global name='cfg_powerby'/}

网站备案调用标签：{dede:global name='cfg_beian'/}

当前栏目名称调用标签：{dede:field name='typename'/}

当前位置调用标签：{dede:field name='position'/}

列表文章调用标签：{dede:list pagesize='8'}{/dede:list}

栏目链接调用标签：[field:typelink function='str_replace("a ","a class=ulink ",@me)'/]

作者链接调用标签：[field:writer /]

列表单击调用标签：[field:click/]

列表评论调用标签：[field:postnum/]

查阅全文调用标签：<a href="[field:arcurl/]">查阅全文...</a>

7.7　脑若一动，题就千行（HTML、CSS综合）

第344道：
简述一下什么是内容与表现分离？CSS都有哪些调用方式？

解析：

页面显示的是内容和相应的表单，而CSS可以很好地将这些内容进行分块组装后，再按照整体的布局进行调整，可以在后期的改版等方面能够不动前面的内容，只是更改布局及背景、图片、表现形式等，这样更便于优化，所以才进行了分离。其实不分离的话，就是说每个页面你都需要在里面嵌入CSS内部样式，如果你想每个页面的样式都一样，那么每个页面的样式都要重新COPY一遍，对于后面的修改来说更改量太大了，而用CSS和页面分离的方式可以只修改一个CSS文件来使整个网站的样式进行优化，便于修改，因为HTML代码当中已经不包含样式代码了，样式文件被单独放到了一块，可以单独调用，也可以包含在<style type="text/css"></style>标记里。总之，和HTML代码不在交叉了。

CSS有四种调用方式：内行样式、内嵌样式、链接样式、导入样式。

第345道：
HTML和CSS的关系。

解析：

学习Web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的。

（1）HTML是网页内容的载体。内容就是网页制作者放在页面上想要用户浏览的信息，可以包含文字、图片、视频等。

（2）CSS样式是表现，就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等，所有这些用来改变内容外观的东西称之为表现。

（3）JavaScript是用来实现网页上的特效效果。如：鼠标滑过表格时背景颜色改变，还有焦点新闻（新闻图片）的轮换等。可以理解，有动画的、有交互的一般都是用JavaScript来实现的。

7.8　有了我就知足吧（兼容问题）

第346道：
Box{float: left;margin: 10px;}前面的样式有何兼容性问题？如何解决？

解析：

在IE6下会出现双倍间距问题，这是一个IE6都存在的Bug。

解决办法是在Box中加display: inline。

第347道：
如何解决IE6下div错位的问题，以及IE7、IE8样式不兼容问题？

解析：

1. IE6下div错位的问题

在IE7、IE8下采用“FLOAT：LEFT”的div都没问题，但是在IE6下却会向下移动，出现空白，这是因为IE6采用的内核默认把div之间的距离增加了3~5个px，所以，可在下移的div的style里增加"margin-left:-5px;"或者更小。

2. 解决IE7、IE8样式不兼容问题

在页面中加入HTTP meta-tag:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

只要IE8读到这个标签，它就会自动启动IE7兼容模式，保证页面完整展示。

7.9　一直在寻找，直到遇见你（响应式布局）

第348道：
谈谈你对响应式布局的看法？

解析：

响应式布局有缺点，也有优点。

优点：面对不同分辨率设备，灵活性强，能够快捷地解决多设备显示适应问题。

缺点：兼容各种设备时所需工作量大、效率低下、代码累赘，会隐藏无用的元素，加载时间延长，其实这是一种折衷性质的设计解决方案，由于多方面因素影响而达不到最佳效果，在一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。

第349道：
你知道哪几个响应式框架？

解析：

响应式Web设计的运用越来越广泛。因此，作为一名Web开发人员和前端设计师，我们有必要了解更多的有关响应式设计的工具和资源，使其更容易为我们创建响应式的Web站点。希望以下这些工具能帮你更快速地创建一个响应式Web站点。

（1）Titan Framework。

（2）Responsive Grid System。

（3）Ingrid。

（4）Gumby。

（5）Susy：Responsive grids for Compass。

（6）Responsive Grid System。

（7）Foundation 3。

（8）Less + Framework。

7.10　一直在寻觅的考题（关于浏览器）

第350道：
如何触发浏览器的Quirks Mode？在该模式下的盒子模型会有什么表现？

解析：

（1）没写DOCTYPE，触发浏览器的Quirks Mode。

（2）加XML声明，在IE6下触发：

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE ...>

（3）在XML声明和XHTML的DOCTYPE之间加入HTML注释，可在IE7下触发<?xml version="1.0" encoding="utf-8"?>

<!-- keep IE7 in Quirks Mode -->

<!DOCTYPE ...>

（4）<!--->放在<!DOCTYPE的前面。

（5）写了DOCTYPE，但不在文档的第一行。实验证明，在DOCTYPE之前有任何非空字符都会触发IE6的怪异模式，在IE7下，DOCTYPE之前有XML的文档声明并不触发，但是在DOCTYPE和XML文档声明之间有任何非空字符仍然会触发。

Quirks Mode就是浏览器为了兼容很早之前针对旧版本浏览器而设计的，并未严格遵循W3C标准的网页而产生的一种页面渲染模式。

在Quirks Mode中：width则是元素的实际宽度，内容宽度= width-(margin-left+margin-right+padding-left+padding-right+border-left-width+border-right-width)。

table的CSS属性font-size是不会继承父级元素的，需要专门设置一下。也就是说，table中的字体大小不会继承父级元素字体的大小。

7.11　无法轻描淡写的考题（PC、移动）

第351道：
PC端和移动端哪个做得多，PC端和移动端有什么区别？你觉得PC端和移动端哪个比较好一些？

解析：

本题从以下4个方面来分析。

（1）操作尺度。PC上鼠标的操作尺度比较小，单击是一件准确的事情，而移动端触屏的操作尺度就比较大，单击误差大，所以元素必须做大一些，也不支持hover事件。这一点，淘宝网页的PC版和手机版是个非常好的例子。在PC版的淘宝页面中，有些小按钮能放下的功能，移动版就必须另弹界面让用户详细输入。

（2）界面布局。移动端屏幕相对窄小，一般是单列，最多也只能是双列+响应式。PC端屏幕宽大，布局可以灵活一些。

（3）与Native App互动。Web App与移动App间的互动，大多数PC网站没有，因为大多数PC网站没有对应的专门程序（不过也有淘宝或QQ等例外）。例如，淘宝手机版调用淘宝手机客户端，PC版淘宝调用阿里旺旺聊天工具。

（4）开发工具。移动端开发有一些jQuery for mobile一类的库是专用的，不用于PC端。反过来也一样，有些PC端的工具在移动端不好用。PC应用开发更关注的是后台、大数据、算法类的，移动开发更关注的是如何更好地交互、体验。

泛泛而论，感觉还是移动开发更好，因为和用户有更直接的接触，而且以后应用会更广泛，移动设备还会延展人的感觉、触觉等，如网上买衣服，可以通过移动终端感受布料。移动毕竟是大势所趋，以后会越来越多。

第352道：
你排PC端页面的时候兼容哪些浏览器？

解析：

浏览器不断更新，人们所熟知、使用的浏览器早已不只有电脑自带的浏览器了，所以我们排PC端的页面，要尽可能多的兼容更多浏览器。浏览器大体分为两种，IE内核浏览器和非IE内核浏览器。

IE内核浏览器有：360、傲游、搜狗、世界之窗、腾讯TT；非IE内核浏览器有：Firefox、Opera、Safari、Chrome。一般排PC主要兼容IE6、IE7、IE8，Firefox5+，Chrome，Safari等浏览器。

7.12　最难懂的题给真心的你（HTML5效果）

第353道：
你能用HTML5做一些酷炫的效果吗？

解析：

本题旨在考察面试者对HTML5的了解和使用，只要如实地说出自己做过的一个效果就好。但要注意，介绍时要描述清楚效果，以及实现该效果所运用到的属性方法等。

下面是一个简单的例子。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>一款带有发光动画的HTML5表单</title>

<script>
$(function(){
var $form_inputs = $('form input');
var $rainbow_and_border = $('.rain, .border');
/* Used to provide loping animations in fallback mode */
$form_inputs.bind('focus', function(){
$rainbow_and_border.addClass('end').removeClass
('unfocus start');
});
$form_inputs.bind('blur', function(){
$rainbow_and_border.addClass('unfocus start').
removeClass('end');
});
$form_inputs.first().delay(800).queue(function() {
$(this).focus();
});
});
</script>
</head>
<body id="home">
<div class="rain">
<div class="border start">
<form>
<label for="email">Email</label>
<input name="email" type="text"
placeholder="Email"/>
<label for="pass">Password</label>
<input name="pass" type="password"
placeholder="Password"/>
<input type="submit" value="LOG IN"/>
</form>
</div>
</div>
<div style="width:640px;margin:10px auto 20px auto;
padding:0 0 0 380px;overflow:hidden">
<!-- JiaThis Button BEGIN -->
<div id="jiathis_style_32x32">
<a class="jiathis_button_qzone"></a>
<a class="jiathis_button_tsina"></a>
<a class="jiathis_button_tqq"></a>
<a class="jiathis_button_renren"></a>
<a class="jiathis_button_kaixin001"></a>

<a class="jiathis_counter_style"></a>
</div>

</div>
<div style="font-size:18px;text-align:center;padding:0 0
20px 0">

</div>
<!-- JiaThis Button END -->
</body>
</html>

7.13　从此，面试不重来（控件相关）

第354道：
哪种输入类型定义滑块控件？（　）

A. Seacher

B. Controls

C. Slider

D. Range

答案：
D

解析：

Range定义带有Slider控件的数字字段。

Controls属性规定浏览器应该为视频提供播放控件。

Slider控件是由滑块与滑动条组成的。使用Slider控件，可以计算出滑块在滑动工程中占整个滑动条的比例。如果滑动条的整体长度为100，则滑动的范围就是0～100。

第355道：
哪种输入类型用于定义周和年控件（无时区）？（　）

A. Date

B. Week

C. Year

答案：
B

解析：

Date用于定义时间。

Week类型允许你选择周和年Select a week: <input type="week" name="week_year">。

Year用于定义年。

第8章

见多识广，独霸一方［HTML5+CSS3终极面试题］

包罗万象的HTML5的API让你乘风破浪，CSS动画让你随时变换人物特征，Geolocation地理让你随时获取敌人的具体方位，将之一网打尽；workers多线处理默默无闻，无私奉献。

8.1　这些题必须认真对待（HTML5应用程序缓存）

第356道：
请写出localStorage对象的常用方法。

解析：

1. 存储：localStorage.setItem(key，value)

如果key存在，那么更新value。

2. 获取：localStorage.getItem(key)

如果key不存在，那么返回null。

3. 删除：localStorage.removeItem(key)

一旦删除，key对应的数据将会全部删除。

4. 全部清除：localStorage.clear()

某些时候使用removeItem逐个删除太麻烦，可以使用clear，执行的后果是会清除所有localStorage对象保存的数据。

5. 遍历localStorage存储的key

.length数据总量，例如：localStorage.length;

.key(index)获取key，例如：var key=localStorage.key(index);

6. 存储JSON格式数据，json.stringify(data)

将一个对象转换成json格式的数据串，返回转换后的串，Json.parse(data)将数据解析成对象，返回解析后的对象。

第357道：
HTML5引入了应用程序缓存，如何启用应用程序缓存？

解析：

如需启用应用程序缓存，请在文档的<html>标签中包含manifest属性：每个指定了manifest的页面在用户对其访问时都会被缓存。如果未指定manifest属性，则页面不会被缓存（除非在manifest文件中直接指定了该页面）。

8.2　这些题“包罗万象”（HTML5常见API）

第358道：
你知道的网页制作会用到的图片格式有哪些？

解析：

png-8、png-2、jpeg、gif、svg。

但是上面的那些都不是面试官想要的满意答案。面试官希望听到是Webp、Apng（考察面试人员是否有关注新技术、新鲜事物）。

WebP格式是谷歌（Google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有jpeg的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook、ebay等知名网站已经开始测试并使用WebP格式。

在图片质量相同的情况下，WebP格式图像的体积要比jpeg格式的图像小40%。

8.3　再深的题海，也能乘风破浪（HTML5数据存储）

第359道：
请描述一下cookie、sessionStorage和localStorage的区别。

解析：

cookie数据始终在同源的HTTP请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。

存储大小限制也不同，cookie数据不能超过4KB，同时因为每次HTTP请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5MB或更大。

数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage的API接口使用更方便。

第360道：
HTML5提供了哪两种在客户端存储数据的新办法？有何区别？

解析：

一种是localStorage，另一种是sessionStorage，它们的区别如下。

- localStorage：没有时间限制的数据存储。

- sessionStorage：针对一个session的数据存储。

8.4　这些题让你相信能，就能！（HTML5编辑API）

第361道：
文档类型的作用是什么？你知道多少种文档类型？

解析：

Web世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。

HTML也有多个不同的版本，只有完全明白页面中使用的确切HTML版本，浏览器才能完全正确地显示出HTML页面。这就是<!DOCTYPE>的用处。从Web诞生早期至今，已经发展出多个HTML版本，我们常用的声明有：

HTML5：<!DOCTYPE HTML>

HTML 4.01：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/HTML4/loose.dtd">

XHTML 1.0：<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/XHTML1/DTD/XHTML1-Transitional.dtd">

8.5　搞清楚这些让你“屌炸天”（CSS动画）

第362道：
请使用CSS3的animation创建一段动画，该动画的过程为：100px×100px的图片以中心为圆点，顺时针原地旋转3秒，然后开始水平滚动7秒，所有动画均为匀速，要求适配浏览器为Chrome和Safari。

解析：

@-webkit-keyframes ha{
0% {
-webkit-transform: rotateZ(0deg);
}
30% {
-webkit-transform: rotateZ(200deg);
}
100%{
-webkit-transform: translate(200px，
0px);rotateZ(160deg)
}
}
.box:hover{
-webkit-animation: ha 10s linear infinite;
}

第363道：
CSS3中分别有哪几种动画模式，分别有什么特点？

解析：

CSS3中的动画有Transitions、Transforms和Animations三种模式。

Transitions特点：平滑地改变CSS的值。

Transforms特点：基本的变换，主要实现拉伸、压缩、旋转、偏移等。

Animations特点：适用于CSS2、CSS3。

第364道：
你以前做过动画吗？简单描述一下。

解析：

动画主要分为两种，一种是动画（animation），另一种是过渡动画（transition）。

1. animation

- animation与transition有几个相同的属性，duration、timing-function、delay；

- animation-name：animation需要指定动画的名字，这个是用来在@keyframes中指定执行动画的样式；

- animation-durarion：动画的执行时间，单位为s（秒）；

- animation-timing-function：动画类型，取值与transition相同；

- animation-delay：动画延迟时间，单位为s（秒）；

- animation-iteration-count：动画执行的次数，这个属性就克服了transition局限中的第二条，取值可以是数字，指定具体循环几次，也可以设置关键字“infinite”无限循环；

- animation-direction：动画在循环执行时是否反方向，取值“normal”正常方向、“alternate”正常与反向交替；

- animation-play-state：设置执行中动画的状态，取值“running”、“paused”；

- animation-fill-mode：设置动画执行时间之外的状态，取值“none”（默认，不设置）、“forwards”（动画结束时的状态）、“backwards”（动画开始时的状态）、“both”（开始或结束时的状态）。

2. transition

- transition-property：参与过渡的属性，比如height、width等CSS样式，所有样式用关键字“all”，没有样式需要过渡使用“none”；

- transition-duration：过渡持续的时间，单位是s（秒），比如width从100px过渡到200px排序需要的时间；

- transition-timing-function：过渡的动画类型，有以下几种取值。

- linear：线性过渡，等同于贝塞尔曲线（0.0，0.0，1.0，1.0）；

- ease：平滑过渡，等同于贝塞尔曲线（0.25，0.1，0.25，1.0）；

- ease-in：由慢到快，等同于贝塞尔曲线（0.42，0，1.0，1.0）；

- ease-out：由快到慢，等同于贝塞尔曲线（0，0，0.58，1.0）；

- ease-in-out：由慢到快再到慢，等同于贝塞尔曲线（0.42，0，0.58，1.0）；

- cubic-bezIEr(<number>，<number>，<number>，<number>)：特定的贝塞尔曲线类型，4个数值需在[0，1]区间内；

- transition-delay：动画延迟执行的时间；

- transition同background属性一样，有缩写和拆分两种方式，就是说，你可以把每个属性都加到transition后。

缩写如：transition: border-color .5s ease-in .1s;

也可以把这些属性拆分，分别设置在个属性之后，上边的缩写拆分后如下：

- transition-property: border-color；

- transition-duration: .5s；

- transition-timing-function: ease-in；

- transition-delay: .1s。

如果需要对个样式设置过渡动画，可以用逗号分开。

缩写如：

- transition: border-color .5s ease-in .1s，color .3s ease .2s;

拆分写法如：

- transition-property: border-color，color；

- transition-duration: .5s，.3s；

- transition-timing-function: ease-in，ease；

- transition-delay: .1s，.2s。

在拆分写法中，如果某个属性是多组共用的，则不需要分别设置，比如：transition-duration: .5s，.5s; ---> transition-duration: .5s;

但是transition有几个很大的局限：

（1）transition需要事件触发，所以没法在网页加载时自动发生。

（2）transition是一次性的，不能重复发生，除非一再触发。

（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说，只有两个状态。

（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。所以就诞生了animation属性，相对transition略显复杂，但是功能更强大。

8.6　前端面试独家宝贝（cache机制）

第365道：
浏览器的cache机制是怎样的？如果想让某个文件不cache，如何处理？

解析：

cache机制，即浏览器缓存机制（cache-control），指明当前资源的有效期，控制浏览器是直接从浏览器缓存取数据，还是重新发请求到服务器取数据。cache-control是关于浏览器缓存的最重要的设置，因为它覆盖其他设置，比如Expires和Last-ModifIEd。另外，由于浏览器的行为基本相同，这个属性是处理跨浏览器缓存问题的最有效的方法。

Expires头部字段提供一个日期和时间，响应在该日期和时间后被认为失效。失效的缓存条目通常不会被缓存（无论是代理缓存，还是用户代理缓存）返回，除非首先通过原始服务器（或者拥有该实体的最新副本的中介缓存）验证。（注意：cache-control max-age和s-maxage将覆盖Expires头部。）Expires字段接收以下格式的值：“Expires: Sun，08 Nov 2009 03:37:26 GMT”。如果查看内容时的日期在给定的日期之前，则认为该内容没有失效，并从缓存中提取出来；反之，则认为该内容失效，缓存将采取一些措施。

8.7　前端大牛的看家本事（workers多线处理）

第366道：
什么是web.worker？如何创建一个简单的web.worker实例？

解析：

web. worker是在后台运行的JavaScript，独立于其他脚本，不会影响页面的性能。你可以继续执行你想做的任何事情：单击、选取等，同时web. worker就在后台运行。

以下是一个简单的web.worker实例：

<!DOCTYPE html>
<html>
<head>
<title>Big for loop</title>
<script>
function bigLoop(){
for (var i = 0; i <= 10000000000; i += 1){
var j = i;
}
alert("Completed " + j + "iterations" );
}
function sayHello(){
alert("Hello sir...." );
}
</script>
</head>
<body>
<input type="button" onclick="bigLoop();" value="Big Loop" />
<input type="button" onclick="sayHello();" value="Say Hello" />
</body>
</html>

8.8　一入考题深似海，从此面试是浮云（GeoIocation地理位置）

第367道：
在HTML5中，哪个方法用于获得用户的当前位置？（　）

A. getPosition()

B. getCurrentPosition()

C. getUserPosition()

答案：
B

解析：

getCurrentPosition(successCallback, errorCallback，positionOptions)

successCallback：表示调用getCurrentPosition函数成功以后的回调函数，该函数带有一个参数，对象字面量格式，表示获取到的用户位置数据。该对象包含两个属性：coords和timestamp。其中，coords属性包含以下7个值：accuracy，精确度；latitude，纬度；longitude，经度；altitude，海拔；altitudeAcuracy，海拔高度的精确度；heading，朝向；speed，速度。

errorCallback和successCallback函数一样，都带有一个参数，对象字面量格式，表示返回的错误代码。它包含以下两个属性：message，错误信息；code，错误代码。其中，错误代码包括以下4个值。

- unknow_error：表示不包括在其他错误代码中的错误，这里可以在message中查找错误信息；

- permission_denied：表示用户拒绝浏览器获取位置信息的请求；

- position unavalablf：表示网络不可用或者连接不到卫星；

- timeout：表示获取超时。必须在options中指定了timeout值时才有可能发生这种错误。

positionOptions的数据格式为JSON，有3个可选的属性：

- enableHighAcuracy：布尔值，表示是否启用高精确度模式，如果启用这种模式，浏览器在获取位置信息时可能需要耗费更多的时间。

- Timeout：整数，表示浏览器需要在指定的时间内获取位置信息，否则触发errorCallback。

- maximumAge：整数/常量，表示浏览器重新获取位置信息的时间间隔。

8.9　前端大“虾”必考题（编码问题）

第368道：
若某HTML页面使用GBK字符集，CSS文件使用UTF-8字符集，请简述如何可以避免乱码问题？

解析：

直接在Web.config里面设置<system.web><globalization fileEncoding="utf-8" requestEncoding="utf-8" responseEncoding="utf-8" culture="zh-CN"/></system.web>。

第369道：
如果一个网页上需要同时有多种语言文字，那么网页需要用______编码格式。

答案：
UTF-8

解析：

网页使用UTF-8编码唯一的好处是，无论你的操作系统的使用语言是简体中文（GB2312字符集）、繁体中文（BIG5字符集）或者是朝鲜文、日文、法文、德文、俄文、阿拉伯文、希伯来文、西班牙文、葡萄牙文等各种语言文字，在使用这些语言文字时，都可以正常显示在网页中，当其他任何人浏览时都会正常显示，不会有乱码，不会有重码和字符冲突，不需要调整页面的语言编码设置即可正常浏览，多种语言字符可以同时共存在页面上。UTF-8是世界通用的语言编码，UTF-8的推广要归功于Google的应用，以及Blog开发者。而如果用Windows XP英文版的IE6浏览GB2312语言编码的网页，则会提示是否安装语言包。因此，可能会失去很多的国外浏览者。UTF-8是Unicode（八位交换格式）的简称，Unicode是国际标准，也是ISO标准10646的等价标准。Unicode编码的文件中可以同时对几乎所有地球上已知的文字字符进行书写和表示，而且已经是UNIX/Linux世界的默认编码标准。在中国大陆，简体中文版常用的GB2312/GB18030/GBK系列标准是我国的国家标准，但只能对中文和多数西方文字进行编码。为了网站的通用性，用UTF-8编码是更好的选择。

综合提升

第370道：
现在流行HTML5+CSS3和jQuery配合使用，请说出对其的理解，并举例说明以前做过的实例。

解析：

现在使用最流行的Web技术HTML5+CSS3和jQuery，同样也可以实现类似的用户体验。使用这些特性将会比使用Flash更加有效。

以下示例仅供参考：

$(function () {
new Swipe(document.getElementById('jisou-banner'), {
speed: 500,
auto: 3000,
callback: function () {
var lis = $(this.element).next("ol").children();
lis.removeClass("on").eq(this.index).addClass("on");
}
});
});

第371道：
你做的页面通常在哪些浏览器测试过？这些浏览器的内核分别是什么？经常遇到的兼容性问题有哪些？怎么会出现？解决方法是什么？移动终端主要考虑什么？

解析：

一般网页通过IE6、IE7、IE8，Firefox5+，Chrome，Safari测试。

- IE内核浏览器：360，傲游，搜狗，世界之窗，腾讯TT；

- 非IE内核浏览器：Firefox，Opera，Safari，Chrome。

关于经常遇到的兼容性问题，这个只需如实回答就好，排版中总会遇到兼容问题的，你只需要整理好问题，并把解决方法说出来。例如：

（1）IE6双倍边距的问题。在使用了float的情况下，不管是向左还是向右都会出现双倍，最简单的解决方案就是把display:inline;加到CSS里面去。

（2）文字本身的大小不兼容问题。同样是font-size:14px的宋体文字，在不同浏览器下占用的空间是不一样的。在IE下实际占高16px，下留白3px；在Firefox下实际占高17px，上留白1px，下留白3px；在Opera下就更不一样了。解决方案：给文字设定line-height。确保所有文字都有默认的line-height值。这点很重要，在高度上我们不能容忍1px的差异。

（3）在Firefox下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而在IE下是会被内容撑大的，高度限定失效。所以不要轻易给容器定义height。

（4）横向上的内容撑破容器问题。如果float容器未定义宽度，在Firefox下内容会尽可能撑开容器宽度，在IE下则会优先考虑内容折行。所以，内容可能撑破的浮动容器需要定义width。

（5）浮动的清除，在Firefox下必须清除浮动。

（6）mirrormargin Bug。当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-bottom:14px。padding也会出现类似问题，都是在IE6下产生的，该类Bug出现的情况较为复杂，远不只这一种出现条件，还没系统整理。解决方案：外层元素设定border或设定float。

（7）吞吃现象。还是IE6，上下两个div，上面的div设置背景，却发现下面没有设置背景的div也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。解决方案：使用zoom:1。这个zoom是专门为解决IE6 Bug而生的。

第372道：
简述从前端角度出发做好SEO需要考虑什么？

解析：

CSS Sprites：通俗来讲，就是图片合并，可以把网站中一些比较通用的小图片，合并到一张图片上，然后利用CSS技术来分别调用图片不同的部分。这样可以大大地减少HTTP的请求量，在网页加载时，速度就快很多，现在很多大中型网站都在用这个前端加速技术，效果也是很不错的。这也是很多人比较容易忽略的。在页面中，请你为每一个图片都指定一个width属性与height属性，这样在页面加载时，浏览器会预先留出既定的位置，图片下边的代码可以继续下载而不用等待，提高并行下载的速度，也提高了页面加载的速度。

启用Keep-Alive属性，Keep-Alive可以理解为长连接，在没有启用Keep-alive属性之前，浏览器向服务器请求的connection是即连即断的，执行一次HTTP请求完成后，马上断开这个连接，而启用conncetion的Keep-Alive属性之后，这个连接可以保持一段时间，从而可以提高页面加载的速度。

使用浏览器缓存，可以用缓存技术来提高页面的加载速度，为一些不经常变化的文件，设置一个相对较长的过期时间，这样当用户访问网站后，就会在它的浏览器中留下缓存，当它在下次请求时，留在缓存中的组件就不用再向服务器发出HTTP请求了，这样减少了浏览器向网站服务器发出的HTTP请求数，从而提高了页面加载速度，这在一些图片比较多的网站上，效果是非常明显的，我们要善于使用缓存技术。

启用GZIP压缩，大中型网站，基本都启用了GZIP压缩，如果使用的是虚拟主机，可以让服务商来启用，如果有自己的服务器，启用也很简单。为什么启用GZIP压缩就会加快速度呢？因为当启用了GZIP后，网站服务器传输数据之前，是经过压缩了的，当传输到浏览器后，会再被解压缩，从而可以在浏览器上正常显示，而且压缩率可以达到很高，效果非常好。一般启用了压缩后，搜索引擎对网站的抓取量也是上升了的。

第373道：
请简述如何通过CSS实现不同分辨率的手机适配，要求不可通过width=100%和留白的方式实现。

解析：

允许网页宽度自动调整。

首先，在网页代码的头部，加入一行viewport元标签。<meta name="viewport" content="width=device-width, initial-scale=1" />viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、IE7、IE8），需要使用CSS3-mediaquerIEs.js。

第374道：
请根据以下XML写出对应的JSON。

<xml>
<list>
<item>
<id>12</id>
<name>张三</name>
</item>
<item>
<id>13</id>
<name>李四</name>
</item>
</list>
</xml>

解析：

[{id:12, name:'张三'}, {id:13, name:'李四'}]

第375道：
HTTP状态码301、302、401、404，分别代表什么意义？

解析：

301（永久移动），请求的网页已永久移动到新位置。服务器返回此响应（对GET或HEAD请求的响应）时，会自动将请求者转到新位置。应使用此代码告诉Googlebot某个网页或网站已永久移动到新位置。

302（临时移动），服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来响应以后的请求。此代码与响应GET和HEAD请求的301状态码类似，会自动将请求者转到不同的位置，但不应使用此代码来告诉Googlebot某个网页或网站已经移动，因为Googlebot会继续抓取原有位置并编制索引。

401（未授权），请求要求身份验证。对于登录后请求的网页，服务器可能返回此响应。

404（未找到），服务器找不到请求的网页。例如，对于服务器上不存在的网页经常会返回此代码。

第376道：
如何优化页面速度，提高页面响应？

解析：

（1）如果<head>部分未定义字符集，那么将增加页面渲染次数，速度则会减慢。

（2）Meta信息完善程度。建议网站Meta信息填写完整。

（3）合并域名。

（4）取消重定向。无论是通过服务器端重定向，还是JavaScript代码进行内容重定向，网站都会首先加载一个空白的页面，然后在定向到另外的页面，这样不仅延长了页面的加载时间，还有可能导致无法跳转，让用户面对一个“空白”页面。

（5）合并JavaScript，清除多余的脚本。将网站中的JavaScript封装到一起，缩小JavaScript范围，比如去除不必要的空格等其他标签。

（6）合并CSS。将网站中的CSS封装到一起。

（7）使用CSS Sprite。CSS Sprite，在国内很多人称它为CSS精灵，是一种网页图片应用处理方式。

（8）启用GZIP。

（9）CSS位置。建议将它们放到<head>标签中，页面需要重新渲染，打开速度受到影响。

（10）JavaScript位置，JavaScript放在页面最后，可以加快页面打开速度。

（11）图片大小声明。如果图片大小不做定义，则页面需要重新渲染，速度受到影响。

（12）图片Alt信息检测，建议为网页img标签增加Alt信息（检测信息为整个页面图片，加入这项信息可使网页上的图片更容易被用户检索到）。

（13）去除错误链接，无法打开的链接，会导致页面打开缓慢，请及时修正或删除，并给网站增加404错误提醒页面。

（14）缓存静态资源。变化很少的静态资源可以设置客户端缓存，这样可以减少请求次数。比如一篇文章发布后就不再修改了，这样就应该生成HTML文件，来提高网站加载速度。

（15）URL长度检测，建议URL长度在256byte以内。

（16）在静态页面上不建议使用动态参数。在静态页面上使用动态参数，会造成spider多次和重复抓取URL。

（17）尽量不用frame/iframe。

（18）Flash勿出现不必要的文字信息。

（19）减少域名DNS查找时间，用户在浏览器的地址栏中键入域名后，浏览器就会通过DNS系统查找域名对应的IP地址，所以需要将DNS的时间设置在较低的水平，比如平均60～100ms进行一次DNS查询。

第377道：
使用HTTP协议、WebServer、HTML、URL、JavaScript和Web，描述从提交到返回数据呈现的过程。

解析：

第378道：
如何提高前端性能？

解析：

1. 用Web storage替换cookie

cookie最大的问题是每次都会跟在请求后面。在HTML5中，用sessionStorage和localStorage把用户数据直接存在客户端，这样可以减少HTTP请求的数据量。

2. 使用CSS动画，而不是JavaScript动画

使用CSS的动画，而不是JavaScript动画。因为某些机器可以对CSS的动画进行GPU加速，而且也减少了JavaScript文件请求。

3. 使用客户端数据库

使用Web SQLDatabase或IndexedDB这类客户端数据库，可以减少HTTP请求的数量。像地区列表、好友列表这样的数据可以直接存储在客户端。有时也可以使用sessionStorage和localStorage，因为一般来说，这两类相比Web SQLDatabase和IndexedDB更快。

4. 直接使用JavaScript的新功能

JavaScript已经有了很大的发展，比如Array引入了很多新的方法，如map、filter、forEach等。另外，JSON也直接嵌入浏览器了，不需要再引入JSON2.js文件了。

5. 缓存HTML标记

通过缓存，把HTML文件缓存在客户端。不过这些缓存的HTML文件只有结构，没有内容。内容需要通过JavaScript操作的JSON对象来把数据填入页面中这样的HTML文件相当于模板。

6. 使用硬件加速

现在领先的浏览器已经启用了GPU级别的硬件加速，通过某些指令或hack可以打开这些硬件加速。比如CSS中使用3D转换或动画，就可以打开GPU硬件加速。

第379道：
当一个页面在你的电脑上没有问题，但在用户端有问题，你怎么办？

解析：

当页面在自己电脑上没问题而在用户端有问题时，我们理应先检查自身是不是出错，按F12键打开浏览器，看控制台有没有报出错误，如果控制台没有报错信息，进入下一步，查看资源请求有没有出错，如果这些都没有问题，那么我们再想别的办法。换一台电脑，或换一个不同的网段再次进行测试，或者我们可以和用户联系，询问用户端的浏览器，检查是不是需要解决浏览器兼容问题。

第380道：
请说出对于浏览器兼容性的看法，并列举一些处理方法。

解析：

浏览器兼容问题一：不同浏览器的标签，默认的margin和padding不同。

问题症状：随便写几个标签，在不加样式控制的情况下，各自的margin和padding差异较大。

碰到几率：100%。

解决方案：CSS里加一行*{margin:0;padding:0;}。

备注：这个是最常见的，也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

浏览器兼容问题二：在块属性标签float后，有横行的margin情况下，在IE6下显示的margin比设置的大。

问题症状：常见症状是IE6中后面的一块被顶到下一行。

碰到几率：90%（稍微复杂点的页面都会碰到，是float布局最常见的浏览器兼容问题）。

解决方案：在float的标签样式控制中加入display:inline;将其转化为行内属性。

备注：我们最常用的就是DIV+CSS布局了，而DIV就是一个典型的块属性标签，横向布局时我们通常都是用DIV float实现的，如果用margin设置横向的间距，这就是一个必然会碰到的兼容性问题。

浏览器兼容问题三：设置较小高度标签（一般小于10px），在IE6、IE7、遨游里，高度超出自己设置高度。

问题症状：在IE6、IE7和遨游里，这个标签的高度不受控制，超出自己设置的高度。

碰到几率：60%。

解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height小于你设置的高度。

备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是，在IE8之前的浏览器都会给标签设定一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。

浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距出现bug。

问题症状：IE6里的间距比超过设置的间距。

碰到几率：20%。

解决方案：在display:block;后面加入display:inline;display:table;。

备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除input标签比较特殊外）。在用float布局并有横向的margin后，在IE6下，它就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时，我们还需要在display:inline后面加入display:talbe。

浏览器兼容问题五：图片默认有间距。

问题症状：几个img标签放在一起时，有些浏览器会有默认的间距，即使加了问题一中提到的通配符也不起作用。

碰到几率：20%。

解决方案：使用float属性为img布局。

备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距，使用float是正道。（我的一个学生使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以我禁止他们使用）。

浏览器兼容问题六：标签最低高度设置min-height不兼容。

问题症状：因为min-height本身就是一个不兼容的CSS属性，所以在设置min-height时，不能很好地被各个浏览器兼容。

碰到几率：5%。

解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}。

备注：在B/S系统前端开发时，在很多情况下我们有这种需求。当内容小于一个值（如300px）时，容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时我们就会面临这个兼容性问题。

浏览器兼容问题七：各种特殊样式的兼容，比如透明度、圆角、阴影等。特殊样式在每个浏览器中的代码区别很大，所以，只能现查资料，通过给不同浏览器写不同的代码来解决。

JavaScript解决IE6下png透明失效的问题。

做兼容页面的方法是：每写一小段代码（布局中的一行或者一块），我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。建议经常碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话，就能很好地理解为什么会出现兼容问题及怎么去解决这些兼容问题了。

第3篇　箭在弦，不回头

——DIV+CSS向前冲

DIV+CSS是Web设计标准，它是一种网页的布局方法，与传统的通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离，而且它结构清晰，很容易被搜索引擎搜索到，天生就适合SEO优化，降低网页大小，让网页体积变得更小。

第9章

夯实基础，厚积薄发［DIV+CSS初级面试题］

登上理想的高峰——块级元素，CSS概述不曾退缩，float:left、right、center让你腾云驾雾，img图片让你的背景更加风采，绝地逢生之路——CSS规范。

9.1　有一种题叫边做边流泪（浮动）

第381道：
如何清除一个标签的子标签的浮动？

解析：

1. 空标签清除浮动.clear{clear : both;}

优点：通俗易懂，容易掌握。

缺点：会添加大量无语义空标签，结构与表现未分离，不利于维护。

2. br标签清除浮动

优点：比空标签方式语义稍强，代码量较少。

缺点：结构与表现未分离，不推荐。

3. 父元素设置overflow:hidden

优点：不存在结构和语义化问题，代码量少。

缺点：内容增多时容易造成不会自动换行的后果，导致内容被隐藏，无法显示需要溢出的元素。IE6需要触发haslayout。

4. 父元素设置overflow:auto

优点：不存在结构和语义化问题，代码量少。

缺点：多个嵌套后，Firefox在某些情况下会造成内容全选；IE在mouseover造成宽度改变时会造成最外层模块出现滚动条。IE6需要触发haslayout。

5. 父元素浮动

优点：不存在结构和语义化问题，代码量少。

缺点：与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐。

6. 父元素设置display:table;

优点：结构语义化完全正确，代码量少。

缺点：盒模型属性已经改变，不推荐。

7. 使用:after伪元素（不是伪类）

优点：结构和语义化完全正确，代码量居中。

缺点：复用方式不当会造成代码量增加。由于IE6和IE7不支持:after，使用zoom:1触发haslayout。

第382道：
描述一下浮动会造成什么影响，如何居中一个浮动元素？

解析：

我们知道，当一个元素浮动时，其周围的文字段落等会相应地环绕它。这样浮动的元素就会成为一座“孤岛”，周围的东西就会成为“水流”围绕着它。这时问题就来了，我们往往希望浮动不要对周围原有的布局产生影响想到的是利用clear来清除浮动的影响，但是却忘记了clear只对块级元素有用，所以经常会因为忽略这点导致清除影响失败。

居中一个元素：首先设置块元素的宽度和高度，这里宽度必须得设置，高度可以不设置。设置块的背景色，实现居中的关键在于margin-left:50%; position:relative;left:-250px;

设置margin-left:50%;后，浮动元素左边正好位于文档中间，设置块相对定位position:relative;然后左移宽度的二分之一，即可实现元素居中。在这个实例中宽度设置为500px，left设置为-250px。

第383道：
简单说明绝对定位和浮动的区别和应用。

解析：

当一个元素使用绝对定位后，它的位置将依据浏览器左上角开始计算或相对于父容器（在父容器使用相对定位时）。绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就与绝对定位的元素不存在时一样，因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。

而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧，文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补原先的空间。它只是改变了文档流的显示，而没有脱离文档流，一个元素浮动或绝对定位后，它将自动转换为块级元素，而不论该元素本身是什么类型。

第384道：
当float和margin同时使用时，如何解决IE6的双倍边距Bug？

解析：

解决办法就是用display:inline;。

display:inline的作用是设置对象作为行内元素显示，inline是内联对象的默认值（内联对象就是不自动产生换行的元素，比如span），而我们一般用的DIV是块级元素，默认display属性是block，但将DIV的display设置为inline的话，则多个DIV可以像span一样显示在一行了。

第385道：
当内部容器使用了float：left后，你会用哪些方法对父元素消除浮动？

解析：

（1）给父级DIV也加上float。

（2）在子级DIV后面加上<div style="clear:both;"></div>，即清除浮动。

（3）给父元素加上overflow:hidden;属性。

9.2　想登上理想的高峰吗？那就来吧（块级元素）

第386道：
块级元素和内联元素的区别？

解析：

块级元素独占一行，在默认情况下，宽度自动填满父元素宽度。

内联元素不会独占一行，宽度随着元素的内容而变化，并且width和height的设置无效，同时在margin和padding的垂直方向上不产生边距效果，可以使用display:block;或display:inline;实现块级元素和行内元素的相互转换。

第387道：
display属性值的常用取值不包括（　）

A. inline

B. block

C. hidden

D. none

答案：
C

解析：

- display:inline通常被叫作行内元素。

- display:block通常被叫作块级元素。

- display:none在不删除元素的情况下通常被JavaScript用来隐藏或显示元素。

9.3　时间很短，面试赶紧（行内元素）

第388道：
行内元素有哪些？块级元素有哪些？

解析：

行内元素：span为常用行内元素，定义文本内区块。行内元素还有：a为锚点，abbr为缩写，acronym为首字，b为粗体，big为大字体，br为换行，cite为引用，em为强调，dfn为定义字段，font为字体设定，i为斜体，img为图片，input为输入框，kbd为定义键盘文本，label为表格标签，q为短引用，s为中画线，samp为定义范例计算机代码，select为项目选择，small为小字体文本。

块级元素：address为地址，div为常用块级元素，也是CSSlayout的主要标签。dl为定义列表，form为交互表单，h1为大标题，h2为副标题，h3为3级标题，h4为4级标题，h5为5级标题，h6为6级标题，hr水平分隔线，menu为菜单列表，ol为排序表单，p为段落，pre为格式化文本，table为表格，ul为非排序列表。

第389道：
简述div元素和span元素的区别。

解析：

div(division)是一个块级元素，可以包含段落、标题、表格，比如章节、摘要和备注等。而span是行内元素，span的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用span。块级元素和行内元素也不是一成不变的，只要给块级元素定义display:inline，块级元素就成了内嵌元素，同样地，给内嵌元素定义display:block就成了块级元素。

9.4　面试就像半杯水，你能看到什么（CSS图片）

第390道：
如何让img标签在DIV里左右、上下居中？

解析：

<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta name="author" type="Nancle from CAU CS101" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>如何让img标签在DIV里左右、上下居中</title>
<script type="text/JavaScript"> </script>
<style type="text/css">
#container{width:400px;height:400px;background:#ccc;
text-align:center;}
img{margin:100px auto 0 auto;}
</style>
</head>
<body>
<div id="container">
<img src="" width="200" height="200" />
</div>
<p>
</p>
</body>
</html>

9.5　面试是一场旅行，正在进行时（CSS引入）

第391道：
CSS引入的方法有哪些？都有什么区别？

解析：

（1）在head部分加入<link rel="stylesheet" type="text/css" href="my.css"/>，引入外部的CSS文件。

这种方法是目前引入最多的方法，它不仅最能体现CSS的特点，而且也最能体现DIV+CSS中的内容与显示分离的思想，改版维护容易，代码美观。

（2）在head部分加入<style text="text/css"></style>

这种方法的使用情况要少得多，最常见的就是访问量大的门户网站，或者访问量较大的企业网站的首页。与第一种方法比起来，这种方法优点突出，弊端也明显。

- 优点：速度快，所有的CSS控制都是针对本页面标签的，没有多余的CSS命令；再者不用外链CSS文件，直接在HTML文档中读取样式。

- 缺点：改版麻烦，单个页面显得臃肿，CSS不能被其他HTML引用，造成代码量相对较多，维护也麻烦。对它们来说，用户量是关键，它们需要大量人员进行复杂的维护工作。

（3）直接在页面的标签里加<div style="border:1px red solid;">测试信息</div>。

这种方法现在用得很少，一般情况下，我们认为HTML里不能出现CSS命令，其实有时候使用一下也未尝不可。比如通用性差，效果特殊，使用CSS命令较少，并且不常改动的地方，使用这种方法反而是很好的选择。

（4）@import url(my.css);这种方法引入CSS文件。

第392道：
引入样式表的方式有几种？（　）多选

A. Include

B. Import

C. link

D. Ref

答案：
ABC

解析：

@import url(my.css);
<link rel="stylesheet" type="text/css" href="my.css"/>

9.6　面对考题不曾退缩（CSS概述）

第393道：
什么是CSS？

解析：

级联样式表（Cascading Style Sheet），简称“CSS”，通常又称为风格样式表（Style Sheet），它是用来进行网页风格设计的。比如，如果想让链接字未单击时是蓝色的，当鼠标移上去后字变成红色的且有下画线，这就是一种风格。通过设立样式表，可以统一地控制HMTL中各标志的显示属性。级联样式表可以使人更有效地控制网页外观。使用级联样式表，可以精确指定网页元素位置、外观，并且具有创建特殊效果的能力。

第394道：
在书写高效CSS文件时，需要考虑哪些问题？

解析：

（1）不影响页面的布局。

（2）去掉不必要的样式。

（3）合并相同的样式。

（4）尽可能缩小样式的大小。

第395道：
CSS的基本语句构成是什么？

解析：

选择器{属性1:值1;属性2:值2;……}

有6种合法的选择器类别，即：HTML标记、具有上下文关系的HTML标记、用户定义的类、用户定义的ID、虚类和虚元素。

1. HTML标记

例如：h1{text-align:center;font-family:楷体-gb2312}

h1,h2,h3{color:#ff0000}

2. 具有上下文关系的HTML标记

例如：h1 B{color:red}

这表示只有位于<h1>标记元素内的<B>标记符说明的内容显示为红色，其他<B>标记符说明的元素不具有该属性。这种上下文关系可以多层嵌套。

3. 用户定义的类

例如：要想将一个类包括到样式定义中，可将一个句点和一个类名添加到选择器后，即：选择器。类名{属性：值；……}

4. 用户定义的ID

例如：ID，就相当于HTML文档中样式的“身份证”，以保证其在一个HTML文档中具有唯一可用的值。这给使用JavaScript等脚本编写语言的应用带来了方便。要将一个ID包括在样式定义中，需要“#”号作为ID名称的前缀，格式如下：#ID名字{属性：值}

5. 虚类和虚元素

例如，显示方式：

A:link {text-decoration:none;color:#800000}

A:visited {text-decoration:none;color:#800000}

A:active {text-decortion:none}

A:hover {text-decoration:underline;color:blue}

第396道：
简述一下什么是内容与表现分离？CSS都有哪些调用方式？

解析：

代码中不涉及任何的表现元素，如style、font、bgColor、border等，也就是说，内容编写在HTML中，而样式编写在CSS中。

CSS调用方式：

1. 使用link标记

<link rel="stylesheet" type="text/css" href="sheet.css" />

2. 使用style元素

<style type="text/css">
body{background:#fff;}
h1{font-size:12px;}
</style>

3. 使用@import指令

<style type="text/css">
@import url(sheet1.css);
@import "sheet2.css";
</style>

4. 使用style属性的内联样式（inline style）

<p style="color:#f00;">这是红色的字</p>

第397道：
CSS层叠是什么？

解析：

CSS层叠指的是样式的优先级，当产生冲突时以优先级高的为准。

（1）开发者样式>读者样式>浏览器样式（除非使用!important标记）。

（2）id选择符>（伪）类选择符>元素选择符。

（3）权重相同时取后面定义的样式。

以下是一段经典的HTML，三个类名分别为模块、标题和正文。

<div class="mod">
<div class="hd"></div>
<div class="bd"></div>
</div>

大部分HTML页面都可以由这种结构嵌套或者累加而成。

9.7　面试者就像蒲公英，看似自由，却身不由己（CSS选择器）

第398道：
请解释浏览器是如何根据CSS选择器选择对应元素的？

解析：

1. 子选择器（>）

在IE7+标准模式，以及Chrome，Firefox下开始支持。

2. 临近兄弟选择器（+）

在IE7+标准模式，以及Chrome，Firefox下开始支持。但是，如果父元素与子元素之间有注释，那么就会失效。IE8没有。

3. 普通兄弟选择器（~）

选择该元素后面的所有兄弟节点，在IE7+标准模式，以及Chrome，Firefox下支持。它和临近兄弟节点选择器的区别就是，前者就选择后面所有的，不要求相邻，但是后面必须相邻，且选择一个。

第399道：
以下有若干个CSS选择器，请给出它们的优先级顺序。

div h1、#div h1、h1、div h1 #_h、div h1.c_h。

解析：

div h1 #_h>#div h1>div h1.c_h>div h1>h1

第400道：
CSS选择器有哪些？

解析：

- 常见选择器：通配选择器（写法为*{属性：值}）；元素选择器、类选择器、id选择器；

- 子集选择器：#nav>li{属性：值}，注意：只针对#nav下的儿子元素li；

- 同胞选择器：h1+p{属性：值}，注意：紧跟着h1的p元素继承；

- 关联选择器：两个以上选择器组合，优先级等于权重之和；

- 伪选择器：::before相当于在HTML上增加一个DOM节点；p::firstletter{font_size:2em}；

- 属性选择器：input[name]&&input[title="email"]&&input[条件1][条件2]{属性：值}。

9.8　绝地逢生之“路”（CSS规范）

第401道：
CSS规范中，每一条样式的结束是；“（分号）”还是：“（冒号）”？样式名与样式值之间的分隔符号是：“（冒号）”还是；“（分号）”？

解析：

CSS规范中，每一条样式的结束是：（分号）；样式名与样式值之间的分隔符号是：（冒号）。

第402道：
CSS规范中，句号后面跟一个名称代表什么含义？

解析：

句号后面跟一个名称代表文档中所有class属性值包含这个名称的应用样式。

9.9　能磨炼薄弱意志的考题（HTML结构）

第403道：
在HTML代码中如何做SEO？

解析：

（1）h标签的使用，值得注意的是，不论任何页面，h1标签只能出现一次，它是当前页面的主标题，权重最高，对蜘蛛的吸引力是最强的。

（2）strong标签的使用，strong标签对关键词的强调作用仅次于h标签，用于加粗段落标题或是重点关键词。

（3）<title>网站SEO标题</title>、<meta name="description"content="网站描述"/>和<meta name="keywords" content="网站关键词"/>，这是SEO的重点。

（4）<a href="链接地址" title="链接说明">链接关键词</a>，站内丰富的超链接会方便蜘蛛爬行，体现网站的深度和广度，这点在SEO中至关重要。

（5）<img src="图片链接地址"alt="图片说明” />，这是针对网页中图片的，当然也可以写成<img src="图片链接地址"title=”图片说明"/>。

（6）<div id= "copyright" >版权部分加上网站名称和链接</div>。

（7）HTML优化要富于逻辑，重点明确，层次分明，这也是符合SEO精神的。

第404道：
<div style="font-size:12px;width:20em;"><span style="adding:20px; font-size:1.5em;line-height:1.7;">www.yinyuetai.com</s pan></div>说出上列代码中div的实际高度和宽度，以及span对象的实际宽度和高度。

解析：

div的高度是30px，宽度是240px；span的宽度是60px，宽度是185px。

第405道：
CSS怎样判断不同分辨率显示不同宽度布局，从而实现自适应宽度？

解析：

在CSS DIV网页布局中，当分辨率小于等于1024px（像素）时，DIV布局对象显示1000px宽度；当分辨率大于1024px时，DIV布局对象显示1200px宽度等需求。使用CSS实现改变浏览器显示宽度，从而实现布局的网页宽度动态变化（网页宽度自动随浏览器显示宽度而变宽变窄）。

随着科技的发展，电脑用户显示屏分辨率越来越高，但有的用户还是使用1024px的分辨率的显示屏（根据几个浏览器分辨率统计平台得到数据，现在使用1200px分辨率以下的用户极少，我们在CSS布局时至少需要考虑1024px分辨率的用户），如果网页布局的宽度固定到1200px，当1024px分辨率用户浏览网页时，浏览器下方会出现滚动条，为了解决这个问题，大家可以通过使用CSS3样式判断用户浏览器宽度，从而调用不同布局宽度。

第406道：
一个页面（HTML）有哪几部分构成，分别是什么？作用是什么？

解析：

HTML由网页头和主体两部分组成，分别是<head></head>和<body></body>。

head提供一些由浏览器等软件在解释转换HTML文档身体部分数据之前所需的相关信息，这些信息一般不会在浏览器窗口内显示，但会影响到文档的解释转换与输出。文档头部信息放在<head>...</head>之间，至少应在文档头部用<title>标记为文档设置标题信息，文档标题信息显示在浏览器的标题栏中。

文档的身体部分放在<body>...</body>（普通网页文档）之间，普通网页文档的身体部分包含了该文档需要输出的数据，包括内容数据和控制内容输出的标记。浏览器等软件在解释转换该文档时，会把文档身体部分的所有数据解释转换并用浏览器窗口显示等方式输出。

第407道：
你如何理解HTML的语义化？是否接触或了解重构？

解析：

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）不仅便于开发者阅读和写出更优雅的代码，而且能让浏览器的爬虫和机器很好地解析。

当系统发展到一定阶段后，使用重构的方式，不改变系统的外部功能，只对内部的结构进行重新的整理。通过重构，不断地调整系统的结构，使系统对于需求的变更始终具有较强的适应能力。

第408道：
下面代码片段，说法正确的是（　）。

div1{position:absolute;
line-height:22px;
height:58px;
background-color:#ff0000;
}

A. line-height:22px;修饰文字字体大小

B. position:absolute;表示绝对定位，被定位的元素位置固定

C. height:58px;表示被修饰的元素与别的元素的距离

D. background-color:#ff0000;表示被修饰的元素的背景图像

答案：
B

解析：

A. 修饰文字的行高。

B. 表示绝对定位，被定位的元素位置固定。

C. 表示被修饰的元素的高度。

D. 表示被修饰的元素的背景颜色。

position:absolute；表示绝对定位，被定位的元素位置固定。

第409道：
HTML代码<select name="name"></select>表示（　）。

A. 创建表格

B. 创建一个滚动菜单

C. 设置每个表单项的内容

D. 创建一个下拉菜单

答案：
D

解析：

<select>就是创建一个下拉菜单。

第410道：
在HTML文档中，引用外部样式表的正确位置是（　）。

A. 文档的末尾

B. 文档的顶部

C. <body>部分

D. <head>部分

答案：
D

解析：

引用外部样式一般是放在<head></head>中。

第411道：
HTML是（　）大小写的语言。

A. 区分

B. 不区分

答案：
B

解析：

HTML不区分大小写，它只是标记性语言，不是脚本script。

9.10　看的越少，失去的越多（隐藏DOM元素）

第412道：
如何区别CSS中的display:none与visibility:hidden？

解析：

- display:none视为不存在，且不加载。

CSS display:none;

使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”；

- visibility:hidden表示隐藏，但在浏览时保留位置。

visibility:hidden;

使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也就是说它仍具有高度、宽度等属性值。

第413道：
CSS中能够隐藏DOM元素的属性都有哪些？它们的区别是什么？

解析：

CSS隐藏DIV可以写为display:none;或者visibility:hidden;。不过这里display:none;是不占用空间的，而visibility:hidden;虽然隐藏了，但还占据着网页的空间。position的absolute（绝对定位）生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过“left”、“top”、“right”以及“bottom”属性进行规定。position的relative（相对定位）生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20”会向元素的left位置添加20 px。

第414道：
如何显示/隐藏一个DOM元素？

解析：

Show：显示元素；hide：隐藏元素。

9.11　喜欢前进，看的题就越来越多（CSS文字样式）

第415道：
color：#666666;可缩写为_________。

解析：

（color:#666）。

第416道：
给文字添加阴影用哪个属性？

解析：

text-shadow()。

第10章

百折不挠，历经磨难［DIV+CSS中级面试题］

打开面试的钥匙——CSS与表单，CSS定位是王牌，DIV布局囤积自信，display教你如何隐藏，躲避敌人的追踪，让你若隐若现。

10.1　有一种题做起来很崩溃（inIine-bIock特性）

第417道：
display属性值的常用取值不包括（　）。

A. inline

B. block

C. hidden

D. none

答案：
C

解析：

hidden是用于隐藏的。

10.2　快到题里来（布局）

第418道：
实现左侧宽为200px，右侧自适应宽度的布局。

解析：

<div style="width:200px;height:500px;position:absolute;left:0;top:0;background:#999999;"></div>
<div style="margin-left:200px;height:100%;background:#CCCCCC;height:100px;font-size:14px;color:#000;">实现左侧规定宽200，右侧自适应宽度的布局</div>

第419道：
在空白处加上CSS，让这个DIV在页面中居中（上下左右都居中）。

<div style="border:1px solid black"; width:200px; height:200px;>hello</div>

解析：

position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;

第420道：
创建一个文本框，让其宽为120px，高为20px，对齐方式为居中对齐，写出代码。

解析：

<input type="text" style="width: 120px; height: 20px; text-align: center"/>

10.3　思想太满，就会学不来（CSS属性）

第421道：
列举不重复的10个CSS属性。

解析：

- font-family：规定文本的字体系列；

- margin-top：设置元素的上外边距；

- margin-right：设置元素的右外边距；

- margin-bottom：设置元素的下外边距；

- margin-left：设置元素的左外边距；

- border-top-width：设置上边框的宽度；

- font-style：规定文本的字体样式；

- font-variant：规定是否以小型大写字母的字体显示文本；

- font-weight：规定字体的粗细；

- font-size：规定文本的字体尺寸。

第422道：
标签上alt与title属性的区别是什么？

解析：

alt是给搜索引擎识别时，在图像无法显示时的替代文本；title是关于元素的注释信息，主要是给用户解读的。当鼠标放到文字或是图片上时，有title文字显示。

第423道：
如何给元素添加圆角属性？

解析：

border-radius

10.4　面试失败十次，找第十一次坚持的借口（清除浮动与闭合浮动）

第424道：
清除浮动和闭合浮动的不同点？

解析：

清除浮动：清除对应的单词是clear，对应CSS中的属性有4个值分别是，是clear、left、right、both、none。

闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。

第425道：
写出CSS清除元素浮动常用的方法。

解析：

（1）使用空标签清除浮动，即clear: both;。

（2）使用overflow属性，即overflow:auto。“zoom:1”用于兼容IE6。

10.5　多项选择，任你选择（CSS定义标签）

第426道：
em为什么可以缩放，以什么为基准？

解析：

一个em表示一种特殊字体的大写字母M的高度。在网页上，一个em是网页浏览器的基础文本尺寸的高度，一般情况下它是16px。然而，任何人都可以改变这个基础尺寸的设置，因此，一个em对于有的人来说可能是16px，但是在其他人的浏览器上可能是24px。换句话说，em是一个相对的度量单位。

第427道：
下列标签可以不成对出现的是（　）

A. <html></html>

B. <p></p>

C. <tirle></title>

D. <body></body>

答案：
B

解析：

<html>与</html>标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体，<title>标签是<head>标签中唯一要求包含的东西，是网页设计里面的一对标识，表示网页主体，在它之间的东西是可以在网页展示的。这是网页设计中定义段落的标记，<p>称为开始标记，</p>称为结束标记。

第428道：
id为left的DIV标签，用CSS设置DIV的左边为红色实线，下面设置正确的是（　）

A. style="border-top:#ff0000 1 solid;"

B. style="border-left:1, #ff0000, solid;"

C. style="border-left:1 #ff0000 solid;"

D. style="border-left:1, #ff0000, dashed;"

答案：
C

解析：

第三个选项设置边框线为左，颜色为红色实线。

第429道：
CSS中的id标签和class标签，哪个定义的级别高？

解析：

id的级别高于class。

第430道：
在空白处填代码：

<div onclick=" ">单击这里，让字体颜色变红，背景变蓝</div>

解析：

color: red;background: blue;

第431道：
在使用下面的标题符号时，哪一个字体是最大的（　）

A. <h1>

B. <h2>

C. <h3>

D. <h4>

答案：
A

解析：

<h1>标签是字体最大的，<h4>标签是字体最小的。

第432道：
使文字加粗的除了<b></b>之外，还有_____。

解析：

strong也是给文字加粗的。

第433道：
下面哪一个标签可以产生一个回车换行（　）

A. <hr>

B. <br>

C. <tr>

D. <tl>

答案：
B

解析：

<hr>表示一条水平线，<br>表示插入一个简单的换行符，<tr>表示在HTML表格中的一行，* tr标签是成对出现的，以<tr>开始，</tr>结束。

第434道：
下面哪一个是符号&的符号码（　）

A. &quot

B. &amp

C. &comp

D. &nbsp

答案：
D

解析：

&nbsp是&的符号码。

第435道：
font-size：62.5%，解释一下如此设计字体大小的原因。

解析：

这主要是为了方便em和px的相互转换，em的初始值为1em=16px，这样的话，1.2em=19.2px，可是我们在设置时很少看见19.2px这样表示的大小，也就是说，在用px表示大小时，数值是不带小数位的。

10.6　不满足昨天的难度（简化CSS代码）

第436道：
请简化下面的CSS代码：

a) margin: 0px;
b) Padding: 10px 0 10px 0;
c) Border-width: 1px; border-style: solid; border-color: #ff5500;

解析：

{
Border: 1px #ff5500 solid
margin: 0px;
Padding: 10px 0 10px 0;
}

第437道：
&nbsp;&nbsp;前端工程师html<br></br>&nbsp;&nbsp;

以上代码中不合理的部分有哪些？

解析：

<br>标签是空标签，它意味着没有结束标签，因此，这样写<br></br>是错误的。

第438道：
请简化这段CSS代码：

.abc{padding-left:10px;padding-top: 20px;padding-bottom: 5px;padding-right:10px;}

解析：

.abc{padding:20px 10px 5px 10px;}

10.7　华丽的跌倒，胜过无谓的徘徊（CSS设置图片效果）

第439道：
常用的网页图像格式有（　）

A. gif，tiff

B. tiff，jpg

C. gif，jpg

D. tiff，png

答案：
C

解析：

gif格式采用无损压缩存储，在不影响图像质量的情况下，可以生成很小的文件，它支持透明色，可以使图像浮现在背景之上。

另外，网上常见的小动画大多是gif格式的，也叫逐帧动画，比如QQ表情动画等。gif格式文件的众多特点恰恰适应了Internet的需要，于是它成了Internet上最流行的图像格式。

jpg格式压缩的主要是高频信息，对色彩的信息保留较好，适合应用于互联网，可减少图像的传输时间，它是目前网络上最流行的图像格式。

第440道：
<img src="name" align="left">的意思是（　）

A. 图像相对于周围的文本左对齐

B. 图像相对于周围的文本右对齐

C. 图像相对于周围的文本底部对齐

D. 图像相对于周围的文本顶部对齐

答案：
A

解析：

图片的链接，图片名字为name，且align="left"表示图像相对于周围的文本左对齐。

10.8　缘分是一本书，翻得不经意会错过（CSS设置表格）

第441道：
HTML语言中，设置表格边框宽度的标签是（　）

A. <table border=#>

B. <table cellspacing=#>

C. <table cellpadding=#>

D. <table width=#%>

答案：
A

解析：

<table border="">里面可以添加很多布局元素，B是设置表格外间距的；C是设置表格内间距；D是设置表格的宽度而非边框宽。

第442道：
下面哪一个是表格单元格标记（　）

A. <tr>

B. <tl>

C. <td>

D. <tp>

答案：
C

解析：

<table>定义一个表格，每一个表格只有一对<table></table>，一张页面中可以有多个表格；<tr>定义表格的行，一个表格可以有多个行；<td>定义表格的单元格，每行可以有不同数量的单元格。

第443道：
判断题：不只表格可以用来对页面进行布局，层也同样可以。

解析：

对，表格和层都可以对页面进行布局，现在用层的比较多。

第444道：
在table中，tr是______，td是________。

答案：
行，列

解析：

<tr>定义表格的行，一个表格可以有多个行，<td>定义表格的单元格，每行可以有不同数量的单元格。

第445道：
HTML中，定义表格的宽度时，80px与80%的区别是什么？

解析：

px表示像素，%表示占整个页面的百分比。

10.9　不要在错的题上犹豫不决（背景图片）

第446道：
以下DIV的背景是什么颜色的？

.a{
background-color:#FF0000;
}
.b{
background-color:#00FF00;
}
<div class="b a"></div>

解析：

#00FF00

b覆盖了a。

第447道：
CSS3中背景图新增的属性是什么？属性值有哪些？

解析：

新增的属性：

（1）background-clip指定背景的显示范围。

（2）background-origin指定绘制背景图像的起点。

（3）background-size指定背景图片的尺寸大小。

（4）background-break指定内联元素的背景图像进行平铺时的循环方式。

属性值：

（1）border-box从边框区域向外裁剪背景。

（2）padding-box从补白区间向外裁剪背景。

（3）content-box从内容区域向外裁剪背景。

（4）no-clip从边框区域向外裁减背景。

10.10　面试是一把锁，你拿对钥匙了吗（CSS与表单）

第448道：
对于<from action= "URL" method=*>标签，其中*代表GET或（　）

A. SET

B. PUT

C. POST

D. INPUT

答案：
C

解析：

表单数据可以作为URL变量（method="get"）或者HTTP post（method="post"）的方式来发送。

第449道：
在Form中，method属性的哪种方法更具有保密性？

A. GET

B. POST

答案：
B

解析：

如果希望获得最佳表单传输性能，可以采用GET方法发送只有少数简短字段的小表单。如果安全性是个问题，那么我们建议选用POST方法。

第450道：
在Form中的input可以设置readonly和disable，请问这两项属性有什么区别？

解析：

readonly只针对input（text/password）和textarea有效，而disabled对所有的表单元素都有效，包括select、radio、checkbox、button等。

第451道：
关于表格表述正确的有（　）（多选）

A. 表格中可以包含tbody元素

B. 表格中可以包含caption元素

C. 表格中可以包含多个tbody元素

D. 表格中可以包含colgroup元素

E. 表格中可以包含col元素

答案：
ABCDE

解析：

表格结构用到的标签有caption、col、colgroup、tbody、td、tfoot、th、thead、tr，其中一个表格可以包含多个tbody，但只能有一个thead和一个tfoot。

第452道：
在Form中，input有哪些类型？各是做什么处理使用的？

解析：

在Form中，input是拥有类型最多的元素，分别有：text、password、radio、checkbox、file、button、image、submit、reset、hidden等。

text：文本框；password：密码框；radio：单选按钮；checkbox：复选框；file：文件选择框；button：单纯的按钮；image：后面必须跟随src属性并指定一张图片，它的作用是用一张图片作为按钮；submit：提交按钮；reset：重置按钮，重置表单中的所有内容，可以让用户重新写入；hidden：一个隐藏元素，用于提交表单时附带一些用户不需要填写的默认值，比如附件的容量、大小等。

10.11　有思维才是王牌（CSS定位）

第453道：
编写CSS让div2在div1的右下角。

解析：

#div1{position:relative;}, #div2{right:0px; bottom:0px; position:absolute;}

第454道：
请列举CSS中position的参数和作用。

解析：

position有4个可选值，分别是：static、absolute、fixed、relative。

position：static——无定位，改属性值是所有元素定位的默认情况，在一般情况下，我们不需要特别去声明，但在遇到继承的情况时，我们不愿意见到元素所继承的属性影响本身，从而可以用改属性来取消继承。

position：absolute——绝对定位，使用该属性能够很准确地将元素移动到想要的位置，它是相对独立出来的，丝毫不影响其他方向层。

position：fixed——相对于窗口固定定位，该元素的定位方式同absolute类似，但它的包含块是视区本身，在屏幕媒体（如Web浏览器）中，元素在文档滚动时不会再浏览器视察中移动。

position：relative——相对定位，是相对于元素默认的位置的定位。

10.12　提前进入，囤积自信（DIV布局）

第455道：
实现一个左右布局的结构，左侧自适应，右侧宽280px。

解析：

<div id="wrap">
<div id="content" style="height:100px;">左侧</div>
<div id="slidebar" style="height:100px;
width:280px;">右侧 </div>
</div>
<style>
#wrap{position:relative;}
#slidebar{position:absolute; right:0; top:0;}
#content{margin-right:280px;}
</style>

第456道：
为什么利用多个域名来存储网站资源会更有效？

解析：

- CDN缓存更方便；

- 突破浏览器并发限制；

- 节约cookie带宽；

- 节约主域名的连接数，优化页面响应速度；

- 防止不必要的安全问题。

第457道：
在空白处加上CSS，让这个DIV在页面居中（上下左右都居中）。

<div style="border:1px solid black;width:200px;height:200px;">hello</div>

解析：

poasition:absolute;left:50%;top:50%;margin-left:-100px;
margin-top:-100px;

第458道：
定义一个DIV，在IE8下高度为100px，在IE7下高度为120px，在IE6下高度为140px。

解析：

{padding-top:10px; height:90px;!Important; height:100px;}

IE6、IE7和IE8对DIV高度的解析是不一样的，在IE6下，DIV的高度和padding、margin没关系，而IE7、IE8则会受padding或者margin的影响。

第459道：
如何居中DIV？

解析：

对需要水平居中的DIV层添加以下属性：

margin-left：auto；margin-right：auto；

主要的样式定义如下：

body{text-align：center；}#center{margin-right:auto；margin-left：auto；}

说明：

首先在父级元素定义text-align：center；这个的意思就是将父级元素内的内容居中；对于IE来说，这样设定就已经可以了，但在mozila中不能居中，解决办法就是在子元素定义时再加上‘margin-right:auto；margin-left:auto;’需要说明的是，如果你想用这个方法使整个页面居中，建议不要套在一个DIV里，你可以依次拆出多个DIV，只是在拆出每个DIV时定义margin-right:auto；margin-left:auto;就可以了。

第460道：
下面关于<div>和<span>标记的描述，错误的是（　）。

A. <div>标记默认情况下是块模式，即标记前后有类似换行符一样的功能

B. <span>标记默认情况下是行模式，即标记前后内容在同行显示

C. <div>标记和<span>标记行块模式，可以通过CSS的display属性予以调整

D. 前后两个<div>标记块的内容，不能出现在同一行

答案：
D

解析：

<div>简单而言是一个区块容器标记，即<div>与</div>之间相当于一个容器，可以容纳段落、标题、表格、图片，乃至章节、摘要和备注等各种HTML元素。因此，我们可以把<div>与</div>中的内容视为一个独立的对象，用于CSS控制。声明时只需要对<div>进行相应的控制，其中的各种标记元素会因此改变。

<span>标记与<div>标记一样，作为容器标记而被广泛应用在HTML语言中。在<span>与</div>中间同样可以容纳各种HTML元素，从而形成独立的对象，在上例中，如果把“<div>”替换成“<span>”，样式表中把“div”替换成“span”，执行后会发现效果完全一样，可以说<div>与<span>这两个标记起到的作用都是独立出各个区块，在这个意义上两者没有太多的区别，大家可以自行尝试一下。

<div>标记与<span>标记的区别：<div>标记是一个块级元素，包围的元素自动换行。而<span>标记仅仅是一个行内元素，在它的前台不会换行。<span>没有结构上的意义，纯粹是应用模式，当其他行内元素都不合适时，就可以使用span元素。此外，<span>标记可以包含于<div>标记之中，成为它的子元素，而反过来则不成立，即<span>标记不能包含<div>标记。

第461道：
当<p>元素设置为bold时，以下哪条CSS语句的说法是正确的（　）

A. <p style= "text-size:bold;">

B. <p style= "font-size:bold;">

C. p{text-size:bold;}

D. p{font-weight:bold;}

答案：
D

解析：

font-weight的属性包括“normal”和“bold”两个。

10.13　拥有别人没有的（盒子布局）

第462道：
介绍CSS盒子模型。

解析：

如果CSS对HTML文档元素生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框（element box），那么我们可以形象地将其看作是一个盒子。CSS围绕这个盒子产生了一种“盒子模型”概念，通过定义一系列与盒子相关的属性（内容、填充、边框、边界），可以控制各个盒子乃至整个HTML文档的表现效果和布局结构。虽然CSS中没有盒子这个单独的属性对象，但它却是CSS中无处不在的一个重要组成部分。

第463道：
列出display的值，并说明它们的作用？

解析：

block：像块元素一样显示。

none：隐藏元素并释放其位置。

inline-block：像行内元素一样显示，但其内容像块元素一样显示。

list-item：像块类型元素一样显示，并添加样式列表标记。

第464道：
说说标准盒子模型和旧IE盒子模型有什么区别，以及触发不同模型的条件。

解析：

标准盒子模型是由margin、border、padding、content组成的，但content包含其他部分（即content是一个独立的部分）；而旧IE盒子模型的组成部分为margin、border、padding、content，它与标准盒子模型不同的是，旧IE盒子模型的content部分包含了border和padding。

10.14　既然无处可逃，不如帅气迎接（CSS排版）

第465道：
网页设计采用DIV+CSS有什么好处？

解析：

（1）大大缩减页面代码。

（2）对搜索引擎更加友好，同时获得更好的网站排名。

（3）兼容性卓越。

（4）缩短网站改版时间。

（5）强大的控制和排版布局能力。

（6）提高易用性。

（7）扩展性能优越。

（8）灵活的页面布局。

（9）表现和内容相分离。

第466道：
写出下面描述的CSS代码：

定义一个<div>标签，宽度为300px，字体颜色是#ff0，行高是23px，边框是红色，字体大小是12px，加粗，上下内边距为5px，左右内边距为10px，文字强制一行显示，超出的部分隐藏。

解析：

div{width:300px; color:#ff0; line-height:23px; border:1px solid red; font-size:12px; font-weight:bold; padding:5px 10px 5px 10px;
white-space:nowrap; overflow:hidden;}

第467道：
怎样使用一个层，使其垂直居中于浏览器中？

解析：

div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}

10.15　“限量版”的题（CSS注释）

第468道：
CSS选择符有哪些？哪些属性可以继承？

解析：

（1）通配选择符，语法为：* { sRules }

（2）类型选择符，语法为：E { sRules } td { font-size:14px; width:120px; }

（3）属性选择符，语法为：

E [ attr ] { sRules }

E [ attr = value ] { sRules }

E [ attr ~= value ] { sRules }

E [ attr |= value ] { sRules }

示例：

h[title] { color: blue; }/* 所有具有title属性的h对象*/

span[class=demo] { color: red; }

div[speed="fast"][dorun="no"] { color: red; }

a[rel~="copyright"] { color:black; }

（4）包含选择符，语法为：E1 E2 { sRules } table td { font-size:14px; }

（5）子对象选择符，语法为：E1 > E2 { sRules } div ul>li p { font-size:14px; }

（6）ID选择符，语法为：#ID { sRules }

（7）类选择符，语法为：E.className { sRules }

（8）选择符分组，语法为：E1 , E2 , E3 { sRules }

（9）伪类及伪对象选择符，语法为：

E : Pseudo-Classes { sRules }

( Pseudo-Classes )[:link :hover :active :visited :focus :first-child :first :left :right :lang]

E : Pseudo-Elements { sRules }

( Pseudo-Elements )[:first-letter :first-line :before :after]

可以继承的有：font-size、font-family、color。

不可继承的有：border、padding、margin、background-color、width、height等。

第469道：
在CSS的三种选择符中，哪个优先级最高（　）

A. 标签选择符

B. 类选择符

C. ID选择符

答案：
C

解析：

（1）继承不如指定。

（2）#ID>.class>标签选择符。

（3）包含越具体越强大。

（4）标签#ID>#ID，标签.class>.class。

四大原则的权重是：原则一>原则二>原则三>原则四。

第470道：
下列哪个不是CSS的选择符（　）

A. p

B. .td

C. #box

D. Shop

答案：
D

解析：

p——类型选择符：类型选择符就是网页元素本身，定义时直接使用元素名称。

.td——class选择符：在一个文档中可以为不同类型的元素定义相同的类名，class可以实现把相同样式的元素统一为一类，使用class选择符时要先为每个元素定义一个class属性。

#box—ID选择符：它是唯一的，不同元素的ID值是不能重复的，ID选择符为每个元素的具体对象定义不同的样式，方便用户更加精细的控制页面。使用ID选择符时要先为每个元素定义一个ID属性。

10.16　值得分享的考题（iframe）

第471道：
新的HTML5文档类型和字符集是？

解析：

HTML5文档类型：

<!doctype html>

HTML5使用UTF-8编码：

<meta charset="UTF-8">

第11章

出类拔萃，终成大器［DIV+CSS高级面试题］

还在迷茫中吗？页面布局摆平一切！CSS连接如同千军万马，更是使人心惊胆战；悬浮效果瞬间让你一步登天，位居榜首；CSS内外边距如同华丽的装扮，吸人眼球。

11.1　程序“猿”你懂了吗（DOCTYPE）

第472道：
<!DOCTYPE>标签的定义与用法。

解析：

定义：<!DOCTYPE>声明位于文档中最前面的位置，处于<html>标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。

该标签可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的HTML版本。（假如文档中的标记不遵循DOCTYPE声明所指定的DTD，这个文档除了不能通过代码校验之外，还有可能无法在浏览器中正确显示。）

用法：

（1）如果需要干净的标记，免于表现层的混乱，用XHTML Strict DTD类型。

（2）Transitional DTD可包含W3C所期望移入样式表的呈现属性和元素。如果用户使用了不支持层叠样式表（CSS）的浏览器，以至于不得不使用HTML的呈现特性时，用Transitional DTD类型。

（3）Frameset DTD被用于带有框架的文档。除Frameset元素取代了body元素之外，Frameset DTD等同于Transitional DTD。

第473道：
什么是DOCTYPE？你常用的DOCTYPE是什么？

解析：

DOCTYPE是DOCument TYPE（文档类型）的简写，用来说明所用的XHTML或者HTML是什么版本。

其中的DTD（例如上例中的xhtml1-transitional.dtd）为文档类型定义，里面包含了文档的规则，浏览器就根据定义的DTD来解释页面的标识，并展现出<!DOCTYPE html>。

11.2　面试其实很简单，就看你了（CSS Hack）

第474道：
介绍你所知道的CSS Hack技巧。

解析：

_width针对于IE6。*width、+width针对于IE6和IE7。

color: red\9;/*IE8以及以下版本浏览器*/（但是测试可以兼容到IE10）

*+html与*html是IE特有的标签，Firefox暂不支持，而*+html又为IE7的特有标签（但是测试*html兼容IE6，IE7，IE8，IE9，IE10。*+兼容IE7，IE8，IE9，IE10）。

!important在IE中会被忽视，IE6,IE7,IE8不识别，IE9+（包括IE9）是识别的。

第475道：
下列CSS Hack的写法分别用于哪些浏览器。

A. _

B. *和+

C. \0

D. \9

E. \9\0

F. !important

解析：

A. _：用于IE6。

B. *和+：用于IE6，IE7。

C. \0：用于IE8，IE9。

D. \9：用于IE6，IE7，IE8，IE9。

E. \9\0：用于IE9。

F. !important：除IE6不能识别外； Firefox，IE9，IE8，IE7都能识别。

11.3　别让面试，输给了心情（悬浮效果）

第476道：
请用DIV+CSS简单写出一段“返回顶部”的悬浮效果。

解析：

<div style="position:fixed; top:50%; left:50%; margin:-250px 0 0 -250px; height:500px; width:500px; z-index:999;">
<a href="广告图链接"><img src="广告图路径" alt="弹出广告图"/></a> </div>

11.4　面试不要瞎忙，不经意的才是最好的（CSS优先级）

第477道：
内联和important哪个优先级高？

解析：

内联的优先级最高。

第478道：
请解释一下CSS的优先级，并说明优先级算法如何计算？

解析：

CSS优先级包含四个级别：文内选择符、id选择符、class选择符、元素选择符。

CSS优先级的计算规则如下：

元素标签中定义的样式（style属性），加1,0,0,0。

每个id选择符（如#id），加0,1,0,0。

每个class选择符（如class）、每个属性选择符（如[attribute=]）、每个伪类（如hover）加0,0,1,0。

每个元素选择符（如p）或伪元素选择符（如：firstchild）等，加0,0,0,1。

然后，将这四个数字分别累加，得到每个CSS定义的优先级的值。

接着，从左到右逐位比较大小，数字大的CSS样式的优先级就高。

注意：

（1）!important声明的样式优先级最高，如果有冲突，那么再进行计算。

（2）如果优先级相同，则选择最后出现的样式。

（3）继承得到的样式的优先级最低。

第479道：
如何解决IE6下select优先级高于div而导致的无法遮盖问题？

解析：

有两种解决办法：

（1）当浮动层div出现时，用JS将select隐藏，当浮动层div消失时，select恢复出现。这种方法早期用得比较多，这里不多介绍。

（2）用select同级别元素——iframe标签，将实际的浮动层div和iframe放在一起，间接地使div遮住select。

第480道：
CSS中的id标签和class标签，哪个定义的级别高？

解析：

在结构相同情况下，id优先级要高于class。

id是唯一的。class在一个页面可以出现多个。

11.5　我不知将去何方，但我已在路上（定位）

第481道：
position都有哪些属性？fixed是相对谁来定位的？

解析：

static：默认属性，静态定位。

relative：相对定位，相对于父元素的定位，需要配合top、left、right、bottom、z-index等属性。

absolute：绝对定位，相对于父元素的定位，需要配合top、left、right、bottom、z-index等属性。

fixed：固定定位，相对于父元素的定位，需要配合top、left、right、bottom、z-index等属性（IE6不支持）。

第482道：
在position值中，relative和absolute如何定位原始点？

解析：

相对定位，它是参照父级的原始点为原始点，无父级则以body的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，前级的原始点则参照父级内容区的原始点进行定位。

绝对定位，它是参照浏览器的左上角，配合top、right、bottom、left（下面简称TRBL）进行定位，在没有设定TRBL时，默认依据父级的坐标原始点为原始点。如果设定了TRBL，并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。

第483道：
定位的值有哪几种？区别是什么？

解析：

static：默认值，没有定位，元素出现在正常的流中（忽略top、bottom、left、right或者z-index声明）。

relative：生成相对定位的元素，相对于其正常位置进行定位。元素的位置通过left、top、right，以及bottom属性进行规定。

fixed：元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身。

absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过left、top、right，以及bottom属性进行规定。

第484道：
CSS中的position属性有几种取值？分别说一下它们的作用。

解析：

position属性取值：static、relative、absolute、fixed、inherit。

postision：static，始终处于文档流给予的位置。看起来好像没有用，但它可以快速取消定位，让top、right、bottom、left的值失效。在切换时可以尝试这个方法。

除了static值，在其他三个值的设置下，z-index才会起作用。（确切地说，z-index只在定位元素上有效）。

position：relative和position：absolute都可以用于定位，区别在于前者的DIV还属于正常的文档流，后者已经脱离了正常文档流，不占据空间位置，不会将父类撑开。定位原点relative是相对于它在正常文档流中的默认位置偏移，它原本占据的空间任然保留；absolute相对于第一个position属性值不为static的父类。所以设置了position：absolute，其父类的该属性值要注意，而且overflow：hidden也不能乱设置，因为不属于正常文档流，不会占据父类的高度，也就不会有滚动条。

fixed的旧版本不支持IE，却是很有用的。其定位原点相对于浏览器窗口，而且不能变。常用于header、footer，或者一些固定的悬浮div，随滚动条滚动既稳定又流畅，比JS好多了。fixed可以有很多创造性的布局和作用，但兼容性是个问题。

position：inherit。规定从父类继承position属性的值，所以这个属性也是有继承性的，但是任何版本的IE都不支持该属性值。

11.6　面试如一道弧线，却能摆平一切（页面布局）

第485道：
在定义通用样式时，经常会使用ul{margin:0,padding:0}的写法，这样做的目的是什么？

解析：

删除浏览器这些默认值，方便后面的设置。

第486道：
判断题：CSS属性font-style用于设置字体的粗细。

答案：
错。

解析：

font_weight用于设置字体的粗细。

第487道：
在HTML页面布局中，position的默认值是什么？

解析：

static

第488道：
制作一个宽为800px，高为500px的DIV，使其在页面上下左右绝对居中。

解析：

<div style="width:800px; height:500px; position:absolute; top:50%; left:50%; margin-left:-400px; margin-top:-250px; background:red;">

第489道：
一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度。

解析：

<div style="width:500px;position:absolute;left:200px;top:100px;" >
<div id="px1" style="position:absolute; left:0px;height:100px; width:150px; background-color:green;"></div>
<div id="px2" style="float:left; height:100px; width:100%; background-color:red;"></div>
<div id="px3" style="position:absolute; right:0px;height:100px; width:150px; background-color:gray;"></div>
</div>

11.7　程序员，我不知道你心里是怎么想的（CSS字体）

第490道：
判断题：如果浏览者没有安装网页上所设置的文字，则会以默认的字体取代原来的。

答案：
对。

解析：

@font-face版本：CSS2兼容性：IE4+

语法：@font-face { font-family : name ; src : url ( url ) ; sRules }

取值：name——字体名称。任何可能的font-family属性的值。

url (url)——使用绝对或相对url地址指定OpenType字体文件。

sRules——样式表定义。

说明：设置嵌入HTML文档的字体。此规则无默认值。

此规则让你能够在网页上使用客户端本地系统上可能没有的字体。url地址必须指向OpenType字体文件（.eot或.ote）。此文件包含可以转换为TrueType字体的压缩字体数据，可以用来提供HTML文档使用该字体，或取代客户端系统已有的同名字体。此文件可以使用Microsoft WEFT工具制作。

11.8　面试时谁没有耐心，谁就没有智慧（CSS表格）

第491道：
在表单中包含性别选项，且默认状态为“男”被选中，下列正确的是（　）

A. <input type=radio name=sex checked>男

B. <input type=radio name=sex enabled>男

C. <input type=checkbox name=sex checked>男

D. <input type=checkbox name=sex enabled>男

答案：
A

解析：

单选框被选中为checked。

第492道：
collpadding td标签中的colspan、rowspan分别起什么作用？

解析：

colspan是跨列，rowspan是跨行，可以看作是网页设计表格中的列和行的一个属性。

跨列相当于把两列或者多列合并成一个单元格。

同理，跨行是把两行或者多行合并成一行。

colspan和rowspan分别作用于网页设计表格的<td></td>、<tr></tr>中。

两者的作用都是合并，其主要区别就是，一个是水平方向可以合并列，即colspan；一个是垂直方向可以合并行，即rowspan。

11.9　面试，你紧张了吗（CSS内外边距）

第493道：
分别用什么改变元素的外边距和改变元素的内填充？

解析：

margin和padding

第494道（判断题）：
一个大的DIV块里包含一个小的DIV，设置小的DIV与大的DIV的左边距为5px，该样式的标准写法是margin-left:5px;

答案：
错。

解析：

给大盒子设置成padding_left:5px;

11.10　不能白看，看完必过（CSS文本）

第495道：
IE中如何让超出宽度的文字显示为省略号？

解析：

div.titleholder {
font-family: ms sans serif, arial;
font-size: 8pt;
width: 100;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

第496道（判断题）：
CSS中的属性overflow用于设置元素超过宽度时，是否隐藏或显示滚动条？

答案：
对。

解析：

overflow超出的部分会被隐藏，并且当我们给DIV加上overflow: hidden属性时，其中的带浮动属性的DIV在这个立体的浮动中已经被清除了。

第497道：
请写一下首行缩进两个字符的CSS代码及常见的用法。

解析：

text-indent:2em;

text的意思是文本；indent在计算机英语中的意思是缩进；em的意思是相对文字大小，1em就是一个文字大小，2em就是两个文字大小。

第498道：

<style type="text/css">
#text{color : red}
p#text{color :brown}
p.text{color : green}
p{color : while}
</style>
<p id="text" class="text">请说出我的颜色</p>

请问p标签的文本颜色是什么？

答案：
red

解析：

#text{color : red}的优先级最高。

第499道：
为什么在Firefox下文本无法撑开容器的高度？

解析：

标准浏览器中固定高度值的容器是不会像IE6那样被撑开的，那么当我们既想设置为固定高度，又想能被撑开时，需要怎样设置呢？办法就是去掉height，设置min-height:200px;这里为了照顾不认识min-height的IE6，可以这样定义：

{
height:auto!important;
height:200px;
min-height:200px;
}

第500道：
请写一段CSS代码，让Chrome支持小于12px的文字。

解析：

html,body{-webkit-text-size-adjust:none;}或.divcss5{-webkit-text-size-adjust:none;}

11.11　面试如同千军万马，更是使人心惊胆战（CSS链接）

第501道：
DIV CSS设计中如何去掉链接的虚线框？

解析：

a:focus {
outline:none;
-moz-outline:none;
}

第502道：
以下链接到电子邮件的正确格式是（　）

A. <A href="mailto://123@abcd.com">邮箱</A>

B. <A href="mail to:123@abcd.com">邮箱</A>

C. <A href="#mailto:123@abcd.com">邮箱</A>

D. <A href="mail to://123@abcd.com">邮箱</A>

答案：
A

解析：

我们要在网页中创建一个形如“mailto: aaa@5icool.org”这样的超级链接，用鼠标单击一下该超级链接，浏览器会自动调用系统默认的邮件客户端程序，同时在邮件编辑窗口的收件人设置栏中自动写上收件人的地址，而其他的内容都是空白的，留给访问者自行填写。

第503道：
在CSS中，下面哪种方法表示超链接文字在鼠标经过时，超链接文字无下画线？（　）

A. A:link{text-decoratton:underline}

B. A:hover{text-decoratton:none}

C. A:active{text-decoratton:blink}

D. A:visited{text-decoratton:overline}

答案：
B

解析：

text-decoratton是文字修饰效果的意思；none参数表示超链接文字不显示下画线。

第504道：
下面哪一个属性可以在新窗口打开一个链接（　）

A. _parent

B. _blank

C. _self

D. _top

答案：
B

解析：

_blank表示在新的窗口打开链接。

target属性值一般默认是_self，表示在原来的窗口打开链接，只要把target的属性值改为_blank就可以了。

第505道（判断）：
超链接只能在不同的网页之间进行跳转。

答案：
错

解析：

添加超链接<a href="a.html" target="_blank">点此跳转</a>，就可以跳转到a.html了。

第506道：
怎样解决超链接访问过后hover样式不出现的问题？

解析：

<style type="text/css">
<!--
a:link {}
a:visited {}
a:hover {}
a:active {}
-->
</style>

第507道：
在新窗口打开链接的方法是________。

答案：

target=_bank

第12章

炉火纯青，大杀四方［DIV+CSS终极面试题］

说得简单做起来难，三层构成秒杀全场。群压四方的兼容问题，更是需要万众一心，CSS Sprites可遇而不可求，CSS浮动多美好。

12.1　面试就像自行车，说得简单，其实还要靠自己（三层构成）

第508道：
前端页面有哪三层构成，分别是什么？作用是什么？

解析：

（1）网页的结构层（structural layer），由HTML或XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达“这是一个文本段。”了这样一种语义。

（2）网页的表示层（presentation layer），由CSS负责创建。CSS对“如何显示有关内容”的问题做出了回答。

（3）网页的行为层（behavior layer），负责回答“内容应该如何对事件做出反应”这一问题。这是JavaScript语言和DOM主宰的领域。

12.2　面试就算终有一散，也别辜负相遇（CSS Sprites）

第509道：
谈谈对CSS Sprites技术优缺点的理解。

解析：

1. CSS Sprites的优点

（1）利用CSS Sprites能很好地减少网页的http请求，从而大大提高了页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

（2）CSS Sprites能减少图片的字节，曾经多次比较过，把3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

2. CSS Sprites缺点：

（1）在图片合并时，要把多张图片有序的、合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景。这些还好，最痛苦的是，在宽屏及高分辨率的屏幕下的自适应页面，如果图片不够宽，很容易出现背景断裂；

（2）CSS Sprites在开发时比较麻烦，要通过Photoshop或其他工具测量计算每一个背景单元的精确位置，这是“针线活”，没什么难度，但是很烦琐。幸好腾讯的鬼哥用RIA开发了一个CSS Sprites样式生成工具，虽然在一些使用上还不够灵活，但是已经比Photoshop测量方便多了，而且样式直接生成，只需复制就OK！

（3）CSS Sprites在维护时比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，所以无需改的地方最好不要动，这样避免改动更多的CSS。如果在原来的地方放不下，那么只能（最好）往下加图片，此时图片的字节就增加了，且还要改动CSS。

第510道：
DIV+CSS的布局与table布局相比有什么优点？

解析：

（1）改版的时候更方便，只要改CSS文件。

（2）页面加载速度更快，结构化清晰，页面显示简洁。

（3）表现与结构相分离。

（4）易于优化，搜索引擎（SEO）更友好，排名更容易靠前。

第511道：
如何使用CSS Sprites？

解析：

HTML结构：

<ul>
<li id="nav_1"></li>
<li id="nav_2"></li>
<li id="nav_3"></li>
</ul>

CSS代码：

<style>
#nav_1,#nav_2,#nav_3{width:80px;height:24px;
background:url(images/nav.gif) no-repeat;}
#nav_1{background-position: -5px -10px;}
#nav_2{background-position: -105px -10px;}
#nav_3{background-position: -210px -10px;}
</style>

12.3　面试短短的话语，却包含万千（CSS中a的伪类）

第512道：
CSS的伪类有哪些？有什么作用？在各个浏览器下都兼容吗？

解析：

在W3C规范中，伪类有：active、hover、link、visited。

[CSS1]所有主流浏览器都支持以上伪类，但是只对<a href>标签上的伪类支持最好。

[CSS2]有3个focus：如果规定了<!DOCTYPE>，将在主流浏览器&IE8+中支持（否则IE不支持）。

first-child（首个子对象）：必须声明<!DOCTYPE>才能够确保在IE中正常支持。

lang（语言）：如果规定了<!DOCTYPE>，将在主流浏览器&IE8+中支持（否则IE不支持）。

第513道：
列举CSS中a的伪类，并描述他们的定义顺序？

解析：

在CSS中定义a:link、a:visited、a:hover、a:active顺序。

a:link、a:hover、a:active、a:visited这几个元素，定义CSS时顺序不同，也会直接导致链接显示的效果不同。

举例来说：想让未访问链接颜色为蓝色，活动链接为绿色，已访问链接为红色。

第一种情况：定义的顺序是a:visited、a:hover、a:link，这时会发现：把鼠标放到未访问过的蓝色链接上时，它并不变成绿色，只有放在已访问的红色链接上，链接才会变绿。

第二种情况：把CSS定义顺序调整为a:link、a:visited、a:hover，这时，无论鼠标经过的链接有没有被访问过，它都会变成绿色。这是因为，一个鼠标经过的未访问链接同时拥有a:link、a:hover两种属性，在第一种情况下，a:link离它最近，所以它优先满足a:link，而放弃a:hover的重复定义。在第二种情况下，无论链接有没有被访问过，它首先要检查是否符合a:hover的标准（即是否有鼠标经过它）。如果满足，则变成绿色；如果不满足，则继续向上查找，一直找到满足条件的定义为止。

第514道：
CSS新增伪类有哪些？

解析：

常用于控制表单控件有:enabled、:disabled和:checked。

其中，:enabled、:disabled表示控制表单控件的禁用状态。

:checked表示单选框或复选框被选中。

12.4　面试要勇敢，前方的路很长（CSS浏览器兼容）

第515道：
你知道哪些CSS浏览器兼容性问题。

解析：

（1）div的垂直居中问题。vertical-align:middle;将行距增加到和整个div一样高line-height:200px;然后插入文字，就垂直居中了。缺点是要控制内容不要换行。

（2）margin加倍的问题。设置为float的div在IE下设置的margin会加倍。这是一个IE6都存在的Bug。解决方案是在这个div里面加上display:inline;。例如：<#div id="imfloat">相应的CSS为#IamFloat{ float:left; margin:5px;/*IE下理解为10px*/display:inline;/*IE下再理解为5px*/}。

（3）浮动IE产生的双倍距离#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离display:inline；这里细说一下block与inline两个元素。block元素（块元素）的特点是，总是在新行上开始，高度，宽度，行高，边距都可以控制；Inline元素（内嵌元素）的特点是，和其他元素在同一行上，不可控制；#box{ display:block; //可以为内嵌元素模拟为块元素display:inline; //实现同一行排列的效果diplay:table;

（4）IE与宽度和高度的问题。IE不认得min这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，在IE下等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

第516道：
请列举IE6的一些Bug的解决方法。

解析：

1. IE6双倍边距Bug

当页面上的元素使用float浮动时，不管是向左浮动还是向右浮动，只要该元素带有margin像素，就会使该值乘以2，例如，在IE6中，“margin-left:10px”的值就会被解析为20px。想要解决这个Bug就需要在该元素中加入display:inline或display:block，明确其元素类型即可解决双倍边距的Bug。

2. IE6中3px问题

当元素使用float浮动后，元素与相邻的元素之间会产生3px的间隙。诡异的是，如果在相邻容器的内部，右侧的容器没设置高度时出现3px的间隙，那么当设定高度后又跑到容器的相反侧了。要解决这类Bug的话，需要使布局在同一行的元素都加上float浮动。

3. IE6中奇数高宽的Bug

IE6中奇数的高宽显示大小与偶数高宽显示大小存在一定的不同。其主要问题出在奇数高宽上。要解决此类问题，只需要尽量将外部定位的div高宽写成偶数即可。

4. IE6中图片链接的下方有间隙

IE6中图片的下方会存在一定的间隙，尤其在图片垂直挨着图片的时候，即可看到这样的间隙。要解决此类问题，需要将img标签定义为display:block或定义vertical-align对应的属性，也可以为img对应的样式写入font-size:0。

5. IE6中空元素的高度Bug

如果一个元素中没有任何内容，当在样式中为这个元素设置了0～19px之间的高度时，此元素的高度始终为19px。

解决的方法有4种：

- 在元素的CSS中加入：overflow:hidden；

- 在元素中插入HTML注释：<!– >；

- 在元素中插入HTML的空白符：&nbsp；

- 在元素的CSS中加入：font-size:0。

6. 重复文字的Bug

在某些比较复杂的排版中，有时候浮动元素的最后一些字符会出现在clear清除元素的下面。

解决方法如下：

- 确保元素都带有display:inline

- 在最后一个元素上使用margin-right:-3px

- 为浮动元素的最后一个条目加上条件注释：<!– [if !IE]>xxx<![endif]–>

- 在容器的最后元素使用一个空白的div，为这个div指定不超过容器的宽度

7. IE6中z-index失效

具体Bug为，如果元素的父级元素设置的z-index为1，那么其子级元素再设置z-index时会失效，其层级会继承父级元素的设置，造成某些层级调整上的Bug。

第517道：
请尽可能多列举IE6、IE7、Firefox浏览器的常见CSS兼容性差别，以及解决方法？

解析：

1. 在Firefox下给div设置padding后会导致width和height增加，但IE不会。可用!important解决，如width:115px! important; width; 120px; padding: 5px；

必须注意的是，!important一定要在前面。

2. 居中问题

（1）垂直居中。将line-height设置为与当前div相同的高度，再使用verticalalign: middle（注意内容不要换行）。

（2）水平居中。可使用margin: 0 auto;（当然不是万能）。

（3）若需给a标签的内容加上样式，需要设置display: block;（常见于导航标签）。

（4）Firefox和IE对box理解的差异，导致了相差2px，还有设为float的div在IE下margin加倍等问题。

（5）ul标签在Firefox下面默认有list-style和padding。最好事先声明，以免引起不必要的麻烦（常见于导航标签和内容列表）。

（6）作为外部wrapper的div不要定死高度，最好还加上overflow: hidden以达到高度自适应。

（7）关于手形光标cursor: pointer，而hand只适用于IE。

使用兼容代码是兼容最推荐的模式。

第518道：
一个网页制作完成后，在发布之前，我们会对页面进行测试，测试内容主要包括哪几个方面？

解析：

测试内容主要包括以下几个方面。

（1）页面效果是否美观。

（2）链接是否完好。

（3）页面功能（如验证、交互等）是否正确。

（4）测试不同浏览器的兼容性。

第519道：
在网页设计与制作时，为了使制作出来的网页下载速度快、布局合理、浏览方便、和谐悦目，应注意哪些问题？

解析：

（1）网页文件大小。

（2）页面布局。

（3）页面导航。

（4）图像大小。

（5）颜色搭配。

（6）背景图像。

第520道：
IE6下为什么无法定义1px左右高度的容器？

解析：

IE6下出现这个问题是由默认的行高造成的，解决的方法有很多，例如：overflow:hidden | zoom:0.08 | line-height:1px。

第521道：
Firefox嵌套DIV标签的居中问题有什么解决方法？假定有如下情况：

<div>
<div id="b"></div>
</div>

要实现b在a中居中放置，一般只需要在CSS中设置a的text-align属性为center，此方法在IE里看起来一切正常，但是在Firefox中b却是居左的。

解析：

解决办法就是设置b的横向margin为auto。例如，设置b的CSS样式为：margin:0 auto;。

第522道：
如何用CSS分别定义IE6、IE7、IE8的width属性？

解析：

_width:6px; /*IE6*/
+width:7px; /*IE7*/
width:8px\0; /*IE8*/

12.5　程序“猿”看完就乐了（CSS水平对齐）

第523道：
一个盒子里面一张图片水平且垂直居中（盒子大小随意），试写出它的样式和HTML。

解析：

<!DOCTYPE html>
<style>
div {
width:200px;height:200px;
border:1px solid #CCC;
overflow:hidden;
/*居中实现*/
text-align:center;
font-size:0px;
line-height:200px;
/*兼容IE6*/
_font-size:178px;
}
img {vertical-align:middle;}
</style>
<div>
.<img src="http://www.web-tinker.com/images/signet.png" />
</div>

12.6　“面试”是一件多么美的事（CSS浮动）

第524道：
简单解释一下浮动和它的工作原理，并提供一下清除浮动的技巧？

解析：

浮动是指浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框时停留。

技巧：

（1）使用空标签清除浮动。这种方法是在所有浮动标签后面添加一个空标签，定义css clear:both。弊端就是增加了无意义标签。

（2）使用overflow。给包含浮动元素的父标签添加CSS属性overflow:auto; zoom:1，其中zoom:1用于兼容IE6。

（3）使用after伪对象清除浮动。该方法只适用于非IE浏览器。使用中需注意以下几点：

- 该方法中必须为需要清除浮动元素的伪对象设置height:0，否则该元素会比实际高出若干像素；

- content属性是必须的，但其值可以为空，讨论该方法时把content属性的值设为“.”，但为空也是可以的。

第525道：
请编写一个div的CSS，使这个div能够居中浮动显示。

解析：

div{
position:absolute;
height:200px;
width:200px;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}

第526道：
当内部容器使用了float:left后，你会用哪些方法对父容器清除浮动，并谈一下各自优缺点？

解析：

1. 使用overflow清除

注意兼容问题：Block Formatting Contexts概念是在CSS 2.1规范内被提出的。因此在IE6/IE7中并不被支持，这是由于之前的IE版本仅仅实现了CSS 1规范标准，以及一部分CSS 2.0规范标准。在IE7中，overflow值为非visible时，可以触发hasLayout特性，这使得IE7同样可以使容器包含浮动元素。

2. 使用display:table清除

注意兼容问题：除去Block Formatting Contexts在IE6/IE7中的兼容性外，display:talbe系列样式设定也不在IE6/IE7的支持范围之内。

3. 使用float:left:和float:right;

虽然这种方式并没有兼容问题，但在实际使用中并不推荐。因为很容易推断出，页面中只要有一个浮动元素，使用该方法清理浮动就不可避免地使页面所有元素都浮动才可以达到预期效果。

12.7　面试是不可缺少的美好亮点（CSS优势）

第527道：
总结学习CSS容易出现错误的内容。

解析：

（1）对于布局标签的定义。有时候写好了CSS，但是反复调试却发现效果差强人意，总有那么一块空白，挥之不去。其实这就是对于标签定义的不严谨造成的。因为在XHTML的部分标签里，有一些默认属性值不一定为空或零。

（2）缩写和大小写问题。CSS对于class和id是区分大小写的，所以当样式不生效时，建议先检查一下大小写问题。

（3）少用限定，多用继承。

（4）多重class及就近优先原则。

（5）链接的正确写法:link :visited :hover :active。

第528道：
什么是CSS？它能做些什么？

解析：

CSS就是一种叫作样式表（Stylesheet）的技术。也有的人称之为层叠样式表（Cascading Stylesheet）。在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者不同页数的网页的外观和格式。

它的作用：

（1）在几乎所有的浏览器上都可以使用。

（2）以前必须通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。

（3）使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。

（4）可以轻松地控制页面的布局。

（5）可以将许多网页的风格格式同时更新，不用再一页一页地更新了。

12.8　你可知道面试的重要（IE6常见问题）

第529道：
现在我们使用的IE的版本一般是多少，IE的英文全称是什么？

解析：

目前IE的最高版本是IE11，英文全称是：Internet Explorer。现在IE Internet Explorer 6.0 SP2/5.5/5.0/6.0 SP1/7.0 beta2/7.0 beta3都算对。IE12正在研发中，正式发布还需要很久。

第530道：
简述IE6、IE8、IE11的区别。

解析：

1. 盒子模型

- IE6：（使用!DOCTYPE声明指定standards-compliant模式），margin-left + border-left + padding-left + width + padding-right + border-right + marginright，如果没有声明为标准模式，则为：margin-left + width + marginright。

- IE8：同IE6的标准模式。

- IE11：同IE6的标准模式，但IE11遵循CSS3标准。

2. 内容宽度超过容器的宽度

- IE6：内容会撑开容器的宽度。

- IE8：内容会溢出，容器不会被撑开。

- IE11：同IE8。

3. 容器内的内容有浮动属性，容器没有设置浮动且宽度超过内容的宽度

- IE6：容器的高度会被内容撑开。

- IE8：容器高度不会被撑开。

- IE11：同IE8。

第531道：
如何解决IE6的双倍边距Bug？

解析：

给当前元素添加样式，使当前元素不为块，如：display:inline;display:list-item;，这样当元素浮动时就不会在IE6下面产生双倍边距的问题了。

第532道：
在IE6中无法定义图片的透明，怎么解决？

解析：

只需要在png背景的元素CSS中添加微软特有的滤镜就可以了。例如：

_background:none;filter:progid:DXImageTransform.Microsoft.A lphaImageLoader (src='图片路径');

需要注意：此图片路径若为相对路径，则是HTML文件的相对路径，而不是CSS文件的相对路径。

第533道：
请写出5条Firefox和IE的脚本兼容问题。

解析：

（1）正式表达式问题。

（2）移除Select的条目。

（3）showModalDialog。

（4）childNodes。

（5）removeChild。

（6）script跨域问题。

综合提升

第534道：
如何实现上、左、右div满屏布局？

解析：

<html>
<style>
*{ margin:0; padding:0;}
body{ width:100%;}
#div1{width:100%; height:150px;margin:0 auto; background:#F00;}
#box{width:100%; margin:0 auto; height:300px;}
#box #div2{width:20%; float:left; background-color:#00F;height:300px;}
#box #div3{ width:78%; float:right; height:300px; background-color:#F60;}
</style>
<body>
<div id="div1"></div>
<div id="box">
<div id="div2"></div>
<div id="div3"></div>
</div>
</body>
</html>

第535道：
在网页设计中DIV标记有何作用？

解析：

DIV标记是一个区块级的HTML标记，在该标记之间可以添加段落、表格、图片等内容，使同一个DIV标记中的元素具有相同的样式，并可在页面显示时同时出现、移动及隐藏。

它的主要作用如下。

（1）将一些标记元素组织起来，应用DIV的属性为这些标记元素定义统一的样式；

（2）利用其z-index属性，实现页面内各元素的重叠显示效果；

（3）使页面上显示更多的特效功能。

第536道：
如果一个网页需要同时有多种语言文字，那么网页需要用什么编码格式。

解析：

UTF-8是世界通用的语言编码格式。

网页使用UTF-8编码唯一的好处是，无论操作系统使用的是简体中文（GB2312字符集）、繁体中文（BIG5字符集），或者是朝鲜文、日文、法文、德文、俄文、阿拉伯文、希伯来文、西班牙文、葡萄牙文等各种语言文字，在使用这些语言文字时，都可以正常显示在网页中，其他任何人浏览时都会正常显示，不会有乱码，也不会有重码或字符冲突，不需要调整页面的语言编码设置即可正常浏览，多种语言字符可以同时共存在页面上。

第537道：
左侧固定宽度为200px，右侧宽度自适应浏览器分辨率，试写出DIV的样式和HTML。

解析：

<div>
<div id="right";style="height:100px;width:200px;float:right;background-color:red; "></div>
<div id="left"style="height:100px;margin-right:200px;background-color:green;"></div>
</div>

第538道：
CSS+DIV开发Web页面的优势有哪些？

解析：

（1）CSS+DIV，在这个网页设计模式中，DIV承担了网页的内容，CSS承担了网页的样式。这样就使网页的内容和样式分离开来，有利于页面的维护升级。

（2）有助于提高搜索引擎亲和力（快速找到需要的数据，而不像在table中需要一层层地查找）。

（3）有助于页面的重构（如在blog中更换皮肤，直接套用另外一套样式就可以实现，而不用改动网页脚本）。

第539道：
如何用CSS分别单独定义IE6、IE7、IE8的width属性（举例说明）。

解析：

height: 100px; /*所有浏览器通用*/

height: 100px !important; /*IE7和Firefox共用*/

color:#090\9; /* IE6、IE7、IE8*/

+color:#f00; /*只针对IE7*/

color:#f00; /* IE6、IE7*/

_color:#ff0; /* IE6*/

第540道：
目前常用的Web标准静态页面语言是__________。

答案：
HTML

解析：

常用的标记语言有：SGML（标准通用标记语言，元语言）、HTML（超文本标记语言）、XML（扩展标记语言，定义数据结构，适合数据传输）。

第541道：
合理的页面布局中常听过结构与表现分离，那么结构是_______，表现是________。

答案：
DIV，CSS样式。

解析：

在网页中，网页的结构就是DIV，表现形式就是CSS样式。

第542道：
最常遇到的兼容Bug有哪些？有哪些问题解决起来是最麻烦的？

解析：

（1）不同浏览器的标签默认的外补丁和内补丁不同。

（2）在块属性标签float后，又有横行的margin情况下，IE6显示的margin比设置的大。

（3）设置较小高度标签（一般小于10px），在IE6、IE7、遨游中，高度超出自己设置的高度。

（4）行内属性标签，设置display:block后采用float布局，又有横行的margin的情况下，IE6间距会产生Bug（类似第二种）。

（5）图片默认有间距。

（6）标签最低高度设置min-height不兼容。

（7）透明度的兼容CSS设置。

其中，不同浏览器的标签默认补丁，以及IE6 png、IE6 fixed的兼容问题不是很好解决。

第543道：
在Web标准中，为什么IE无法设置滚动条颜色？

解析：

将body换成html，即：

html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}

第544道：
DOCTYPE的作用？严格模式与混杂模式的区别，如何触发这两种模式，区分它们有何意义？

解析：

DOCTYPE是DOCument TYPE（文档类型）的简写，是一组机器可读的规则，它们指示(X)HTML文档中允许有什么，不允许有什么，DOCTYPE正是用来告诉浏览器使用哪种DTD，一般放在(X)HTML文档开头，用以告诉其他人这个文档的类型风格。

区别：严格模式是浏览器根据Web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法，如<br/>，混杂模式则是一种向后兼容的解析方法。

触发：根据不同的DTD触发，如果没有声明，那么默认为混杂模式。

第4篇　江湖路，无尽头

——jQuery任逍遥

jQuery是JavaScript轻量级的框架（库），它简化了HTML文档遍历、事件处理、动画，并能轻松处理Ajax交互。在本篇，您将学习到如何选取HTML元素，以及如何对它们执行类似隐藏、移动，以及操作其内容等知识。

第13章

刻苦学艺，心无旁骛［jQuery初级面试题］

jQuery第一阶段——绑定事件不再烦恼。跟着表单走，无名变有名。jQuery选择器让你眼花缭乱，绑定事件使你出其不意就可以将对方绑定，让对方听从你的一切派遣。

13.1　要想简单，那就简单（选择器）

第545道：
下面哪种不是jQuery的选择器？（　）

A. 基本选择器

B. 后代选择器

C. 类选择器

D. 进一步选择器

答案：
C

解析：

jQuery的选择器有基本选择器、后代选择器、进一步选择器、层次选择器、基本过滤器、内容过滤器、可见性过滤器、属性过滤器、子元素过滤器、表单选择器、表单过滤器。

第546道：
下面哪一个是用来追加到指定元素的末尾的？（　）

A. insertAfter()

B. append()

C. appendTo()

D. after()

答案：
C

解析：

jQuery的核心函数appendTo()方法是用来在被选元素的结尾（仍然在内部）插入指定内容的。

第547道：
下面哪一个不是jQuery对象访问的方法？（　）

A. each(callback)

B. size()

C. index(subject)

D. index()

答案：
D

解析：

jQuery的核心函数之对象访问，访问对象的方法有each(callback)、size()、index(subject)。

第548道：
如果需要匹配包含文本的元素，用下面哪种来实现？（　）

A. text()

B. contains()

C. input()

D. attr(name)

答案：
B

解析：

contains选择器选取包含指定字符串的元素。该字符串可以是直接包含在元素中的文本，也可以被包含于子元素中。经常与其他元素或选择器一起使用，来选择指定的组中包含指定文本的元素。

第549道：
用下面哪个方法可以快速找到一个表格的指定行数的元素？（　）

A. text()

B. get()

C. eq()

D. contents()

答案：
C

解析：

eq()选择器选取带有指定index值的元素。所以根据行数，可以很快地找到指定的元素。

第550道：
jQuery常见选择器有哪些？

解析：

1. 基本元素选择器

$("p")：选取所有p元素；

$("p.ii")：选取所有class是ii的p元素；

$("p#demo")：选取id=demo的第一个p元素。

2. 分层选择器

$("div input")：DIV下的所有input后代元素；

$("div>input")：DIV下的所有input子元素。

3. 基本条件选择器

$("p:first")：选取文档中第1个p元素；

$("p:last")：选取文档中最后1个p元素；

$("tr:even")：选择偶数行；

$("tr:odd")：选择奇数行；

$("input:not(:checked)")：选择所有未被选中的元素；

$("tr:eq(1)")：索引值为1的表格，即第二行；

$("tr:gt(0)")：大于0的行数；

$("tr:lt(0)")：小于0的行数；

$(":header")：选择所有标题元素（h1～h6）；

$(":animated")：正在执行的动画。

4. 内容条件选择器

$("div:constains('ddd')")：选择包含ddd文本的层元素；

$("td:empty")：选择不包含文本或者子元素的表格单元；

$("div:has(p)")：选择包含段落元素的层元素；

$("td:parent")：选择包含子元素或者文本的表格单元。

5. 可见性条件选择器

$("tr:hidden")：选择所有隐藏的表格；

$("tr:visible")：选择所有可见的表格。

6. 属性选择器

$("div[id]")：具有id属性的元素；

$("input[name="]")：input属性name是"的元素；

$("input[name!="]")：input属性name不是"的元素；

$("input[name^="]")：选择具有name属性并且值以"为起始内容的表单输入元素；

$("input[name$="]")：选择具有name属性并且值以"为结束内容的表单输入元素；

$("input[name*="]")：选择具有name属性并且值以"的表单输入元素；

$("input[id][name$="]")：选择具有id和name属性的值以"为结束内容的输入表单元素。

7. 子元素选择器

$("ul li:nth-child(2)")：选择第二个列表项；

$("ul li:nth-child(even)")：表示匹配作为父元素的偶数（第2、4、6、8…）个子元素的元素；

$("ul li:nth-child(odd)")：表示匹配作为父元素的奇数（第1、3、5、7…）个子元素的元素；

$("ul li:nth-child(3n)")：表示匹配作为父元素的第3n个元素（n表示包括0在内的自然数，下同）；

$("ul li:first-child")：表示匹配父元素的第1个元素；

$("ul li:last-child")：表示匹配父元素的最后1个元素；

$("ul li:only-child")：选择列表出现且仅出现一个列表项。

8. 表单元素选择器

$("input")：选择所有input、textarea、select、button等元素；

$(":text")：文本行；

$(":password")；

$(":radio")；

$(":checkbox")；

$(":submit")；

$(":image")；

$(":reset")；

$(":button")；

$(":file")；

$(":hidden")。

9. 表单属性选择器

$("input:enabled")：选择所有可用；

$("input:disabled")；

$("input:checked")；

$("select:option:selected")。

第551道：
jQuery中的选择器和CSS中的选择器有区别吗？

解析：

jQuery有9种选择器，分别是基础选择器和层级选择器，它与CSS中的选择器有些类似，jQuery中的选择器所获得的是DOM（Document Object Model）对象，而CSS中的选择器仅仅是给标签增加样式。

第552道：
jQuery中的选择器有什么优势？

解析：

（1）简洁的写法，$()函数；

（2）支持CSS1到CSS3选择器；

（3）完善的处理机制。

第553道：
在jQuery选择器中，id与class有什么区别？

解析：

class选择器获取到的是一类对象的集合，id选择器是获取一个对象，就好比姓张的人可能有N个，而身份证为XXXXXXXXXXX的人只有一个。

第554道：
siblings()方法和$('prev~div')选择器是一样的吗？

解析：

siblings()是获得匹配集合中每个元素的同胞，而$('prev~div')是获得当前元素之前的匹配集合中每个元素的同胞。

第555道：
请用jQuery实现在body中插入一个class="box"的DIV。

解析：

$('body').append($('div.box'));

13.2　面试总会有不期而遇的温暖（属性）

第556道：
如果想在一个指定的元素后添加内容，下面哪个可以实现该功能（　）

A. append(content)

B. appendTo(content)

C. insertAfter(content)

D. after(content)

答案：
D

解析：

append(content)——向元素的末尾添加HTML代码；

appendTo(content)——添加HTML代码到元素的末尾；

insertAfter(content)——将jQuery对象插入指定元素的后面；

after(content)——将HTML代码插入指定元素的后面。

第557道：
在jQuery中，想要给第一个指定的元素添加样式，下面哪一个是正确的？（　）

A. first

B. eq(1)

C. css(name)

D. css(name,value)

答案：
C

解析：

css(name)用来获取第一个匹配元素的样式属性，并且css(name)不仅可以获取使用css定义的属性中的值，同样可以获取HTML标记中的属性值。

第558道：
在jQuery中，如果想要获取当前窗口的宽度值，下面哪个可以实现该功能？（　）

A. width()

B. width(val)

C. width

D. innerWidth()

答案：
D

第559道：
在一个表单中，如果想要给输入框添加一个输入验证，可以用下面哪个事件实现？（　）

A. hover(over,out)

B. keypress(fn)

C. change()

D. change(fn)

答案：
B

解析：

keypress事件与keydown事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。不过，与keydown事件不同，每插入一个字符，就会发生keypress事件。当键盘被按下并松开时，触发keypress事件，它可用来做输入框验证。

第560道：
当一个文本框中的内容被选中时，想要执行指定的方法，可以使用下面哪个事件来实现？（　）

A. click(fn)

B. change(fn)

C. select(fn)

D. bind(fn)

答案：
C

解析：

select()的作用是在每一个匹配元素的select事件中绑定一个处理函数。当用户在文本框（包括input和textarea）中选中某段文本时会触发select事件。

第561道：
在jQuery中想要实现通过远程HTTP GET请求载入信息功能可以使用下面哪个事件来实现？（　）

A. $.ajax()

B. load(url)

C. $.get(url)

D. $.getScript(url)

答案：
C

解析：

get()方法通过远程HTTP GET请求载入信息。这是一个简单的GET请求功能，用以取代复杂$.Ajax请求成功时可调用的回调函数。

第562道：
在jQuery中想要找到所有元素的同辈元素，下面哪一个是可以实现的（　）

A. eq(index)

B. find(expr)

C. siblings([expr])

D. next()

答案：
C

解析：

siblings()获取每个匹配元素的前后所有的同辈元素，然后作为一个jQuery包装集返回。另外，还可以传递一个选择器表达式参数给它，并在这些同辈元素中进行筛选。

第563道：
在jQuery中，用一个表达式来检查当前选择的元素集合，使用_____来实现，如果这个表达式失效，则返回_____值。

答案：
is，false

解析：

如果没有元素符合，或者表达式无效，都返回“false”，“filter”内部也在调用is()这个函数，所以，filter()函数原有的规则在这里也适用。

第564道：
彻底将jQuery变量还原，可以使用_____方法实现。

答案：
noConflict()方法

解析：

（1）noConflict()方法让渡变量$的jQuery控制权。

（2）该方法释放jQuery对$变量的控制。

（3）该方法也可用于为jQuery变量规定新的自定义名称。

第565道：
子元素选择器和后代元素选择器有什么区别？

解析：

子元素选择器只对直接后代有影响，而对“孙子后代”以及多层后代不产生作用。而后代元素选择器对“孙子后代”以及多层后代都产生作用。

比如说：一家人祖孙三代，爷爷、爸爸、叔叔、孙子。爷爷的子元素是父亲和叔叔，爷爷的后代元素是爸爸、叔叔、孙子。

13.3　不要为面试而烦恼（绑定事件）

第566道：
为每一个指定元素的指定事件（像click）绑定一个事件处理器函数，下面哪个是用来实现该功能的？（　）

A. trigger(type)

B. bind(type)

C. one(type)

D. bind

答案：
B

解析：

bind(type)方法是用于往文档上附加行为的主要方式。所有JavaScript事件对象，比如focus、mouseover和resize，都可以作为type参数传递进来。

第567道：
下面哪几个不是属于jQuery的事件处理（　）（多选）

A. bind(type)

B. click()

C. change()

D. one(type)

答案：
BC

解析：

只有bind(type)和one(type)属于事件处理，而click()和change()不属于事件处理。

第568道：
在jQuery中指定一个类，如果存在就执行删除功能，如果不存在就执行添加功能，下面哪一个是可以直接完成该功能的？（　）

A. removeClass()

B. deleteClass()

C. toggleClass(class)

D. addClass()

答案：
C

解析：

toggleClass()对设置或移除被选元素的一个或多个类进行切换。该方法检查每个元素中指定的类。如果不存在，则添加类；如果已设置，则删除之。这就是所谓的切换效果。

第569道：
请写出不少于两种jQuery绑定事件的方法。

解析：

有on()、bind()、live()、delegate()等方法。前两个方法对后创建的元素不起作用，后两个方法对后创建的元素起作用。

13.4　不要害怕面试，因为你需要（表单）

第570道：
jQuery表单提交前有几种校验方法？分别是什么

解析：

有三种校验方法，分别如下：

（1）formData：返回一个数组，可以通过循环调用来校验。

（2）jaForm：返回一个jQuery对象，所有需要先转换成DOM对象。

（3）fIEldValue：返回一个数组。

13.5　说多了都是眼泪，还是来点实在的吧（文档处理）

第571道：
下面哪几种属于jQuery文档处理（　）（多选）

A. 包裹

B. 替换

C. 删除

D. 内部和外部插入

答案：
ABCD

解析：

在使用jQuery进行文档处理时，总共分为6种模式：内部插入、外部插入、包裹、替换、删除、复制。

13.6　最怕的东西，最应该去突破（筛选）

第572道：
下面哪种不属于jQuery的筛选（　）

A. 过滤

B. 自动

C. 查找

D. 串联

答案：
B

解析：

jQuery的筛选函数提供了串联、查找和过滤函数，是不包括自动的。

第14章

学贯古今，中流砥柱［jQuery中级面试题］

jQuery第二阶段——还在裸奔面试吗？有DOM加载，你就是冷面杀手；移动端事件帮你解决各种修炼问题，在将来的江湖道路上必将祝你一臂之力。

14.1　你还在“泡”招聘，“奔”面试吗（DOM加载）

第573道：
当DOM加载完成后要执行的函数，下面哪个是正确的（　）

A. jQuery（expression，[context]）

B. jQuery(html,[ownerDocument])

C. jQuery(callback)

D. jQuery(elements)

答案：
C

解析：

jQuery(callback)函数在DOM加载完成之后执行。

第574道：
在jQuery中，如果想要从DOM中删除所有匹配的元素，下面哪一个是正确的（　）

A. delete()

B. empty()

C. remove()

D. removeAll()

答案：
D

解析：

removeAll()用来从DOM中彻底删除所有匹配的元素。

14.2　你能让面试官惊呆吗（移动端事件）

第575道：
touches、targetTouches、changedTouches三个属性有什么区别？

解析：

（1）touches：当前位于屏幕上的所有手指的一个列表。

（2）targetTouches：位于当前DOM元素上的手指的一个列表。

（3）changedTouches：涉及当前事件的手指的一个列表。

14.3　面试是一张网，你收获了吗（取HTML、文本的值）

第576道：
如何来设置和获取HTML和文本的值？

解析：

可通过html()及text()方法获取并设置HTML和文本的值。

第577道：
$("#msg").text();和$("#msg").text("<b>new content</b>");有什么区别？

解析：

$("#msg").text()是获取当前选择器的HTML和文本的值，而$("#msg").text("<b>new content</b>")是给当前选择器设置HTML和文本的值。

第578道：
jQuery怎么判断元素是否存在？

解析：

在jQuery中，我们可使用$(" div") length > 0来判断元素是否存在，意思就是判断元素长度，如果没有肯定是不存在的。

14.4　每天超越自己一点点（事件）

第579道：
jQuery中，$.bind()、$.live()和$.delegate()的区别是什么？

解析：

bind()方法是为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。将事件和函数绑定到元素，规定向被选元素添加的一个或多个事件处理程序，以及当事件发生时运行的函数。

live()方法是为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

delegate()方法将方法绑定到特定的元素，而将live()绑定到document根元素。

第580道：
什么是事件委派？jQuery用事件委派怎么写？

解析：

事件委派：一次性绑定多个事件，根据事件类别来委派相应的操作。

写法：

$("#select").bind("mouseover",function(){}).bind("mouseout",functio n() {} ) ;

第581道：
在移动Web开发时，可以使用click事件吗？如不行，请说明原因？

解析：

在移动端使用click事件有可能会出现点透的情况，即单击会触发非当前层的单击事件。单击事件可分解为多个事件，手指单击会经过：touchstart-> touchmove -> touchend –>click。

所以说在移动端尽可能不使用click事件，因为click事件可能会触发其他的事件。

第582道：
写出你所知道jQuery事件的部分方法。

解析：

blur()元素上失去焦点：a,input,textarea,button,select,lable.map,area;

change()用户改变域的内容：input,textarea,select;

click()鼠标单击某个对象；

dbclick鼠标双击某个对象；

Error()当加载文档或图像时发生某个错误；

Focus()y元素获焦点：a,input,textarea,button,select,lable.map,area;

keydown()键盘的某个键被按下；

keypress()键盘的某个键被按下或按住；

keyup()键盘的某个键被松开；

mousedown（fn）鼠标某个按键被按下；

mousemove（fn）鼠标被移动；

mousedown（fn）鼠标从某个元素离开。

第583道：
请简述jQuery中$.live()的实现原理。

解析：

其实就是将事件绑定到父节点，由于事件冒泡，所有事件最终会冒泡到document节点。当有事件触发时，则判断事件类型和触发事件的元素是否一致，如果相同则执行函数。

第584道：
jQuery中proxy及delegate两个方法的作用是什么？

解析：

1. proxy方法：通俗地讲就是改变函数的作用域，有两种调用方式：

（1）jquery.proxy(function,context)

function为将要执行的函数，context为function上下文对象。

（2）jquery.proxy(context,name)

context为函数上下文object对象，name为将要执行的函数。

2. delegate方法：为匹配到的选择器绑定一个或者多个事件。调用方式：

delegate(selector,eventType,handler);

selector为选择器，eventType为事件类型（包含一个或者多个事件的字符串），handler为事件触发执行的函数。

第15章

出神入化，学贯古今［jQuery高级面试题］

jQuery第三阶段——read、onload来者不拒，实实在在的千人斩。

15.1　做小题，成大事（read、onIoad的区别）

第585道：
window.onload和document.ready()的区别？

解析：

window.onload方法是在网页中的所有的元素（包括元素的所有关联文件）都完全加载到浏览器之后才执行。这种方式有一个很大的优点：不用考虑DOM元素加载的顺序。

而通过jQuery中的$(document).ready()方法注册的事件处理程序，只要在DOM完全就绪时，就可以调用了，比如一张图片只要标签完成，不用等这个图片加载完成，就可以设置图片宽、高的属性或样式等。这种方式优于onload()事件的原因在于：$(document).ready()可以在页面没有完全下载时，操作页面的DOM元素。

第586道：
jQuery中的load方法怎么用？

解析：

load(url,[data],[callback]);

url：要导入文件的地址；

data：可选参数，因为load不仅仅可以导入静态的HTML文件，还可以导入动态脚本，例如PHP文件，所以要导入动态文件时，我们可以将传递的参数放在里面；

callback：可选参数，是指调用load方法并得到服务器响应后，再执行的另一个参数。

15.2　让愤怒多些实力（效果）

第587道：
在一个表单中，用600ms缓慢地将段落滑上，用___________来实现。

答案：
$("p").hide("slow");

解析：

hide()方法是将显示的元素隐藏。

第588道：
在jQuery中，如果想要自定义一个动画，用_____函数来实现。

解析：

animate(params,options,function(){})

第589道：
在jQuery中，想让一个元素隐藏，用_____实现，显示隐藏的元素用_____实现。

解析：

让一个元素隐藏可以用hide()方法和display:none;。

让一个元素显示可以用show()方法和display:block;。

第590道：
如何使用jQuery实现复选框的全选和反全选效果？

解析：

<script type="text/JavaScript">
/* 全选*/
/* items 复选框的name*/
function allCkb(items){
$('[name='+items+']:checkbox').attr("checked", true);
}
/* 全不选 */
function unAllCkb(){
$('[type=checkbox]:checkbox').attr('checked', false);
}
/* 反选 */
/*items 复选框的name */
function inverseCkb(items){
$('[name='+items+']:checkbox').each(function(){
//此处用jQuery写法颇显啰嗦。体现不出jQuery飘逸的感觉
//$(this).attr("checked", !$(this).attr("checked"));
//直接使用JS原生代码, 简单实用
this.checked=!this.checked;
});
</script>

第591道：
如何用jQuery实现淡入淡出的效果？

解析：

1. jQuery fadeIn方法用于淡入已隐藏的元素。

$(selector).fadeIn(speed,callback);

speed（可选）参数规定效果的时长，它可以选取以下参数值："slow"，"fast"或毫秒。

callback参数是fadeIn()完成后所执行的函数名称。

2. jQuery fadeOut方法用于淡出可见的元素。

$(selector).fadeOut(speed,callback);

speed（可选）参数规定效果的时长，它可以选取以下参数值："slow"，"fast"或毫秒。

callback参数是fadeQut()完成后所执行的函数名称。

3. jQuery fadeToggle()方法可以在fadeIn()与fadeOut()方法之间进行切换。

如果元素已淡出，则fadeToggle()会向元素添加淡入效果；

如果元素已淡入，则fadeToggle()会向元素添加淡出效果；

$(selector).fadeToggle(speed,callback);

speed（可选）参数规定效果的时长，它可以选取以下参数值："slow"，"fast"或毫秒。

callback参数是fadeToggle()完成后所执行的函数名称。

4. jQuery fadeTo()方法允许渐变为给定的不透明度（值介于0到1之间）。

$(selector).fadeTo(speed,opacity,callback);

speed（必须）参数规定效果的时长，它可以选取以下值："slow"，"fast"或毫秒。

fadeTo()方法中opacity的参数将淡入淡出效果设置为给定的不透明度（值介于0到1之间）。

callback参数是fodoTo()完成后所执行的函数名称。

第592道：
如何使用jQuery实现当单击按钮时弹出一个对话框？

解析：

$("div").click(function(){
Alert("单击我！")
})

第16章

英姿勃发，独当一面［jQuery终极面试题］

jQuery第四阶段——Ajax在身旁，你就是一派宗师。get、post两种获取方式将给你带来无限精彩，jQuery、DOM对象更是永垂不朽。

16.1　困难的考题能让你看到更多的风景（get和post）

第593道：
请指出eq(),get(),[]的区别。

解析：

eq返回的是一个jQuery对象；

get返回的是一个HTML对象数组；

var array=[ ]声明一个数组。

16.2　想知道你能力的边界在哪吗（优化）

第594道：
介绍一下jQuery easyUI。如何使用jQuery easyUI组件？

解析：

jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助Web开发者更轻松地打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的JavaScript，也不需要对CSS样式有深入的了解，开发者需要了解的只有一些简单的HTML标签。

首先easyUI的datagrid插件，返回的数据可以是JSON，结构为{"total":23 9,"rows":[{"code":"001","name":"Name1","addr":"Address11","col4":"col4data"},{"c ode":"002","name":"Name2","addr":"Address13","col4":"col4 data"} ]}。

除了total和rows，还可以有其他项，但是这两项必须有。而在对应的后台数据可以是map，也可以是JSON。当是map时，同样需要在map中放入total、rows这两个key。

第595道：
你知道哪些针对jQuery的优化方法？

解析：

（1）jQuery代码重构。

（2）尽可能设置全局变量。

（3）避免出现重复的代码，用尽可能少的代码实现效果。

第596道：以下
jQuery的常用操作是如何实现的？

（1）获取属性为username的input值。

（2）获取ul下第n个li的文本。

（3）将class="latest"的元素插入id="list"的最前面。

（4）简述在jQuery下Ajax的过程。

解析：

（1）attr("username").val()。

（2）$("ul li ").eq(n)。

（3）$(".latest").prepend To($("#list"))。

（4）$.ajax( {

type : "post",

dataType : "JSON",

url : "<%=basePath%>/prod/findTypeName.do",

async : true,

success : function(result){

alert("成功");

},

error:function(){alert("失败")}

});

16.3　其实成功一直在你的旁边（Ajax）

第597道：
下面不属于Ajax事件的是（　）

A. ajaxComplete(callback)

B. ajaxSuccess(callback)

C. $.post(url)

D. ajaxSend(callback)

答案：
C

解析：

1. ajaxComplete(callback)

Ajax请求完成时执行函数，属于Ajax事件。

参数：callback代执行函数。

例如：

$("#msg").AjaxComplete(function(event,request,settings){
$(this).append("<li>请求完成</li>")})

2. ajaxSuccess(callback)

Ajax请求顺利完成时执行函数，属于Ajax事件。

返回值：jQuery。

例如jQuery代码：

$("#msg").AjaxSuccess(
function(request, settings){
$(this).append("<li>Successful Request!</li>");
});

3. ajaxSend(callback)

Ajax请求发送前执行函数，属于Ajax事件。

XMLhttpRequest对象和设置作为参数传递给回调函数。

Ajax请求发送前显示信息。

例如jQuery代码：

$("#msg").AjaxSuccess(
function(request, settings){
$(this).append("<li>开始请求: "+setting.url+ "</li>");});
$.post(url);
$.post(url, data, callback);

- url参数必须规定您希望请求的地址；

- data参数可选规定连同请求发送的数据；

- callback参数可选是请求成功后执行的函数名。

16.4　放手做，勇敢错（jQuery、DOM对象）

第598道：
你知道哪些不好的jQuery书写方式。

解析：

没有加$符号；没有加选择器；选择器中没有加引号。

第599道：
在jQuery中，请给出下面代码的执行结果。

<b>Hello</b> <p> Sogou</p>
$(“b”).clone().prependTo(“p”);

解析：

$("b").clone().prependTo（"p"）;的结果是Hello,Sogou;

prependTo()方法将元素添加到指定元素之前。

第600道：
下面哪一个不是jQuery对象访问的方法？

A. each(callback)

B. size()

C. index(subject)

D. index()

答案：
C

解析：

each(callback)：以每一个匹配的元素作为上下文来执行一个函数。它意味着每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。返回false将停止循环（就像在普通的循环中使用break）；返回true跳至下一个循环（就像在普通的循环中使用continue）。callback：每个匹配的元素所要执行的函数。

size()：jQuery对象中元素的个数。这个函数的返回值与jQuery对象的length属性一致。返回值为Number。

index()：返回指定元素相对于其他指定元素的index位置，这些元素可通过jQuery选择器或DOM元素来指定。

第601道：
jQuery插件实现方法有哪些？请分别介绍。

解析：

1. 添加静态方法

jQuery.extend(object);

例如：

$.extend({
addMethod : function(a, b){return a + b;}
// $.addMethod(1, 2); //return});

2. 添加成员方法

jQuery.fn.extend(object)；

例如：

jQuery.fn = jQuery.prototype;

给jQuery对象添加方法，对jQuery.prototype进行扩展，为jQuery类添加成员方法：

$.fn.extend({
getInputText:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
$("#username").getInputText();

第602道：
DOM对象如何转成jQuery对象？

解析：

如果已经是一个DOM对象，那么只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。即$(DOM对象)。

如：

var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象

转换后，就可以任意使用jQuery方法了。

第603道：
jQuery对象如何转成DOM对象？

解析：

有两种转换方式，可以将一个jQuery对象转换成DOM对象，即：[index]和get(index)。jQuery本身，通过.get(index)方法，得到相应的DOM对象。

jQuery对象是一个数据对象，可以通过[index]的方法来得到相应的DOM对象。

（1）[index]方法

例如：

var $v =$("#v") ; //jQuery对象
var v=$v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中

（2）get(index)方法

例如：

var $v=$("#v"); //jQuery对象
var v=$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中

第604道：
用jQuery实现下面的登录表单验证。

要求：

（1）用户为空时，提示：用户名不能为空。

（2）密码为空时，提示：密码不能为空。

（3）回车可以验证并提交表单。

（4）使用post方式提交表单。

（5）提示都显示在p.prompt中。

解析：

<script type="text/JavaScript">
function yanzheng(){
if($("#name").val() ==""){
alert（"用户名不能为空！ ）" ;
p.prompt(“用户名不能为空！");
} else if(("#password").val() ==""){
alert（"密码不能为空！"）;
p.prompt("密码不能为空！");
}
}
document.onkeydown = function(event){
if(event.keyCode==13){
yanzheng();
}
}
$("#tijiao").click(function(){
yanzheng();
})
</script>

第605道：
你为什么要使用jQuery？

解析：

jQuery是继prototype之后又一个优秀的JavaScript框架。其宗旨是写更少的代码，做更多的事情。

它是轻量级的JS库（压缩后只有21kB），这是其他的JS库所不及的，它兼容CSS3，还兼容各种浏览器（IE 6.0+、Firefox 1.5+、Safari 2.0+、Opera 9.0+）。

jQuery是一个快速的、简洁的JavaScript库，它使用户能更方便地处理HTML文档遍历、事件处理，实现动画效果，并且能方便地为网站提供Ajax交互。

jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

jQuery能够使用户的HTML页面保持代码和内容分离，也就是说，不用在HTML里面插入一堆JS来调用命令，只需定义id即可。

16.5　断了退路，才有出路（$.getScript()和$.getJSON()）

第606道：
$.getScript()方法和$.getJSON()方法有什么区别？

解析：

$.getScript()方法通过HTTP GET请求载入并执行JavaScript文件。

语法：$.getScript(url, success(respones, status))。

（1）url：将要请求的url字符串。

（2）success(response,status)：可选。规定请求成功后执行的回调函数。

额外的参数：

.response——包含来自请求的结果数据；

.status——包含请求的状态（"success", "notmodifIEd", "error", "timeout"或"parsererror"）。

$.getJSON()通过HTTP GET请求载入JSON数据。

语法：jQuery.getJson(url,data,success(data, status.xhr));

（1）url：必需。规定将请求发送给哪个url。

（2）data：可选。规定连同请求发送到服务器的数据。

（3）success(data,status,xhr)：可选。规定当请求成功时运行的函数。

额外的参数：

.date——包含来自请求的结果数据；

.status——包含请求的状态；

.xhr——包含XMLHttpRequest对象。

综合提升

第607道：
为什么要使用第三方工具CDN来加速jQuery文件？

解析：

（1）减少等待时间。

（2）增加网页的同时载入速度。

（3）更好的缓存。

第608道：
jQuery中哪些方法不能在zepto中使用，举一个例子即可。

解析：

例如：在jQuery中有fadeIn和fadeOut，用来实现渐隐渐显的效果，而在zepot中没有fadeIn和fadeOut，但是在zepot中我们可以通过动画效果animate来实现渐隐渐显的效果。

第609道：
jQuery是否支持AMD规范？当作为AMD模块运行时，模块名是什么？

解析：

AMD模块，AMD（Asynchronous Module Definition，异步模块定义）格式总体的目标是为现在的开发者提供一个可用的模块化JavaScript的解决方案。

AMD模块格式本身是一个关于如何定义模块的提案，在这种定义下模块和依赖项都能够异步地进行加载。它有很多独特的优势，包括天生的异步及高度灵活等特性，这些特性能够解除常见的代码与模块标识间的那种紧密耦合。目前它已经被很多项目所接纳，包括jQuery。

第610道：
JS如何实现循环复制一个DIV。

解析：

position:absolute; <html>
<head>
<title>Test of cloneNode Method</title>
<script type="text/JavaScript" src="test.JS"></script>
</head>
<body>
<div id="main">
<div id="div-0">
<span>Cloud018 said, </span>
<span>"Hello World!!!"</span>
</div>
</div>
</body>
</html>

// test.JS
window.onload = function () {
var sourceNode = document.getElementById("div-0"); // 获得被克隆的节点对象
for (var i = 1; i < 5; i++) {
var clonedNode = sourceNode.cloneNode(true); // 克隆节点
clonedNode.setAttribute("id", "div-" + i); // 修改一下id 值,避免id 重复
sourceNode.parentNode.appendChild(clonedNode); // 在父节点插入克隆的节点
}
}

第611道：
jQuery的美元符号$有什么作用？

解析：

其实美元符号$只是“jQuery”的别名，它是jQuery的选择器，代码如下：

$(document).ready(function(){
});

当然，你也可以用jQuery来代替$，代码如下：

jQuery(document).ready(function(){
});

在jQuery中，就是通过这个美元符号来实现各种灵活的DOM元素选择的，例如$("#main")即选中id为main的元素。

第612道：
请使用jQuery将页面上的所有元素边框设置为2px的虚线。

解析：

这正是该使用jQuery选择器的时候了，代码如下：

<script language="JavaScript" type="text/JavaScript">
$("*").css("border", "2px dotted red");
</script>

第613道：
怎样用jQuery实现对URL的编码和解码？

解析：

在jQuery中，我们可以使用以下方法实现URL的编码和解码：

encodeURIComponent(url)和decodeURIComponent(url)。

第614道：
如何用jQuery禁用浏览器的前进后退按钮？

解析：

实现代码如下：

<script type="text/JavaScript" language="JavaScript">
$(document).ready(function() {
window.history.forward(1);
//OK
window.history.forward(-1);
});
</script>

第615道：
如何解决Query、prototype共存，以及$全局变量冲突问题？

解析：

（1）将jQuery.JS放到prototype.JS后面（这个是必须的）。

（2）在jQuery.JS后面将$变量重命名。

代码如下：

<script type="text/javascript" src="window.JS"></script>
<!--上面这个window.JS调用了jQuery框架的方法-->
<script type="text/javascript" src="prototype.JS"></script>
<script type="text/javascript" src="jQuery.JS"></script>
<script type="text/javascript">
var jQuery=$;
</script>

（3）将原来使用的$方法名统一替换为jQuery名，如$("obj")替换为jQuery("obj")。

第616道：
如何使用jQuery来切换样式表？

解析：

找出你希望切换的媒体类型（media-type），然后把href设置成新的样式表。$('link[media='screen']').attr('href', 'Alternative.css');

第617道：
如何正确地使用toggleClass？

解析：

切换（toggle）类允许你根据某个类是否存在来添加或是删除该类。在这种情况下有些开发者使用：

a.hasClass('blueButton') ;

a.removeClass('blueButton') ;

a.addClass('blueButton') ;

toggleClass允许你使用下面的语句，这样就很容易地做到这一点。

a.toggleClass('blueButton');

第618道：
写一段代码描述命令模式。

解析：

var command=function(receiverObj){
this.receiver=receiverObj;
}
command.prototype={
exec:function(){
this.receiver.doSomthing();//接收者的具体操作
},
undo:function(){
this.reciver.backout();//撤销操作
}
};
var invoker=function(cmdObj){
this.command=cmdObj;
}
invoker.prototype={
handle:function(){//调用者的一个操作
this.command.exec();
//不需要知道操作的对象是谁, 有接收者负责, 仅执行操作即可,
//这样可以随意更改command参数, 只要它实现了exec方法;
}
};

第619道：
jQuery能实现什么效果？

解析：

动画效果、左右滑动效果、淡入淡出效果、显示隐藏效果、实现全选效果、遮罩效果、loading效果。

第5篇　清风落，江湖生

——「17助力」泯恩仇

“17助力”结合多种关键要素，解决了在开发过程中的一些难点难题，例如浏览器兼容问题。并且还为大家准备了一些利于使用而且操作简单的框架、插件和一些JS库，使大家在开发过程中更为简单方便，为大家在开发过程中添加了左膀右臂。

第17章

万事俱备，只欠东风［“17助力”，助你一臂之力］

“17助力”多才多艺，命运把握在自己手上，成功唾手可得，更是在未来的江湖道路上让你登峰造极。

17.1　“助力1”：浏览器和兼容差异

第620道：
请列举JavaScript在IE和W3C系列浏览器中的兼容差异。

解析：

浏览器中的兼容问题是非常常见的，JavaScript有以下几个兼容差异问题：

（1）函数和方法差异。

（2）样式访问和设置。

（3）DOM方法及对象引用。

（4）事件处理。

第621道：
IE与Firefox的JS兼容性都有什么？

解析：

（1）document.formName.item问题。

（2）集合对象的问题。

（3）window.event的问题。

（4）HTML对象的id作为对象名的问题。

（5）用idName字符串取得对象的问题。

（6）变量名与某HTML对象id相同的问题。

（7）event.x与event.y的问题。

（8）frame的问题。

（9）const的问题。

（10）body对象的问题。

（11）nodeName和tagName的问题。

（12）元素属性。

（13）document.getElementsByName()和document.all[name]的问题。

（14）DOM数据岛的问题。

第622道：
你都知道哪些浏览器内核？

解析：

（1）Trident内核，代表产品Internet Explorer。

（2）Gecko内核，代表产品Mozilla Firefox。

（3）WebKit内核，代表产品Safari、Chrome。

（4）Presto内核，代表产品Opera。

第623道：
你应该做了很多网页吧，那么都在哪些常见的浏览器测试过？遇到过兼容性问题吗？怎么轻易解决它们？

解析：

IE内核浏览器：世界之窗、腾讯TT、360、傲游、搜狗。

非IE内核浏览器：Chrome、Firefox、Opera、Safari。

（1）IE6比较容易出现双倍边距的问题，在使用了float（浮动）的情况下，不管是向左还是向右，都会出现双倍边距的问题，最简单的解决方法就是用display; inline；加到CSS里面去。

（2）文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，在IE下实际占高16px，下留白3px；在Firefox下实际占高17px，上留白1px，下留白3px；Opera下就更不一样了。解决方法：给文字设定line-height，确保所有文字都有默认的line-height值。这点很重要，在高度上我们不能容忍1px的差异。

（3）在Firefox下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而IE下是会被内容撑大的，高度限定失效。所以不要轻易给容器定义height。

（4）横向上的内容撑破容器问题。如果float容器未定义宽度，在Firefox下内容会尽可能撑开容器宽度，IE下则会优先考虑内容折行。故内容可能撑破的浮动容器需要定义width。

（5）浮动的清除，在Firefox下不清除浮动是不行的。

（6）mirrormargin Bug，当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-bottom:14px。padding也会出现类似的问题，这都是IE6下的“特产”，该类Bug出现的情况较为复杂，远不只这一种出现条件，还没系统整理。解决方案：外层元素设定border或设定float。

第624道：
浏览器模式一共分为几种？

解析：

浏览器模式分为两种：本地和Web。

第625道：
列举常用的浏览器类型，以及它们对应的调试工具和使用的内核。

解析：

常用的浏览器类型有IE(6,7,8,9,10)、Firefox、Chrome。

IE常用的调试工具有IEWebDeveloper（IE9默认有安装）。

大家用得最多的估计是Firefox，因为Firefox上确实有一些比较优秀的开发和调式工具，如久负盛名的Firebug。

chrome（内核webkit）自带的有google开发的内置调试工具。

三者内核各不相同。

其他还有Opera、遨游、世界之窗等。

Chrome内核跑得比较快，安全。Firefox做调试是最棒的。

第626道：
哪些属性类函数在Firefox中有，但是在Internet Explorer中没有，请至少写出三种。

解析：

（1）document.form.item。

（2）window.event。

（3）idName。

第627道：
如何清除图片下方出现的几个像素的空白间隙？

解析：

有以下方法：

（1）img{display:block;}。

（2）img{vertical-align:top;}。

（3）＃test{font-size:0;line-height:0;}。

除了top值，还可以设置为text-top、middle bottom、text-bottom，甚至特定的<length>和<percentage>值都可以。

第628道：
请列举一些IE与其他浏览器不一样的特性。

解析：

这个问题要分三个方面来回答：

有一部分特性是故意的，原因来自于浏览器大战时期，微软与网景在一些技术实现上故意采用了不同方式，从而让开发者进入自己的阵营，打击对手的浏览器。

有一部分是上部分的延续，当网景失败后，微软在一些新特性的实现上依然我行我素，没有参考W3C标准，导致一部分与标准不兼容。

还有一部分是没有标准可依的内容。其实这块比重占得相当大，Ajax对象也属于这种情况。没有标准可依时，微软会选择自己已有的技术来实现，比如activeX或者CSS filter等，很多类似这样的特性最终被标准吸纳，但是采用了另外的实现方式，导致不兼容。

第629道：
请写出兼容所有浏览器清除浮动的代码。

解析：

<div class="clearfix">
<div class="fl"></div>
<div class="fr"></div>
</div>
.clearfix:after{
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

第630道：
写出IE和非IE浏览器的条件注释写法。

解析：

IE:

<!--[if IE]>
<h1>您正在使用IE浏览器</h1>
<![endif]-->
<!--[if IE 5]>
<h1>版本 5</h1>
<![endif]-->
<!--[if IE 5.0]>
<h1>版本 5.0</h1>
<![endif]-->
<!--[if IE 5.5]>
<h1>版本 5.5</h1>
<![endif]-->
<!--[if IE 6]>
<h1>版本 6</h1>
<![endif]-->
<!--[if IE 7]>
<h1>版本 7</h1>
<![endif]-->

非IE:

<!--[if !IE]><!-->
<h1>您不是使用 Internet Explorer</h1>
<!--<![endif]-->
最终在非IE和特殊的IE浏览器下起作用。
也可以使用 lte lt 或者 gt gte来判断, 如:
<!--[if lte IE 6]>
在IE 6下显示的信息
<![endif]-->

<!--[if IE 6]><!-->
<h1>您正在使用Internet Explorer version 6<br />
或者一个非IE 浏览器</h1>
<!--<![endif]-->;

第631道：
列举各浏览器之间的一些常见的CSS、JS兼容的问题。

解析：

1. HTML对象获取问题

Firefox：document.getElementById("idName");

IE：document.idname;或者document.getElementById("idName");

解决办法：统一使用document.getElementById("idName");

2. const问题

【说明】

在Firefox下，可以使用const关键字或var关键字来定义常量。

在IE下，只能使用var关键字来定义常量。

解决方法：统一使用var关键字来定义常量。

3. event.x与event.y问题

【说明】

在IE下，even对象有x,y属性。但是没有pageX,pageY属性；

在Firefox下，even对象有pageX,pageY属性，但是没有x,y属性。

解决方法：使用mX(mX = event.x ? Event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX。

（4）window.location.href问题

【说明】

在IE或者Firefox2.0.x下，可以使用window.location或window.location.href;

在Firefox1.5.x下，只能使用window.location。

解决方法：使用window.location来代替window.location.href。

5. 模态和非模态窗口问题

【说明】

在IE下，可以通过showModalDialog和showModelessDialog打开模态和非模态窗口；而在Firefox下则不能。

解决方法：直接使用window.open (pageURL, name, parameters)方式打开新窗口。

如果需要将子窗口中的参数传递回父窗口，可以在子窗口中使用window.opener来访问父窗口。

例如：

var parWin=window.opener;

parWin.document.getElementById ("Aqing").value = "Aqing";

第632道：
Firefox、Chrome浏览器是否支持VBScript脚本？

解析：

我们知道，IE除了支持JavaScript外，还支持VBScript，而且JavaScript可以直接调用VBScript中的自定义函数。如果在VBScript的自定义函数中再调用VBScript的系统函数，这样结合起来就充分发挥了两种语言的优势。

但是，值得注意的是，Firefox、Chrome是不支持VBScript的，也就是说，如果我们的JavaScript中混入了VBScript，我们的程序是不兼容这些浏览器的。

第633道：
在IE的老版本浏览器中，遇到过哪些经典的Bug，并说出如何解决？

解析：

浮动元素的双倍margin，在浮动元素中增加一个"display:inline"属性，这样就可以轻松解决“浮动元素的双倍margin”的Bug。

在Web页面设计中，为了达到元素的统一渲染的风格，有时我们需要使用min-height和min-width来控制元素的最小高度值和最小宽度值。在别的浏览器都运行正常，可唯独这个IE6不识别。因此，在使用min-height和min-width时，为了达到效果一致，我们要针对IE6另作处理。在IE6下min-width解决起来相当简单，但是要顺利解决min-height就有点麻烦，这里我们主要来看min-height的解决办法。

一种方法是采用"!important"来解决，让min-height在IE6下能正常工作，具体代码如下：

.demo {
min-height: 100px;
height: auto !important;/*现代浏览器下, 内容高度超过100px时自动获得其高度*/
height: 100px;/*此值设置和min-height值一样, 因为IE6下元素高度会根据内容本身的高度而定, 所以内容高度低于min-height值时, 为了达到min-height效果, 需要给元素一个显式的高度值*/
}

另一种方法是采用子选择器方法来修复。大家都知道IE6是不支持子选择器的，所以我们也可以使用这个方法来解决，具体代码如下：

.demo {
min-height: 100px;
height: 100px;
}
html>body .demo {
height: auto;/*只有现代浏览器才能识别*/
}

第634道：
浏览器标准模式和怪异模式之间的区别是什么？

解析：

所谓标准模式，是指浏览器按W3C标准解析执行代码。而怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。浏览器解析时到底使用标准模式还是怪异模式，与网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析），会使浏览器使用相应的方式加载网页并显示，忽略DTD声明，将使网页进入怪异模式(quirks mode)。如果你的网页代码不含有任何声明，那么浏览器就会采用怪异模式解析；如果你的网页代码含有DTD声明，浏览器就会按你所声明的标准解析。在标准模式中，IE6不认识!important声明，而IE7、IE8、Firefox、Chrome等浏览器认识；在怪异模式中，IE6、IE7、IE8都不认识!important声明，这只是其中一种区别，还有很多其他区别。所以，要想写出跨浏览器的CSS，你最好采用标准模式。

17.2　“助力2”：前端优化

第635道：
Web脚本开发环境用什么？调试用什么？如果让你来制作一个访问量很高的大型网站，你会如何来管理所有CSS文件、JS与图片？前端优化知识都有哪些？

解析：

关于Web脚本开发环境，以前试用过aptana，现在用editplus。

在Firefox下调试肯定用Firebug，在IE下，需看页面DOM，可用IEInspector。

管理方法如下：

- 涉及人手、分工、同步。

- 先期团队必须确定好全局样式（globe.css）、编码模式（UTF-8）等；

- 编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；

- 标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；

- 页面进行标注（例如页面模块的开始和结束）；

- CSS和HTML分文件夹并行存放，命名需统一（例如style.css）；

- JS分文件夹存放，以该JS功能的英文命名；

- 图片采用整合的images.png，png8格式文件使用尽量整合在一起，方便将来的管理。

第636道：
前端优化的知识有哪些？

解析：

（1）从用户角度而言，优化能够让页面加载得更快，对用户的操作响应更及时，能够给用户提供更为友好的体验。

（2）从服务商角度而言，优化能够减少页面请求数，或者减小请求所占带宽，能够节省可观的资源。

第637道：
如何优化前端开发？

解析：

前端优化的途径有很多，按力度大致可以分为两类。

第一类是页面级别的优化，例如HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等。

第二类则是代码级别的优化，例如JavaScript中的DOM操作优化、CSS选择符优化、图片优化，以及HTML结构优化等。另外，本着提高投入产出比的目的，后文提到的各种优化策略大致按照投入产出比从大到小的顺序排列。

第638道：
列举三种提高网页加载速度的方法和技巧。

解析：

1. 使用良好的结构

可扩展HTML (XHTML)具有许多优势，但是其缺点也很明显。XHTML可能使您的页面更加符合标准，但是由于它大量使用标记（强制性的<start>和<end>），这意味着浏览器要下载更多代码。所以，事情都有两面性，尝试在您的网页中使用较少的XHTML代码，以减小页面大小。如果您确实不得不使用XHTML，试着尽可能对它进行优化。

2. 不要使布局超载

坚持简约原则：少即是多。页面中充斥着各种类型的图像、视频、广告等，这大大违背实用性原则。

3. 不要使用图像来表示文本

使用图像表示文本的最常见示例就是在导航栏中。美观的按钮更加具有吸引力，但是它们的加载速度很慢。此外，图像不能由搜索引擎直接索引，因此，使用图像进行导航不利于搜索引擎优化（Search Engine Optimization，SEO）。当使用大量CSS技巧就能创建漂亮的按钮时，绝不使用图像来表示文本。

第639道：
请写出三种减少页面加载时间的方法？

解析：

1. CSS格式定义放置在文件头部

这项设置对于用户端是慢速网络或网页内容比较庞大的情况比较有利，它在网页逐步呈现的同时仍会保持格式信息，不影响网页美感。

2. JavaScript脚本放在文件末尾

很多JavaScript脚本执行效率低下，或者有的第三方域名脚本出现意外无法载入，如果将这些脚本放置到页面比较靠前的位置，可能会导致网站的内容载入速度下降，甚至无法正常加载，所以一般将这些脚本放置在网页文件末尾。一定要放置在前面的脚本，要改用所谓的“后载入”方式加载，即在主体网页加载完成后再加载，防止其影响到主体网页的加载速度。

3. Ajax调用尽量采用GET方法

实际使用XMLHttpRequest时，如果使用POST方法实现，会发生两次HTTP请求。如果改用GET方法，只会发生一次HTTP请求，该请求减少50%！

第640道：
简单地说一下你会从哪些方面优化一个页面？

解析：

（1）网站布局优化：网站导航、页面布局、文件目录、地址栏等。

（2）网页标签优化：网页tittle关键字标签、网页简介标签、图像注释等。

（3）网页代码优化：对网页代码瘦身压缩，调整网页代码的布局，增强代码的可读性和健壮性，调整页面的大小，加快页面阅读速度。

（4）超链接优化：超链接布局、超链接注释、超链接途径优化，使之便于搜索引擎收录和用户的阅读。

（5）页面内容优化：对主要页面内容进行调整，对排版进行优化，让内容更容易阅读。

（6）关键字优化部署优化关键字，调整关键字呈现的顺序和呈现的位置，使之契合搜索引擎蜘蛛的抓取习惯，增强搜索引擎的友好性，适当加大关键字的密度，使网站排名靠前。

第641道：
针对大量图片的展现，请说出其性能优化的点都有哪些？

解析：

针对这个问题，主要从以下两个方面来进行描述：

从图片的处理方面来说，图片一定要清晰，能够准确地显示出产品的特点和客户关心的问题。在保证图片质量的前提下，要尽量的小，多跟美工商量，把图片文件的容量尽可能地改小，这样不仅对搜索引擎比较好，同时也缩短了页面加载的时间，不至于让那些没有耐心等待的顾客白白跑掉。

从图片alt方面来说，搜索引擎很难识别图片内容，所以只有告诉它这个图片是什么，这就是alt的职责所在了，同时，如果这张图片打不开或已失效，它又能告诉访客这大概是什么。如果访客对该产品感兴趣，自然会通过网站上留下的联系方式与相关人员取得联系。如果一个页面有多张图片，不要写相同的alt，可以融入相关的长尾关键词。

第642道：
网速性能优化的方法有哪些？

解析：

对于优化网速性能，有以下几种方法：

（1）检查网络速度。

（2）查看电脑中是否安装了一些P2P技术软件。

（3）优化电脑系统。

第643道：
如何对网站的文件和资源进行优化？

解析：

（1）文件合并。

（2）文件最小化/文件压缩。

（3）使用CDN托管。

（4）缓存的使用。

第644道：
简述交互设计与传统设计的区别。交互设计的核心是什么？

解析：

交互设计与传统设计的区别：

（1）使用场景的复杂。

（2）使用时间碎片化。

（3）屏幕尺寸的缩小。

（4）无法多任务地处理信息。

（5）平台的设计规范和特性。

交互设计的核心：

（1）交互是两个实体之间的事务，通常涉及信息的交换，也可包括实物或服务的交换。

（2）交互发生在人、机器和系统之间，存在多种不同的组合。

17.3　“助力3”：开发者工具

第645道：
在页面设计中，你通常用到哪些软件？

解析：

Macromedia Dreamweaver 8是建立Web站点和应用程序的专业工具。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建标准的、界面很吸引人的网站和应用程序。从基于CSS的设计的领先支持到手工编码功能，Dreamweaver提供了专业人员在一个集成、高效的环境中所需的工具。开发人员可以使用Dreamweaver及所选择的服务器技术来创建功能强大的Internet应用程序，从而使用户能连接到数据库、Web服务和旧式系统。

第646道：
经常使用的页面开发工具和测试工具有哪些？

解析：

（1）Loderruner测试工具是测试性能问题的，对于页面流测试不能展现，不直观，不能使用。

（2）QuickTest Professional页面操作复杂，使用测试时失败率很高，对于平台的一些事件无法获取，一旦有弹出页面，整个测试就会报错，对于现在的需求页面流来说，实施成本太大。

（3）对于Tellurium与Selenium，使用过程中发现功能很齐全，基本可以实现其他页面流测试的所有功能，并且还能结合jQuery等JS框架操作控件，但是在抓脚本时需要用火狐浏览器的插件，这对于平台应用来说限制较多，此工具可以通过录制脚本获取页面上的控件及控件的各种事件。Tellurium比Selenium更进步，只要页面上控件的id位置不变，修改脚本就比较简单，因为它不依赖控件的类型，Tellurium对脚本维护量不大，不过前期录制脚本的成本太高，实现起来并不现实，所以暂不推荐使用此工具，此工具对于研发人员来说，进行自己的页面流测试比较适合。

（4）OracleATS，全称Oracle Application Testing Suite。

现在OracleATS在性能测试中支持录制/回放的只有：

- HTTP的脚本录制和压力测试；

- 基于HTTP协议的Web Service的脚本录制和压力测试；

- 基于EBS Forms的脚本录制和压力测试。

第647道：
你更喜欢在哪个浏览器下进行开发？你使用哪些开发工具？

解析：

这类面试题比较主观，应从自身角度来回答。

常用的浏览器有：Firefox、Chrome、IE、Opera、Safari、遨游、360。

常用的开发工具有：Firebug、HttpWatch、Fiddler、HttpFox、Yslow。

第648道：
你常用的开发环境是怎样的？顺便说说操作系统、文本编辑器、浏览器，以及其他工具等方面。

解析：

Windows 7；

closure-compiler：JS压缩工具（Google出品）；

yuicompressor：yui压缩工具，不仅能压缩JS，还能压缩CSS；

pngout：png图片压缩工具；

cssEmbed：将图片转为base64嵌入代码；

YSlow：Firefox插件，它能把整个页面中所有的JavaScript、CSS等合并在一个文件；

mesureIt：Firefox插件，起着一把尺子的作用，它能精确看到部分元素之间的距离；

idebug：淘宝内部的一个测试工具。

第649道：
常用的前端开发工具有哪些？

解析：

常用的开发工具有：

（1）Firebug。

（2）HttpWatch。

（3）Fiddler。

（4）HttpFox。

（5）Yslow。

（6）CSS Usage。

（7）VIM。

（8）Editplus。

（9）DNS Flusher。

（10）PageSpeed。

17.4　“助力4”：JS库和框架

第650道：
你是否研究过你所使用的JS库或者框架的代码？

解析：

framework主要是给用户使用的，当然，也给二次开发者使用。它易使用、易扩展、可持续发展、可控。

有些框架，依赖它开发的东西，只能在它的“树荫”下生存，而无法独立。这样的框架，就不能当库来用，如jQuery。

有些库，几乎没有框架的特性，所以易用性很差，如YUI2。所以，它的用户群也只能局限于二次开发者，或水平比较高的开发者。

作为框架，可能为了易用性，牺牲了严谨性。例如：渲染String与Array的prototype。这就与库的无污染理念冲突。

所以，一个产品，如果它自己既能当框架，也能当库，那么，它就需要权衡取舍。当然，它也可以选择有多种形式的输出（输出成独立的库，或是易用的框架）。

第651道：
常用JS框架有哪些？jQuery的优点有哪些？

解析：

常用的JS框架有：Dojo、Scriptaculous、Prototype、yui-ext、jQuery、Mochikit、mootools、moo.fx。

jQuery的优点有以下10个：

（1）轻量级。

（2）强大的选择器。

（3）出色的DOM操作的封装。

（4）可靠的事件处理机制。

（5）完善的Ajax。

（6）不污染顶级变量。

（7）出色的浏览器兼容性。

（8）链式操作方式。

（9）行为层与结构层的分离。

（10）丰富的插件支持。

第652道：
简单介绍你所用过或了解的前端框架，以及它们的特点。

解析：

在这里主要介绍一下Bootstrap框架。

由匠人造，为匠人用。

与所有前端开发人员一样，Bootstrap团队是由国际上最优秀的前端开发组织的，他们乐于创造出色的Web应用，同时希望帮助更多同行从业者，为同行提供更高效、更简洁的产品。

1. 适应各种技术水平

Bootstrap适应不同技术水平的从业者，无论是设计师，还是程序开发人员；不管是骨灰级别的大牛，还是刚入门槛的菜鸟。使用Bootstrap既能开发简单的小东西，也能构造更为复杂的应用。

2. 跨设备、跨浏览器

最初设想的Bootstrap只支持现代浏览器，不过新版本已经能支持所有主流浏览器，甚至包括IE7。从Bootstrap 2开始，提供对平板和智能手机的支持。

3. 提供12列栅格布局

栅格系统不是万能的，不过在应用的核心层有一个稳定和灵活的栅格系统，确实可以让开发变得更简单。可以选用内置的栅格，或是自己手写。

4. 支持响应式设计

从Bootstrap 2开始，提供完整的响应式特性。所有的组件都能根据分辨率和设备灵活缩放，从而提供一致性的用户体验。

5. 样式化的文档

与其他前端开发工具包不同，Bootstrap优先设计了一个样式化的使用指南，不仅可以用来介绍特性，而且可以用来展示最佳实践、应用，以及代码示例。

6. 不断完善的代码库

尽管经过gzip压缩后，Bootstrap只有10KB大小，但是它却仍是最完备的前端工具包之一，提供了几十个全功能的随时可用的组件。

7. 可定制的jQuery插件

任何出色的组件设计，都应该提供易用、易扩展的人机界面。Bootstrap为此提供了定制的jQuery内置插件。

8. 选用LESS构建动态样式

当传统的枯燥CSS写法止步不前时，LESS技术横空出世。LESS使用变量、嵌套、操作、混合编码，帮助用户花费很少的时间成本，编写更快、更灵活的CSS。

9. 支持HTML5

Bootstrap支持HTML5标签和语法，要求建立在HTML5文档类型基础上进行设计和开发。

10. 支持CSS3

Bootstrap支持CSS3的所有属性和标准，逐步改进组件以达到最终效果。

11. 提供开源代码

Bootstrap全部托管于GitHub（https://github.com/），完全开放源代码，并借助GitHub平台实现社区化开发和共建。

12. 由Twitter制造

Twitter是互联网的技术先驱，引领时代技术潮流，Twitter前端开发团队是公认的最棒的团队之一，整个Bootstrap项目由经验丰富的工程师和设计师奉献。

第653道：
你最熟悉的Web的前端框架、库有哪些？

解析：

1. jQuery

jQuery是对JS底层DOM操作封装最薄的一个框架，没有大量的专有对象，多为提供函数进行DOM操作。准确地说，它不是偏重于客户端的框架，而是侧重于对jsdom编程。

2. ExtJS

ExtJS可以用来开发RIA，它也是客户端的Ajax应用，是用JavaScript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端Ajax框架。

3. Flex

Flex是一个高效、免费的开源框架，它与Ext不同，它有健壮的可视化开发工具Flash Builder，可以同C#一样进行拖曳布局，生成一种XML，也便于维护，编译后生成swf文件，直接嵌入HTML即可。为提高安全性，浏览时同Flash一样，需要Flash Player。

4. Silverlight

微软Silverlight是一个跨浏览器、跨客户平台的技术，能够设计、开发和发布有多媒体体验与富交互的网络交互程序。主要是应用在微软系列的语言中，包括CS与BS架构。

第654道：
说一下自己最熟悉的JS框架的结构及原理。

解析：

1. jQuery

查找（创建）jQuery对象：$（"selector"）;

调用jQuery对象，完成我们的工作：$("selector").doOurWork();

jQuery就是以这种最简单的编码逻辑来改变JavaScript编码方式的。这两个步骤是jQuery的编码逻辑核心。

要实现这种简洁编码方式，创建jQuery对象这一环节至关重要。因此，jQuery的DOM元素查找能力相当强大。此外，jQuery对象的方法肯定是有限的，有限的方法满足不了日益增长的各种要求，所以，必须提供jQuery对象方法的扩展能力。

强大的DOM元素查找能力，以及随心所欲的方法的扩展，这两点正是jQuery的核心所在！

2. ExtJS

ExtJS是一个开源软件，从性质来讲，和jQuery差不多，都是基于JS的方便开发的封装类库。

它的优势是将一些图形界面效果封装到代码中，作为类存在，使用时直接new或者create就可以得到一个不错的组件。类似于Java中的swing。

它对于组件的定义比较清晰，方便进行事件绑定和DOM操作，简化JS逻辑，例如封装分页、Ajax请求。

Ext绝对可以单独使用。实际上，除了有特定的要求外，我们推荐单独使用Ext，这样的话文件占位更小，支持和整合也更紧密。我们也支持与jQuery、YUI或Prototype整合使用，作为低层库的角色出现，以提供处理各种核心的服务，如DOM和事件处理，Ajax连接和动画特效。使用整合方式的一个原因是，它们已具备了一些特定的器件，而Ext并没有原生支持——像YUI的History控件便是一个典型的例子。这时，Ext需要依赖YUI这个库的底层来实现History控件，这样也可免去Ext自身底层库，从而减少整个程序的内存占用。另一个使用整合方式的原因是，对于许多已在使用其他底层库的程序，可能希望逐步加入Ext。总之，如果已经有了其他库，Ext可已利用它们。我们的宗旨是为用户提供各种可能性和性能上的优化。而事实是，只要实现了相对应的底层库接口，为任意一个框架添加上适配器是没有问题的——人们可以轻松地将Dojo、Moo，或其他JS库转变为Ext的底层。

控件其实也是组件，比如用于显示树信息的TreePanel、用于显示表格的GridPanel及EditorGridPanel，还有代表应用程序窗口的Ext.window等都属于Ext控件。在使用Ext时，一定要掌握一些核心控件，特别是处于基类的控件。比如上面提到的几个控件，它们都是继承于面板Panel，所以我们要重点掌握面板这个核心控件的特性。比如面板由一个顶部工具栏（tbar）、一个底部工具栏（bbar）、面板头部（header）、面板尾部（bottom）、面板主区域（body）几个部分组成。面板类中还内置了面板展开、关闭等功能，并提供一系列可重用的工具按钮，使我们可以轻松实现自定义的行为，面板可以放入其他任何容器中，面板本身是一个容器，它里面又可以包含各种其他组件。只要掌握了Panel的应用，那么学习TreePanel、window等就会简单得多。

同样的道理，对于Ext的表单字段来说，不管是ComboBox、NumberFIEld，还是DateFIEld，它们都是Ext、Form、Field类的子类，上面定义了表单字段的各种基本操作及特性。在学习使用表单字段组件时，一定要重点研究Field这个类，掌握它的主要方法、事件等，这样有助于更好地学习使用其他的字段。

第655道：
写出几个除jQuery以外的JS框架名称。

解析：

Yui-ext
Dojo
Prototype
GooJS
Zepto
DOMBuilder

第656道：
你是否研究过你所使用的JS库或框架的源代码？

解析：

在这里主要介绍一下ExtJS框架。

（1）Ext获取一个HTML文档里的节点

Ext.onReady(function(){
Var mydiv=Ext.get(“mydiv”)});

（2）在页面里ID为myButton的按钮加上了一个click事件，触发这个事件以后会弹出一个提示框。

Ext.onReady(function(){
Ext.get('myButton').on('click',function(){
alert("button”);
});
});

第657道：
简述一下你对HTML语义化的理解？

解析：

HTML语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码，同时让浏览器的爬虫和机器很好地解析代码。

HTML语义化的主要目的是：

- 为了在没有CSS的情况下，页面也能呈现出很好的内容结构和代码结构；

- 有利于用户体验；

- 有利于SEO和搜索引擎建立良好的沟通；

- 方便其他设备，以有意义的方式来渲染网页；

- 便于团队开发和维护，增加可读性。

第658道：
PhoneGap的作用是什么？

解析：

PhoneGap是一个用于创建移动跨平台应用程序的快速开发平台。只要你会HTML和JavaScript，或者Java语言，就可以利用PhoneGap提供的API去调用各种功能，PhoneGap可以让你制作出在各种手机平台上运行的应用。

第659道：
Backbone可单独运行吗？是否要依赖库？如果依赖，那么它依赖哪个？

解析：

Backbone.JS提供了一套Web开发的框架，通过Models进行key-value绑定及custom事件处理，通过Collections提供一套丰富的API实现枚举功能，通过Views来进行事件处理，以及与现有的Application通过RESTful JSON接口进行交互。

Backbone.JS是基于jQuery和underscore的一个JS框架。所以，它依赖于jQuery。

第660道：
SeaJS的作用是什么？

解析：

使用SeaJS，可以规范模块的书写格式，并能自动处理模块的依赖，还非常有助于代码组织、开发调试和性能优化。SeaJS期待能给你提供简单、极致的模块化开发体验。解决网站开发中的问题，如冲突、性能、依赖等。

第661道：
Zepto的作用是什么？其默认包含哪些模块？是否支持所有的主流浏览器？

解析：

Zepto只针对移动端浏览器编写，因此其体积更小、效率更高。更重要的是，它的API完全仿照jQuery，所以学习成本也很低。

Zepto默认包含touch模块。

郑重提醒：text :checkbox :first等在jQuery里是很常用的选择器，但Zepto不支持。原因很简单，jQuery通过自己编写的sizzle引擎来支持CSS选择器，而Zepto直接通过浏览器提供的document. querySelectorAll接口来支持CSS选择器，且这个接口只支持标准的CSS选择器，而上面提到的那些属于jQuery选择器扩展，所以仔细看看网页，注意一下这些选择器。当然也有好消息，如果有selector这个模块的话，那么就能够支持部分的jQuery选择器扩展，列举如下：

:visible :hidden
:selected :checked
:parent
:first :last :eq
:contains :has

第662道：
写出PhoneGap和AppCan的区别？

解析：

PhoneGap：

PhoneGap是一个基于HTML、CSS和JavaScript的创建跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhone、Android、Palm、Symbian、WP7、Bada和Blackberry智能手机的核心功能——包括地理定位、加速器、联系人、声音和振动等。此外，PhoneGap拥有丰富的插件，可以以此扩展无限的功能。PhoneGap是免费的，但是它需要特定平台提供的附加软件，例如iPhone的iPhone SDK、Android的Android SDK等，也可以和DW5.5配套开发。使用PhoneGap比为每个平台分别建立应用程序好一点，因为虽然基本代码是一样的，但是却仍然需要为每个平台分别编译应用程序。

AppCan：

AppCan是国内Hybrid App混合模式开发的倡导者，AppCan应用引擎支持Hybrid App的开发和运行，并且着重解决了基于HTML5的移动应用中目前“不流畅”和“体验差”的问题。使用AppCan应用引擎提供的Naitve交互功能，可以让HTML5开发的移动应用基本接近Native App的体验。

第663道：
简述Angular的双向数据绑定。

解析：

这里有一个例子供参考。

Angular：

<div ng-controller="CounterCtrl">
<span ng-bind="counter"></span>
<button ng-click="counter++">increase</button>
</div>
function CounterCtrl($scope) {
$scope.counter = 1;
}

17.5　“助力5”：cookie

第664道：
cookie是什么？在使用cookie时有哪些需要注意的地方？

解析：

1. cookie是临时文件的意思，它会保存你浏览网页的痕迹，使你再次上同一页面时能提高网速，它会判断你是否登录过此网站，有些是可以帮你自动登录的。

cookie有时也用其复数形式Cookies，指某些网站为了辨别用户身份，进行session跟踪而储存在用户本地终端上的数据（通常经过加密）。

2. cookie注意事项

（1）SetCookie()之前不能有任何HTML输出，它认了第二，没有哪个元素敢认第一，就是空格和空白行也不行。

（2）SetCookie()执行之后，在当前页调用echo $_Cookie["name"]不会有输出。必须刷新或到下一个页面才可以看到cookie值。原因很简单：SetCookie()执行之后，往客户端发送一个cookie，你不刷新或浏览下一个页面，客户端怎么把cookie给你送回去，浏览器创建了一个cookie后，对于每一个针对该网站的请求，都会在Header中带着这个cookie。不过，对于其他网站的请求，cookie是绝对不会跟着发送的，而且浏览器会一直这样发送，直到cookie过期为止。

（3）使用cookie的限制。一个浏览器能创建的cookie数量最多为30个，并且每个不能超过4KB，每个Web站点能设置的cookie总数不能超过20个。

（4）cookie是保存在客户端的，如果用户禁用了cookie，那么cookie自然也就没作用了。现在的浏览器，每当发送一个cookie给客户端，就会被拦截住，并询问用户是否允许cookie进入。

第665道：
在Web开发中，我们经常会用到cookie，那么如何设置一个cookie呢？对于性能的影响又是怎样的？

解析：

浏览器负责管理用户系统上的cookie。CookIE通过HttpResponse对象发送给浏览器，该对象被公开称为cookies的集合。可以将HttpResponse对象作为Page类的Response属性来访问。要发送给浏览器的所有cookie都必须添加到此集合中。创建cookie时，需要指定Name和Value。每个cookie必须有一个唯一的名称，以便从浏览器读取cookie时可以识别它。由于cookie按名称存储，因此用相同的名称命名两个cookie会导致其中一个cookie被覆盖。

Response.Cookies["userName"].Value = "patrick";
Response.Cookies["userName"].Expires = DateTime.Now.AddDays(1);

直接设置Cookies集合的值，可以通过这种方式向集合添加值，因为Cookies是从NameObjectCollectionBase类型的专用集合派生的。

HttpCookie aCookie = new HttpCookie("lastVisit");
aCookie.Value = DateTime.Now.ToString();
aCookie.Expires = DateTime.Now.AddDays(1);
Response.Cookies.Add(aCookie);

创建了一个HttpCookie类型的对象实例，设置其属性，然后通过Add方法将其添加到cookies集合。在实例化HttpCookie对象时，必须将该Cookie的名称作为构造函数的一部分进行传递。

17.6　“助力6”：超级素数

第666道：
判断一个数是否为超级素数。

解析：

int sushu(int N){
int i;
int flag=1;
if (N==1) return false;//1既不是素数也不是质数
if (N==2) return true;
for (i=2;i<=sqrt(N);i++){
if (N%i==0) {
flag=0
break;
}
}
return flag;
}

17.7　“助力7”：主流技术

第667道：
请简述建设网站涉及的主要方面，当前开发使用的主流技术及趋势。

解析：

（1）建设网站涉及的主要方面有：

- 网站关键词的优化；

- 网站结构优化；

- 网站页面优化；

- 网站内容更新；

- 网站外部链接建设；

- 网站流量分析。

（2）大体来说，分为三个流派，即Java Web、.NET、PHP。

具体的技术有以下几个。

前端的：JS、HTML、CSS、PS、Flash……

一些主流的技术：Ajax、jQuery。

后台的的Java（PHP、.NET）、SQL、服务器。

如Java里面：JSP、Servlet。

值得一提的还是Java的三大开源框架：Struts2、Spring、Hibernate。

（3）随着计算机应用的日益普遍和系统规模的扩大，前端开发得到了长足的发展。开发服务技术及其发展趋势有了很大的提高。

Web开发技术是目前网络应用开发技术的最重要的成员之一。随着服务器端应用的普及，客户端应用大军开始向微软的.NET战略行进，以迎接Web开发技术新革命的到来。

17.8　“助力8”：进制转化

第668道：
把十六进制颜色转变成RGB颜色，如：#FFFFFF等同RGB(255,255,255)

解析：

function exChange(color)
{return 'rgb(' + parseInt(color.substr(1, 2), 16) + ',' +
parseInt(color.substr(3, 2), 16)+ ',' +
parseInt(color.substr(5,2),16) + ')';3}

第669道：
写一段JS程序，实现将十进制数302转换为二进制数。

解析：

string ByteToBinaryString(char v) {
if (v == 1) {
return "1";
}
if (v == 0) {
return "0";
}
if (v % 2 == 0) {
return ByteToBinaryString(v / 2) + "0";
} else {
return ByteToBinaryString(v / 2) + "1";
}
}

17.9　“助力9”：追加字符串

第670道：
在DOM中获取一个<div id= 'mydiv'>元素，并且在该元素原有内容基础上，结尾追加字符串“END”。（分别使用标准JavaScript语言及jQuery实现以上功能）

解析：

var oMydiv = document.getElementById(" mydiv");
var oMydivText = oMydiv.innerHTML;
oMydiv.innerHTML = oMydivText + "END";
var oMydiv = $("#mydiv").html();
$("#mydiv").html(oMydiv + "END");

17.10　“助力10”：模块模式

第671道：
请解释什么是JavaScript的模块模式，并举出实例。

解析：

模块模式主要用来为单例创建私有变量和特权方法（公有方法），从而增强单例的可访问性。以模块模式定义的私有变量和私有函数，只能使用单例对象本身的特权（公有）方法才可以访问到，其他外部的任何对象都不可以。

var singleton = function(){
//私有变量
var privateVariable = 10;
//私有函数
function privateFunction(){
return false;
}
//返回对象
return {
//公有属性
publicProperty: true,
//公有属性和公有方法
publicMethod : function(){
privateVariable++;
return privateFunction();
}
};
}();

第672道：
写出你对CMD/AMD模块化的理解。

解析：

CMD，全称即Common Module Definition。

在CMD规范里，一个模块就是一个JavaScript文件。

CMD与AMD的区别：

在执行顺序上，CMD是延迟执行的。而AMD是提前执行的。requireJS从2.0开始可以延迟执行。

第673道：
AMD模式是什么？

解析：

AMD（Asynchronous Module Definition，异步模块定义）是用于异步加载的一种模块定义方式。随着Web应用不断发展和对JavaScript依赖的进一步加深，出现了使用模块（Modules）来组织代码。模块使我们能够创建明确清晰的组件和接口，这些组件和接口很容易加载并连接到其依赖组件。AMD模块系统提供了使用JavaScript模块来构建Web应用的完美方式，并且这种方式具有形式简单、异步加载，并且被广泛采用的特点。AMD格式是一套API，它用于定义可重用的并能在多种框架使用的模块。开发AMD是为了提供一种定义模块的方式，这种方式可以使用原生的浏览器脚本元素机制来实现模块的异步加载。AMD API是由2009年Dojo社区的讨论中产生的，然后移动到讨论CommonJS如何更好地为浏览器适应CommonJS模块格式（被NodeJS使用）。CommonJS已经发展成为单独的一个标准并有其专门的社区。AMD已经广泛普及，形成了众多模块加载实现并被广泛使用。AMD格式总体的目标是为现在的开发者提供一个可用的模块化。

AMD格式本身是一个关于如何定义模块的提案，在这种定义下，模块和依赖项都能够异步地进行加载。它有很多独特的优势，包括天生的异步及高度灵活等特性，这些特性能够解除常见的代码与模块标识间的那种紧密耦合。目前它已经被很多项目所接纳，包括jQuery。

第674道：
简述模版引擎的作用。

解析：

使我们的数据和表现层分离，便于理解和后期的维护。

第675道：
请解释一下CommonJS与AMD？

解析：

CommonJS是JavaScript模块化编程的一种规范，并且主要是在服务器端模块化的规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性。CommonJS加载模块是同步的，所以只有加载完成以后，才能执行后面的操作。Node.js采用了这个规范，Node.js主要是用于服务器的编程加载的模块文件，一般都已经存在本地硬盘，所以加载起来比较快，不用考虑异步加载的方式，所以CommonJS规范比较适用。但如果根据浏览器环境，要从服务器加载模块，这时就必须采用异步模式。所以就有了AMD CMD解决方案。

在网站性能优化正在逐步成为产业的今天，CommonJS的Module/Transport规范里，目前认可度最高的是Modules/AsynchronousDefinition（简称AMD），意思就是“异步模块定义”。异步方式加载模块，模块的加载不影响它后面语句的执行。所有依赖这个模块的语句，都定义到一个回调函数中，等加载完成之后，这个回调函数才会运行。

17.11　“助力11”：效果题

第676道：
如何用JS实现一个选项卡效果，可以用任何你会的JS框架，如jQuery等。

解析：

<script type="text/javascript">
window.onload = function (){
var oLi = document.getElementById("tab").
getElementsByTagName("li");
var oUl = document.getElementById("content").
getElementsByTagName("ul ");
for(var i = 0; i < oLi.length; i++)
{
oLi[i].index = i;
oLi[i].onmouseover = function (){
for(var n = 0;n < oLi.length;n++)
{
oLi[n].className = "";
this.className = "current";
}
for(var n = 0;n <oUl.length;n++)
{
oUl[n].style.display = "none";
oUl[this.index].style.display="block";
}
}
}
}
</script>

第677道：
编写一段代码，实现类似百度搜索输入框智能提示功能，包括程序逻辑实现，以及前端实现。

解析：

$(function(){
//取得div层
var $search = $('#search');
//取得输入框jQuery对象
var $searchInput = $search.find('#search-text');
//关闭浏览器提供给输入框的自动完成
$searchInput.attr('autocomplete','off');
//创建自动完成的下拉列表, 用于显示服务器返回的数据,插入在搜索按钮的后面, 等显示的时候再调整位置
var $autocomplete = $('
')
.hide()
.insertAfter('#submit');
//清空下拉列表的内容, 并且隐藏下拉列表区
var clear = function(){
$autocomplete.empty().hide();
};
//注册事件, 当输入框失去焦点时清空下拉列表并隐藏
$searchInput.blur(function(){
setTimeout(clear,500);
});

第678道：
用JS、HTML、CSS实现一个弹出提示控件（原生）。

解析：

（1）分别实现类似于系统的alert、confirm、prompt对话框。

script type="text/JavaScript">
alert('这是alert提示框');
confirm('这是确定框');
prompt('请输入内容','输入框');
</script>

（2）对话框的大小根据提示内容进行自适应（有一个最小宽高），默认为在页面的水平垂直居中。

<style type=text/css>
.block {
text-align: center;
background: #c0c0c0;
border: #a0a0a0 solid 1px;
margin: 20px;
}
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
padding: 10px 15px;
border: #a0a0a0 solid 1px;
background: #f5f5f5;
}

（3）对话框可拖动。

var objMove = null;
var pX = 0;
var pY = 0;
document.onmouseup = MUp;
document.onmousemove = MMove;
function MDown(objMoveId)
{
var hitpoint = event.srcElement;
if( hitpoint.tagName == "INPUT"
|| hitpoint.tagName == "TEXTAREA"
|| hitpoint.tagName == "SELECT" )
{
objMove = null;
return;
}

objMove = document.getElementById(objMoveId);
if( objMove == null )
{
return;
}

objMove.style.cursor = "move";
//objMove.setCapture();
pX = event.x - objMove.style.pixelLeft;
pY = event.y - objMove.style.pixelTop;
}

function MMove()
{
if(objMove != null)
{
objMove.style.left = event.x - pX;
objMove.style.top = event.y - pY;
}
}

function MUp()
{
if(objMove != null)
{
//objMove.releaseCapture();
objMove.style.cursor = "default";
objMove = null;
}
}

（4）对话框中的事件，可以模拟系统对话框的事件（例如：alert对话框，当单击确定按钮时，对话框消失）。

采用ClassWizard实现重载OnOK()。

OnOK(){ if(...)
{// 当按下Enter或Esc按键事件时 } else
{ // 单击关闭按钮时
CDialog::OnOK();
}
}

（5）解决IE6被select控件遮挡的问题。

frame是IE5.5以后提出来的一个window组件，在iframe中只能嵌套页面，所以iframe中有src属性可以直接引用一个页面。在IE中有一组规范，iframe的优先级要比select高，所以在页面显示时，如果iframe和select在同一个位置的话，我们会发现，iframe把select遮挡了，而div中可以加入iframe，有了这个基础，我们可以在显示的div层中加入一个空的iframe。

<iframe style="position: absolute; z-index: -1; width: 100%; height: 100%; top: 0;left: 0; scrolling: no;" frameborder="0" src="about:blank">

17.12　“助力12”：跨域问题

第679道：
关于数据的跨域问题，请提出几个通过JavaScript实现的解决方案并附上简单代码。

解析：

对于主域相同而子域不同的问题，可以通过设置document.domain的办法来解决。具体的做法是，可以在http://www.a.com/a.html和http://script.a.com/b.html两个文件中分别加上document.domain = 'a.com'；然后通过在a.html文件中创建一个iframe，去控制iframe的contentDocument，这样两个JS文件之间就可以“交互”了。当然这种办法只能解决主域相同而二级域名不同的情况，如果你把script.a.com的domian设为alibaba.com，那显然是会报错的。

这种方式适用于{www.qdjhu.com, qdjhu.com, js.qdjhu.com, css.qdjhu.com}中的任何页面相互通信。

备注：某一页面的domain默认等于window.location.hostname。主域名是不带www的域名，例如a.com，主域名前面带前缀的通常都为二级域名或多级域名，例如www.a.com其实是二级域名。domain只能设置为主域名，不可以在b.a.com中将domain设置为c.a.com。

17.13　“助力13”：前端交谈

第680道：
如何提高前端性能，至少写出三点。

解析：

1. 尽量减少HTTP请求

前端优化的黄金准则指导着前端页面的优化策略：只有10%～20%的最终用户响应时间花在接受请求的HTML文档上，剩下的80%～90%时间花在为HTML文档所引用的所有组件（图片、脚本、样式表等）进行的HTTP请求上。因此，改善响应时间最简单的途径就是减少组件的数量，并由此减少HTTP请求的数量。所以，我们要尽量减少HTTP请求。

2. 压缩组件（使用Gzip方式）

对于做PC网站或者移动网站来说，急需要压缩的是CSS文件和JS文件，至于如何压缩，网上有很多在线工具，去挑选一个自己用得顺手看得顺眼的就好，当然，也有人选择对HTML进行压缩，这样也可以。

3. 避免使用CSS表达式

CSS表达式是动态玩CSS的一种很强大的方式，但是强大的同时也存在很高的危险性。因为CSS表达式的频繁求值会导致CSS表达式性能低下。如果真想玩CSS表达式，可以选用只求值一次的表达式，或者使用事件处理来改变CSS的值。

第681道：
在使用的开发者工具中，你最喜欢的开发工具是什么？

解析：

据了解，当今前端开发者主要使用的开发工具主要有Firebug、HttpWatchFiddler、HttpFox、Yslow、cssUsage、VIM、Editplus、DNS Flusher、PageSpeed这几种，根据自己的习惯来回答即可。

第682道：
如果今年你打算熟练掌握一项新技术，那会是什么？

解析：

在JavaScript越来越流行的今天，Node.js是一项非常重要的创新。Node.js是基于Chrome JavaScript运行时建立的一个平台，用来搭建快速的、易于扩展的网络应用。

Node.js借助事件驱动，非阻塞I/O模型变得轻便和高效，非常适合分布式设备的数据密集型的实时应用。

V8引擎执行JavaScript的速度非常快，性能非常好。Node.js对一些特殊用例进行了优化，提供了替代的API，使得V8在非浏览器环境下运行得更好。

第683道：
能描述一下，你制作一个网页的工作流程吗？

解析：

（1）确定网站主题。

（2）搜集材料。

（3）规划网站。

（4）选择合适的制作工具。

（5）制作网页。

（6）上传测试。

（7）推广宣传。

（8）更新维护。

第684道：
前端页面由哪三层构成？分别是什么？作用又是什么？

解析：

网页分为三个层次，即结构层、表现层、行为层。

网页的结构层是由超文本标记语言（HTML）或可扩展超文本标记语言（XHTML）等负责创建的，标签对网页内容的语义做出了解释。

网页的表现层是由CSS创建的，作用是对网页内容如何显示进行自定义。

网页的行为层实际上就是运用JavaScript等语言对HTML文档中所有的元素进行操作，包括美化页面等。

第685道：
说说最近看过的关于最新的前端技术的书。

解析：

《JavaScript权威指南（第6版）》、《JavaScript语言精粹》、《基于MVC的JavaScript Web富应用开发》、《JavaScript模式》。

第686道：
前端性能优化知识都有哪些？分别从代码层面和架构方面进行介绍。

解析：

1. 减少HTTP请求

基本原理：

在浏览器（客户端）和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕时，这个问题尤其突出。

一个正常HTTP请求的流程简述：

如在浏览器中输入“www.xxxxxx.com”并按下Enter键，浏览器与这个URL指向的服务器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接收到请求的信息后，再返回相应的信息，浏览器接收到来自服务器的应答信息后，对这些数据解释执行。

而当我们请求的网页文件中有很多图片、CSS、JS，甚至音乐等信息时，将会频繁地与服务器建立连接和释放连接，这必定会造成资源的浪费，且每个HTTP请求都会对服务器和浏览器产生性能负担。

在网速相同的条件下，下载一个100KB的图片比下载两个50KB的图片要快。所以，请减少HTTP请求。

解决办法：

合并图片（CSS Sprites），合并CSS和JS文件。图片较多的页面也可以使用lazyLoad等技术进行优化。

2. 正确理解Repaint和Reflow

【注】Repaint和Reflow就是重绘和重排的意思。

基本原理：

Repaint（重绘）是在一个元素的外观被改变，但没有改变布局（宽和高）的情况下发生的，如改变visibility、outline、背景色等。

Reflow（重排）就是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证DOM树上的所有其他结点的visibility属性，这也是Reflow低效的原因。如：改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化、style属性的改变等。如果Reflow得过于频繁，CPU使用率就会迅速地上升，所以前端也就有必要知道Repaint和Reflow的知识。

减少性能影响的办法：

上面提到通过设置style属性改变结点样式的话，每设置一次都会导致一次Reflow，所以最好通过设置class的方式。有动画效果的元素，它的position属性应当设为fixed或absolute，这样不会影响其他元素的布局。如果在功能需求上不能设置position为fixed或absolute，那么就权衡速度的平滑性。

总之，因为Reflow有时确实不可避免，所以只能尽可能限制Reflow的影响范围。

3. 减少对DOM的操作

基本原理：

对DOM操作的代价是高昂的，这在网页应用中通常是一个性能瓶颈。

在《高性能JavaScript》中这么比喻：“把DOM看成一个岛屿，把JavaScript（ECMAScript）看成另一个岛屿，两者之间以一座收费桥连接”。每次访问DOM都会交过桥费，而访问的次数越多，交的费用也就越多。所以一般建议尽量减少过桥次数。

解决办法：

修改和访问DOM元素会造成页面的Repaint和Reflow，循环对DOM操作更是罪恶的行为，所以请合理地使用JavaScript变量储存内容，考虑大量DOM元素中循环的性能开销，在循环结束时一次性写入。

减少对DOM元素的查询和修改，查询时可将其赋值给局部变量。

【注】在IE中，hover会降低响应速度。

4. 使用JSON格式来进行数据交换

基本原理：

JSON是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。

与XML序列化相比，JSON序列化后产生的数据一般要比XML序列化后产生的数据体积小，所以在Facebook等知名网站中都采用了JSON作为数据交换方式。

第687道：
简述您的设计理念或设计风格？

解析：

（1）功能决定设计方向。网站的功能决定了设计的思路，不同目的的网站的设计思路也是不同的。

（2）内容决定形式。确定了网站的功能之后就需要开始实际的行动，对网站进行整体把握，如内容的填充、细节的划分，以及不同风格的创意效果，用更具吸引力的方式呈现内容是网站表现与众不同的必须要求。

（3）细节决定成败。一个具有创意的网站设计方案需要注重各个方面的细节，比如说布局、颜色及动态元素的使用。简单明了又清晰的布局是网页设计的基础，毫无章法的网站是没有吸引力的；合适的配色方案是吸引用户眼球的重要因素，不同的色彩搭配给人以不同的视觉冲击力；动态网页技术就是提高界面与用户之间的交互性，使用户体验更加方便和灵活。

第688道：
对于IE的HTML元素事件和标准DOM的事件模型有什么不同，怎么处理兼容性？

解析：

HTML元素事件是浏览器内在自动产生的，当有事件发生时，HTML元素会向外界发出各种DOM事件流，并且它只支持事件绑定，不支持事件捕获。在事件处理的函数内部不可以使用this关键字。

DOM（文档对象模型）结构是一个树形结构，当一个HTML触发某一事件时，该事件就会在元素节点与根节点之间的路径传播，路径所经过的节点都会收到该事件。DOM事件模型的优点是支持事件绑定和事件捕获，并且在事件处理的函数内部可以使用this关键字。

第689道：
请至少说出三个常浏览的前端技术相关的网站。

解析：

这个题目考查的是用户经常关注学习技术的来源。推荐三个：cnblogs.com、csdn.net、oschina.com，还有前端江湖（www.qdjhu.com）。

第690道：
请简要阐述你对MVC的理解。

解析：

MVC模式是表示层开发最常用的设计模式，使用这个设计模式的目的是为了解除控制逻辑、业务逻辑和视图之间的耦合，提升系统的可扩展性和可维护性。MVC模式主要由模型、控制器和视图三个部分组成。其中，控制器的主要责任是接受客户所提交的请求，并将请求转发给适当的模型对象进行处理，再将处理的结果发给视图，进行显示。

第691道：
请简要阐述你对REST的理解。

解析：

REST（REpresentational State Transfer，即表述性状态传递），是一种软件架构风格，提供了一组框架约束，强调组件交互的可伸缩性、接口的通用性、组件的独立部署，以及用来减少交互延迟、增强安全性、封装遗留系统的中间组件。REST是一套用来创建Web Service的方法，它的主要优势在于它是一种对服务器来说更加有效的抽象方式，REST架构风格是将服务器抽象为一组离散资源的集合。

第692道：
在移动Web开发时，可以使用click事件吗？如不行，请说明原因。

解析：

可以使用click事件，但是在手机Web端，click会有200～300 ms，所以请用tap代替click作为单击事件。

在移动端选取元素时，推荐使用document.qrerySelector("#box");和document.qrerySelector("#box li")[0];。

移动端单次触摸事件，直接绑定touchend事件即可，所有的手机事件都要阻止默认事件，即ev.preventDefault();。

第693道：
介绍一下项目的流程。

解析：

首先，介绍项目的背景；其次，介绍流程，以及分工。你从事的是什么，是谁主导这个项目的，你为这个项目做的贡献是什么，你是如何配合同事们完成这个项目的，当出现冲突和困难时你是如何处理的。

第694道：
怎样优化自己的代码？

解析：

1. 清理垃圾代码

删除页面中的垃圾代码，垃圾代码主要指那些删除了也不会对页面有任何影响的非必要代码。

常见的垃圾代码——空格字符。空格字符是网页中最常见的垃圾代码，但并不是指标签，而是在代码编辑环境下敲击空格所产生的符号，每个空格相当于一个字符，也就是说，一个页面，空格就占页面体积的15%，即100KB的页面，有15KB是空格字符。

空格字符最常出现在代码的开始和结束处，还有空行中。这些都是容易产生垃圾代码的地方。消除这样的垃圾代码的方法就是，选中代码，然后按Shift+Tab组合键左对齐。

2. CSS优化

CSS可以以调用的方式，避免同样的标签重复写样式，从而达到精简代码的效果。

第695道：
列举几个Web 2.0的特征。

解析：

1. 用户参与网站内容制作

与Web 1.0网站单项信息发布的模式不同，Web 2.0网站的内容通常是由用户发布的，用户既是网站内容的浏览者，也是网站内容的制作者，这也就意味着Web 2.0网站为用户提供了更多参与的机会，博客网站和wiki就是典型的用户创造内容的例子，而tag技术（用户设置标签）将传统网站中的信息分类工作直接交给用户来完成。

2. Web 2.0更加注重交互性

用户在发布内容过程中实现与网络服务器之间交互，即同一网站不同用户之间的交互，以及不同网站之间信息的交互。

3. 符合Web标准的网站设计

Web标准是目前国际上正在推广的网站标准，通常所说的Web标准一般是指网站建设采用基于XHTML语言的网站设计，实际上，Web标准并不是某一标准，而是一系列标准的集合。Web标准中典型的应用模式是“CSS+DIV”，摒弃了HTML 4.0中的表格定位方式，其优点之一是网站设计代码规范，并且减少了大量代码，减少网络带宽资源浪费，加快了网站访问速度。更重要的一点是，符合Web标准的网站对于用户和搜索引擎更加友好。

4. Web 2.0与Web 1.0没有绝对的界限。

Web 2.0技术可以成为Web 1.0网站的工具，一些在Web 2.0概念之前诞生的网站本身也具有Web 2.0的特性，例如，B2B电子商务网站的免费信息发布和网络社区类网站的内容也来源于用户。

5. Web 2.0的核心不是技术而在于指导思想。

Web 2.0有一些典型的技术，但技术是为了达到某种目的所采取的手段。Web 2.0技术本身不是Web 2.0网站的核心，重要的在于典型的Web 2.0技术体现了具有Web 2.0特征的应用模式。因此，与其说Web 2.0是互联网技术的创新，不如说是互联网应用指导思想的革命。

第696道：
你对前端界面工程师这个职位是怎么理解的？它的前景怎么样？

解析：

前端工程师是一个很新的职业，在国内乃至国际上真正开始受到重视的时间不超过5年。互联网的发展速度迅猛，网页由Web 1.0到Web 2.0，再到新生的HTML5、CSS3，到现在手机、4G网络等新科技的兴起；网页也由最原先的图文为主，到现在各种各样的基于前端技术实现的应用、交互和富媒体的呈现，更多的信息、更丰富的内容、更友好的体验，已经成为网站前端开发的要求，网站的前端开发发生了翻天覆地的变化。网站的开发对前端的需要越来越重要，但目前前端工程师需求远大于供给，前端人才非常紧缺。所以高质量的前端开发工程师将会是后5年内一个非常热门的职业，发展的前景非常可观。

第697道：
简述一下AppCan。

解析：

AppCan是正益无线自主研发的国内首个HTML5移动应用开发平台，可以简单、快速、高效地开发移动应用。

AppCan支持跨平台开发，实现一次开发，多平台、多分辨率自动适配，目前已经支持的平台有iOS、Android、Symbian、Windows Phone。

第698道：
说一说前端开发中，你遇到的一些问题。

解析：

前端开发中，主流的效果有很多，当然对于自身来讲，也就有很多觉得难的效果，以下列举出了几个比较具有代表性的示例（根据自身情况回答）：

（1）关于JavaScript跨域请求Jsonp的原理。

（2）关于JavaScript冒泡事件。

（3）jQuery.attr().prop().data()区别及全选问题。

（4）JSDoc配置和使用。

（5）HTML5之canvas画布旋转。

第699道：
你认为自己写过最长的是哪种效果的脚本？

解析：

下面列举出了几种比较好的效果，当然，还需要根据自身情况来回答。

（1）原生的焦点图。

（2）JavaScript图片的放大缩小。

（3）关于JavaScript图片延迟加载事件。

（4）JavaScript时间冒泡及其排序方法。

第700道：
说一下Ajax的流程。

解析：

（1）定义一个全局变量来保存XMLHttpRequest对象。

如：var xmlHttp;

（2）写一个函数用来创建XMLHttpRequest对象。

function createXMLHttpRequest(){
if(window.ActiveXObject){ //这个是创建一个IE浏览器的
XMLHttpRequest对象;
xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');
}else{//这个是创建一个其他浏览器的XMLHttpRequest对象;
xmlHttp=new XMLHttpRequest();
}
}

（3）定义一个回调函数，用于处理你想处理的数据。

function handleStateChang(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
//在这里写你要实现的功能
alert("OK");
}
}
}

（4）定义一个函数，用于与服务器端进行通信。

function doSearch(){
//创建XMLHttpRequest对象;
createXMLHttpRequest();
//将回调函数赋值给XMLHttpRequest对象的onreadystatechang方法;
xmlHttp.onreadystatechang=handleStateChang;
//调用XMLHttpRequest对象的open方法, 并且给定相关参数
xmlHttp.open("GET","dynamicContent.xml",true);
xmlHttp.send(null);
}

第701道：
简述一下复选框的只读效果。

解析：

在Web开发中，有时候需要显示一些复选框（checkbox），表明这个地方是可以进行勾选操作的，但是，有时候只是想告知用户这个地方是可以进行勾选操作的，而不想让用户在此处勾选（比如在信息展示页面），这时候就需要将复选框设置成只读的效果。

提到只读，很容易想到使用readonly属性，但是对于复选框来说，这个属性和期望得到的效果是有差别的。原因在于readonly属性关联的是页面元素的value属性（例如textbox，设置了readonly就不能修改输入框的文本内容），而复选框的勾选/取消并不改变其value属性，改变的只是一个checked状态。所以，对于checkbox来说，设置了readonly，仍然是可以勾选/取消的。

和readonly类似的，还有一个disabled属性，这个属性的作用是设置页面元素为不可用，即不可进行任何交互操作（包括不可修改value属性、不可修改checked状态等）。

第702道：
JS使用得多吗，熟练吗？

解析：

需根据自身的情况，具体问题具体分析。

（1）一般的JS效果还是比较熟练的。

（2）用过多种JS插件，比如：zepto.JS、exet.JS。

第703道：
对于CSS和JS，你比较偏向哪个？

解析：

不同的效果偏向不同的技术。

CSS一般比较倾向于页面的排版效果的实现。JS则是对于交互效果的实现有着决定性的作用。

第704道：
怎么与后台衔接？

解析：

（1）接收用户请求。

（2）找到负责处理的程序。

（3）处理程序，找到要传输给用户的前端页面。

（4）给前端页面留出位置。

（5）后端到数据库取数据。

（6）后端把数据放在前端留出来的位置上。

（7）结合成真正用户看到的HTML文件。

（8）传输给用户。

第705道：
怎么写jQuery插件？

解析：

jQuery（以下简称JQ）是一个功能强大而又小巧的JS框架，现在很多网站都在使用JQ。下面教大家如何写一个属于自己的JQ插件。本JQ插件的例子是在网站的文章结尾处添加版权信息。JQ插件标准的封装代码如下。

首先，需要闭包。

<script type="text/javascript">
(function ($) {
//这里放入插件代码
})(jQuery);
</script>

这是jQuery官方的插件开发规范，这样写的作用是：

（1）避免全局依赖。

（2）避免第三方破坏。

（3）兼容jQuery操作符'$'和'jQuery'。

接着，给插件加入主体。

<script type="text/javascript">
(function ($) {
$.fn.userCp = function(options) { //定义插件的名称, 这里为userCp
var dft = {
//以下为该插件的属性及其默认值
cpBy: "dafi", //版权所有者
url: "http://www.qdjhu.com", //所有者链接
size: "12px", //版权文字大小
align: "left" //版权文字位置, left || center || right
};
var ops = $.extend(dft,options);
var style = 'style="font-size:' + ops.size + ';text-align:'
+ops.align + ';"'; //调用默认的样式
var cpTxt = '<p' + ' ' + style + '>此文章版权归<a target="_
blank" href="' + ops.url + '">' + ops.cpBy + '</a>所有</p>';
//生成版权文字的代码
$(this).append(cpTxt); //把版权文字加入想显示的DIV
}
})(jQuery);
</script>

第706道：
简述App效果的流程。

解析：

不论是iOS还是Android的应用开发，其实都遵循着一定的开发流程，只有这样才能使开发过程有章可循，而不是一团乱。

明确你的构想和理念。

（1）你的App应用是开发给谁用的？是写给小孩玩的游戏，还是用来理财的记账类应用。每个应用都有固定的适用人群，而这决定你应用的内容是什么，也决定了要给使用者以什么样的用户体验。

（2）你的App应用是做什么的？一个App有明确的使用目的。如何来明确？一个办法就是要想清楚什么能吸引用户来使用你的App。

（3）你的App能解决什么问题？一个App应该致力于解决好一个问题，而不是处理很多毫无相关的问题，那样你就要考虑开发几个不同的App。每个App都应该专注解决一类问题。

（4）设计用户界面。有了明确的理念和构想，下面就该设计用户界面了，用户界面是App使用者与你的App交互的地方，应该遵循简洁、美观、便捷的原则，从App使用者的角度出发，带给用户良好的使用体验。

（5）定义交互方式。

用户界面因为有了交互才变得“活”起来。在App开发中，交互的启用都是通过用户操作的事件来触发的，比如手指的单击、滑动、捏合等操作。通过定义这些事件，我们可以精确地对用户的操作给出响应，或者打开新的界面，或者提供展现的内容在当前界面上。

（6）部署用户行为。

定义好交互方式后，接下来就要通过代码来实现这些定义好的行为了。可以说用户的所有操作都是通过我们实现的定义来得到响应的，如果没有前面明确的定义，那么会给用户带来困扰，这是一个好的App所不能出现的错误。

（7）数据交互的部署。

有了设计好的用户界面和交互方式，接下来就要考虑数据的存储问题。

在界面与数据之间必须要定义明确的交互方式，尽管使用App的人不直接和这些数据交互，但是，一个好的数据模型是App的坚实基础，它会使你的App更有扩展性，更易于将来的修改。

第707道：
MySQL能用来干什么？

解析：

MySQL是一个关系型数据库管理系统，由瑞典MySQL AB公司开发，目前属于Oracle公司。MySQL是最流行的关系型数据库管理系统，在Web应用方面，MySQL是最好的RDBMS（Relational Database Management System，关系数据库管理系统）应用软件之一。

MySQL是一种关联数据库管理系统，关联数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，这样就提高了速度，并增加了灵活性。MySQL所使用的SQL语言是用于访问数据库的最常用标准化语言。MySQL软件采用了双授权政策，它分为社区版和商业版，由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，一般中小型网站的开发都选择MySQL作为网站数据库。由于其社区版的性能卓越，搭配PHP和Apache可组成良好的开发环境。

第708道：
你了解Java吗？

解析：

了解。Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由Sun Microsystems公司于1995年5月推出的Java程序设计语言和Java平台（即JavaEE、JavaME、JavaSE）的总称。Java自面世后就非常流行，其发展迅速，对C++语言形成了有力冲击。Java技术具有卓越的通用性、高效性、平台移植性和安全性，广泛应用于PC、数据中心、游戏控制台、科学超级计算机、移动电话和互联网，同时拥有全球最大的开发者专业社群。在全球云计算和移动互联网的产业环境下，Java更具备了显著的优势和广阔的前景。

第709道：
你知道Cocos2d吗？

解析：

Cocos2d是一个基于MIT协议的开源框架，用于构建游戏、应用程序和其他图形界面交互应用。它可以让你在创建自己的多平台游戏时节省很多时间。游戏开发者可以把关注焦点放在游戏设置本身，而不必消耗大量时间学习晦涩难懂的OpenGL ES，此外，Cocos2d还提供了大量的规范。Cocos2d基于OpenGL ES进行图形渲染，从而让移动设备的GPU性能发挥到极致。另外，2012年发布的CocoStudio工具集是开源游戏引擎Cocos2d-x开发团队官方推出的游戏开发工具，目前已经进入稳定期。CocoStudio吸取了他们在游戏制作中的经验，为移动游戏开发者和团队量身定做，旨在降低游戏开发的门槛，提高开发效率，同时也为Cocos2d-x的进一步发展打下基础。

第710道：
简单说一下SEO优化。

解析：

SEO是指在了解搜索引擎自然排名机制的基础上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中关键词的自然排名，获得更多流量，吸引更多目标客户，从而达到网络营销及品牌建设的目的。

第711道：
Ajax底层是依靠什么完成请求的？

解析：

事实上整个Ajax的无刷新功能就是利用XMLHttpRequest的异步请求来完成的。

首先，我们创建一个XMLHttpRequest对象（由于浏览器不同需要相应判断处理），设置相应的请求信息（通过open来做，例如请求地址等设置）；

然后，我们绑定onreadystatechange事件，在这个事件中，我们根据服务器返回状态的不同来做出不同处理，这其中主要是请求成功后接收相应的返回值，通过JavaScript对客户端做出相应操作（我们只是显示有关信息）；

最后，我们发送这个请求（通过send方法）。

第712道：
JS中的闭包、继承、原型链，你比较熟悉哪个，并简单描述一下。

解析：

1. 闭包

闭包（closure）的概念：闭包，简单的理解，就是能够读取其他函数内部变量的函数；从本质上理解，就是将函数内部和函数外部连接起来的一座桥梁。

闭包的用途：一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

理解JavaScript的闭包是迈向高级JS程序员的必经之路，理解了其解释和运行机制才能写出更安全和优雅的代码。

2. 继承

JS中继承跟Java中的继承不太一样，一般通过call()和apply()两种方式完成，JS中的继承是以复制的形式完成的，复制一个父对象，而不像Java中直接继承父对象。通过原型的方式完成继承，也有弊端。总之，JS中的继承只是形式上的对面向对象语言的一种模仿，本质上不是继承，但用起来效果是一样的。至于为什么要继承，通常在一般的项目里不需要，因为应用简单，但要用纯JS做一些复杂的工具或框架系统就要用到了，比如webgis，或者JS框架，如jQuery、ext等，不然一个几千行代码的框架不用继承得写几万行，而且还无法维护。

3. 原型链

ECMAScript中描述了原型链的概念。我们知道ECMAScript并不像C++和Java那样使用类，但是对象仍然可以通过多种方式创建，其中就有构造函数方式。每个构造函数都有一个原型对象，同时都有一个prototype属性。prototype属性指向构造函数的原型对象，它被用来实现基于原型的继承和共享。而原型对象又都默认会取得一个constructor属性，这个属性包含一个指向构造函数（prototype属性所在函数）的指针。每个通过调用构造函数创建的实例对象都拥有一个指向原型对象的指针，ECMA-262第5版中叫这个指针为[[prototype]]，虽然在脚本上没有标准的方式访问[[prototype]]，但Chrome、Firefox和Safari浏览器在每个对象上都支持一个属性_proto_，而在其他实现中，这个属性对脚本是完全不可见的。假如原型对象等于另一个类型的实例，那么它就拥有指向创建该实例的构造函数的原型对象的指针，依此类推，就形成了一条指针链，这就是原型链的概念。

17.14　“助力14”：综合考察

第713道：
你了解的世界云计算公司有哪几家？

解析：

2013年，云计算已经深入实践，国内国外发展趋于同步。整个云计算产业中，IaaS（云的基础设施即服务）、PaaS（平台即服务）和SaaS（软件即服务）这样的学术性分类的界限日渐模糊。AWS发布OpsWorks、Elastic Beanstalk和CloudFront等PaaS功能；谷歌在GAE之外推出了GCE；Salesforce.com集成了PaaS产品Force.com和Heroku；Windows Azure跨IaaS、PaaS和SaaS，要打造私有云、公有云、混合云的统一管理云平台。国内，在梳理了300余家创新云计算服务提供商之后，发现融合现状更为明显，云生态系统会取代传统三类划分。其中，云平台提供商和云应用服务提供商渐成生态系统主流，前者寡头，后者分众。前者如阿里云、腾讯开放平台、百度云、新浪、微软Azure-世纪互联、盛大云、奇虎360开放平台、京东、中国电信、中国移动、中国联通、华为、中兴、品高、Ucloud；后者如蓝汛、瑞星、安全宝、金山云、七牛、酷盘、易思捷、超图软件、八百客、Xtools，以及已在中国市场蓬勃发展了20余年的正在转型的SI（系统集成商）和ISV（软件开发商）。

17.15　“助力15”：项目问题

第714道：
现有一个项目，你的身份是JS系统架构师，让你设计一个微博产品，你认为合理的方案是什么？

解析：

1. 微博的介绍

微博是微博客（MicroBlog）的简称，是一个基于用户关系的信息分享、传播，以及获取平台，用户可以通过Web、WAP，以及各种客户端组件个人社区，以140字左右的文字更新信息，并实现即时分享。

微博可以通过手机短信、彩信、WAP、电脑桌面的形式实现个人内容的更新，具有很强的草根性、信息发布的及时性与便捷性。它将便携式的移动信息终端通过固化的互联网有机地结合起来，使得信息的发布和关注变得更加简单且易于获得。

“微博是希望得到关注的人或企业的一种表达方式”，易观国际CEO于扬认为，国内微博的形式已向Twitter靠近。

2. 微博的企业用途

由于微博的一些天然特征，使得它对企业的运用更加方面灵活，特别是与传统的企业论坛、留言板、博客等功能对比，更具有优势，且其使用范围也不仅限于此。

（1）作为信息交互的交流工具，类似论坛等。

（2）作为企业电子商务网站的产品信息、经验分享的快速通道。如：通过手机拍照产品后，直接通过微博发布出来，询价、寻求帮助或发布产品价格。

（3）范媒体作用，能够快速获取新闻类信息。

（4）企业内部管理和沟通的工具，使员工能够向可能对此感兴趣的任何人发布他们的想法、活动，以及可能具有价值的信息。

（5）由于微博的发布简单、信息量大，对于网站而言能快速提高网站的新信息量，有助于提高搜索引擎的排名。

3. 市场发展情况

目前，市场几大门户网站开始推出微博客，用以帮助网站丰富内容，提供新闻和提升流量。

微软和谷歌已经开始给企业开发微博客系统，用以帮助企业内的交流和沟通。

4. 价格体系

只要支付一定的费用就可以使用属于自己的微博客系统，包括1年的互联网空间使用，同时可以绑定自己的专用域名。

第715道：
请设计一套方案，用于确保页面中JS已完全加载。

解析：

var n = document.createElement("script");
n.type = "text/javascript";
if(ua.IE){
n.onreadystatechange = function(){
var rs = this.readyState;
if('loaded' === rs || 'complete'===rs){
n.onreadystatechange = null;
f(id,url);
}
}else{
n.onload = function(){
f(id,url);
};
}

第716道：
如何设计突发大规模并发架构？请简单描述一下思路。

解析：

1. HTML静态化

其实大家都知道，效率最高、消耗最小的就是纯静态化的HTML页面，所以我们尽可能使网站上的页面采用静态页面来实现，这个最简单的方法其实也是最有效的方法。但是对于有大量内容并且频繁更新的网站，我们无法全部手动去逐个实现，于是出现了我们常见的信息发布系统——CMS，像我们常访问的各个门户站点的新闻频道，甚至它们的其他频道，都是通过信息发布系统来管理和实现的，信息发布系统可以实现最简单的信息录入，自动生成静态页面，还具备频道管理、权限管理、自动抓取等功能，对于一个大型网站来说，拥有一套高效、可管理的CMS是必不可少的。

除了门户和信息发布类型的网站，对于交互性要求很高的社区类型网站来说，尽可能的静态化也是提高性能的必要手段，将社区内的帖子、文章进行实时的静态化。当更新的时候，重新静态化也是大量使用的策略，像Mop的大杂烩就是使用了这样的策略，网易社区等也是如此。

同时，HTML静态化也是某些缓存策略使用的手段，对于系统中频繁使用数据库查询，但是内容更新很小的应用，可以考虑使用HTML静态化来实现，比如论坛的公用设置信息，这些信息目前主流的论坛都可以进行后台管理，并且将数据存储在数据库中，这些信息其实大量被前台程序调用，但是更新频率很小，可以考虑当后台更新时将这部分内容进行静态化，这样避免了大量的数据库访问请求。

2. 图片服务器分离

大家知道，对于Web服务器来说，不管是Apache、IIS还是其他容器，图片是最消耗资源的，于是我们有必要将图片与页面进行分离，这是多数大型网站都会采用的策略，他们都有独立的图片服务器，甚至有很多台图片服务器。这样的架构可以降低页面访问请求的服务器系统压力，并且可以保证系统不会因为图片问题而崩溃，在应用服务器和图片服务器上，可以进行不同的配置优化，比如Apache在配置ContentType时可以尽量少支持，尽可能少的loadmodule，保证更高的系统消耗和执行效率。

3. 数据库集群和库表散列

大型网站都有复杂的应用，这些应用必须使用数据库，那么，在面对大量访问时，数据库的瓶颈很快就能显现出来，这时，一台数据库将无法很快满足应用，于是我们需要使用数据库集群或者库表散列。

在数据库集群方面，很多数据库都有自己的解决方案，Oracle、Sybase等都有很好的方案，常用的MySQL提供的Master/Slave也是类似的方案，您使用了什么样的DB，就参考相应的解决方案来实施即可。

上面提到的数据库集群由于在架构、成本、扩张性方面都会受到所采用DB类型的限制，于是我们需要从应用程序的角度来考虑改善系统架构，库表散列是常用并且最有效的解决方案。将数据库进行分离，不同的模块对应不同的数据库或者表，再按照一定的策略对某个页面或者功能进行更小的数据库散列，比如用户表，按照用户ID进行表散列，这样就能够低成本地提升系统的性能，并且有很好的扩展性。搜狐的论坛就是采用了这样的架构，将论坛的用户、设置、帖子等信息进行数据库分离，然后对帖子、用户按照板块和ID进行散列数据库和表，最终可以在配置文件中进行简单的配置便能让系统随时增加一台低成本的数据库进来补充系统性能。

4. 缓存

搞技术的都接触过“缓存”一词，很多地方都会用到缓存。网站架构和网站开发中的缓存也是非常重要的，这里先讲述这两种最基本的缓存。高级和分布式的缓存在后面讲述。

架构方面的缓存，对Apache比较熟悉的人都能知道，Apache提供了自己的缓存模块，也可以使用外加的Squid模块进行缓存，这两种方式均可以有效地提高Apache的访问响应能力。

网站程序开发方面的缓存，Linux上提供的Memory Cache是常用的缓存接口，可以在Web开发过程中使用。比如，用Java开发时，就可以调用MemoryCache对一些数据进行缓存和通信共享，一些大型社区使用了这样的架构。另外，在使用Web语言开发时，各种语言都有自己的缓存模块和方法，PHP有Pear的Cache模块，Java就更多了，.NET不是很熟悉，相信也肯定有。

5. 镜像

镜像是大型网站常采用的提高性能和数据安全性的方法，镜像的技术可以解决不同网络接入商和地域带来的用户访问速度差异，比如ChinaNet和EduNet之间的差异就促使了很多网站在教育网内搭建镜像站点，使数据进行定时更新或者实时更新。在镜像的细节技术方面，这里不阐述太深，有很多专业的现成的架构和产品可选，也有廉价的通过软件实现的思路，比如Linux上的rsync等工具。

6. 负载均衡

负载均衡将是大型网站解决高负荷访问和大量并发请求采用的终极解决办法。

负载均衡技术发展了多年，有很多专业的服务提供商和产品可以选择，有以下的两个架构可以给大家做参考。

- 硬件四层交换

第四层交换使用第三层和第四层信息包的报头信息，根据应用区间识别业务流，将整个区间段的业务流分配到合适的应用服务器进行处理。第四层交换功能就像是虚拟IP，指向物理服务器。它传输业务服从的协议多种多样，有HTTP、FTP、NFS、Telnet或其他协议。这些业务在物理服务器基础上，需要复杂的载量平衡算法。在IP世界，业务类型由终端TCP或UDP端口地址来决定，在第四层交换中的应用区间则由源端和终端IP地址、TCP和UDP端口共同决定。

在硬件四层交换产品领域，有一些知名的产品可以选择，比如Alteon、F5等，这些产品很昂贵，但是物有所值，能够提供非常优秀的性能和很灵活的管理能力。当初，Yahoo中国有接近2000台服务器，使用了三四台Alteon就搞定了。

- 软件四层交换

大家知道了硬件四层交换机的原理后，基于OSI模型来实现的软件四层交换也就应运而生了，这样的解决方案实现的原理一致，不过性能稍差。但是满足一定量的压力还是游刃有余的，有人说软件实现方式其实更灵活，处理能力完全看你配置的熟悉能力。

我们可以使用Linux上常用的LVS（Linux Virtual Server）来解决软件四层交换，它提供了基于心跳线heartbeat的实时灾难应对解决方案，提高系统的鲁棒性，同时可提供灵活的虚拟VIP配置和管理功能，可以满足多种应用需求，这对于分布式的系统来说必不可少。

第717道：
如果一个项目由你一个人完成，你感觉会遇到什么问题，兼容性怎么解决？

解析：

因为不同浏览器使用内核及所支持的HTML（标准通用标记语言下的一个应用）等网页语言标准不同，以及用户客户端的环境不同（如分辨率不同），造成的显示效果不能达到理想效果。最常见的问题就是网页元素位置混乱、错位。目前暂没有统一的能解决这样的工具，最普遍的解决办法就是不断地在各浏览器间调试网页显示效果，通过对CSS样式控制，以及通过脚本判断并赋予不同浏览器的解析标准。

如果所要实现的效果可以使用框架，那么还有另一个解决办法，即在开发过程中使用当前比较流行的JS和CSS框架，如jQuery、YUI等，因为这些框架无论是底层的还是应用层的一般都已经做好了浏览器兼容，所以可以放心使用。除此之外，CSS提供了很多hack接口可供使用，hack既可以实现跨浏览器的兼容，也可以实现同一浏览器不同版本的兼容。

17.16　“助力16”：FIash

第718道：
如何解决Flash挡住层用z-index无效的问题？

解析：

在HTML中，如果嵌入Flash，默认会将Flash放在页面的最上面。也就是说，即使我们用绝对定位，将z-index设得无穷高，页面里的任何元素还是无法将它盖住。这时候，有两种方法可以控制Flash的z-index。

（1）在嵌入Flash时，设置Flash的wmode参数为opaque。

（2）在嵌入Flash时，设置Flash的wmode参数为transparent。

第719道：
Flash可以在HTML5中播放吗？

解析：

HTML5技术相对于Flash技术能使用本地播放器播放网页视频（比如iphone不支持Flash，也能播放网页上的视频），而Flash相对于HTML5十分吃CPU，事实上，HTML5所提供的API标准，彻底克制于Flash之上。一旦标准普及，毫无悬念，HTML5将“秒杀”Flash。伴随HTML5的普及，以及Java性能的逐渐提升，Flash在前端的领先优势将不复存在，网页低端与高端应用将会产生分流。

第720道：
怎么样才能让层显示在Flash之上？

解析：

可以把Flash设置为透明，如下：

<a href="http://www.qdljhu.com/">:</a>
<pre lang="html" line="1">
<param name="wmode" value="transparent" />

17.17　“助力17”：逻辑题

第721道：
甲、乙、丙、丁为四个整数。甲、乙之和与丙、丁之和相等。甲、丁之和大于乙、丙之和。乙大于甲、丙之和。这四个数由大到小的顺序应该是（　）

A. 甲、乙、丙、丁

B. 丁、丙、乙、甲

C. 丙、乙、丁、甲

D. 丁、乙、甲、丙

答案：
D

解析：

甲+乙>丙+丁①

甲+丁>乙+丙②

乙+丁>甲+丙③

①②相加得到甲>丙

①③相加得到乙>丙

②③相加得到丁>丙

由以上的推论来看，丙最小。

第722道：
刘健、马明、张益三个男生各有一个妹妹，这天，六个人一起打乒乓球，规定是男女混合双打，并且兄妹两人不搭伴。

第一盘对局情况是：刘健和小萍VS张益和小英。

第二盘对局情况是：张益和小红VS刘健和马明的妹妹。

请根据题干的条件，判断以下哪项为真？

A. 刘健和小红、马明和小英、张益和小萍各是兄妹。

B. 刘健和小英、马明和小萍、张益和小红各是兄妹。

C. 刘健和小萍、马明和小英、张益和小红各是兄妹。

D. 刘健和小红、马明和小萍、张益和小英各是兄妹。

答案：
A

解析：

由题干可知张益和小英不是兄妹，所以张益只能和小萍是兄妹，所以选项A正确。

第723道：
有两根不均匀分布的香，烧完每根香的时间是一个小时，你能用什么方法来确定一段15分钟的时间？

解析：

第一根香从两端同时燃烧，同时点燃第二根香的一端，此时记为时间点A。

当第一根香烧完时为半个小时，这时点燃第二根香的另一端，此时记为时间点B。

当第二根香烧完时，此时记为时间点C。

时间点B与时间点C之间为15分钟。

第724道：
没有人和每一个人都是朋友，张兰和李卉是朋友，李卉和李兰的每一个朋友都是朋友。如果以上陈述为真，则下列哪项不可能为真？

（1）每个人和张兰都是朋友。

（2）每一个人都和某一些人是朋友。

（3）存在某一个人，他和任何人都不是朋友。

A. 仅1

B. 仅2

C. 仅3

D. 1和2

答案：
A

解析：

“每个人和张兰都是朋友”表明“有人和每一个人都是朋友”；既然“没有人和每一个人都是朋友”，那当然就不可能存在某一个人和每一个人都是朋友，所以（1）不可能为真。“没有人和每一个人都是朋友”并不排斥每一个人都可以和某一些人是朋友，所以（2）不一者定为假。“存在某一个人，他和任何人都不是朋友”和“不存在某一个人，他和每一个人都是朋友”并不相互排斥，所以（3）可能为真。

第725道：
某地有一个村庄，村庄里住着骑士和无赖两种人。骑士总是讲真话，无赖总是讲假话。一天，一位了解这一情况的学者路过这个村庄，看见该村A、B两个人，他向A提出了一个问题：”你俩中有骑士吗？”A回答说：“没有”。学者听了A的回答，想了一想，就正确地推出了A和B各是哪种人。假设学者的推断是正确的，以下哪项是学者作出的判断？

A. A是骑士，B是无赖

B. A和B都是骑士

C. A和B都是无赖

D. A是无赖，B是骑士

答案：
D

解析：

假设A是骑士，则事实上两人中有骑士，因而他的回答就是句假话，但骑士不会说假话，因此，假设不成立，A不是骑士，而是无赖。由于无赖只讲假话，因此A的回答是句假话，即事实上两人中有骑士。因为A不是骑士，因此，B一定是骑士。所以，A是无赖，B是骑士。

第726道：
有排列成一行的4户人家，A家在B家的隔壁，A家与D家不相邻，D家与C家不相邻，

请问：C家的隔壁是哪家（　）

答案：
A家或者D家

解析：

1. A家在B家的隔壁，可得AB或BA。

2. A家与D家不是邻居，可得ABCD，或ABDC，或CABD，或CDBA，或DCBA，或DBAC。

3. 如果D家与C家也不相邻，可得CABD，或DBAC。

故此，C家的邻居可能是A或者D。

4. 有排列成一行的四户人家，所以不能组成环形，D排除。

第727道：
假如半夜12点钟开始下雨，那么72小时后能出太阳吗？

A. 能

B. 不能

C. 不知道

答案：
B

解析：

根据实际情况分析，72小时后还是半夜12点，那么当然不会出太阳。

第728道：
一堆西瓜，一半的一半的一半比一半的一半少半个，这堆西瓜有多少个？

解析：

由题意可列方程

1/4x-1/8x=0.5

1/8x=0.5

x=4

应该是4个。

很简单，就是比它多切一半的少了二分之一个西瓜。所以说少切了一半那个就必须是1个西瓜了。

第729道：
数学竞赛共有10题，每答对一题得5分，不回答或答错一题扣3分，要得到34分必须答对多少题？

答案：
要得到34分必须答对8题。

解析：

假设你答对x道题，不回答或者答错就是（10-x）道题，则：

5x-3（10-x）=34

5x-30+3x=34

8x=64

x=8

第730道：
你有两个桶，容量分别是3升和5升，同时还有大量的水，你怎么才能准确量出4升的水？

解析：

（1）将5升桶倒满。

（2）把5升桶的水倒满3升桶，剩下2升水。

（3）将3升桶的水倒光。

（4）把5升桶里剩下的2升水倒入3升桶。

（5）将5升桶倒满。

（6）把5升桶的水倒入3升桶至满。

（7）此时5升桶里刚好剩下4升水。

第731道：
你有四个装药丸的罐子，每罐内有多个药丸，其中一个罐的药丸全被污染，干净药丸都是1g，被污染的药丸是2g，只称量一次，如何判断哪个罐子的药丸被污染了？

解析：

第一个药罐拿1个药丸；第二个药罐拿2个药丸；第三个药罐拿3个药丸；第四个药罐拿4个药丸。开始计算标准的10颗药重量，并且与现在的10颗药比较：如果重量多1g，就是第一个药罐污染了；如果重量多2g，就是第二个药罐污染了；如果重量多3g，就是第三个药罐污染了；如果重量多4g，就是第四个药罐污染了。

第732道：
若一棵树的其中一面布满青苔，这样的青苔怎样分南北呢？

解析：

由常识可知：长在石头上的青苔性喜潮湿，不耐阳光，因而青苔通常生长在石头的北面。

第733道：
请填写此数列中下一个数：6,10,14,18,22，_____。

解析：

由规律可得：第n个数是6+4(n-1)=4n+2。

第二个是第一个加4，第三个是第一个加两个4，第四个是第一个加三个4……第n个是第一个加n-1个4。

填空处为第六个数，所以该处应为6+4（6-1）=4×6+2=26。

第734道：
下列选项中，哪一个应该填在“XOOOOXXOOOXXX”后面（　）。

A. XOO

B. OOX

C. OXO

D. OXX

答案：
B

解析：

观察“XOOOOXXOOOXXX”可知：

顺序为一个X、两个X、三个X，然后是四个O、三个O，所以后面应为两个O。

第735道：
括号里应填什么字母？B、F、K、Q、（　）

答案：
T

解析：

B、F、K、Q在26个英文字母表中对应位置为2、6、11、17，该数列是一个二级等差数列，一级差为4、5、6，二级差为1，即下个字母在字母表中的对应位置应是6+1+13=20，即字母T。

第736道：
1元钱1瓶汽水，喝完后2个空瓶换1瓶汽水。问：你有20元钱，最多可以喝到几瓶汽水？

解析：

对于这道题有以下三种解题思路。

解题思路1：

一开始20瓶没有问题，随后的10瓶和5瓶也都没有问题，接着把5瓶分成4瓶和1瓶，前4个空瓶再换2瓶，喝完后2瓶再换1瓶，此时喝完后手头上剩余的空瓶数为2个，把这2个瓶换1瓶继续喝，喝完后把这1个空瓶换1瓶汽水，喝完换来的那瓶再把瓶子还给人家即可，所以最多可以喝的汽水数为：20+10+5+2+1+1+1=40。

解题思路2：

先看1元钱最多能喝几瓶汽水。喝1瓶余1个空瓶，借商家1个空瓶，2个瓶换1瓶继续喝，喝完后把这1个空瓶还给商家。即1元钱最多能喝2瓶汽水。20元钱当然最多能喝40瓶汽水。

解题思路3：

2个空瓶换1瓶汽水，可知纯汽水只值5角钱。20元钱当然最多能喝40瓶的纯汽水。N元钱当然最多能喝2N瓶汽水。

由以上可知，假如我有20元，最多可以喝到40瓶汽水。

第737道：
一群人开舞会，每人头上都戴着一顶帽子。帽子只有黑白两种，黑的至少有一顶。每个人都能看到其他人帽子的颜色，却看不到自己的。主持人先让大家看看别人头上戴的是什么颜色的帽子，然后关灯，如果有人认为自己戴的是黑帽子，就打自己一个耳光。第一次关灯，没有声音。于是再开灯，大家再看一遍，关灯时仍然鸦雀无声。一直到第三次关灯，才有劈劈啪啪打耳光的声音响起。问有多少人戴着黑帽子？

解析：

有三个人戴黑帽子。假设有N个人戴黑帽子，当N=1时，戴黑帽子的人看见别人都为白则能肯定自己为黑。于是第一次关灯就应该有声。可以断定N>1。对于每个戴黑帽子的人来说，他能看见N-1顶黑帽，并由此假定自己为白。但等待N-1次还没有人打自己以后，每个戴黑帽子的人都能知道自己也是黑的了。所以第N次关灯就有N个人打自己。

第738道：
有三个人去住旅馆，住三间房，每一间房10元，于是他们一共付给老板30元，第二天，老板觉得三间房只需要25元就够了，于是叫服务员退回5元给三位客人。谁知服务员贪心，给每人只退回1元，自己偷偷拿了2元，这样一来便等于那三位客人每人各花了9元，于是三个人一共花了27元，再加上服务员独吞了的2元，总共是29元。可是当初他们三个人一共支付出30元，那么还有1元呢？

解析：

这是个典型的偷梁换柱的题目。问题应为“服务员拿了2块钱”，是问者输入错误。

首先，我们应该弄清楚“他们每个人出了9块钱”是怎么回事：

三人交：10×3=30

老板收：30-5=25

每人给老板：25÷3=25/3

每人被服务员拿：2÷3=2/3

每人给老板和服务员的总额：25/3+2/3=9，每人给出10元，每人给老板和服务员的总额9元，所以应被找回1元。

其次，我们应该弄清楚为什么会出现“还有1元去哪里了”的现象：三人给老板和服务员的总额：25+2=27，即“每个人出了9元”，9×3=27，这27元包括服务员拿的2元了。

题目中有意在已经包含了“被服务员拿去的2元”的27元上，又加了一次“被服务员拿去的2元”来麻痹大家，却没有加应该“找回的3元”。其实，我说“他们每个人出了9元，服务员拿的2元包括在这三个9元里了”，你是不是就已经明白了呢？也就是说，本来应该是：（10×3-5）+2+3=30，却被算作了：（10×3-5）+2+2=29。

第6篇　功成时，把酒笑

——综合测试莫言愁

综合测试把重要的概念以知识链接的形式呈现，让我们不再为面试题而发愁。笔者通过大量资料查询和整理工作，并且根据实时的企业现状，编写了几套面试模拟题，相信会帮助大家更上一层楼。

第18章

前端开发面试题

18.1　前端面试模拟试题一

一、技术题

JS题型

1. JavaScript是一门什么样的语言，它有哪些特点？

答：JavaScript是一门脚本编写语言。它的特点是具有简单性、安全性、动态性、跨平台性。（此题没有标准答案，仅供参考）

2. JavaScript的数据类型都有什么？

答：字符串、数字、布尔、数组、对象、Null、Undefined。

3. 已知ID的Input输入框，希望获取这个输入框的值，怎么做？（不使用第三方框架）

答：document.getElementById("ID").value;

4. 希望获取到页面中所有的checkbox怎么做？（不使用第三方框架）

答：

var list=documemnt.getElementsByTagName('input');
var check=[];
var len=list.length; //缓存到局部变量
while(len--){
if(list[len].type=='checkbox'){
check.push(list[len]);
}
}

5. 设置一个已知ID的DIV的HTML内容为xxxx，字体颜色设置为黑色，请写出代码。（不使用第三方框架）。

答：

var cont=document.getElementById("ID");
cont.innerHTML="xxxx";
cont.style.color="black"

6. 当一个DOM节点被单击时，我们希望能够执行一个函数，应该怎么做？

答：首先，在DOM里绑定事件：<div onclick="text()"></div>

然后，在JS中通过onclick绑定：xxx.onclick=text

最后，通过事件添加进行绑定：addEventListener(xxx, "click", test)

7. 什么是Ajax和JSON？它们各有什么优缺点？

答：Ajax指异步JavaScript及XML（Asynchronous JavaScript And XML）。

优点：

（1）最大的优点是页面无刷新，用户的体验非常好。

（2）使用异步方式与服务器通信，具有更加迅速的响应能力。

（3）可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本，并且减轻服务器的负担。Ajax的原则是“按需取数据”，可以最大程度地减少冗余请求和响应对服务器造成的负担。

（4）基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

缺点：

（1）Ajax不支持浏览器back按钮。

（2）安全问题。Ajax暴露了与服务器交互的细节。

（3）对搜索引擎的支持比较弱。

（4）破坏了程序的异常机制。

（5）不容易调试。

JSON是JavaScript对象表示法（JavaScript Object Notation），是存储和交换文本信息的语法，类似XML。它比XML更小、更快、更易解析。

优点：

（1）作为一种数据传输格式，JSON与XML很相似，但是它更加灵巧。

（2）JSON不需要从服务器端发送含有特定内容类型的首部信息。

缺点：

（1）语法过于严谨。

（2）代码不易读。

（3）eval函数存在风险

8. 下列代码输出什么？解释原因。

1 var a;2 alert(typeof a); // undefined3 alert(b); //报错

答：undefined是一个数据类型，只有一个值，这个值就是“undefined”，在使用var声明变量时，并没有对其赋值，这个变量的值就是undefined，而b由于未声明将报错。

9. 下列代码输出什么？解释原因。

1 var a = null;2 alert(typeof a); //object

答：null是一个数据类型，只有一个值，这个值就是null，表示一个无类型指针，所以用typeof检测会返回“object”。

10. 下列代码输出什么？解释原因。

1 var undefined;2 undefined == null; // true3 1 == true; // true4 2 == true; // false5 0 == false; // true6 0 == ''; // true7 NaN == NaN; // false8 [] == false; // true9 [] == ![]; // true

答：undefined与null相等，但不恒等（===）。当一个是数，另一个是数组时，会尝试将数组转换为数。如何将object转换为number或string，取决于另外一个对比量的类型，对于0、空字符串的判断，建议使用“===”。“===”会先判断两边的值类型，类型不匹配时，值为false。

11. 看代码给答案。

1 var a = new Object();2 a.value = 1;3 b = a;4 b.value = 2;5 alert(a.value);

答：2

12. 已知数组var stringArray = ["This", "is", "Baidu", "Campus"]，

alert "This is Baidu Campus"

答：alert(stringArray.join(""))

本题考察基础API。

13. var numberArray = [3,6,2,4,1,5];

（1）实现对该数组的倒排，输出[5,1,4,2,6,3]

（2）实现对该数组的降序排列，输出[6,5,4,3,2,1]

答：

function num(sort){
var arr=sort.split("-");
for(var i=1;i<arr.length;i++){
arr[i]=arr[i].CharAt(0).toUpperCase()+arr[i].
substr(1,arr[i].leng)
sort=arr.join("");
return sort;
}
}

14. 输出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26。

答：

var d= new Date();//获取年getFullYear()返回4位的数字
var year=d.getFullYear();//获取月, 月份比较特殊, 0是1月, 11是12月
var month=d.getMonth()+1;//变成两位
month=month<10 ? '0'+month:month;//获取日
var day<10 ? '0'+day:day;
alert(year+ '-'+month + '-' +day);

15. 将字符串"<tr><td>{$id}</td><td>{$name}</td></tr>"中的{$id}替换成10，{$name}替换成Tony。（使用正则表达式）

答："<tr><td>{$id}</td><td>{$id}_{$name}</td></tr>".replace(/{\$id}/g,'10'). replace(/{\$name}/g, 'Tony')

16. 为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapehtml，将<, >, &,“进行转义。

答：

function escapehtml(str){
return str.repalce(/[<>"&]/g,function(math){
switch (math){
Case "<":
return "<";
case ">";
return "<";
case "&";
return "&";
case "\>";
return "";
}
})
}

17. foo = foo && bar，这行代码是什么意思？为什么要这样写？

答：if(!foo) foo = bar;

短路表达式：作为“&&”和“||”操作符的操作数表达式，在进行求值时，最终的结果就可以确定真假，求值过程结束。

18. 看下列代码，将会输出什么？（变量声明提升）

var foo = 1;
function(){
console.log(foo);
var foo = 2;
console.log(foo);
}

答：输出undefined和2。

19. 用JS实现随机选取10～100之间的10个数字，存入一个数组，并排序。

答：

function getRandom(istart,iend){//列出需要被选中的数据
var a1=[];
for(var i=0;i<91;i++){
a1[i]=i+10;
}
//挑选出随机数据
var a2=[];
for(var j=0;j<10;j++){
a2.push(a1.splice(Math.floor(Math.randow()*a1.length),1));
a2.sort();
alert(a2)
}
getRandow(10,100);

20. 把两个数组合并，并删除第二个元素。

答：

var array1 = ['a','b','c'];
var array2= ['d','e','f'];
var array3 = array1.concat(array2);
array3.splice(1,1);

21. 怎样添加、移除、移动、复制、创建和查找节点（原生JS，没细化每一步）

答：（1）添加、移除、替换、插入。

appendChild()//添加
removeChild()//移除
replaceChild()//替换
insertBefore()//插入

（2）创建新节点。

createDocumentFragment()//创建一个DOM片段
createElement()//创建一个具体的元素
createTextNode()//创建一个文本节点

（3）查找。

getElementByTagName()//通过标签名称
getElementByName()//通过元素的name属性的值
getElementById()//通过元素的id,唯一性

22. 正则表达式构造函数var reg=new RegExp("xxx")与正则表达字面量var reg=//有什么不同？如何匹配邮箱的正则表达式？

答：当使用RegExp()构造函数时，不仅需要转义引导（\）,而且需要双反斜杠（\\）。

匹配邮箱的正则表达式:

/^[a-z]([a-z0-9]*[-_]?[a-z0-9]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+[\.][a-z]{2,3}([\.][a-z]{2})?$/i;

23. 看下面代码，给出输出结果。

for(var i=1;i<=3;i++){
setTimeout(function(){
console.log(i);
},0);
};

答：4 4 4

24. 写一个function，清除字符串前后的空格。（兼容所有浏览器）

答：

function trim(mystr) {
while ((mystr.indexOf(" ") == 0) && (mystr.length > 1)) {
mystr = mystr.substring(1, mystr.length);
}//去除前面空格
while ((mystr.lastIndexOf(" ") == mystr.length - 1)
&& (mystr.length > 1)) {
mystr = mystr.substring(0, mystr.length - 1);
}//去除后面空格
if (mystr == " ") {
mystr = "";
}
return mystr;
}

25. JavaScript中callee和caller有何作用？

答：callee是返回正在被执行的function函数，也就是所指定的function对象的正文。caller返回一个对函数的引用，即调用了当前函数的函数体。

26. 实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值的复制。

考察点1：对于基本数据类型和引用数据类型在内存中存放的是值还是指针这一区别是否清楚。

考察点2：是否知道如何判断一个变量是什么类型的。

考察点3：递归算法的设计。

答：

Object.prototype.clone=function(){
var o=this.constructor===array ? []:{};
for(var e in this){
o[e]=typeof this[e]===”object” ? This[e].clone :this[e];
}
return o;
}

27. 如何消除一个数组里面重复的元素？

答：

var arr=[1,2,3,3,4,4,5,5,6,1,9,3,25,4];
function deRepeat(){
var newArr=[];
var obj={};
var index=0;
var l=arr.length;
for(var i=0;i<1;i++){
if(obj[arr[i]]==undefined){
obj[arr[i]]=1;
newArr[index++]=arr[i];
}else if(obj[arr[i]]==1)
continue;
}
return newArr;
}
var newArr2=deRepeat(arr);
alert(newArr2);

28. 小贤是一条可爱的小狗（Dog），它的叫声很好听（wow），每次看到主人时就会乖乖叫一声（yelp）。从这段描述可以得到以下对象：

function Dog() {
this.wow = function() {
alert('Wow');
}
this.yelp = function() {
this.wow();
}
}

小芒和小贤一样，原来也是一条可爱的小狗，可是突然有一天疯了（MadDog），看到人就会每隔半秒叫一声（wow），且不停地叫唤（yelp）。请根据描述，按示例的形式用代码来实现。（继承，原型，setInterval）

答：

function MadDog(){
this yelp=function(){
var self=this;
setInterval(function(){
self.wow(
},500)
}
}
MadDog.prototype=new Dog();
var dog=new Dog();
Dog.yelp();
var madDog=new MadDog();
madDog.yelp();

29. 下面这个ul，如何单击每一列时alert其index（闭包）？

<ul id="test">2 <li>这是第一条</li>3 <li>这是第二条</li>4 <li>这是第三条</li>5 </ul>

答：

var lis=document.getElementById('2223'). getElementByTagName
('li');
for(var i=0;i<3;i++){
lis[i].index=i;
lis[i].onclick=function(){
alert(this.index);
};
}

30. 编写一个JavaScript函数，输入指定类型的选择器（仅需支持id、class、tagName三种简单CSS选择器，无需兼容组合选择器）可以返回匹配的DOM节点，需考虑浏览器兼容性和性能。

答：

var query = function(selector) {
var reg = /^(#)?(\.)?(\w+)$/img;
var regResult = reg.exec(selector);
var result = [];
//如果是id选择器
if(regResult[1]) {
if(regResult[3]) {
if(typeof document.querySelector === "function") {
result.push(document.querySelector(regResult[3]));
}
else {
result.push(document.getElementById(regResult[3]));
}
}
}
//如果是class选择器
else if(regResult[2]) {
if(regResult[3]) {
if(typeof document.getElementsByClassName === 'function')
{
var doms = document.getElementsByClassName(regResult[3])
if(doms) {
result = converToArray(doms);
}
}
//如果不支持getElementsByClassName函数
else {
var allDoms = document.getElementsByTagName("*") ;
for(var i = 0, len = allDoms.length; i < len; i++) {
if(allDoms[i].className.search(new
RegExp(regResult[2])) > -1) {
result.push(allDoms[i]);
}
}
}
}
}
//如果是标签选择器
else if(regResult[3]) {
var doms = document.getElementsByTagName(regResult[3].
toLower Case());
if(doms) {
result = converToArray(doms);
}
}
return result;
}
function converToArray(nodes){
var array = null;
try{
array = Array.prototype.slice.call(nodes,0);//针对非
IE浏览器
}catch(ex){
array = new Array();
for( var i = 0 ,len = nodes.length; i < len ; i++ ) {
array.push(nodes[i])
}
}
return array;
}

31. 请评价以下代码，并给出改进意见。

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);10 });
}
}

答：

（1）不应该在if和else语句中直接使用addListener函数，应该先声明；

（2）不需要使用window.addEventListener或document.all来检测浏览器，应该使用能力检测。因为attachEvent在IE中有this指向问题，所以不可以直接调用。

改进意见：

function addEvent(elem, type, handler){
if(elem.addEventListener){
elem.addEvent Listener(type, handler, false);
}else if(elem.attachEvent){
elem['temp' + type + handler] =handler;
elem[type + handler] = function(){
elem['temp' + type + handler].apply(elem); 　　};
elem.attachEvent('on' + type, elem[type + handler]);
}
else{
elem['on' + type] = handler;
} }

32. 给String对象添加一个方法，传入一个String类型的参数，然后将String的每个字符间添加空格返回，例如：

addSpace("hello world") // -> 'hello world'
String.prototype.spacify = function(){
return this.split('').join(' ');
};

（1）直接在对象的原型上添加方法是否安全？尤其是在Object对象上。

答：不安全可能在项目工作中被其他框架或库的方法给覆盖掉。

（2）函数声明与函数表达式有什么区别？

答：事实上，JS的解析器对函数声明与函数表达式并不是一视同仁地对待的。对于函数声明，JS解析器会优先读取，确保在所有代码执行之前声明已经被解析，而函数表达式，如同定义其他基本类型的变量一样，只在执行到某一句时才会对其进行解析，所以在实际中，它们还是有差异的，具体表现在，当使用函数声明的形式来定义函数时，可将调用语句写在函数声明之前，而后者这样做的话会报错。

33. 定义一个log方法，让它可以代理console.log的方法。

答：

function log(text)　{
console.log(text);
}
log("hello world!")

34. 在JavaScript中，什么是伪数组？如何将伪数组转化为标准数组？

答：伪数组能通过Array.prototype.slice转换为真正的数组，它是带有length属性的对象。这种对象有很多，比较特别的是arguments对象，还有像调用getElementsByTagName,document.childNodes之类的，它们都返回NodeList对象，都属于伪数组。我们可以通过Array.prototype.slice.call(fakeArray)将伪数组转换为真正的Array对象。

35. 对作用域上下文和this的理解，看下列代码：

var User = {
count: 1,
getCount: function() {
return this.count;
}
};
console.log(User.getCount());
var func = User.getCount;
console.log(func());

问两处console输出什么？为什么？

答：输出1和undefined。

因为function是在window的上下文中被执行的，所以访问不到count属性。

36. 原生JS的window.onload与jQuery的$(document).ready(function(){})有什么不同？jQuery中的ready()方法使用JS是怎么实现的？

答：window.onload()方法是必须等到页面内的所有元素（包括图片）加载完毕后才能执行。

$(document).ready()在DOM结构绘制完毕后就执行，不必等到加载完毕。

function ready(fn){
if(document.addEventListener){
document.addEventListener('DOMContentLoaded', function() {
document.removeEventListener('DOMContentLoaded',arguments.callee,
false);
fn();
}, false);
}else if(document.attachEvent) {
document.attachEvent('onreadystatechange', function() {
if(document.readyState == 'complete') {
document.detachEvent('onreadystatechange', arguments.callee);
fn();
}
});
}
};

37. （设计题）如何实现一个对页面某个节点的拖曳？（使用原生JS）

答：

（1）需要三个主要事件：mousedown鼠标按下事件、mousemove鼠标移动事件、mouseup鼠标按键抬起事件。

（2）触发mousedown事件后，开始拖曳。

（3）mousemove时，需要通过event.clIEntX和clIEntY获取拖曳位置。

（4）mouseup时，拖曳结束。

38. 用面向对象的JavaScript来介绍一下自己。

答：

function extend(sup, overrides) {
var sub = overrides && overrides.constructor || function() {
sup.apply(this, arguments);
};
var fn = function() {};
var subp;
fn.prototype = new sup;
subp = sub.prototype = fn.prototype;
subp.constructor = sub;
apply(subp, overrides);
sub.superClass = sup.prototype;
return sub;
}
function apply(o, c) {
if (o && c && typeof c == 'object') {
for (var p in c) {
o[p] = c[p];
}
}
return o;
}
function FrontEnder() {
this.skills = ['HTML', 'CSS', 'JavaScript'];
}
apply(FrontEnder.prototype, {
code: function() {
console.log('我能编写和处理业务逻辑代码');
},
paint: function() {
console.log('我能还原设计稿');
},
debug: function() {
console.log('我能使用工具调试代码');
};
});
var Me = extend(FrontEnder, {
constructor: function() {
var _character = '';
return function Me(config) {
config = config || {};
Me.superClass.constructor.call(this);
this.skills = this.skills.concat(['HTML5', 'CSS3',
'jQuery', 'Zepto', 'jQuery', 'Ajax']);
apply(this, config);
}
}(),
paint: function() {
Me.superClass.paint.call(this);
console.log('我可以用CSS3、HTML5还原设计稿');
},
code: function() {
Me.superClass.code.call(this);
console.log(function() {
}.toString().split('\n').slice(2, -2).toString().
replace(/\t/g, '').split(',').join('\n'))
},
manage: function() {
console.log('我有一个属于自己的代码库和记录知识点的博客');
},
habit: function() {
console.log('twitter、HTML5Rock、CSS3-trick、W3.org...');
},
enjoy: function() {
console.log('我喜欢打篮球和看NBA, 最喜欢的球员是Steve•Nash');
}
});
var me = new Me({
ChineseName: 'xxx',
EnglishName: 'xxx',
Birthday: 'xxxx',
Email: 'xxx.com',
School: 'xxx'
});
console.dir(me);

39. 讲解用原生JS实现Ajax的原理。

答：Ajax是异步通信的一种技术，主要实现技术是JavaScript+XML+ HTML+ CSS+服务端。Ajax的技术核心是XMLHttpRequest对象；Ajax请求过程：创建XMLHttpRequest对象、连接服务器、发送请求、接收响应数据。例如：

Ajax({url: "./TestXHR.aspx", //请求地址
type: "POST", //请求方式
data: { name: "super", age: 20 }, //请求参数 dataType: "JSON",
success: function (response, xml) { // 此处放成功后执行的代码 },
fail: function (status) { // 此处放失败后执行的代码 } });
function Ajax(options) {
options = options || {};
ptions.type = (options.type || "GET").toUpperCase();
options.dataType = options.dataType || "Json";
var params = formatParams(options.data); //创建 - 非IE6 - 第一步
if (window.XMLHttpRequest) { var xhr = new XMLHttpRequest();}
else
{//IE6及以下版本浏览器 var xhr = new ActiveXObject
('Microsoft.XMLHTTP');} //接收 - 第三步
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var status = xhr.status;
if (status >= 200 && status < 300) {
options.success && options.success(xhr.responseText, xhr.
responseXML); }
else { options.fail && options.fail(status);
}
}
}
//连接和发送 - 第二步
if (options.type == "GET") {
xhr.open("GET", options.url + "?" + params, true);xhr.
send(null); }
else if (options.type == "POST") {
xhr.open("POST", options.url, true);//设置表单提交时的内容类型
xhr.setRequestHeader("Content-Type","application/x-www-f
orm-urlencoded";xhr.send(params);
}
}
//格式化参数
function formatParams(data) {
var arr = [];for (var name in data) {
arr.push(encodeURIComponent(name) + "=" +encodeURIC
omponent(data[name]))}arr.push(("v=" + Math.random()).
replace(".")); return arr.join("&");}

40. 写一个函数padstare(string str1,min_lenthg,string str2)，然后用英文解释每个参数的意思。

答：padstare('5', '3', '0')返回值是'005'。

padstare('798', '5', '0')返回值是'00798'。

意思是这样的，如果字符串str1的长度没有min_length大，就用str2来填充。

41. 写一个命令行字符的解析函数。

答：

-name XXX -age XXX -school "XXX" 返回的是[-name XXX ,-age XXX, -school "XXX"]
<script>
function getdata(str){
var Json={};
var gets =str.split('"')[0];
gets =gets.split(' ');
for(var i=0;i<gets.length-1;i++){
if(i%2==0){
Json[gets[i]]=gets[i+1];
}
}
Json[gets[gets.length-1]]=str.split('"')[1];
return Json;
}
</script>

42. 设计函数indexof（a, b），判断字符串a中是否包含字符串b，如果包含，那么返回其位置；如果不包含，那么返回-1。

答：

<script type="text/javascript">
function index of(str1,str2){
var len1=str1.length;
var len2=str2.length;
var ret=[];
if(len1 <len2) {
return false;
}else {
for(var i=0;i<=len1-len2;i++){
ret.push(str1.substr(i,len2);
if(ret[i]==str2){return i;}
else{return -1;}
}
}
}
</script>

43. 有10个<li>，在单击任意一个后，打印出单击的<li>的index。

答：

<script>
var myul= document.getElementsByTagName("ul")[0];
var myli= myul.children;
for(var i=0; i<myli.length; i++){
myli[i].index = i;
myli[i].onclick = function(){
console.log(this.index);
};
</script>

44. 如果是3.00元，则转为300分；如果是300分，则转为3.00元。

答：根据传入的数，判断是否为浮点数，是的话返回*100，否的话返回/100，然后toFixed。

var num=3.00;//元
num*=100;//转为300分
num=(num/100).toFixed(2);//再转为3.00元

toFixed()方法把Number四舍五入为指定小数位数的数字语法：

NumberObject.toFixed(num)

45. JS里面的基础对象和基础数据类有哪些？

答：数值、字符串型、布尔型、undefined和空值。

46. 如何在某一个位置插入一个DIV对象？例如：在下面的aId和bId间插入一个DIV对象。

<div>
<div id="aId">a</div>
<div id="bId">b</div>
<div id="cId">c</div>
<div id="dId">d</div>
</div>

答：

window.onload=function(){
var bdiv=document.getElementById('bId');
var box=document.createElement('div');
bdiv.parentNode.insertBefore(box,bdiv);
}

47. 说说XMLHttpRequest存有的几个状态（从0到4发生的变化）。

答：0：请求未初始化；

1：服务器连接已建立；

2：请求已接收；

3：请求处理中；

4：请求已完成，且响应已就绪。

48. JavaScript如何实现多线程计算，请列举一下常用的方案。

答：三个常驻线程：JavaScript引擎线程、界面渲染线程、浏览器事件触发线程。

49. JS中的三种弹出式消息提醒（警告窗口、确认窗口、信息输入窗口）的命令是什么？

答：alert、confirm、promit。

50. 按照CommonJS规范，在任何模块代码的作用域下设有内置以下哪些变量？

A. module

B. context

C. require

D. exports

答：B

51. 有这样一个URL：http://www.qdjhu.com/item.htm?a=1&b=2&c=&d=xxx&e，请写一个函数并提取URL中的各个GET参数（参数名和参数个数不确定），将其按key-value的形式返回到一个JSON结构中，如{a:'1', b:'2', c:'', d:'xxx', e:undefined}。

答：

function getUrlParamter() {
var url = location.search; //获取url中"?"符后的字串
var obj = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for(var i = 0; i < strs.length; i ++) {
obj[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
}
}
return obj;
}

52. 写一个函数，用来判断1个整数是否为质数。

解析：

只能被1或者本身整除的数叫质数。

function iszhishu(num) {
if (num == 1) {return false;}
else if (num == 2) { return true;}
for (var i = 2; i <= Math.sqrt(num); i++) {
if (num % i == 0) { return false;}
}
return true;
}

53. 判断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下画线，总长度为5～20。

答：var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;

reg.test("a1a__a1a__a1a__a1a__");

54. 截取字符串abcdefg中的efg。

答：

var str = "abcdefg";
if (/efg/.test(str)) {
var efg = str.substr(str.indexOf("efg"), 3);
alert(efg);
}

55. 判断一个字符串中出现次数最多的字符，统计其次数。

答：

var str = "abcdefgaddda";
var obj = {};
for (var i = 0, i = str.length; i &lt; l; i++) {
var key = str[i];
if (!obj[key]) {
obj[key] = 1;
} else {
obj[key]++;
}
}
var max = -1;
var max_key = "";
var key;
for (key in obj) {
if (max < obj[key]) {
max = obj[key];
max_key = key;
}
}
alert("max:"+max+" max_key:"+max_key);

56. IE与Firefox脚本有哪些兼容性问题。

答：（1）window.event：表示当前的事件对象，IE有这个对象，Firefox没有，Firefox通过给事件处理函数传递事件对象。

（2）获取事件源：IE用srcElement获取事件源，而Firefox用target获取事件源。

（3）添加、去除事件：

IE：element.attachEvent(“onclick”, function)

element.detachEvent(“onclick”, function)

Firefox：element.addEventListener(“click”, function, true)

element.removeEventListener(“click”, function, true)

（4）获取标签的自定义属性：

IE：div1.value或div1[“value”]

Firefox：可用div1.getAttribute(“value”)

（5）document.getElementByName()和document.all[name]

IE：document.getElementByName()和document.all[name]均不能获div元素，而Firefox可以。

（6）input.type的属性

IE：input.type只读；

Firefox：input.type可读写。

（7）是否可用id代替HTML元素

IE：可以用id来代替HTML元素；

Firefox：不可以用id来代替HTML元素。

57. 如何避免JavaScript多人开发函数重名问题。

答：（1）分工前应规定命名规范，然后再根据开发人员开发的功能在函数前加前缀。

（2）将每个开发人员的函数封装到类中，需要用的时候直接调用类函数，只要类名不重复就不会影响整体效果。

58. JavaScript面向对象中的继承实现一般使用什么？

答：JavaScript面向对象中的继承实现一般都使用到了构造函数和Prototype原型链，简单的代码如下：

function Person(name) {
this.name = name;
}
function Design(name,book){
Person.call(this,name);
This.book=book;
}
Extend(Person,Design)
Design.prototype.getBooks=function(){
Return this.book;
}

59. 在Firefox下如何实现outerHTML？

答：Firefox不支持outerHTML，要实现outerHTML还需要做一些处理。

在页面中添加一个新的元素A，复制一份需要获取outerHTML的元素，将这个元素append到新的元素中，然后获取新元素的innerHTML就可以了。

60. 编写一个方法，求一个字符串的字节长度。

答：

new function(s) {
if(!arguments.length||!s) return null;
if(""==s) return 0;
var l=0;
for(var i=0;i <s.length;i++) {
if(s.charCodeAt(i)>255) l+=2;
else l++;
} alert(l);
}("你");

61. 编写一个方法，去掉一个数组的重复元素。

答：

var arr = [1 ,1 ,2, 3, 3, 2, 1];
array.prototype.unique = function(){
var ret = [];
var o = {};
var len = this.length;
for (var i=0; i<len; i++){
var v = this[i];
if (!o[v]){
o[v] = 1;
ret.push(v);
}
}
return ret;
};
alert(arr.unique());

62. 写出3个使用this的典型应用。

答：（1）在HTML元素事件属性中使用，如：

<input type="button" onclick="showInfo(this);" value="单击一下"/>

（2）构造函数

function Animal(name, color) {
this.name = name;
this.color = color;
}

（3）<input type="button" id="text" value="单击一下" />

<script type="text/javascript">
var btn = document.getElementById("text");
btn.onclick = function() {
alert(this.value);
}
</script>

63. DOM元素如何显示或隐藏？

答：更改元素的CSS style，设为

display:'none';
box.style.display = "";
box.style.display = "none";

box是要操作的DOM元素。

64. JavaScript中如何检测一个变量是一个String类型？请写出函数实现。

答：var str = "hello world";

65. 网页中实现一个计算当年还剩多少时间的倒数计时程序，要求网页上实时动态显示“××年还剩××天××时××分××秒”。

答：

<input type="text" value="" id="input" size="1000"/>
<script type="text/javascript">
function counter() {
var date = new Date();
var year = date.getFullYear();
var date2 = new Date(year, 12, 31, 23, 59, 59);
var time = (date2 - date)/1000;
var day =Math.floor(time/(24*60*60))
var hour = Math.floor(time%(24*60*60)/(60*60))
var minute = Math.floor(time%(24*60*60)%(60*60)/60);
var second = Math.floor(time%(24*60*60)%(60*60)%60);
var str = year + "年还剩"+day+"天"+hour+"时
"+minute+"分"+second+"秒";
document.getElementById("input").value = str;
}
window.setInterval("counter()", 1000);
</script>

66. 补充代码，当鼠标单击Button1后，将Button1移动到Button2的后面<div> <input type="button" id ="button1" value="1" onclick="???"> <input type=" button" id ="button2" value="2" /"> </div>

答：

<div>
<input type="button" id ="button1" value="1" onclick=
"moveBtn(this);">
<input type="button" id ="button2" value="2" />
</div>
<script type="text/javascript">
function moveBtn(obj) {
var clone = obj.cloneNode(true);
var parent = obj.parentNode;
parent.appendChild(clone);
parent.removeChild(obj);
}
</script>

67. JavaScript有哪几种数据类型？

答：Number、Boolean、String、Null、Undefined、Object、Array、Function。

68. 下面CSS标签在JavaScript中调用应如何拼写，border-left-color，-moz-Viewport。

答：borderLeftColor　mozViewport

69. JavaScript中如何对一个对象进行深度clone？

答：

function clone(Obj) {
var buf;
if (Obj instanceof Array) {
buf = []; //创建一个空的数组
var i = Obj.length;
while (i--) {
buf[i] = clone(Obj[i]);
}
return buf;
}else if (Obj instanceof Object){
buf = {}; //创建一个空对象
for (var k in Obj) { //为这个对象添加新的属性
buf[k] = clone(Obj[k]);
}
return buf;
}else{
return Obj;
}
}

70. 如何控制alert中的换行。

答：alert("hello\n world\");

71. 请实现鼠标单击页面中的任意标签，alert该标签的名称（注意兼容性）。

答：

HTML: <div id="div"><span>SPAN</span>DIV</div>
<span>SPAN</span>
<p>P</p>
CSS:div{ background:#0000FF;width:100px;height:100px;}
span{ background:#00FF00;width:100px;height:100px;}
p{ background:#FF0000;width:100px;height:100px;}
JS:<script type="text/javascript">
document.onclick = function(evt){
var e = window.event || evt;
var tag = e["target"] || e["srcElement"];
alert(tag.tagName);
};
</script>

72. 请编写一个JavaScript函数parseQueryString，它的用途是把URL参数解析为一个对象，如：var url ="http://www.qdjhu.com/index.php?key0=0&key1=1&key2=2";

答：

function parseQueryString(url){
var params = {};
var arr = url.split("?");
if (arr.length <= 1)
return params;
arr = arr[1].split("&");
for(var i=0, l=arr.length; i<l; i++){
var a = arr[i].split("=");
params[a[0]] = a[1];
}
return params;
}
var url = "http://www.qdjhu.com/index.php?key0=0&key1=1&key2=2";
var ps = parseQueryString(url);
alert(ps["key1"]);

73. Ajax是什么？同步和异步的区别？如何解决跨域问题？

答：Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

同步：脚本会停留并等待服务器发送回复，然后再继续。

异步：脚本允许页面继续其进程，并处理可能的回复。

前端对于跨域的解决办法：

（1）document.domain+iframe。

（2）动态创建script标签。

74. 什么是闭包？下面这个ul，如何在单击每一列的时候alert其index？

<ul id="test">
<li>这是第一条</li>
<li>这是第二条</li>
<li>这是第三条</li>
</ul>

答：闭包就是能够读取其他函数内部变量的函数。闭包是可以包含自由（未绑定）变量的代码块，这些变量不是在这个代码块或者任何全局上下文中定义的，而是在定义代码块的环境中定义。

(function e() {
var index = 0;
var ul = document.getElementById("test");
var obj = {};
for (var i = 0, l = ul.childNodes.length; i < l; i++) {
if (ul.childNodes[i].nodeName.toLowerCase() == "li") {
var li = ul.childNodes[i];
li.onclick = function() {
index++;
alert(index);
}
}
}
})();

75. 请给出不少于两种的异步加载JS方式。

答：

异步加载方式：

（1）defer（延迟），只支持IE。

（2）创建script，插入DOM中，加载完毕后回调。

76. 请说出至少三种减少页面加载时间的方法。

答：

（1）尽量减少页面中重复的HTTP请求数量。

（2）服务器开启gzip压缩。

（3）CSS样式的定义放置在文件头部。

（4）JavaScript脚本放在文件末尾。

（5）压缩合并JavaScript、CSS代码。

（6）使用多域名负载网页内的多个文件、图片。

77. 请设计一套方案，用于确保页面中JS加载完全。

答：

var n = document.createElement("script");
n.type = "text/javascript";
and css nodes)
if(ua.ie){
n.onreadystatechange = function(){
var rs = this.readyState;
if('loaded' === rs || 'complete'===rs){
n.onreadystatechange = null;
f(id,url);
}
};
n.addEventListener('load',function(){
f(id,url);
}else{
n.onload = function(){
f(id,url);
};
}

78. JS中如何定义class，如何扩展prototype？

答：

Ele.className = "***"; //***在CSS中定义*** {…}
aa.prototype.bb = cc;

aa和bb分别是构造函数的名字，属性；cc是想要定义的属性的值。

79. 如何添加HTML元素的事件，有几种方法？

答：

（1）为HTML元素的事件属性赋值。

（2）在JS中使用ele.on*** = function() {…}

（3）使用DOM2的添加事件的方法：addEventListener或attachEvent。

80. 请说出documen.write和innerHTML的区别。

答：document.write只能重绘整个页面；innerHTML可以重绘页面的一部分。

81. JS的基础对象有哪些？将window和document常用的方法和属性列出来。

答：基础对象有：String、Number、Boolean。

window方法：

setInterval、setTimeout、clearInterval、clearTimeout。

属性：name、parent、screenLeft、screenTop、self、top、status。

document方法：

createElement、getElementById、getElementsByName、getElementByagName

属性：Cookie、doctype、domain、documentElement、readyState、URL。

82. 请说出Flash、Ajax各自的优点，以及在使用中如何取舍？

答：

Ajax的优点：

（1）可搜索性。

（2）开放性。

（3）费用低。

（4）易用性。

（5）易于开发。

Flash的优点：

（1）多媒体处理。

（2）兼容性。

（3）矢量图形比SVG、Canvas优势大很多。

（4）客户端资源调度，比如麦克风、摄像头。

建议重要和关键部分直接使用HTML，而交互部分可以使用Ajax。

83. 请使用原生JS实现一个DIV可拖曳，需要考虑浏览器兼容性。

答：

<div id = "drag1"></div>
<script type="text/javascript">
window.onload = function() {
function Drag(obj) {
this.obj = obj;
}
Drag.prototype = {
constructor: Drag,
getInitPosition: function(e) {
e = e || window.event;
var eX,eY;
if(e.pageX || e.pageY){
eX = e.pageX;
eY = e.pageY;
}
eX = e.clientX;
eY = e.clientY;
var positionX = eX- this.obj.offsetLeft;
var positionY = eY - this.obj.offsetTop;
return {
x: positionX,
y: positionY
}
},
getmouseCoordinate:function(e) {
e = e || window.event;
if(e.pageX || e.pageY){
return {x:e.pageX, y:e.pageY};
}
return {
x:e.clientX + document.body.scrollLeft - document.body.
clientLeft, y:e.clientY + document.body.scrollTop - document.
body.clientTop
};
},
initDrag:function() {
var tempThis = this;
this.obj.onmousedown = function(e) {
var initP = tempThis.getInitPosition();
document.onmousemove = function(e) {
var moveP = tempThis.getmouseCoordinate();
tempThis.obj.style.marginTop = moveP.y - initP.y + "px";
tempThis.obj.style.marginLeft = moveP.x - initP.x + "px";
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
} }
} }
var drag = document.getElementById("drag1");
var dragElement = new Drag(drag);
dragElement.initDrag();
}
</script>

84. 下面哪些是NodeJS官方模块（　）（多选）

A. Querystring

B. Dns

C. Async

D. Request

答：AB

85. 如何通过Ajax来判断浏览器是IE浏览器还是火狐浏览器，用Ajax实现。

答：要想通过Ajax来判断是IE浏览器还是Firefox浏览器，就应该通过XMLHttpRequest对象。

var xmlhttp;if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
alert("your brower is not IE ");} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
alert("your brower is IE ")}

jQuery题型

86. 怎样实现前端优化？

答：

（1）减少http请求。

（2）使用内容发布网络。

（3）添加expires头。

（4）压缩组件。

（5）样式表放在头部，脚本放在底部，避免CSS表达式——精简JS/CSS。

（6）减少DNS查找。

（7）避免重定向。

（8）配置或者移除Etag。

（9）使用Ajax可缓存。

87. 你知道DOM的年份吗？DOM有什么优点和缺点？

答：在1998年，W3C发布了第一级的DOM规范。这个规范允许访问和操作HTML页面中的每一个单独的元素。

W3C DOM标准被分为3个不同的部分：

- 核心DOM——针对任何结构化文档的标准模型

- XML DOM——针对XML文档的标准模型

- HTML DOM——针对HTML文档的标准模型

DOM的优点主要表现在：易用性强，使用DOM时，能把所有的XML文档信息都存储于内存中；增强了易用性；遍历简单，支持XPath。

DOM的缺点主要表现在：效率低、解析速度慢，内存占用量过高，对于大文件来说几乎不可能使用；消耗时间，因为使用DOM进行解析时，将为文档的每个element、attribute、processing-instrUCtion和comment都创建一个对象，这样在DOM机制中所运用的大量对象的创建和销毁无疑会消耗大量的时间。

88. 列举常用的浏览器类型，以及它们使用的内核，还有对应的调试工具。

答：常用的浏览器有IE(6,7,8,9,10),Firefox,chrome。

三者内核各不相同。

IE基于IE内核，常用的调试工具有IEWebDeveloper（IE9默认有安装）。

Firefox大家估计用得最多。Firefox基于Mozilla内核，专业的前端开发人员一般都会安装一个Firebug插件来进行调试。

Chrome（内核webkit）自带的有google开发的内置调试工具。

其他还有Opera、遨游、世界之窗等。

Chrome内核跑得比较快，且更安全。

Firefox做调试是最棒的。

89. 解释一下什么是Web语义化，举出具体的实例，并说明语义化后有什么好处？

答：Web里的概念，如：

<h1 2 3 4 5><span> 这里常用的是标题，就不要用DIV标签了；

或li列表，就不要用<p>或<td>了。

好处：易理解、渲染快、利于seo优化。

90. 说出IE浏览器和其他浏览器在页面元素引用有什么区别？

答：这个与内核及是否由W3C来定制有关系，不同浏览器渲染结果不同。

目前国内还有大部分用户在使用IE6，所以Web在制作的时候常常会碰到兼容性的问题，如：display-block、padding、margin等盒子模型比较多，还有不同的字间距等产生的问题。

常用解决的方法：IE6：_xxx:{} IE7：* IE和其他不同浏览器间的差异。

91. 为什么利用多个域名来存储网站资源会更有效？

答：确保用户在不同地区能用最快的速度打开网站，即使其中某个域名崩溃，用户也能通过其他域名访问网站。

92. 浏览器一次可以从一个域名下做多少资源？

答：只能够读取到这个服务器相关的信息，而且浏览器一般只允许存放300个Cookie，每个站点最多存放20个。现在每个Cookie的大小为4KB，根本不会占用多少空间。

93. 你知道哪些降低页面加载时间的方法？

答：（1）压缩CSS、JS文件；

（2）合并JS、CSS文件，减少http请求；

（3）外部JS、CSS文件放在底下。

94. 如果你接到了一个使用Tab来缩进代码的项目，但是你喜欢使用空格，你会怎么做？

答：为了保持一致性，转换成项目原有的风格。

95. 今年你打算熟练掌握一项新技术，你会学习哪门技术？

答：NodeJS。现如今在IT行业上JavaScript逐渐走向前端，NodeJS是一项非常重要的创新，服务器端也可以使用NodeJS。

96. 说一说你对网页标准和标准制定机构重要性的理解。

答：网页标准和标准制定机构都是为了能让Web发展得更“健康”，开发者遵循统一的标准，降低开发难度，减少开发成本，SEO也会更好做，并且不会因为滥用代码导致各种Bug或产生各种安全问题，最终提高网站易用性。

97. 什么是FOUC？如何避免FOUC？

答：FOUC（Flash Of Unstyled Content，文档样式闪烁），IE在加载网页时，CSS样式会短暂失效。

在head里面添加一个link或者script标签，如下：

<link rel="stylesheet" type="text/css" media="print" href="print.css">
<script type="text/javascript"> </script>

98. 前端开发的优化问题。

答：

（1）减少http请求次数。

（2）JS、CSS源码压缩。

（3）前端用变量保存Ajax请求结果，每次操作本地变量，不用请求。

（4）用innerHTML代替DOM操作，减少DOM操作次数，优化JavaScript性能。

（5）用setTimeout来避免页面失去响应。

（6）当需要设置的样式很多时，设置className，而不是直接操作style。

（7）尽可能少地使用全局变量。

（8）缓存DOM节点查找的结果。

（9）避免使用CSS Expression。

（10）避免在页面的主体布局中使用table。table要等其中的内容完全下载之后才会显示出来，显示比DIV+CSS布局慢。

99. 如何控制网页在网络传输过程中的数据量？

答：最显著的方法是启用Gzip压缩。此外养成编码的好习惯，避免重复的代码、HTML标签和属性。

100. 多浏览器通过什么进行检测？

答：需要设置一下网络连接的环境。

101. 说一说HTML5发展的前景和会遇见的瓶颈。

答：前景：HTML5是大趋势，响应式布局，NodeJS高并发后台处理。

瓶颈：HTML5运行速度较慢，对浏览器要求较高，浏览器兼容性等问题。

102. HTML5和CSS3有什么新特性？

答：HTML5强化了Web网页的表现性能，如：nav、header、section、canvas等，语义化更强。

CSS3新特性有阴影特效、圆角处理等，都是非常不错的效果。

103. table标签中的border、cellpadding和td标签中的colspan、rowspan分别起什么作用？

答：border——边界

cellpadding——边距

colspan——跨列数

rowspan——跨行数

104. 你做的页面在哪些浏览器测试过？这些浏览器的内核分别是什么？

答：IE6、IE7、IE8、Firefox、Opera、Safari、Chrome、Maxthon。

Trident：Windows下的IE浏览器使用的内核代号。除IE外，众多的IE Shell（如Maxthon）都使用这个内核。

Gecko：Mozilla Firefox浏览器使用的内核代号。

Presto：Opera浏览器使用的内核代号，这是目前公认网页浏览速度最快的浏览器内核。

KHTML/WebCore：Konqueror/Safari浏览器使用的内核代号。

Webkit：Chrome浏览器使用的内核代号。Safari也可使用。

Maxthon浏览器是基于IE内核的。

105. 在每个HTML文件里，开头都有个很重要的东西——<!DOCTYPE>，知道这是干什么的吗？

答：<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前此标签可告知浏览器文档使用哪种HTML或XHTML规范。

106. Quirks模式是什么？它和Standards模式有什么区别？

答：从IE6开始，引入了Standards模式，标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。

在IE6之前，CSS还不够成熟，所以在IE5之前的浏览器对CSS的支持很差，IE6能对CSS提供更好的支持，然而此时问题就来了，因为有很多页面是基于旧的布局方式写的，而如果IE6支持CSS，则将令这些页面不能正常显示，如何既保证不破坏现有页面，又能提供新的渲染机制呢？

在写程序时，我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，尤其是当新功能不兼容旧功能时。遇到这种问题时说会道，常见的做法是增加参数和分支，即当某个参数为真时，我们就使用新功能，而如果这个参数不为真时，就使用旧功能，这样就不仅不会破坏原有的程序，而且提供了新功能。IE6也是类似这样做的，它将DTD当成了这个“参数”，因为在以前的页面，大家都不会去写DTD，所以IE6假定：如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式（怪癖模式、诡异模式、怪异模式）。

区别：总体会有布局、样式解析和脚本执行三个方面的区别。

107. 相对TABLE布局，DIV+CSS布局有哪些优点？

答：（1）改版的时候更方便，只要改CSS文件即可。

（2）页面加载速度更快、结构化清晰、页面显示简洁。

（3）表现与结构相分离。

（4）易于优化，搜索引擎更友好，排名更容易靠前。

108. img的alt与title有何异同？strong与em有何异同？

答：alt与title的异同：

alt(alt text)：为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。（在IE浏览器下，会在没有title时把alt当成tool tip显示）

title(tool tip)：该属性为设置该属性的元素提供建议性的信息。

Strong与em的异同：

strong：粗体强调标签，表示内容的重要性。

em：斜体强调标签，强调更强烈，表示内容的强调点

109. 你知道渐进增长和优雅降级的不同吗？

答：渐进增强（progressive enhancement）：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能，达到更好的用户体验。

优雅降级（graceful degradation）：

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的、能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

110. 为什么要通过多个域名来存储网站资源？

答：（1）CDN缓存更方便；

（2）突破浏览器并发限制；

（3）节约Cookie带宽；

（4）节约主域名的连接数，优化页面响应速度；

（5）防止不必要的安全问题。

111. 对网页标准和标准制定机构，你有什么看法？

答：网页标准和标准制定机构都是为了能让Web发展得更“健康”，开发者遵循统一的标准，降低开发难度和开发成本，此时SEO也会更好做，并且不会因为滥用代码导致各种Bug、安全问题，最终提高网站易用性。（仅供参考，无标准答案）

112. sessionStorage和localStorage.、Web Storage和Cookie，之间有什么区别？

答：sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问，并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

Web Storage的概念和Cookie相似，区别是，它是为了更大容量存储而设计的。Cookie的大小是受限的，并且当每次请求一个新的页面时，Cookie都会被发送过去，这样无形中浪费了带宽，另外Cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem、getItem、removeItem、clear等方法，不像Cookie需要前端开发者自己封装setCookie、getCookie。但是Cookie是不可或缺的。Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生。

113. src与href都是链接方式，它们有什么不同之处？

答：src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本、img图片和frame等元素。

<script src ="js.js"></script>

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

<link href="common.css" rel="stylesheet"/>

那么浏览器会识别该文档为CSS文件，就会并行下载资源，并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载CSS，而不是使用@import方式。

114. 网页制作支持哪些格式的图片？

答：png-8、png-24、jpeg、gif、svg。

但是上面的那些都不是面试官想要的最好的答案。面试官希望听到是Webp、Apng。（是否有关注新技术、新鲜事物）

科普一下，Webp：WebP格式，谷歌（Google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有jpeg的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook eBay等知名网站已经开始测试并使用WebP格式。

在质量相同的情况下，WebP格式图像的体积要比jpeg格式图像小40%。

Apng：全称是“Animated Portable Network Graphics”，是png的位图动画扩展，可以实现png格式的动态图片效果。2004年诞生，但一直得不到各大浏览器厂商的支持，如今得到了iOS safari 8的支持，有望代替GIF成为下一代动态图标准。

115. 请谈谈你对微格式的理解。

答：微格式（Microformats）是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。它是为特殊应用而制定的特殊格式。

优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。（应用范例：豆瓣，有兴趣的读者可以自行在网上搜索）

116. 在CSS/JS代码上线之后，开发人员经常会优化性能，从用户刷新网页开始，请求一次JS，会有哪些地方出现缓存处理？

答：dns缓存、cdn缓存、浏览器缓存、服务器缓存。

117. 当一个大型网站上有大量的图片时，要使这些图片加载速度变快，以达到更好的体验，有哪些方法？

答：图片懒加载，即在页面上的未可视区域添加一个滚动条事件，判断图片位置与浏览器顶端的距离，以及图片位置与页面的距离，如果前者小于后者，则优先加载。

如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。如果图片为CSS图片，可以使用CSS Sprite、SVG Sprite、Icon Font、Base64等技术。如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩得特别厉害的缩略图，以提高用户体验。如果图片展示区域小于图片的真实大小，则在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

118. 对HTML的结构语义化，你是怎样理解的？

答：去掉或样式丢失时，能让页面呈现清晰的结构。

HTML本身是没有表现的，例如<h1>是粗体，字体大小为2em，加粗；<strong>是加粗的，不要认为这是HTML的表现，其实是HTML默认的CSS样式在起作用，所以去掉或样式丢失时能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有默认样式，默认样式的目的也是为了更好地表达HTML的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。

119. 想要做好SEO，站在前端开发人员的角度需要考虑什么？

答：

（1）了解搜索引擎如何抓取网页和如何索引网页。

（2）Meta标签优化。

（3）如何选取关键词，并在网页中放置关键词。

（4）了解主要的搜索引擎。

（5）主要的互联网目录。

（6）按单击付费的搜索引擎。

（7）搜索引擎登录。

（8）链接交换和链接广泛度（Link Popularity）。

（9）合理的标签使用。

120. 对DOM设置CSS样式时，有哪些方式？

答：

（1）外部样式表，引入一个外部CSS文件。

（2）内部样式表，将CSS代码放在<head>标签内部。

（3）内联式，将CSS样式直接定义在HTML元素内部。

121. 请列举CSS中的选择器。

答：（1）派生选择器（用HTML标签申明）；

（2）ID选择器（用DOM的ID申明）；

（3）类选择器（用一个样式类名申明）；

（4）属性选择器（用DOM的属性申明，属于CSS2，IE6不支持，不常用）；

（5）后代选择器（利用空格间隔，比如div .a{ }）；

（6）群组选择器（利用逗号间隔，比如p,div,#a{ }）。

122. 在CSS中对于选择器的优先级是怎样定义的？

答：一般而言，选择器越特殊，它的优先级越高。也就是说，选择器指向越准确，它的优先级就越高。

用1表示派生选择器的优先级；

用10表示类选择器的优先级；

用100表示ID选择器的优先级。

div.test1 .span var优先级1+10 +10 +1。

span#xxx .songs li优先级1+100 + 10 + 1。

#xxx li优先级100 +1。

123. 请看以下代码，并说出这时p标签内的文字是什么颜色？

<style>
.colorA{ color:blue;}
.colorB{ color:red;}
</style>
<body>
<p class='colorB colorA'> 123 </p>
</body>

答：红色

124. CSS中有哪些属性可以让DOM元素在浏览器中消失？

答：（1）最基本的：设置display属性为none，或者设置visibility属性为hidden。

（2）技巧性的：设置宽和高为0，设置透明度为0，设置z-index位置在-1000。

125. hover样式在超链接访问过后为什么就没有了，请说出解决方法。

答：被单击访问过的超链接样式不再具有hover和active了，解决方法是改变CSS属性的排列顺序：L-V-H-A（link-visited-hover-active）。

126. CSS中的Hack指的是什么？

答：针对不同的浏览器写不同的CSS code的过程，就是CSS Hack。

127. CSS3中的哪个属性可以做一个简单的幻灯片效果。

答：使用animation动画。

128. 块级元素和内联元素之间的特性是什么？内联元素的padding和margin可以设置吗？

答：块级元素（block）特性：

（1）总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示。

（2）宽度（width）、高度（height）、内边距（padding）和外边距（margin）都可控制。

内联元素（inline）特性：

（1）和相邻的内联元素在同一行。

（2）宽度（width）、高度（height）、内边距的宽度（width）、高度（height）、内边距（padding）和外边距（margin）都可控制；top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小。

padding和margin的left和right是可以设置的。

129. 在CSS中什么是外边距重叠？重叠之后的效果又是什么？

答：外边距重叠就是margin-collapse。

在CSS中，相邻的两个盒子（可能是兄弟关系，也可能是祖先关系）的外边距可以重叠成一个单独的外边距，这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则：

1. 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。

2. 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。

3. 两个外边距一正一负时，折叠结果是两者相加的和。

130. rgba()与opacity()都是能够实现透明效果的，请问在实现透明效果时有什么区别？

答：rgba()和opacity()都能实现透明效果，但最大的不同是opacity()作用于元素，以及元素内的所有内容的透明度；而rgba()只作用于元素的颜色或其背景色。

131. 在CSS中能够让文字垂直和水平方向重叠的两个属性分别是什么？

答：（1）垂直方向：line-height；

（2）水平方向：letter-spacing。

132. 请用代码实现一个ID名为div_1的浮动元素是怎样垂直居中的？

答：

#div_1{width: 200px; height: 200px; background-color:#6699FF;
margin:auto; position: absolute; left: 0; top: 0;rightright: 0;
bottombottom: 0; }

133. 请用代码实现一个让ID名为content的元素tgf垂直居中。

答：

#container #conten { display:table-cell;text-align:center;vertical-align:middle; }

134. 请问px和em有什么异同？

答：px和em都是长度单位，区别是，px的值是固定的，指定多少就是多少，计算比较容易。而em的值不是固定的，并且em会继承父级元素的字体大小。

浏览器的默认字体高都是16px，所以未经调整的浏览器都符合：1em=16px。那么12px=0.75em, 10px=0.625em。

135. 请具体说一下什么是“reset”（指CSS文件），并解释一下“reset”是如何使用的，同时请与Normalize.css进行对比，了解它俩之间的不同之处。

答：“reset”是重置样式，重置样式非常多，凡是一个前端开发人员肯定有一个常用的重置CSS文件，并知道如何使用它们。他们是盲目地使用还是有目的性地使用呢？由于不同的浏览器对一些元素有不同的默认样式，如果你不处理，在不同的浏览器下会存在必要的风险，所以我们要有目的性地使用reset。

我们可以用Normalize来代替重置样式文件。它没有重置所有的样式风格，仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理，又不扰乱其他的东西。

136. 请描述一下Sass、LESS是什么，为什么会频繁地使用它们？

答：它们是CSS预处理器，是CSS上的一种抽象层。它们把一种特殊的语法/语言编译成CSS。

优点：

（1）结构清晰，便于扩展。

（2）可以方便地屏蔽浏览器私有语法差异。封装对浏览器语法差异的重复处理，减少无意义的机械劳动。

（3）可以轻松实现多重继承。完全兼容CSS代码，可以方便地应用到老项目中。LESS只是在CSS语法上做了扩展，所以老的CSS代码也可以与LESS代码一同编译。

137. 请分别列举display: none与visibility: hidden的原理（也就是所谓的区别）。

答：display：隐藏对应的元素，但不挤占该元素原来的空间。

visibility：隐藏对应的元素，并且挤占该元素原来的空间。

使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”；而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），但是它所占据的空间位置仍然存在。

138. 在CSS中的content属性有什么作用？。

答：CSS的content属性专门应用在before/after伪元素上，用于插入生成内容。最常见的应用是利用伪类清除浮动。

after伪元素通过content在元素的后面生成了内容为一个点的块级元素，再利用clear:both清除浮动。

139. 请使用CSS content属性来实现CSS计数器。

答：CSS计数器是通过设置counter-reset、counter-increment两个属性，以及counter()/counters()的方法，配合after / before伪类来实现的。

140. iframe有哪些缺点？

（1）iframe会阻塞主页面的Onload事件。

（2）iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过JavaScript

动态给iframe添加src属性值，这样可以绕开以上两个问题。

141. 使用CSS来实现一个头部和尾部是固定的而中间部分是自适应效果的布局。

答：

<div class="content">
<div class="header"></div>
<div class="main"></div>
<div class="foot"></div>
</div>
<style>
*{margin:0; padding:0;}
html,body,.con{height:100%;width:100%;height:100%;width:100%;}
div{position:absolute;}
.header,.foot{width:100%;height:100px;z-index:5;}
.header{background:red;top:0;}
.bottom{background:black;bottom:0;}
.main{ width:100%; background:#a7fad7;overflow:auto;top:100px;
bottom:100px;position:absolute;_height:100%;_border-top:-100px solid #eee; _border-bottom:-100px solid #eee; _top:0; }
</style>

jQuery题型

142. jQuery中的美元符号$起什么作用？

答：其实美元符号$只是“jQuery”的别名，它是jQuery的选择器，如下面的代码：

$(document).ready(function(){});

当然，你也可以用jQuery来代替$，如下面的代码：

jQuery(document).ready(function(){});

143. onload()函数与document.ready()函数之间的区别。

答：（1）我们可以在页面中使用多个document.ready()，但只能使用一个onload()。

（2）document.ready()函数在页面DOM元素加载完以后就会被调用，而onload()函数则要在所有的关联资源（包括图像、音频）加载完毕后才会调用。

144. 在jQuery中一共有几种类型的选择器，请一一列举出来。

答：（1）基本过滤选择器；

（2）属性过滤选择器；

（3）内容过滤选择器；

（4）子元素过滤选择器；

（5）可见性过滤选择器；

（6）表单元素过滤选择器。

145. 将元素边框设置为2px宽的虚线（使用jQuery）。

答：

<script language="javascript" type="text/javascript">
$("*").css("border", "2px dotted red");
</script>

146. 说一说当jQuery的文件不能在CDN上使用时的一些操作。

答：为了节省带宽和脚本引用的稳定性，我们会使用CDN上的jQuery文件，例如Google的jQuery CDN服务。但是如果这些CDN上的jQuery服务不可用，我们还可以通过以下代码来切换到本地服务器的jQuery版本：

<script type="text/JavaScript" language="JavaScript"
src="http://www.qdjhu.com/Ajax/jquery/jquery-1.4.1.min.js"></script>
<script type='text/javascript'>//<![CDATA[
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/Script/jquery-
1.4.1.min.js'
type='text/javascript' %3E%3C/script%3E"));
}
]]>
</script>

147. 在jQuery中，如何实现单击一个按钮可以出现一个对话框效果。

答：

<input id="file" type="text" size="12"/>
jQuery:
<script type="text/javascript">
$(document).ready(function (){
$('#Btn1').click(function (){
alert($('#file').attr("value"));
});
});
</script>

148. delegate()函数和在jQuery中起着什么样的作用？

答：如果你有一个父元素，需要给其下的子元素添加事件，这时你可以使用delegate()，代码如下：

$("ul").delegate("li", "click", function(){
$(this).hide();

149. 在jQuery中，使用什么方法来实现对URL的解码和编码。

答：在jQuery中，可以使用以下方法来实现对URL进行编码和解码：

encodeURIComponent(url) and decodeURIComponent(url)

150. 请写出一段代码来禁用浏览器前进后退的按钮。

答：

<script type="text/javascript" language="javascript">
$(document).ready(function() {
window.history.forward(1);
window.history.forward(-1);
});
</script>

二、效果题

151. 什么叫优雅降级和渐进增强？解释：

渐进增强（progressive enhancement）：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能以达到更好的用户体验。

优雅降级（graceful degradation）：

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：

（1）优雅降级是从复杂的现状开始的，并试图减少用户体验的供给。

（2）渐进增强则是从一个非常基础的、能够起作用的版本开始，并不断扩充，以适应未来环境的需要。

（3）降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

152. text-shadow属性的4个值分别是什么？

答：

语法：

text-shadow: h-shadow v-shadow blur color;

注释：text-shadow属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影由两个或三个长度值和一个可选的颜色值进行规定。省略的长度是0。

（1）h-shadow：必需。水平阴影的位置，允许负值。

（2）v-shadow：必需。垂直阴影的位置，允许负值。

（3）blur：可选。模糊的距离。

（4）color：可选。阴影的颜色，参阅CSS颜色值。

153. '5' +4=？

答：54。

154. 如何用JS判断浏览器类型？

答：现在网络上的浏览器和操作系统就像中国的方言一样，非常之多，这给开发人员带来了巨大的痛苦。大家的喜好不同，用的系统也不同！有人喜欢用IE，有人喜欢用Firefox，还有人喜欢用腾讯TT，有的人喜欢用maxthon。虽然名字有很多种，但是内核却只有几种，如：IE内核、netscape内核等。那么怎么样用JS来判断各种浏览器的类型呢？请见如下代码。

<script language="JavaScript">
function getOs()
{
var OsObject = "";
if(navigator.userAgent.indexOf("MSIE")>0) {
return "MSIE";
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
return "Firefox";
}
if(isSafari=navigator.userAgent.indexOf("Safari")>0) {
return "Safari";
}
if(isCamino=navigator.userAgent.indexOf("Camino")>0){
return "Camino";
}
if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){
return "Gecko";
}
}
alert("您的浏览器类型为:"+getOs());
</script>

155. 用JS写一个当年还剩多少时间的倒计时程序。

答：

<input type="text" value="" id="input" size="1000" />
<script type="text/javascript">
function counter() {
var date = new Date();
var year = date.getFullYear();
var date2 = new Date(year, 12, 31, 23, 59, 59);
var time = (date2 - date)/1000;
var day =Math.floor(time/(24*60*60))
var hour = Math.floor(time%(24*60*60)/(60*60))
var minute = Math.floor(time%(24*60*60)%(60*60)/60);
var second = Math.floor(time%(24*60*60)%(60*60)%60);
var str = year + "年还剩"+day+"天"+hour+"时"+minute+"
分"+second+"秒";
document.getElementById("input").value = str;
}
window.setInterval("counter()", 1000);
</script>
</script>

18.2　前端面试模拟试题二

General Questions:

第1道：Are you on Twitter? If so, who do you follow on Twitter?

第2道：Are you on Github? If so, what are some examples of repos you follow

第3道：What blogs do you follow?

第4道：What version control systems have you used?

第5道：What is your preferred development enviroment? (OS, Editor, Browsers, Tools etc.)

第6道：Can you describe your workflow when you create a web page?

第7道：Can you describe the difference between progressive enhancement and graceful degradation?

Bonus points for the answer "no one can".

Extra bonus points for describing feature detection.

第8道：Explain what "Semantic html" means.

第9道：What does "minification" do?

第10道：Why is it better to serve site assets from multiple domains?

How many resources will a browser download from a given domain at a time?

第11道：If you have 8 different stylesheets for a given design, how would you integrate them into the site?

Looking for file concatenation.

Points off for @importt, unless it works in conjunction with a build system.

第12道：If you jumped on a project and they used tabs and you used spaces, what would you do?

issue :retab! command.

第13道：Write a simple slideshow page.

Bonus points if it does not use JS.

第14道：What tools do you use to test your code's performance?

第15道：If you could master one technology this year, what would it be?

第16道：Name 3 ways to decrease page load. (perceived or actual load time)

第17道：Explain the importance of standards.

HTML-Specific Questions:

第18道：What's a doctype do, and how many can you name?

第19道：What's the difference between standards mode and quirks mode?

第20道：What are the limitations when serving XHTML pages?

第21道：How do you serve a page with content in multiple languages?

第22道：Can you use XHTML syntax in HTML5? How do you use XML in HTML5?

第23道：What are data-attributes good for?

第24道：What are the content models in HTML4 and are they different in HTML5?

第25道：Consider HTML5 as an open web platform. What are the building blocks of HTML5?

第26道：Describe the difference between Cookies, sessionStorage and localStorage.

JS-Specific Questions：

第27道：Which JavaScript libraries have you used?

第28道：How is JavaScript different from Java?

第29道：What are undefined and undeclared variables?

第30道：What is a closure, and how/why would you use one?

Your favorite pattern used to create them? argyle (Only applicable to IIFEs).

第31道：What's a typical use case for anonymous functions?

第32道：Explain the "JavaScript module pattern" and when you'd use it.

Bonus points for mentioning clean namespacing.

What if your modules are namespace-less?

第33道：How do you organize your code? (module pattern, classical inheritance?)

第34道：What's the difference between host objects and native objects?

第35道：What's the difference between .call and .apply?

第36道：Explain Function.prototype.bind?

第37道：When do you optimize your code?

第38道：Can you explain how inheritance works in JavaScript?

Bonus points for the funny answer: "no one can".

Extra bonus points if they take a stab at explaining it.

第39道：When would you use document.write()?

Correct answer: 1999 – time to weed out the junior devs.

第40道：What's the difference between feature detection, feature inference, and using the UA string.

第41道：Explain Ajax in as much detail as possible.

第42道：Explain how Jsonp works (and how it's not really Ajax).

第43道：Have you ever used JavaScript templating, and if so, what/how?

第44道：Explain "hoisting".

第45道：What is FOUC? How do you avoid FOUC?

第46道：Describe event bubbling.

第47道：What's the difference between an "attribute" and a "property"?

第48道：Why is extending built in JavaScript objects not a good idea?

第49道：Why is extending built is a good idea?

第50道：Difference between document load event and document ready event?

第51道：What is the difference between == and ===?

第52道：Explain how you would get a query string parameter from the browser window's URL.

第53道：Explain the same-origin policy with regards to JavaScript.

第54道：Explain event delegation.

第55道：Describe inheritance patterns in JavaScript.

第56道：Describe a strategy for memoization in JavaScript.

第57道：Why is it called a Ternary statement, what does the word "Ternary" indicate?

第58道：What is the arity of a function?

jQuery-Specific Questions:

第59道：Explain “chaining”.

第60道：What does .end () do?

第61道：How, and why, would you namespace a bound event handler?

第62道：What is the effects (or fx) queue?

第63道：What is the difference between .get () , [ ] , and .eq ( )?

第64道：What is the difference between .bind () , .live () , and .delegate ()?

第65道：What is the difference between $ and $.fn ? Or just what is $.fn.

CSS-Specific Questions:

第66道：Describe what a "reset" CSS file does and how it's useful.

第67道：Describe Floats and how they work.

第68道：What are the various clearing techniques and which is appropriate for what context?

第69道：Explain CSS sprites, and how you would implement them on a page or site.

第70道：What are the differences between the IE box model and the W3C box model?

第71道：What are your favourite image replacement techniques and which do you use when?

第72道：CSS property hacks, conditionally included .CSS files, or… something else?

第73道：How do you serve your pages for feature-constrained browsers?

What techniques/processes do you use?

第74道：What are the different ways to visually hide content (and make it available only for screenreaders)?

第75道：Have you ever used a grid system, and if so, what do you prefer?

第76道：Hav you used or implement media queries or mobile specific layouts/css?

第77道：Any familiarity with styling SVG?

第78道：How do you optimize your webpages for print?

第79道：What are some of the "gotchas" for writing efficient css?

第80道：Do you use LESS?

第81道：How would you implement a web design comp that uses non-standard fonts? (avoid mentioning webfonts so they can figure it out)

第82道：Explain how a browser determines what elements match a css selector?

Optional fun Questions:

第83道：What's the coolest thing you've ever coded, what are you most proud of?

第84道：Do you know the HTML5 gang sign?

第85道：Are you now, or have you ever been, on a boat.

第86道：Tell me your favorite parts about Firebug / Webkit Inspector.

第87道：Do you have any pet projects? What kind?

第88道：Explain the significance of "cornify".

第89道：On a piece of paper, write down the letters A B C D E vertically.

Now put these in descending order without writing one line of code.

Wait and see if they turn the paper upside down.

This should make the laugh and is a fine way to relieve some tension at the end of the interview.

第90道：Pirate or Ninja?

Bonus if it's a combo and a good reason was given (+2 for zombie monkey pirate ninjas).

If not Web Development what would you be doing?

Where in the world is Carmen Sandiego?

(hint: their answer is always wrong)

What's your favorite feature of Internet Explorer?

第91道：What do the terms "Filegroups", "components" and "setup types" mean in InstallshIEld Professional?

第92道：Given a collection of files what process would you go through using the three items detailed in question 1 to produce an installation.

第93道：What do you understand by the term "Maintenance Mode" with regard to Installshield Professional?

第94道：What is the equivalent of a Component in Installshield Developer.

Describe an installation you have written with Installshield Professional – what did it install? Did you use customized dialogues? If so how did you do this? Did the installation require you to write your own scripted functions? If so give an example. Did you consider future upgrades of your applications – expand.

第95道：What do you know about Windows Installer based installations i.e. Have you had any exposure to creating them? If so expand, Where is the installation information held for such an installation?

第19章

人资问题

第1道：说一下你的离职原因？

第2道：上家公司的工作流程？

第3道：上家公司的前端有几个人？

第4道：毕业于哪所大学？

第5道：专业学的什么？

第6道：对这个职业有什么想法？

第7道：有什么想问的吗？

第8道：后台接触多吗？

第9道：项目怎么分配？

第10道：工作流程是怎样的？你主要负责哪块？

第11道：项目完成的进度？

第12道：平时喜欢看什么书？

第13道：和同事意见不统一怎么办？

第14道：说一下你的工作经历。

第15道：清楚地描述你的毕业时间，实习时间，工作时间。

第16道：希望处于什么样的工作环境？

第17道：上家公司在哪？

第18道：你上手一个新东西需要多久？

第19道：上家公司薪资多少，最低多少薪资？期望薪资是多少？

第20道：你懂产品吗？

第21道：上家公司的工资怎么发的？

第22道：上家公司经常加班吗？

第23道：自己对上家公司的评价？

第24道：员工内部买东西有没有折扣？

第25道：你一般学习都会去什么网站？

第26道：上家公司的规模有多大？

第27道：你认为凡客诚品的网站怎么样？

第28道：你认为前端工程师最注重哪一点？

第29道：你们部门是怎么分配的？

第30道：最快什么时候能入职？

第31道：你觉得什么公司比较适合发展？

第32道：要是给你时间学的话，能行吗？

第33道：为什么要换工作？

第34道：你得多久才能离职？

第35道：请问您的职业规划是什么？

第36道：你为什么选择在我们公司工作？

第37道：在工作的过程中，如果自己本身心情不是很好，而领导又批评了你，你会如何处理？

第38道：领导安排你独立完成某个项目工作的时候你是怎么想的？

第39道：当你遇到自己不懂或不会的问题时，你会怎么办？

第40道：在工作过程中，如何更好地提升工作效率？

第41道：你的优点是什么？

第42道：当你在做项目（业务）的过程中遇到新技术需要学习，你会如何处理？

第43道：当你接手一个需要利用新技术的项目时，你会怎么办？

第44道：如果上级领导对你的工作不满意，你会怎么办？

第45道：工作时，你认为领导要求的方式不是最好的，你会怎么做？

第46道：如果有合作公司老板打电话给你要你过去，待遇比现在高，你怎么办？

第47道：你会在什么情况下提出涨薪？

第48道：在工作的过程中，如果公司或者团队遇到了困境，你会怎么解决？

第49道：当在项目（管理）中遇到困难时，你是如何解决的？

第50道：你是如何看待北京的雾霾的？

第51道：当你面对部门不公平任务分工的时候，你会怎么办？

第52道：你怎么看待跳槽？

第53道：你只有两年工作经验，而现在应聘的是项目经理，你觉得自己可以胜任这个岗位吗？