参加面试碰到的一些面试题

1.css选择符及优先级算法

选择符有：行内样式、ID选择符、类、属性选择符、伪类、类型、伪类型选择符

而他们的优先级如何来测量？他们每一类都有一个数值来表示

行内样式为：1000
ID选择符为：100
类选择符为：10
类型选择符为：1

例子：

* { } 0 
a:hover{ }      2 
ul ol+li { }           3 
ul ol li.red { }     13 
<div style=”width:100px;”>      1000
div p { }               2  
div p.content { }       12
div #div1 .left p { }    112 

2.display属性值有哪些？属性值之间的差别？

display:block

1. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。 
2. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。 
3. block元素可以设置margin和padding属性。 

display:inline

1.  inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。 
2. inline元素设置width,height属性无效。 
3. inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。 

display:inline-block 

1. 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

一般我们会用display:block，display:inline或者display:inline-block来调整元素的布局级别，其实display的参数远远不止这三种，仅仅是比较常用而已

3.position的属性值有哪些？各个属性值的定位原点有何不同？

• absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位
• fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。
  
• relative：生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
• static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
• inherit：规定应该从父元素继承 position 属性的值。

4.纯css做一个10px底边的三角形

#san {

     width: 0; 

     height: 0; 

     border-left: 5px solid transparent; 

     border-right: 5px solid transparent;

     border-bottom: 10px solid red; 

}

5.js typeof返回的类型有哪些

用举例来说明

<script type="text/javascript">

alert(typeof true);    //返回布尔值

alert(typeof 99);     //返回nunber

alert(typeof "abc");    //返回string

alert(typeof function () {});    //返回function

alert(typeof null);    //返回object

alert(typeof undefind);    //返回undefined

alert(typeof Nan);    //返回number

</script>

6.DOM操作

1、创建节点

createElement()

var node = document.createElement(“div”);

没什么可说的，创建一个元素节点，但注意，这个节点不会被自动添加到文档（document）里。

2、创建文本节点

createTextNode()

var value = document.createTextNode(“text”);

创建一个文本节点，常用来往元素节点里添加内容，也不会自动添加到文档里。

很多人知道innerHTML，不知道这个方法，这个添加的是静态文本，如果插入的内容不带HTML格式，用createTextNode比innerHTML安全，而innerText又有浏览器不兼容的问题，因此用createTextNode很好使。

3、插入节点到最后

appendChild()

node.appendChild(value);

将节点插入到最后，上面两个创建的节点不会自动添加到文档里，所以就要使appendChild来插入了。

如果是新的节点是插入到最后，而如果是已经存在的节点则是移动到最后，这点很多人注意不到，理解了这点，再和下面的方法结合，可以方便的移动操作节点。

4、插入节点到目标节点的前面

insertBefore()

var node = document.createElement(“div”);

var _p = document.createElement(“p”);

var _span = document.createElement(“span”);

node.appendChild(_p);

node.insertBefore(_span, _p);

<span>节点在<p>节点前面插入，其中第二个参数是可选，如果第二个参数不写，将默认添加到文档的最后，相当于appendChild。

同样，appendChild和insertBefore，如果是已存在节点，他们都会自动先删除原节点，然后移动到你指定的地方。

将节点移动到最前面的技巧：

if (node.parentNode.firstChild)

node.parentNode.insertBefore(node, node.parentNode.firstChild);

else node.parentNode.appendChild(node);

5、复制节点

cloneNode(boolean)

node.cloneNode(true);

node.cloneNode(false);

复制上面的div节点，参数true，复制整个节点和里面的内容；false，只复制节点不要里面的内容，复制后的新节点，也不会被自动插入到文档，需要用到3和4的方法去插入。

6、删除节点

removeChild()

node.removeChild(_p);

把上面的<p>节点从<div>里删除。不过一般情况下，不知道要删除的节点的父节点是什么，因此一般这么使：node.parentNode.removeChild(node);

7、替换节点

repalceChild(newNode, oldNode)

node.repalceChild(_p, _span);

把上面的<span>节点替换成<p>节点，注意无论是<span>还是<p>，都必须是<div>的子节点，或是一个新的节点。

8、设置节点属性

setAttribute()

node.setAttribute("title","abc");

不解释了，很容易明白。就说一句，用这个方法设置节点属性兼容好，但class属性不能这么设置。

9、获取节点属性

getAttribute()

node.getAttribute("title");

同8，获取节点属性。

10、判断元素是否有子节点

hasChildNodes

node.hasChildNodes;

返回boolean类型，因此将新节点插入到最前面的技巧：

var node = document.createElement(“div”);

var newNode = document.createElement(“p”);

if (node.hasChildNodes) node.insertBefore(newNode, node.firstChild);

else node.appendChild(node);

最后是DOM的属性：

nodeName - 节点的名字；

nodeType - 返回一个整数，代表这个节点的类型，1-元素节点，2-属性节点，3-文本节点；

nodeValue - 返回一个字符串，这个节点的值；

childNodes - 返回一个数组，数组由元素节点的子节点构成；

firstChild - 返回第一个子节点；

lastChild - 返回最后一个子节点；

nextSibling - 返回目标节点的下一个兄弟节点，如果目标节点后面没有同属于一个父节点的节点，返回null；

previousSibling - 返回目标节点的前一个兄弟节点，如果目标节点前面没有同属于一个父节点的节点，返回null；

parentNode - 返回的节点永远是一个元素节点，因为只有元素节点才有可能有子节点，document节点将返回null；

7、用JS编写一个函数，实现千位分隔符

// 方法一

function toThousands(num) {

    var result = [ ], counter = 0;

    num = (num || 0).toString().split('');

    for (var i = num.length - 1; i >= 0; i--) {

        counter++;

        result.unshift(num[i]);

        if (!(counter % 3) && i != 0) { result.unshift(','); }

    }

    return result.join('');

}

方法一的执行过程就是把数字转换成字符串后，打散为数组，再从末尾开始，逐个把数组中的元素插入到新数组（result）的开头。每插入一个元素，counter就计一次数（加1），当counter为3的倍数时，就插入一个逗号，但是要注意开头（i为0时）不需要逗号。最后通过调用新数组的join方法得出结果。

// 方法二

function toThousands(num) {

    var result = '', counter = 0;

    num = (num || 0).toString();

    for (var i = num.length - 1; i >= 0; i--) {

        counter++;

        result = num.charAt(i) + result;

        if (!(counter % 3) && i != 0) { result = ',' + result; }

    }

    return result;

}

方法二是方法一的改良版，不把字符串打散为数组，始终对字符串操作。

转载于http://www.jb51.net/article/61585.htm

8.css两栏布局，左边100px,右边自适应。

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>左栏固定宽度，右栏自适应之负margin法</title>
<style type="text/css">
body{
margin: 0;
}
#container{
margin-left: 230px;
_zoom: 1;
/*兼容IE6下左栏消失问题*/
}
#nav{
float: left;
width: 230px;
height: 600px;
background: #ccc;
margin-left: -230px;
position: relative;
/*兼容IE6下左栏消失问题，IE6真不让人省心啊>_<*/
}
#main{
height: 600px;
background: #0099ff;
}
</style>
</head>
<body>
<div id="container">
<div id="nav">
左栏
</div>
<div id="main">
右栏
</div>
</div>
</body>
</html>

转载于http://www.clanfei.com/2013/08/1721.html

9.说说你对localStorage和sessionStorage的理解，相对于cookie有什么区别？

• localStorage- 没有时间限制的数据存储，第二天、第二周或下一年之后，数据依然可用。
• sessionStorage - 针对一个 session 的数据存储。当用户关闭浏览器窗口后，数据会被删除。

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

10.什么是优雅降级和渐进增强？

优雅降级：先考虑所有情况，再细节化。

渐进增强：先实现基本功能，再适配其他情况。