针对这几天的前端面试，学到了不少东西，对还有印象的做个记录：
1.子元素全部浮动，父元素如何撑开？
解答：1、给父元素加一个overflow:hidden；2、将父元素也一起浮动（这个比较复杂，会影响到父元素的同级元素）；3、在父元素的最后一个子元素（也就是你的ul标签）后边再增加多一个非浮动的子元素，然后将这个子元素加个clear（例：<div style="clear:both"></div>）；4、使用伪元素清除浮动：
.clearfix:after { content: ""; /*设置内容为空*/ height: 0; /*高度为0*/ line-height: 0; /*行高为0*/ display: block; /*将文本转为块级元素*/ visibility: hidden; /*将元素隐藏*/ clear: both; /*清除浮动*/ } .clearfix { zoom: 1; /*为了兼容IE*/ }
或者
.clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; }
2.box-sizing的属性?
解答：
1、content-box（宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。）；
2、border-box（为元素设定的宽度和高度决定了元素的边框盒。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。）；
3、inherit（规定应从父元素继承 box-sizing 属性的值。）
3.运行下面代码得到的值？
var name="aaa"; function echo(){ alert(name); var name="bbb"; alert(name); alert(age); } echo();
解答：在我实际运行出来后，alert出来的结果依次是：undefined,bbb,第三个没有alert(因为会报not defined错误)
ps:echo()函数中的name前面不定义var时，第二个alert的name值为aaa
4.jQuery操作DOM节点的方法？
解答：详见另一篇博客http://www.cnblogs.com/minozMin/p/8376614.html
5.js递归函数 ##########
6.ajax设置同步加载：
解答：async:false
7.es6和es5的区别：
解答：##########
8.表格奇偶数行显示不同颜色：
解答：css中，用nth即可；
（2）jquery中，用odd和even：
<style type="text/css"> .odd { background-color:yellow; } .even { background-color:red; } </style>
<script> $(document).ready(function() { $('tr:odd').addClass('odd'); $('tr:even').addClass('even'); }); </script>
9.实现滚动：
overflow:auto
10.如何通过选择器获取ul li的前三个元素：
1 $(function(){ 2 $('ul').each(function(){ 3 $('li:lt(3) em',this).addClass('emClass'); 4 }); 5 });
11.如何获取name="username"的input：
12.总结JQeury的属性选择器：
| 选择器 | 实例 | 选取 |
|---|---|---|
| * | $("*") | 所有元素 |
| #id | $("#lastname") | id="lastname" 的元素 |
| .class | $(".intro") | 所有 class="intro" 的元素 |
| element | $("p") | 所有 <p> 元素 |
| .class.class | $(".intro.demo") | 所有 class="intro" 且 class="demo" 的元素 |
| :first | $("p:first") | 第一个 <p> 元素 |
| :last | $("p:last") | 最后一个 <p> 元素 |
| :even | $("tr:even") | 所有偶数 <tr> 元素 |
| :odd | $("tr:odd") | 所有奇数 <tr> 元素 |
| :eq(index) | $("ul li:eq(3)") | 列表中的第四个元素（index 从 0 开始） |
| :gt(no) | $("ul li:gt(3)") | 列出 index 大于 3 的元素 |
| :lt(no) | $("ul li:lt(3)") | 列出 index 小于 3 的元素 |
| :not(selector) | $("input:not(:empty)") | 所有不为空的 input 元素 |
| :header | $(":header") | 所有标题元素 <h1> - <h6> |
| :animated | 所有动画元素 | |
| :contains(text) | $(":contains('W3School')") | 包含指定字符串的所有元素 |
| :empty | $(":empty") | 无子（元素）节点的所有元素 |
| :hidden | $("p:hidden") | 所有隐藏的 <p> 元素 |
| :visible | $("table:visible") | 所有可见的表格 |
| s1,s2,s3 | $("th,td,.intro") | 所有带有匹配选择的元素 |
| [attribute] | $("[href]") | 所有带有 href 属性的元素 |
| [attribute=value] | $("[href='#']") | 所有 href 属性的值等于 "#" 的元素 |
| [attribute!=value] | $("[href!='#']") | 所有 href 属性的值不等于 "#" 的元素 |
| [attribute$=value] | $("[href$='.jpg']") | 所有 href 属性的值包含以 ".jpg" 结尾的元素 |
| :input | $(":input") | 所有 <input> 元素 |
| :text | $(":text") | 所有 type="text" 的 <input> 元素 |
| :password | $(":password") | 所有 type="password" 的 <input> 元素 |
| :radio | $(":radio") | 所有 type="radio" 的 <input> 元素 |
| :checkbox | $(":checkbox") | 所有 type="checkbox" 的 <input> 元素 |
| :submit | $(":submit") | 所有 type="submit" 的 <input> 元素 |
| :reset | $(":reset") | 所有 type="reset" 的 <input> 元素 |
| :button | $(":button") | 所有 type="button" 的 <input> 元素 |
| :image | $(":image") | 所有 type="image" 的 <input> 元素 |
| :file | $(":file") | 所有 type="file" 的 <input> 元素 |
| :enabled | $(":enabled") | 所有激活的 input 元素 |
| :disabled | $(":disabled") | 所有禁用的 input 元素 |
| :selected | $(":selected") | 所有被选取的 input 元素 |
| :checked | $(":checked") | 所有被选中的 input 元素 |
13、Flex布局？
14、标准模型和怪异模型（IE）的区别：
15、如何居中一个div：
16、css选择符：
17、HTML5和CSS3的一些新特性：
18、对象的操作：
Object.keys()：返回对象自身的所有可枚举的属性的键名
19、表单提交中有图片和文件时，需添加什么属性？
解答：
<form enctype="multiple/form-data"> </form>
20、JS事件流模型：
解答：冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。（推荐）
捕获型事件流：事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。
21、css的优化规则：
解答：详见另一篇博客http://www.cnblogs.com/minozMin/p/8093551.html
22、字符串的操作：
解答：详见另一篇博客http://www.cnblogs.com/minozMin/p/8328028.html
23、判断是否为数组类型：
var a="string"; console.log(a); //string var a=1; console.log(a); //number var a=false; console.log(a); //boolean var a; console.log(typeof a); //undfined var a = null; console.log(typeof a); //object var a = document; console.log(typeof a); //object var a = []; console.log(a); //object var a = function(){}; console.log(typeof a) //function 除了可以判断数据类型还可以判断function类型
24、运行代码，输出值：
var a = new Object(); a.value = 1; b = a; b.value = 2; alert(a.value);
结果为：2
25、闭包：
26、面向对象经典的例子：
27、作用域：
解答：参见另一篇博客 http://www.cnblogs.com/minozMin/p/8022869.html
28、jQuery中的$符号：
解答：$就是jQuery的别称，是jQuery库提供的一个函数。
（1）可以通过$ () 里的参数进行查找和选择html文档中的元素
$('#tmp');//这是查找dom的id等于tmp的元素
（2）访问$中定义的函数
$.ajax(options)
29、cookie、sessionStorage、localStorage的区别：
解答：
（1）Cookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为4KB左右，是网景公司的前雇员 Lou Montulli 在1993年3月的发明。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。
（2）localStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方案是使用 Flash。而如今，localStorage 被大多数浏览器所支持，如果你的网站需要支持 IE6+，那以 userData 作为你的 polyfill 的方案是种不错的选择。
| 特性 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| localStorage | 4 | 3.5 | 8 | 10.50 | 4 |
| sessionStorage | 5 | 2 | 8 | 10.50 | 4 |
| 特性 | Cookie | localStorage | sessionStorage |
|---|---|---|---|
| 数据的生命期 | 可设置失效时间，默认是关闭浏览器后失效 | 除非被清除，否则永久保存 | 仅在当前会话下有效，关闭页面或浏览器后被清除 |
| 存放数据大小 | 4K左右 | 一般为5MB | 一般为5MB |
| 与服务器端通信 | 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题 | 仅在客户端（即浏览器）中保存，不参与和服务器的通信 | 仅在客户端（即浏览器）中保存，不参与和服务器的通信 |
| 易用性 | 需要程序员自己封装，源生的Cookie接口不友好 | 源生接口可以接受，亦可再次封装来对Object和Array有更好的支持 | 源生接口可以接受，亦可再次封装来对Object和Array有更好的支持 |
30、浏览器的加载顺序：
解答：参考两篇不错的博客http://www.cnblogs.com/yuezk/archive/2013/01/11/2855698.html和http://www.cnblogs.com/yuezk/archive/2013/01/11/2856540.html
31、如何定位在jQuery中出现的问题：
32、HTTP和HTTPS的区别：
解答：
（1）http是HTTP协议运行在TCP之上。所有传输的内容都是明文，客户端和服务器端都无法验证对方的身份。
（2）https是HTTP运行在SSL/TLS之上，SSL/TLS运行在TCP之上。所有传输的内容都经过加密，加密采用对称加密，但对称加密的密钥用服务器方的证书进行了非对称加密。此外客户端可以验证服务器端的身份，如果配置了客户端验证，服务器方也可以验证客户端的身份。33、HTML5上传图片的标签：
解答：<img alt="" src="" />
34、如何用jQeury取到以下元素的第三个div：
<div> <div> <div> </div> </div> </div>
35、link一个css文件和import一个CSS文件的区别：
解答：
（1）适用范围不同 @import可以在网页页面中使用，也可以在css文件中使用，用来将多个css文件引入到一个css文件中；而link只能将css文件引入到网页页面中。
（2）功能范围不同 link属于XHTML标签，而@import是CSS提供的一种方式，link标签除了可以加载CSS外，还可以定义RSS，定义rel连接属性等，@import就只能加载CSS。
（3）加载顺序不同 当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
（4） 兼容性 由于@import是css2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
（5）控制样式时的差别 使用link方式可以让用户切换CSS样式.现代浏览器如Firefox,Opera,Safari都支持rel=”alternate stylesheet”属性(即可在浏览器上选择不同的风格),当然你还可以使用Javascript使得IE也支持用户更换样式
36、get和post请求：
（1）GET请求，请求的数据会附加在URL之后，以?分割URL和传输数据，多个参数用&连接。URL的编码格式采用的是ASCII编码，而不是uniclde，即是说所有的非ASCII字符都要编码之后再传输。
POST请求：POST请求会把请求的数据放置在HTTP请求包的包体中。上面的item=bandsaw就是实际的传输数据。
因此，GET请求的数据会暴露在地址栏中，而POST请求则不会。
（2）传输数据的大小
在HTTP规范中，没有对URL的长度和传输的数据大小进行限制。但是在实际开发过程中，对于GET，特定的浏览器和服务器对URL的长度有限制。因此，在使用GET请求时，传输数据会受到URL长度的限制。
对于POST，由于不是URL传值，理论上是不会受限制的，但是实际上各个服务器会规定对POST提交数据大小进行限制，Apache、IIS都有各自的配置。
（3）安全性
POST的安全性比GET的高。这里的安全是指真正的安全，而不同于上面GET提到的安全方法中的安全，上面提到的安全仅仅是不修改服务器的数据。比如，在进行登录操作，通过GET请求，用户名和密码都会暴露再URL上，因为登录页面有可能被浏览器缓存以及其他人查看浏览器的历史记录的原因，此时的用户名和密码就很容易被他人拿到了。除此之外，GET请求提交的数据还可能会造成Cross-site request frogery攻击
（4）HTTP中的GET，POST，SOAP协议都是在HTTP上运行的
37、doctype的作用：
（1）DOCTYPE是document type(文档类型)的简写，在Web设计中用来说明你用的XHTML或者HTML是什么版本.
（2）要建立符合标准的XHTML网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。
（3）一般放置在html网页代码最顶部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//CN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
（4）小结，通常html DOCTYPE声明是必须的，而且使用div+css更是必不可少，如果缺少或错误document将会造成你的CSS失效或半失效，即因为css失效，网页布局变乱，有的css属性不能体现。
（5）如果你不能记住和正确输入DOCTYPE长串英文，没关系，DIVCSS5建议你使用DW软件直接新建html即可得到完整结构最基本html。
38、iframe的优缺点：
（1）HTML框架简述
-
- 重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，加快了网页下载速度)
- 技术易于掌握，使用方便，使用者众多，可主要应用于不需搜索引擎来搜索的页面
- 方便制作导航栏
（3）框架的缺点（iframe的缺点与frame类似）
-
- 会产生很多页面，不容易管理
- 不容易打印（目前只能实现分框架页面的打印，不能实现对frameset的打印）
- 浏览器的后退按钮无效（只能针对实现当前光标所在页面的前进与后退，无法实现frameset整个页面的前进与后退）
- 代码复杂,无法被一些搜索引擎索引到（框架结构（帧结构）的不能为每个网页都设置一个标题（TITLE），更为糟糕的是，有些搜索引擎对框架结构的页面不能正确处理，会影响到搜索结果的排列名次）
- 多数小型的移动设备（PDA 手机）无法完全显示框架
- 多框架的页面会增加服务器的http请求
- 由于上面诸多缺点，因此不符合标准网页设计的理念,已经被标准网页设计抛弃，目前的html5已不再支持此标签
39、同步和异步的区别：
（1）同步：
同步的思想是：所有的操作都做完，才返回给用户。这样用户在线等待的时间太长，给用户一种卡死了的感觉（就是系统迁移中，点击了迁移，界面就不动了，但是程序还在执行，卡死了的感觉）。这种情况下，用户不能关闭界面，如果关闭了，即迁移程序就中断了。
（2）异步：
将用户请求放入消息队列，并反馈给用户，系统迁移程序已经启动，你可以关闭浏览器了。然后程序再慢慢地去写入数据库去。这就是异步。但是用户没有卡死的感觉，会告诉你，你的请求系统已经响应了。你可以关闭界面了。
（3）总结：
a、同步，是所有的操作都做完，才返回给用户结果。即写完数据库之后，在相应用户，用户体验不好。
b、异步，不用等所有操作等做完，就相应用户请求。即先相应用户请求，然后慢慢去写数据库，用户体验较好。
