注意：解法錯誤頗多，請一定要看評論，評論中指出了很多錯誤?。。?/p>
前端面試題
個人解題答案，錯誤肯定不少，求review。
第一套：
題目1：CSS實現(xiàn)垂直水平居中，HTMl結(jié)構(gòu)如下：
<div class="box">
<div class="con"></div>
<div>
解：
.con{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
題目2：寫出原生js或者JQ循環(huán)下面的<li>內(nèi)容
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
解：
var li=document.getElementsByTagName('li');
for (var i = 0; i < li.length; i++) {
console.log(li[i].innerHTML);
}
var li=$("li");
for (var i = 0; i < li.length; i++) {
console.log(li.eq(i).html());
}
題目3：ajax請求的時候get和post方式的區(qū)別，用jQ寫出ajax請求。
解：
get-請求服務(wù)器資源，不會在http上顯示
post-向指定的資源提交要處理的數(shù)據(jù)，在http上面進行字符串拼接
$.ajax({
url:url,
data:data,
success:success,
dataType:dataType
});
POST:
$.ajax({
type:'POST',
url:url,
data:data,
success:success,
dataType:dataType
});
Get：
$.ajax({
url:url,
data:data,
success:success,
dataType:dataType
});
題目4：js中函數(shù)split(),join()區(qū)別
解：
split()把一個字符串分割成數(shù)組
join（）把數(shù)組中的元素放入一個字符串
兩者可以理解為相反的過程
題目5：熟悉微信小程序嗎？什么是微信小程序？
不熟悉....
微信小程序是微信推出的新能夠，不需要按照，掃描二維碼即可使用。
大題：
如圖所示有一個對象為樹形結(jié)構(gòu)，每個節(jié)點結(jié)構(gòu)為：
node：{id='xxx',name='xxx',children:[node,node,node,...]},每個id唯一，當沒有子節(jié)點時，children為false
現(xiàn)有一需求，給出id輸出node信息，請完成方法getNodeById。
var data={id='xxx',name='xxx',children:[node,node,node,...]};
var id='aaa';
var node=getNodeById(data,id);
console.log(node);
答題要求，先寫出解題思路，在進行編碼。
解：
第二套：
1.HTTP狀態(tài)碼及其含義
2Xx:請求成功
3xx:重定向
4xx:客戶端錯誤
5xx:服務(wù)器錯誤
2.設(shè)置元素浮動后，該元素的display值是多少？
display:blcok
3.請描述cookies、sessionStorage和localStorage的區(qū)別
| 特性 | Cookie | sessionStorage | localStorage |
|---|---|---|---|
| 數(shù)據(jù)的生命周期 | 一般由服務(wù)器生成，可以設(shè)置失效時間，如果在瀏覽器端生成Cookie，默認關(guān)閉瀏覽器后失效 | 僅在當前會話下有效，關(guān)閉頁面或瀏覽器后被清除 | 除非被清除，否則永久保存 |
| 存放數(shù)據(jù)大小 | 4k左右 | 一般為5m | 一般為5m |
| 與服務(wù)器端通信 | 每次都會攜帶在HTTP頭中，如果保存過多數(shù)據(jù)，會帶來性能問題 | 僅在客戶端（即瀏覽器）中保存，不參與和服務(wù)器的通信 | 僅在客戶端（即瀏覽器）中保存，不參與和服務(wù)器的通信 |
| 易用性 | 需要程序員自己封裝，源生的Cookie接口不友好 | 源生接口可以接受，亦可再次封裝來對Object和Array有更好的支持 | 源生接口可以接受，亦可再次封裝來對Object和Array有更好的支持 |
4.請解釋你對盒模型的理解，以及如何在css中告訴瀏覽器使用不同的盒模型。
標準盒子模型：
總寬度 = width + border(左右) + padding(左右) + border(左右)
怪異盒子模型：
總寬度 = width + margin(左右)
box-sizing:border-box;
box-sizing:content-box;
5.下面語句返回值是什么？
var a=6;
setTimeout(function(){
console.log(a);
a=666;
},1000)
a=66;
解：
66
理解：setTimeout()在xx毫秒之后調(diào)用一次，setInterval()在xx毫秒之后調(diào)用多次
var a = 6;
function b() {
console.log(a);
a = 666;
}
b();
var a = 66;
//結(jié)果：6
var a = 6;
function b() {
a = 666;
console.log(a);
}
b();
var a = 66;
//結(jié)果：666
這題考察的是函數(shù)作用域的問題，原題目執(zhí)行順序是：
var a=6;
a=66;
setTimeout(function(){
console.log(a);
a=666;
},1000)
在變量a在全局作用域中已經(jīng)變成了66，在函數(shù)中，因為a在前面調(diào)用，所以就會向全局作用域?qū)ふ襛，找到66.如果是這樣：
var a=6;
a=66;
setTimeout(function(){
a=666;
console.log(a);
},1000)
那么打印出來的就是666，因為在函數(shù)中已經(jīng)聲明了a=666;
第三套
題目1.css選擇符有哪些？按照優(yōu)先級進行排序。
id>class>tagname
題目2.前端頁面有js行為層和另外2個層是什么？作用是什么。
HTML 結(jié)構(gòu)層 前端頁面結(jié)構(gòu)
CSS 表現(xiàn)層 前端頁面樣式
題目3.你做的頁面在哪些內(nèi)核瀏覽器測試過？
Trident - ie內(nèi)核
Gecko - firefox內(nèi)核
Webkit - chrome safari
Presto - opera（前任），現(xiàn)在opera也使用webkit
題目4.在Jquery中被譽為工廠函數(shù)的是()
a)ready()
b)function()
c)$()
d)factory()
解：
選擇：c
題目5.setTimeout("buy()",2000)表示的是：
解：
間隔2秒后，buy()函數(shù)被調(diào)用一次，且僅被調(diào)用一次
第四套
- 要動態(tài)改變層中內(nèi)容可以使用的方法：innerHTML
- 當按鍵盤A時，使用
oneKeyDown事件打印event.keyCode的結(jié)果是：13(這題好沒意思) - 在javascript里，不屬于數(shù)組方法的是：
length()
注：數(shù)組length是屬性，調(diào)用方式arr.length,沒有括號 - 檢索被選定的選項的索引號：
selectedIndex - 希望圖片具有“提交”按鈕同樣的功能，如何編寫表單提交：
在圖片的onSubmit事件中手動提交（不確定） - ping基于什么協(xié)議：ICMP
注：ping在主機和服務(wù)器之間傳遞控制消息，屬于ICMP協(xié)議，但是ICMP協(xié)議是TCP/IP的子協(xié)議。。。 C
var emp = newArray(3);
for(var i in emp)
==
for(var i=0;i<emp.length;i++)
- 制作級聯(lián)菜單功能時調(diào)用的下拉列表框是什么事件：
onChange - 數(shù)組聲明方式：
var arry=new Array;
var arry=new Array();
- 實現(xiàn)層的隱藏：
display:none
太多了...略
第五套
1.寫出以下值
alert(1&&2);
alert(1||2);
解：
alert(1&&2);//2
alert(1||2);//1
1、只要“||”前面為false，無論“||”后面是true還是false，結(jié)果都返回“||”后面的值。
2、只要“||”前面為true，無論“||”后面是true還是false，結(jié)果都返回“||”前面的值。
3、只要“&&”前面是false，無論“&&”后面是true還是false，結(jié)果都將返“&&”前面的值;
4、只要“&&”前面是true，無論“&&”后面是true還是false，結(jié)果都將返“&&”后面的值;
2.驗證字符串的組成規(guī)則，第一個需為數(shù)字，后面可以是字母，數(shù)字，下劃線，總長度為5-20；
解：
var c=/^[\d]{1}[/w]{4,19}/
c.test(string)
3.以下代碼，alert值是多少？
window.val = 1;
var json = {
val: 10,
dbl: function() {
this.val *= 2;
}
};
json.dbl();
var dbl = json.dbl;
dbl();
json.dbl.call(window);
alert(window.val + json.val);
解：
值為：24
window.val = 1;
var json = {
val: 10,
dbl: function() {
this.val *= 2;
}
};
json.dbl();//通過json調(diào)用dbl方法，把json里面的val改為20
var dbl = json.dbl;//把dbl函數(shù)賦值給dbl
dbl();//全局作用域，調(diào)用dbl()函數(shù)，把window的val改為2
json.dbl.call(window);//同上，window的val改為4
alert(window.val + json.val);//4+20=24
4.以下代碼，alert值是多少？
(function() {
var val = 1;
var json = {
val: 10,
dbl: function() {
val *= 2;
}
};
json.dbl();
alert(json.val + val);
}());
解：
12
(function() {
var val = 1;
var json = {
val: 10,
dbl: function() {
val *= 2;
}
};
json.dbl();//這里調(diào)用的是val=1，如果這里是this.val則指向json內(nèi)部
alert(json.val + val);//10+2=12;
}());
6.以下代碼，alert值是多少？
var foo = 'Hello';
(function() {
var bar = 'World';
alert(foo + bar);
})();
alert(foo + bar);
解：
var foo = 'Hello';
(function() {
var bar = 'World';
alert(foo + bar);//HelloWorld
})();
alert(foo + bar);//報錯，因為bar未定義
7.foo.x的值是什么？
var foo={n:1};
var bar=foo;
foo.x=foo={n:2};
解：
undefined
解答
8.寫出以下代碼的輸出內(nèi)容
console.log('one');
setTimeout(function() {
console.log('two');
}, 0);
console.log('three');
解：
?:one,two,three
這題考察了setTimeout(Fn,time)的異步機制
參考資料：詳解setTimeout(fn,0)
9.你對ES6的了解有哪些？
略...
