图书
课程
文章
专题
电子书

看不完的那种！前端170面试题+答案学习整理（良心制作）

程序员哆啦A梦

哪吒人生信条：如果你所学的东西 处于喜欢 才会有强大的动力支撑。

前言

希望可以通过这篇文章，能够给你得到帮助。(感谢一键三连)

1.css3有哪些新特性

圆角`border-radius`，阴影`box-shadow`，对文字加特效`text-shadow`，线性渐变`gradient`，变化`transform`，伪元素`::selection`，媒体查询，多栏布局，图片边框`border-image`。
  1. p:first-of-type，选择属于其父元素的首个<p>元素的每个<p>元素
  2. p:last-of-type，选择属于其父元素的最后一个<p>元素的每个<p>元素
  3. p:only-of-type，选择属于其父元素的唯一<p>元素的每个<p>元素
  4. p:only-child，选择属于其父元素的唯一子元素的每个<p>元素
  5. p:nth-child(2)，选择属于其父元素的第二个子元素的每个<p>元素
  6. :enabled:disabled，控制表单控件的禁用状态
  7. :checked，单选框或复选框被选中

2.first-child与first-of-type的区别是

1. `first-child`匹配的是父元素的第一个子元素，可以说是结构上的第一个子元素
2. `first-of-type`匹配的是该类型的第一个元素，类型就是指冒号前面匹配到的元素。（只要是该类型的元素第一个即可，不限制是第一子元素）

<div>
 <p></p>
 <span></span>
</div>

3.解决使用transform:translate属性时会出现闪烁现象

-webkit-backface-visibility: hidden; // 隐藏转换的元素的背面
-webkit-transform-style: preserve-3d; // 使被转换的元素的子元素保留其3d转换
-webkit-transform: translated3d(0,0,0); // 开启gpu硬件加速模式，使用gpu代替cpu渲染动画

4.如何使用@keyframes使div元素移动200像素

div {
 widht:100px;
 height:100px;
 background: red;
 animation: move 3s;
}
@keyframes move{
 from{
  margin-left: 0px;
 }
 to{
  margin-left: 100px;
 }
}

5.如何实现文本换行

使用`word-wrap`属性：`normal`只在允许的断字点换行；`break-word`在长单词或`url`地址内部进行换行。

6.超出文本省略

使用text-overflow:ellopsis：文本溢出时，为了不显示省略标记...，通过clip直接将溢出的部分裁剪掉。

7.css3动画如何在动作结束时保持状态不变

使用`animation-fill-mode`，值为`none`，表示不改变默认行为；值为`forwards`，当动画完成后，保持最后一个属性值；`backwards`，在`animation-delay`所指定的一段时间内，在动画显示之前，应用开始属性值；`both`，向前和向后填充模式都可以应用。

`css3`动画的优点：在性能上会稍微好一些，浏览器会对`css3`的动画做一些优化，代码相对简单；`css3`动画的缺点：在动画控制上不够灵活，兼容性不好，部分动画功能无法实现。

8.实现某div元素以每秒50px的速度左移100px

$('div'),animate({'left': 100}, 2000);

div {
 transition: all 2s linear;
}
div.style.left = {div.offsetLeft+100)+'px';

9.说说box-sizing属性

`box-sizing`属性用来控制元素盒模型的解析模式，默认是`content-box`

`content-box`让元素维持`w3c`的标准盒模型，元素的宽度`/`高度由`border+padding+content`的宽度`/`高度决定，设置`width/height`属性指的是指定`content`部分的宽度`/`高度。

> `border-box`让元素维持`ie`传统盒模型，设置`width/height`属性指的是指定`border+padding+content`的宽度`/`高度。标准浏览器下，按照`w3c`规范解析盒模型，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。

content-box盒模型：

布局所占宽度：

width=width + padding-left + paddiing-right + border-left + border-right

布局所占高度：

Height = height + padding-top + padding-bottom + border-top + border-bottom

padding-box盒模型：

布局所占宽度：

width = widht（包含padding-left + padding-right） + border-top + border-bottom

布局所占高度：

Height = height(包含padding-top + padding-bottom) + border-top + border-bottom

border-box盒模型：

布局所占宽度：

width = widht（包含padding-left + padding-right + border-left + border-right）

布局所占高度：

height = height(包含padding-top + padding-bottom + border-top + border-bottom)

10.如何实现把文本分隔为4列并使两列之间间隔30像素

div {
 -moz-column-count: 3;
 -webkit-column-count: 3;
 column-count: 3;
 -moz-column-gap: 40px;
 -webkit-column-gap: 40px;
 column-gap: 40px;
 width: 600px;
}

11.background-clip和background-orgin的区别

它有三个属性：

1. border-box表示背景从边框开始绘制
2. padding-box表示背景在边框内部绘制
3. content-box表示背景从内容部分绘制

它有三个属性：border-box，padding-box，content-box（它只能对背景做样式上的操作）

12.css3中transition属性值以及含义是

transition属性是一个简写属性：

1. `transition-property`哪个属性需要实现过渡
2. `transition-duration`完成过渡效果需要多少秒`/`毫秒
3. `transition-timing-function`速度效果的运动曲线，如`linear,ease-in,ease,ease-out,ease-in-out,cube-bezier`
4. `transition-delay`规定过渡开始前的延迟时间

13.当元素不面向屏幕时其可见性如何定义

backface-visibility: visible | hidden

14.如何实现css3倒影

-webkit-box-reflect设置方向，距离。方向可以设置为below,above,left,right。

.demo { 
 height: 100px;
 widht: 100px;
 background: url(logo.png);
 -webkit-box-reflect: below 10px;
}

15.css3实现背景颜色线性渐变

div{
 background: -webkit-linear-gradient(left,red,green 50%, blue)
}

16.为盒子添加蒙版

.demo {
 height: 100px;
 width: 100px;
 -webkit-mask-image: url(shadow.png);
 -webkit-mask-position: 50% 50%;
 -webkit-mask-repeat: no-repeat;
}

17.animation属性值有哪些

`animation-name`就是动画名称；`animation-duration`就是动画持续时间；`animation-play-state`是播放状态(`running`表示播放，`paused`表示暂停)，可以用来控制动画暂停;`animation-delay`就是动画延迟时间;`animation-timing-function`就是动画运动形式，`animation-iteration-count`就是重复次数；`animation-direction`就是播放前重置。

18.rem的原理是什么

在做响应式布局时，通过调整html的字体大小，页面上所有使用rem单位的元素都会做相应的调整。

19.如何设置css3文本阴影

h1 {text-shadow: 水平阴影，垂直阴影，模糊距离，阴影颜色}

20.如何把元素从左侧移动50像素，从顶端移动100像素

div{
 transform: translate(50px,100px);
 -ms-transform: translate(50px,100px);
 -webkit-transform: translate(50px,100px);
 -o-transform: translate(50px,100px);
 -moz-transform: translate(50px,100px);
}

21.如何把一个元素旋转30°

div{
 transform:rotate(30deg);
 -ms-transform: rotate(30deg); //ie9
 -webkit-transform: rotate(30deg); //safari,chrome
 -o-transform: rotate(30deg); // opera
 -moz-transform: rotate(30deg); // firebox
}

22.利用css3制作淡入淡出的动画效果

@-webkit-keyframes daIn{
 from {
  opacity: 0;
 }
 to {
  opacity: 1;
 }
}

@-webkit-keyframes daOut {
 from{
  opacity: 1;
 }
 to{
  opacity: 0;
 }
}

div {
 -webkit-animation-name: daIn; // 动画名称
 -webkit-animation-duration: 3s; // 动画持续时间
 -webkit-animation-iteration-count: 1; // 动画次数
 -webkit-animation-delay: 0s; // 延迟时间
}

23.在使用Bootstrap的同时使用地图api，可能会造成Bootstrap与地图冲突，地图显示不出来，如何解决

主要是在使用`Bootstrap`的变体`zui.css`的时候出现的，首先，打开浏览器的开发者工具，查看控制台有无错误，如没有，查看网络中的资源，并确认与地图相关的图片资源有无加载，若加载了，将地图调用的代码从项目中独立出来，看能否正常显示，若能显示，在项目中，使用二分法一半一半地删除引用的`JavaScript,css`代码，看这些`JavaScript`或`css`代码是否对地图`api`造成了影响，把问题锁定在`zui.css`中，然后，在`elements`里核对地图`div`下面的一些`css`。

24.jquery中的deferred的功能

  1. 实现链式操作
  2. 指定同一操作的多个回调函数
  3. 为多个操作指定回调函数
  4. 提供普通操作的回调函数接口

25.什么是deferred对象

开发网站过程中，会遇到某些耗时很长的`javascript`操作，有异步操作，如`ajax`读取服务器数据，有同步操作，如遍历一个大型数组，它们都不能立即得到结果。

可以为它们指定回调函数`callback`，就是事先规定，一旦运行结束，调用那些函数，但是，在回调函数方面，`jquery`的功能非常弱，为了改变这一点，`jquery`开发设计了`deferred`对象。

26.jquery和jquery ui的区别

`jquery`是一个`javascript`库，主要提供选择器，属性修改和事件绑定等功能。`jquery ui`则是在`jquery`的基础上对`jquery`的扩展，是`jquery`的插件。`jquery ui`提供了一些常用的界面元素，如对话框，拖动行为，改变大小行为等。

27.如何用原生JavaScript实现jquery的ready方法

$(document).ready()在dom绘制完毕后就执行，而不必等到页面加载完毕。

// 实现ready方法
var DOMReady = (function() {
 // 回调函数队列
 var fnList = [];
 // 页面是否已经绘制完成
 var ready = false;
 var fnEvent = null;
 // 事件回调函数
 function handler(e) {
 // 确保事件回调函数只执行一次
 if(ready){
 return;
 }
 // 如果发生了`onreadystatechange事件，但是状态不是complete,说明dom没有绘制完成
 if(e.type==='onreadystatechange' && document.readyState !== 'complete') {
  return;
 }
 // 运行所有回调函数，为了防止运动时候注册更多的事件回调函数，每次都要重新判断fnList的长度
 for(var i = 0; i<fnList.length; i++){
  // 在document作用域下执行回调函数，并传递事件对象
  fnList[i].call(document,e)
 }
 // 执行完毕，切换ready状态
 ready = true;
 // 移除所有回调函数
 fnList = null;
 fnEvent = e;
}
// 注册事件
// 能力检查
if(document.addEventListener){
 document.addEventListener('DOMContentLoaded',handler,false)
 document.addEventListener('readystatechange',handler,false)
 window.addEventListener('load',handler,false);
}else if(document.attachEvent){
 document.attachEvent('onreadystatechange', handler);
 window.attachEvent('onload', handler)
}
// 返回真正的DOMReady方法
return function(fn) {
 if(ready) {
  fn.call(document,fnEvent)
 }else {
  fnList.push(fn)
 }
}
})()
// 测试
// 订阅load事件
window.onload = function() {
 console.log('load')
}
// 订阅ready事件
DOMReady(function(){
console.log('ready')
})

28.jquery中的attr和prop区别

对于`html`元素本身就带有的固定属性，在处理时，使用`prop`方法；对于`html`元素自定义的`dom`属性时，在处理时，使用`attr`方法。

29.$.map()和$.each()区别

`$.map()`方法用来遍历操作数组和对象，返回的是一个新的数组； `$.map()`方法适用于将数组或对象的每个项目映射到一个新数组中。

`$.each()`用于遍历`jquery`对象，返回的是原来的数组，并不会返回一个新数组。

30. jquery中如何将一个jquery对象转化为dom对象

jquery对象是一个数据对象， 可以用[index]的方法来得到相应的dom对象

var $v = $('#v'); // jquery对象
console.log($v[0]); // dom对象

使用get(index)方法：

var $v = $("#v");
console.log($v.get(0)); // dom对象

31.jquery中监听事件有几种方式

4中事件监听方式：bind(),live(),delegate(),on()；解除事件对应的4种：unbind(),die(),undelegate(),off()。

32.jquery中个get和eq区别

- `get()`取得其中一个匹配的元素，`num`表示取得第几个匹配的元素,`get()`多针对集合元素，返回的是`dom`对象组成的数组
- `eq()`获取第`n`个元素，下标都从0开始，返回的是一个`jquery`对象。

33.jquery中的事件冒泡，怎么执行，如何停止冒泡事件

事件冒泡从里面往外面开始传递。在jquery中stopPropagation()方法用于停止冒泡，兼容所有浏览器

34.jquery中的hover和toggle区别

`hover()`和`toggle()`都是`jquery`中的两个合成事件。

- `hover()`方法用于模拟光标悬停事件
- `toggle()`方法用于连续交替单击事件

35. 你使用过哪些数据格式

`html`格式，`json`格式，`xml`格式：`html`片段提供外部数据，一般来说是最简单的；如果数据需要复用，那么在性能和文件大小方面具有优势的是`json`；当远程应用程序未知时，`xml`能为数据的操作性提供最可靠的保证。

36.选择器中id，class有什么区别

37.为了将单选按钮组的第二个选框设置为选中状态，如何设置

$('input[name=items]').get(1).checked = true

38.$.getScript()方法和$.getJson()方法有什么区别

39.jquery或zepto源码有哪些地方觉得不错

jquery源码封装在一个匿名函数的自执行环境中，有助于防止变量的全局污染。

通过传入window对象参数，可以使window对象作为局部变量使用。

好处是当jquery访问window对象的时候，就不用将作用域链退回到顶层作用域了，从而可以更快地访问window对象，同样，传入undefined参数，可以降低undefined被重定义的风险。

(function (window, undefined) {
 window.jQuery = window.$ = jQuery
})(window);

jquery将一些原型属性和方法封装在了jQuery.prototype中，为了方便对jQuery.prototype的访问，将jQuery.prototype赋值给jQuery.fn。一些数组或对象的方法经常能使用到，jQuery将其保存为局部变量以提高访问速度。jQuery实现的链式调用可以节约代码，所返回的都是同一个对象，可以提高开发效率。

40.jQuery中的美元符号

$(document).ready(function(){
 //...
});
jQuery(document).ready(function(){
 //...
});

41.onload()函数和ready()函数的区别

42.jQuery中有哪几种常见的选择器

基本选择器；层次选择器；过滤选择器；属性选择器；子元素选择器；表单选择器；内容选择器；可见选择器

43.使用jQuery将页面上所有元素边框设置为2px宽的虚线

<script language="javascript" type="text/javascript">
 $("*").css("border", "2px dotted red");
</script>

44.使用jQuery实现单击按钮时弹出一个对话框

<button class="btn">打开弹框</button>
jQuery:
<script type="text/javascript">
 $(function(){
  $('.btn').click(function(){
   alert('success')
  })
 })
</script>

45.如何使用jquery编码和解码url

编码时使用encodeURIComponent(url)，解码时使用decodeURIComponent(url)

46.jquery中的delegate()函数有什么作用

delegate()是jquery中事件委托的语义化方法，会在以下两种情况中使用到。

如果有一个父元素，需要给其下的子元素添加事件，这时可以使用delegate()了。

$("ul").delegate("li", "click", function(){
 $(this).hide();
});

当元素在当前页面中不可用时，使用delegate()

47.如何禁用浏览器的前进和后退按钮

<script type="text/javascript" language="javascript">
 $(document).ready(function() {
  //前进
  window.history.forward();

  //后退
  window.history.back();
 });
</script>

48.网页上有5个<div>元素，如何使用jquery来选择它们

可以使用标签选择器来选择所有的div元素，$("div")会返回一个包含5个div标签的jQuery对象。

49.如何在单击一个按钮时使用jQuery隐藏一副图片

$('.demo-img').click(function() {
 $('.img').hide();
});

50. $(document).ready()是什么函数

ready()函数用于在文档进入ready状态时执行代码。当dom完全加载时，jquery允许你执行代码，使用$(document).ready()最大的好处在于它适用于所有浏览器，jQuery有助于解决跨浏览器兼容性问题。

None

null

None

None