面试答案知多少

1.<!DOCTYPE html>中DOCTYPE 有什么作用，去掉会有什么影响？

答：作用：声明该文档是什么类型的：html类型；

去掉：一般高版本浏览器默认是html5类型，所以去掉也没事，不过考虑到低版本浏览器的兼容，建议规范的书写，还是声明一下的好。

2.HTML行内元素有哪些，块级元素有哪些？画出css盒模型。

答：行内元素：span、a、img、input、strong、i、textarea;

块级元素：div、p、h1-h6、ul、li、form、hr、ol、tr;

盒子模型：外边距（margin）、边框（border）、内边距（padding）、内容（content）；

俯视这个盒子，它有上下左右四条边，所以每个属性都包括四个部分：上下左右；这四部分可同时设置，也可分别设置；内边距可以理解为盒子里装的东西和边框的距离，而边框有厚薄和颜色之分，内容就是盒子中间装的东西，外边距就是边框外面自动留出的一段空白。

3.css选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和!important哪个优先级高？

答：css选择符：（id：#）、（class：.）、（标签）、（*）；伪类选择器还有很多，既然问的是选择符，这里就不写了。

属性可继承：font-size、background、width、color（a标签特殊）<下面的做参考>

所有元素可继承：visibility和cursor。

内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。

终端块状元素可继承：text-indent和text-align。

列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

优先级算法：按照10进制算法：important=正无穷，id=100，class=10，元素（标签）=5，*=1；

内联和!important：css法则里!important永远是最高的。

4.清除浮动的几种方法，各自的优缺点？

答：a.父级元素定义 height ：

              原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

              优点：简单、代码少、容易掌握

              缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

              建议：不推荐使用，只建议高度固定的布局时使用

b.结尾处加空div标签 clear:both :

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度

优点：简单、代码少、浏览器支持好、不容易出现怪问题

缺点：如果页面浮动布局多，就要增加很多空div,增加代码量，维护也不方便。

建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

c.父级元素定义伪类:after 和 zoom

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题

优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。

建议：推荐使用，建议定义公共类，以减少CSS代码。

5.HTML5存储类型有哪些？

答：1、本地存储localstorage

<扩展>存储方式：

以键值对(Key-Value)的方式存储，永久存储，永不失效，除非手动删除。

大小：每个域名5M

支持情况：

注意：IE9 localStorage不支持本地文件，需要将项目署到服务器，才可以支持！

检测方法：

if(window.localStorage){

alert('This browser supports localStorage');

}else{

alert('This browser does NOT support localStorage');

}

常用的API：

getItem //取记录

setIten//设置记录

removeItem//移除记录

key//取key所对应的值

clear//清除记录

存储的内容：

数组，图片，json，样式，脚本。。。（只要是能序列化成字符串的内容都可以存储）

2、本地存储sessionstorage

HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的，区别在于 sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存。

3、离线缓存（application cache）

< 参考：http://blog.csdn.net/s164828378/article/details/52747032>

6.HTTP状态码有哪些，分别代表什么意思？

答：100：初始的请求已经接受，客户应当继续发送请求的其余部分；

101：服务器将遵从客户的请求转换到另外一种协议；

200：请求数据成功。

301：客户请求的文档在其他地方，新的URL在Location头中给出，浏览器应该自动地访问新的URL。

404：请求失败，请求所希望得到的资源未被在服务器上发现；

505：服务器不支持，或者拒绝支持在请求中使用的 HTTP 版本。

<参考：http://tool.oschina.net/commons?type=5>

7.css3新增伪类选择器有哪些?

答：first-of-type、last-of-type、only-of-type、only-child、nth-child(n)、root<选择文档根元素>

<参考：https://zhidao.baidu.com/question/555177511.html>

8.用css3编写：div旋转90度，0.5秒后变圆，0.5秒后放大2倍。

 div{margin: auto;

     width: 100px;height: 100px;background: gold;

     transform:rotate(90deg);

     -ms-transform:rotate(90deg); /* Internet Explorer */

     -moz-transform:rotate(90deg); /* Firefox */

     -webkit-transform:rotate(90deg); /* Safari 和 Chrome */

     -o-transform:rotate(90deg); /* Opera */

     animation: name 0.5s infinite;

 }

    @keyframes name {

   100%{border-radius:50%;

       transform:scale(2);

   }

}

答：

9.例举两种强制类型转换和一种隐式类型转换。

答：强制：a.parsInt(“123456”);b.Number(value);

隐式：“50”-4；

10.split()和join()的区别

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

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

split()方法：用于把一个字符串分割成字符串数组。

区别：这两个函数之间的主要区别在于 Join 可以使用任何分隔符字符串将多个字符串连接起来，而 Split 只能使用一个字符分隔符将字符串断开。

11.分别解释数组方法pop() push() unshift() shift();

a、pop():将删除数组中的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。

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

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

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

12.事件绑定和普通事件有什么区别？

答：普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定方式添加事件可以添加多个。

13.ajax请求的时候get和post方式的区别

答：1.get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。

2.get安全性非常低，post安全性较高。

3.get会产生缓存，post没有缓存。

4.当我们在提交表单的时候我们通常用post方式,当我们要传送一个较大的数据文件时,需要用post。当传递的值只需用参数方式(这个值不大于2KB)的时候,用get方式即可。

<参考：http://www.cnblogs.com/oneword/archive/2011/06/06/2073533.html

http://blog.csdn.net/jqrsdsy/article/details/6737269 >

14.call和apply的区别。

答：call:调用一个对象的一个方法，以另一个对象替换当前对象;

Apply:应用某一对象的一个方法，用另一个对象替换当前对象。

<提示 : 这题不会没问题，我也不会，咳咳。欲知详情，自个儿百度去。>

15.事件委托是什么?使用事件委托有什么好处？

答：事件委托是：利用冒泡的原理，把事件加到父级上，触发执行效果；

好处是：提高性能，较少对dom的频繁操作。

<参考：http://www.cnblogs.com/leejersey/p/3801452.html >

16.如何阻止事件冒泡和默认事件？

答：功能:停止事件冒泡:

function stopBubble(e) {

// 如果提供了事件对象，则这是一个非IE浏览器

if ( e && e.stopPropagation ) {

// 因此它支持W3C的stopPropagation()方法

e.stopPropagation();

} else {

// 否则，我们需要使用IE的方式来取消事件冒泡

window.event.cancelBubble = true;

}

功能：阻止事件默认行为:

function stopDefault( e ) {

// 阻止默认浏览器动作(W3C)

if ( e && e.preventDefault ) {

e.preventDefault();

} else {

// IE中阻止函数器默认动作的方式

window.event.returnValue = false;

}

return false;

}

17.添加删除替换插入到某个DOM的方法

dom = document.createElement("p");

dom.innerHTML="<span style='color:red'> 这是一个被p标记包含的 span 标签</span>";

document.body.appendChild(dom);

A.增：

This.removeChild(dom);

B.删：

h = document.createElement("h1");

h.innerHTML="<span style='color:green'> 这是一个被h1标记包含的 span 标签</span>";

document.body.replaceChild(h,dom);

dom = null;

C.替换：

document.appendChild(dom );

D.插入：

18.跨域的方法：

答：1.jsonp:

2.通过修改document.domain来跨子域;

3.使用window.name来进行跨域;

4.使用HTML5中新引进的window.postMessage方法来跨域传送数据;

<参考：http://www.cnblogs.com/2050/p/3191744.html >

19.编写一个数组去重的方法

Array.prototype.unique = function(){

var res = [];

var json = {};

for(var i = 0; i < this.length; i++){

if(!json[this[i]]){

res.push(this[i]);

json[this[i]] = 1;

}

return res;

}

var arr = [112,112,34,'你好',112,112,34,'你好','str','str1'];

alert(arr.unique());

思路：

1.创建一个新的数组存放结果

2.创建一个空对象

3.for循环时，每次取出一个元素与对象进行对比，如果这个元素不重复，则把它存放到结果数组中，同时把这个元素的内容作为对象的一个属性，并赋值为1，存入到第2步建立的对象中。

说明：至于如何对比，就是每次从原数组中取出一个元素，然后到对象中去访问这个属性，如果能访问到值，则说明重复。

答：

20.AJAX请求JSON数据后如何解析

//格式化参数

function formatParams(data) {

var arr = [];

for (var name in data) {

arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));

}

arr.push(("v=" + Math.random()).replace(".",""));

return arr.join("&");

}

答：

《参考：http://caibaojian.com/ajax-jsonp.html 》

至此结束

答案出自：宇哥

加群有惊喜：535880373

http://websong.gitee.io/songyublog/