面试答案知多少
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倍。
|
答:
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
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.如何阻止事件冒泡和默認事件?
答:功能:停止事件冒泡:
|
?????
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
功能:阻止事件默認行為:
?
|
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
17.添加 刪除 替換 插入到某個DOM的方法
|
A.增:
?
?
?
?
?
?
|
B.刪:
?
?
?
|
C.替換:
?
?
?
?
?
?
|
D.插入:
?
?
?
?
18.跨域的方法:
答:1.jsonp:
2.通過修改document.domain來跨子域;
3.使用window.name來進行跨域;
4.使用HTML5中新引進的window.postMessage方法來跨域傳送數據;
<參考:http://www.cnblogs.com/2050/p/3191744.html >
?
19.編寫一個數組去重的方法
|
答:
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
20.AJAX請求JSON數據后如何解析
|
答:
?
?
?
?
?
?
?
?
?
?
?
?
?
《參考:http://caibaojian.com/ajax-jsonp.html 》
?
至此結束
?????????????????????????????????????????????
???????????????????????????????????????????? 答案出自:宇哥
???????????????????????????????????????????? 加群有驚喜:535880373
?
?
?
?
?
?
?
?
?
?
轉載于:https://www.cnblogs.com/webSong/p/6076011.html
總結