关于前端面试遇到的一些问题的记录

时间 2019-11-08

原文原文链接

针对这几天的前端面试，学到了很多东西，对还有印象的作个记录：css

1.子元素所有浮动，父元素如何撑开？

　　解答：一、给父元素加一个overflow:hidden；二、将父元素也一块儿浮动（这个比较复杂，会影响到父元素的同级元素）；三、在父元素的最后一个子元素（也就是你的ul标签）后边再增长多一个非浮动的子元素，而后将这个子元素加个clear（例：<div style="clear:both"></div>）；四、使用伪元素清除浮动：　　　html

.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的属性?

　　解答：html5

　　　　一、content-box（宽度和高度分别应用到元素的内容框。在宽度和高度以外绘制元素的内边距和边框。）；jquery

　　　　二、border-box（为元素设定的宽度和高度决定了元素的边框盒。经过从已设定的宽度和高度分别减去边框和内边距才能获得内容的宽度和高度。）；程序员

　　　　三、inherit（规定应从父元素继承 box-sizing 属性的值。）es6

3.运行下面代码获得的值？

var name="aaa"; 

　　function echo(){

　　　　alert(name);

　　　　var name="bbb";

　　　　alert(name);

　　　　alert(age);

　　}

　　echo();

　　解答：在我实际运行出来后，alert出来的结果依次是：undefined,bbb,第三个没有alert(由于会报not defined错误)web

　　ps:echo()函数中的name前面不定义var时，第二个alert的name值为aaa面试

4.jQuery操做DOM节点的方法？

　　解答：详见另外一篇博客http://www.cnblogs.com/minozMin/p/8376614.htmlajax

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：

　　$("[name='username']")（若是是取全部data-*="online"的元素，则用（$("[data='online']")））

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 元素

1三、Flex布局？

　　解答：是"Flexible Box"的缩写，译为弹性布局，为盒模型提供最大的灵活性。

　　　　使用方法：display: flex/inline-flex;（webkit内核浏览器需加-webkit前缀。）

　　　　容器的属性：

　　　　　　一、justify-content: flex-start(左对齐) | flex-end(右对齐) | center(居中) | space-between(两端对齐，项目之间的间隔相等) | space-around(每一个项目两侧的间隔相等，因此项目之间的间隔比项目与边框的间隔大一倍)

　　　　　　二、align-items: flex-start(交叉轴的起点对齐) | flex-end(交叉轴的终点对齐) | center(交叉轴的中点对齐) | baseline(项目第一行文字的基线对齐) | stretch(默认值，不设置或位auto时，占满整个容器的高度)

##########

1四、标准模型和怪异模型（IE）的区别：

　　解答：标准模型：一个块的总宽度=width+border+padding+margin

　　　　　怪异模型：一个快的总宽度=width+margin（即width已经包含了padding和border的值）

　　　　CSS3的box-sizing：

　　　　content-box（标准模型）/ border-box（怪异模型）

1五、如何居中一个div：　

　　解答：margin负边距：position: absolute;left:50%;top:50%;margin-left:-100px；margin-top:-100px;（margin负边距为宽高的50%；IE7 及以前不支持）

　　　　　flex布局：display:flex;justify-content:center;align-items:center;

　　　　　Margin auto实现：margin: auto; position: absolute;top: 0; right: 0; bottom: 0; left: 0;

　　　　　transform变形：position:absolute; left:50%; /* 定位父级的50% */ top:50%;transform: translate(-50%,-50%); /*本身的50% */

1六、css选择符：

　　解答：通用选择符（*）、类型选择符（p、div、span、h1）、属性选择符（E1[attr]、E1[attr='value']）、包含选择符（E1 E2）、子对象选择符（E1>E2）、类选择符（.class）、选择符混合使用（E1.E2.E3 eg:p.bigFont、p#colorFont）、ID选择符（#ID）

1七、HTML5和CSS3的一些新特性：

　　解答：HTML5的新特性：

　　　　　　·用于绘制图表的canvas元素

　　　　　　·用于媒介回放的video和radio元素

　　　　　　·对离线本地存储更好的支持

　　　　　　·新的特殊元素内容：header、nav、section、content、footer、article

　　　　　　·新的表单控件：calendar、time、date、email、url

　　　　CSS3的新特性：

　　　　　　·对div加特效：圆角（border-radius）、阴影（box-shadow）

　　　　　　·对文字加特效：阴影（text-shadow）、线性渐变（gradient）、旋转（transform）

　　　　　　·transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜

　　　　　　·引入伪元素： ::selection

　　　　　　·引入媒体查询、多栏布局

　　　　　　·多背景rgba，增长了更多的选择器

　　　　　　·border-image

1八、对象的操做：

　　解答：合并：extend、assign、遍历赋值法

　　　　　比较两个值是否严格相等：object.is(A,B) 　　　　

Object.keys()：返回对象自身的全部可枚举的属性的键名

1九、表单提交中有图片和文件时，需添加什么属性？

　　解答：

<form enctype="multiple/form-data">
</form>

20、JS事件流模型：

　　解答：冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。（推荐）

　　　　　捕获型事件流：事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。

2一、css的优化规则：

　　解答：详见另外一篇博客http://www.cnblogs.com/minozMin/p/8093551.html

2二、字符串的操做：

　　解答：详见另外一篇博客http://www.cnblogs.com/minozMin/p/8328028.html

2三、判断是否为数组类型：

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类型

2四、运行代码，输出值：

var a = new Object();
a.value = 1;
b = a;
b.value = 2;
alert(a.value);

结果为：2

2五、闭包：

2六、面向对象经典的例子：

2七、做用域：

　　解答：参见另外一篇博客 http://www.cnblogs.com/minozMin/p/8022869.html

2八、jQuery中的$符号：

　　解答：$就是jQuery的别称，是jQuery库提供的一个函数。

　　　　（1）能够经过$ () 里的参数进行查找和选择html文档中的元素

$('#tmp');//这是查找dom的id等于tmp的元素

　　　　（2）访问$中定义的函数

$.ajax(options)

2九、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

（3）sessionStorage 与 localStorage 的接口相似，但保存数据的生命周期与 localStorage 不一样。作事后端开发的同窗应该知道 Session 这个词的意思，直译过来是“会话”。而 sessionStorage 是一个前端的概念，它只是能够将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。

特性	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

3一、如何定位在jQuery中出现的问题：

3二、HTTP和HTTPS的区别：

　　解答：

　　　　（1）http是HTTP协议运行在TCP之上。全部传输的内容都是明文，客户端和服务器端都没法验证对方的身份。

　　　　（2）https是HTTP运行在SSL/TLS之上，SSL/TLS运行在TCP之上。全部传输的内容都通过加密，加密采用对称加密，但对称加密的密钥用服务器方的证书进行了非对称加密。此外客户端能够验证服务器端的身份，若是配置了客户端验证，服务器方也能够验证客户端的身份。

3三、HTML5上传图片的标签：

　　解答：<img alt="" src="" />

3四、如何用jQeury取到如下元素的第三个div：

<div>
    <div>
        <div>
        </div>
    </div>
</div>

3五、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也支持用户更换样式

3六、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上运行的

3七、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。

3八、iframe的优缺点：

　　（1）HTML框架简述

　　　　一个浏览器窗体能够经过几个页面的组合来显示。咱们可使用框架来完成(frames)这项工做。(框架能够把HTML文档分为多个页面)

框架页使用了表格的方式组合，能够分为数行与数列。

　　（2） 框架的优势

- 重载页面时不须要重载整个页面，只须要重载页面中的一个框架页(减小了数据的传输，加快了网页下载速度)
- 技术易于掌握，使用方便，使用者众多，可主要应用于不需搜索引擎来搜索的页面
- 方便制做导航栏

　　（3）框架的缺点（iframe的缺点与frame相似）

- 会产生不少页面，不容易管理
- 不容易打印（目前只能实现分框架页面的打印，不能实现对frameset的打印）
- 浏览器的后退按钮无效（只能针对实现当前光标所在页面的前进与后退，没法实现frameset整个页面的前进与后退）
- 代码复杂,没法被一些搜索引擎索引到（框架结构（帧结构）的不能为每一个网页都设置一个标题（TITLE），更为糟糕的是，有些搜索引擎对框架结构的页面不能正确处理，会影响到搜索结果的排列名次）
- 多数小型的移动设备（PDA 手机）没法彻底显示框架
- 多框架的页面会增长服务器的http请求
- 因为上面诸多缺点，所以不符合标准网页设计的理念,已经被标准网页设计抛弃，目前的html5已再也不支持此标签

3九、同步和异步的区别：

　　（1）同步：

　　　　同步的思想是：全部的操做都作完，才返回给用户。这样用户在线等待的时间太长，给用户一种卡死了的感受（就是系统迁移中，点击了迁移，界面就不动了，可是程序还在执行，卡死了的感受）。这种状况下，用户不能关闭界面，若是关闭了，即迁移程序就中断了。

　　（2）异步：

　　　　将用户请求放入消息队列，并反馈给用户，系统迁移程序已经启动，你能够关闭浏览器了。而后程序再慢慢地去写入数据库去。这就是异步。可是用户没有卡死的感受，会告诉你，你的请求系统已经响应了。你能够关闭界面了。

　　（3）总结：

　　　　a、同步，是全部的操做都作完，才返回给用户结果。即写完数据库以后，在相应用户，用户体验很差。

　　　　b、异步，不用等全部操做等作完，就相应用户请求。即先相应用户请求，而后慢慢去写数据库，用户体验较好。

关于前端面试遇到的一些问题的记录

1.子元素所有浮动，父元素如何撑开？

2.box-sizing的属性?

3.运行下面代码获得的值？

4.jQuery操做DOM节点的方法？

5.js递归函数 ##########

6.ajax设置同步加载：

7.es6和es5的区别：

8.表格奇偶数行显示不一样颜色：

9.实现滚动：

10.如何经过选择器获取ul li的前三个元素：

11.如何获取name="username"的input：

12.总结JQeury的属性选择器：

1三、Flex布局？

1四、标准模型和怪异模型（IE）的区别：

1五、如何居中一个div：

1六、css选择符：

1七、HTML5和CSS3的一些新特性：

1八、对象的操做：

1九、表单提交中有图片和文件时，需添加什么属性？

20、JS事件流模型：

2一、css的优化规则：

2二、字符串的操做：

2三、判断是否为数组类型：

2四、运行代码，输出值：

2五、闭包：

2六、面向对象经典的例子：

2七、做用域：

2八、jQuery中的$符号：

2九、cookie、sessionStorage、localStorage的区别：

30、浏览器的加载顺序：

3一、如何定位在jQuery中出现的问题：

3二、HTTP和HTTPS的区别：

3三、HTML5上传图片的标签：

3四、如何用jQeury取到如下元素的第三个div：

3五、link一个css文件和import一个CSS文件的区别：

3六、get和post请求：

3七、doctype的做用：

3八、iframe的优缺点：

3九、同步和异步的区别：

40、不一样网页之间的数据传递：

10.如何经过选择器获取ul li的前三个元素：　

1五、如何居中一个div：　

3六、get和post请求：　　