前端面試題

最近經理讓我整理一份面試題，發現好多我也忘了，在整理的過程也是對這些東西鞏固的過程，整理好了，放上來，以備不時之需

  1 /**css (10道題目)**/
  2 1.行內元素有哪些？塊級元素有哪些？各自的特色是什麼？CSS的盒模型？
  3     塊級元素：div p h1 h2 h3 h4 form ul 等
  4     行內元素: a b br i span input select 等
  5     塊狀佔一行，行內元素按照文檔流挨着排
  6     Css盒模型:content[內容]，border ,margin，padding
  7 
  8 2.簡述display:inline、display:block、display:inline-block屬性的做用
  9     display:inline--------把元素設置成行內
 10     display:block---------把元素設置成塊狀、
 11     display:inline-block -------把元素設置成塊狀顯示的行內元素
 12 
 13 3..CSS引入的方式有哪些? link和@import的區別是?
 14     內聯 內嵌 外鏈 導入   
 15     區別 ：同時加載
 16                前者無兼容性，後者CSS2.1如下瀏覽器不支持
 17            Link 支持使用javascript改變樣式，後者不可
 18 
 19 4.寫出幾種IE6 BUG的解決方法
 20     1.雙邊距BUG float引發的          //使用display
 21     2.3像素問題 使用float引發的      //使用dislpay:inline -3px  
 22     3.超連接hover 點擊後失效      //使用正確的書寫順序 link visited hover active
 23     4.IE z-index問題         //給父級添加position:relative
 24     5.Min-height 最小高度         //!Important 解決’
 25     6.爲何沒有辦法定義1px左右的寬度容器（IE6默認的行高形成的，使用over:hidden,zoom:0.08 line-height:1px）
 26 
 27 5..描述css reset的做用和用途。
 28     Reset重置瀏覽器的css默認屬性   
 29     瀏覽器的默認樣式不一樣，而後重置，讓他們統一    
 30 
 31 6.解釋css sprites，如何使用。
 32     Css 精靈 把一堆小的圖片整合到一張大的圖片上，減輕服務器對圖片的請求數量
 33 
 34 7.什麼是語義化的HTML，語義化的好處？
 35     直觀的認識標籤    
 36         eg：     標題部分用<h1></h1>到<h6></h6>
 37     有利於搜索引擎的抓取
 38 
 39 8.清除浮動的幾種方式，各自的優缺點
 40     1.使用空標籤清除浮動 clear:both（缺點：增長無心義的標籤）
 41     2.使用overflow:auto（寬高當超出默認範圍會溢出內容不會被顯示,使用zoom:1用於兼容IE）
 42     3.是用afert僞元素清除浮動(用於非IE瀏覽器)
 43 
 44 9.使一個層位居於父容器中間有幾種辦法？各是什麼？
 45     1.負margin [css2]
 46         .parent{position:"relative";width:"400px";height:"400px";}
 47         .child｛position:"absolute";width:"200px";height:"200px";left:"50%";top:"50%";margin:"-100px 0 0 -100px";｝
 48     2.tranform [css3]
 49         利用css3的 transform:translate3d(100px,100px,0px )或者 translateX(100px) 和translateY(100px) 組合使用
 50     3.js 精確計算後添加style樣式
 51 
 52 10.兩個相鄰的元素都有margin:10px;屬性，它們之間的距離是多少？
 53     10px    //兩個相鄰的元素margin值同樣時，則重疊，不同時，以margin值較大的爲準
 54 
 55 
 56 
 57 /**原生javascript （30道題目）**/
 58 1.javascript的typeof返回哪些數據類型 或者說 javascript的基礎類型都有什麼？
 59     Object number function boolean underfind
 60 
 61 2.簡述一下BOM和DOM
 62     瀏覽器對象模型 (BOM)
 63     文檔對象模型 (DOM)
 64 
 65 3.var a=1; ++a; 和a++ 的區別
 66     ++a;    //先進行加1運算，再使用
 67     a++;    //先使用，在進行+1操做
 68 
 69 //AJAX相關
 70 4.請儘量詳盡的解釋AJAX的工做原理，AJAX請求的數據類型有哪幾種？
 71     一、建立ajax對象（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)）
 72     二、判斷數據傳輸方式(GET/POST)
 73     3、打開連接 open()
 74     4、發送 send()
 75     五、當ajax對象完成第四步（onreadystatechange）數據接收完成，判斷http響應狀態（status）200-300之間或者304（緩存）執行
 76 
 77 回調函數
 78     
 79     請求的數據類型有：xml, json, script, html, text, jsonp    
 80     
 81 5.HTTP協議的狀態都有哪些（如200，302，404，500等狀態，並進行描述）
 82     200：表示請求成功
 83     302：表示重定向
 84     404：表示訪問錯誤
 85     500：服務器遇到錯誤，沒法完成請求（服務器內部錯誤）
 86 
 87 6.簡述get和post方式的區別
 88     GET 請求可被緩存
 89     GET 請求保留在瀏覽器歷史記錄中
 90     GET 請求可被收藏爲書籤
 91     GET 請求不該在處理敏感數據時使用
 92     GET 請求有長度限制
 93     GET 請求只應當用於取回數據
 94     
 95     POST 請求不會被緩存
 96     POST 請求不會保留在瀏覽器歷史記錄中
 97     POST 不能被收藏爲書籤
 98     POST 請求對數據長度沒有要求
 99 
100 //javascript事件
101 7.IE和標準下有哪些兼容性的寫法
102     Var ev = e || window.event
103     document.documentElement.clientWidth || document.body.clientWidth
104     Var target = e.srcElement||e.target
105 
106 8.簡述一下事件冒泡和事件捕獲？怎麼阻止事件冒泡和事件默認行爲？
107     事件冒泡：事件冒泡是從目標節點先開始出來，而後順着目標節點的父節點，一級一級往上處理，直到道文檔樹根節點。
108     事件捕捉：事件捕捉的處理流程是從文檔樹根節點，一直向下處理，直到目標節點才中止。
109     
110     阻止事件冒泡
111     標準：event.stopPropagation()
112     IE:   window.event.cancelBubble = true;
113     
114     阻止事件默認行爲
115     標準：event.preventDefault();
116     IE:   window.event.returnValue = false;
117 
118 9.DOM事件分爲幾個等級？怎麼給一個對象 obj 添加一個事件？是否須要考慮到兼容性？若是要刪除呢？
119     兩個級別：dom 0級 和 dom 2級 
120     dom 0 級 <input id="myButton" type="button" value="Press Me" onclick="alert('thanks');" >  
121     dom 2 級 document.getElementById("myButton").onclick = function () {
122     alert('thanks');
123 }
124     
125     須要考慮兼容性
126     標準事件綁定 addEventListener(eventName[string],handler[fn],useCapture[boolean 通常爲fase 從冒泡階段對事件監聽，
127 
128 true：在事件捕獲階段添加回調函數])        obj.addEventListener("click", function(){alert(1)}, false);  
129     IE事件綁定    attachEvent(on+eventName[string],handler[fn])
130         obj.attachEvent("onclick", function(){alert(1)}); 
131     
132     標準事件移除  obj.removeEventListener(eventName,handler[fn],useCapture[boolean 通常爲fase 從冒泡階段對事件監聽，
133 
134 true：在事件捕獲階段添加回調函數]);
135     IE事件移除    obj.detachEvent('on'+eventName,handler[fn]);
136 
137 10.documen.write和 innerHTML的區別
138     document.write只能重繪整個頁面
139     innerHTML能夠重繪頁面的一部分
140 
141 11.簡述下列返回結果 null == undefined NaN == null NaN == undefined NaN == NaN  (NaN 與任何值都不想等，包括NaN自己)
142     null == undefined      //true
143     NaN == null        //false
144     NaN == undefined     //false
145     NaN == NaN        //false
146 
147 12.var undefined = "test" console.log(undefined) 輸出結果是什麼？
148     var undefined = "test" 
149     console.log(undefined)   // test  undefined 不是javascript的關鍵字
150 
151 13.typeof undefined 和 typeof null 的結果是什麼
152     typeof undefined    //undefined
153     typeof null         //object  null是javascript中的一個數據類型
154 
155 //做用域相關
156 14.var s = "test"; s.len = 4; var t =s.len 輸出t結果會是什麼？
157     var s = "test";        //聲明一個對象並賦值
158     s.len = 4;        //建立一個臨時字符串並賦值
159     var t = s.len;        //第二行執行後，s的len屬性被銷燬，t訪問對象的一個不存在的屬性結果是undefined
160 
161 15.    var scope = "global";
162     function checkScope(){
163         var scope  = "local";
164         return scope;
165     }    
166     調用 checkScope()函數返回值什麼值？  //local 局部變量覆蓋全局變量
167 
168 16.    var scope = "global";
169     function f(){
170         console.log(scope);    //輸出undefined，而不是global，
171         var scope = "local";    //變量在這裏賦值，但變量自己在函數體內任何地方均是有定義的
172         console.log(scope);    //輸出local
173     }
174     調用 f() 函數會兩次分別輸出什麼？   //變量聲明提早
175     至關於如下代碼
176     var scope = "global";
177     function f(){
178         var scope;        // 聲明但未賦值
179         console.log(scope);    //輸出一個未賦值的變量，結果是undefined
180         scope = "local";    //給scope賦值
181         console.log(scope);    //輸出 local
182     }
183 
184 
185 17.call和apply的區別？
186     Object.call(this,obj1,obj2,obj3)    //參數列表
187     Object.apply(this,arguments)        //數組
188     
189     /**這個能夠不問，僅當解釋**/
190     apply：應用某一對象的一個方法，用另外一個對象替換當前對象。
191     call：調用一個對象的一個方法，以另外一個對象替換當前對象。
192 
193 //隱試類型轉換
194 18.例舉3種強制類型轉換和2種隱式類型轉換？
195     強制（parseInt,parseFloat,number）
196     隱式（== - ===）
197 
198 19.說一下 == 和 === 的區別    
199     前者會自動轉換類型 且 只判斷值是否相等
200     後者不會 且 判斷值和類型是都相等
201 
202 20.var a = "1"+1,b=1+"1",c=1-"1",d=1-"1";  的值分別爲爲（）
203     輸出爲："11"，"11"，0，0
204 
205 //數組的相關函數
206 21.數組方法pop() push() unshift() shift()
207     Push()尾部添加 pop()尾部刪除
208     Unshift()頭部添加  shift()頭部刪除
209 
210 22.slice()和splice() 的區別
211     slice(start[起始],end[結束]):方法可從已有的數組中返回選定的元素
212         （不改變原數組，返回子數組，參數能夠爲負數，表明從數組的末尾算起，-1：表明倒數第一個，-2：表明數組倒數第二
213 
214 個元素）
215     splice(index[數組索引],howmany[刪除個數，0表明不刪除],item1,.....,itemX[添加的元素]):
216     方法向/從數組中添加/刪除項目，而後返回被刪除的項目（會直接對數組進行修改）
217 
218 //字符串相關函數
219 23.說一下substring()和substr()的區別
220     substring():提取字符串中兩個指定的索引號之間的字符。
221     substr():從起始索引號提取字符串中指定數目的字符。
222 
223 24.split() join() 的區別
224     前者是以指定字符切割成數組的形式（默認使用逗號「，」）
225     後者是將數組轉換成字符串以指定字符分割
226     eg：split()
227         var str="How are you"
228 
229         str.split(" ")
230            //輸出["How", "are", "you"]
231         
232     str.split("")        //輸出
233     ["H", "o", "w", " ", "a", "r", "e", " ", "y", "o", "u"]
234         
235     str.split(" ",2)    //輸出["How", "are"]
236     eg：join()
237         var str = ["a","b","c"]
238 
239         str.join(" ");        //輸出
240     "a b c"
241         str.join("，");        //輸出"a,b,c"
242 
243 //Math相關函數
244 25.產生一個1到10的隨機數
245     Math.random()*10
246 
247 26.Math.floor(),Math.ceil()的區別
248     Math.ceil()：對數進行上舍入。
249     eg：
250         Math.floor(-5.9)  ==》-5  
251         Math.floor(0.9)  ==》 1
252     Math.floor()：對數進行下舍入 
253     eg：
254         Math.floor(-5.9)  ==》-6  
255         Math.floor(0.9)  ==》 0
256 
257 //日期類型操做
258 27.輸出當前時間，並格式化爲yyyy-MM-dd hh:hh:mm
259     var now = new Date();
260     var y = now.getFullYear();    //得到年份
261         M = now.getMonth()+1;     //得到月份 0~11
262         d = now.getDate();        //得到當前日期
263         h = now.getHours();        //得到當前小時 24小時制，若要12小時制，則減去 12
264         m = now.getMinutes()    //得到分鐘
265         s =    getSeconds();        //得到秒數
266     console.log(y+"-"+M+"-"+d+" "+h+":"+m+":"+s);
267 
268 //document 對象方法
269 28.有如下文檔結構，請問如何獲取表單的第一個input元素的值
270     <div>
271         <form name = "myForm">
272             <input type="text" id="myName" name="myName" class="myName"  value="CoCo"/>
273         </form>
274     </div>
275     var name;
276     (1). name = document.getElementById('myName');
277     (2). name = document.getElementsByTagName('input')[0];
278     (3). name = document.getElementsByName('myName')[0];
279     (4). name = document.myForm.children[0];
280     (5). name = document.getElementsByTagName('form')[0].children[0];
281     (6). name = $("#myName").val();       //使用jQury
282     (7). name = $(".myName").val();        //使用jQury
283     console.log(name.value);
284 
285 29.有如下文檔結構
286     <ul id="myList">
287         <li>Coffee</li>
288         <li>Tea</li>
289     </ul>
290     （1）、在內容爲Tea的li後面添加一個內容爲Water的li
291     var node=document.createElement("li"),
292         textnode=document.createTextNode("Water"),
293         list = document。getElementById("myList");
294     node.appendChild(textnode);
295 
296     list.appendChild(node);
297 
298     （2）、若是在內容爲Coffee的li前面添加呢？
299     //insertBefore(newItem[要插入的節點],nodeIndex[可選參數，在那個節點以前插入，若爲空則在末尾插入]) 
300 
301     list.insertBefore(node,list.childNodes[0]);
302 
303 30.添加 刪除 替換 插入到某個接點的方法
304     obj.appendChidl()
305     obj.innersetBefore
306     obj.replaceChild
307     obj.removeChild
308 
309 /**js庫相關題目**/
310 //jQuery相關
311 1.javascript的window.onload()方法和jQuery 的 $(document).ready()方法的區別
312     1.執行時間
313         window.onload() :必須等到頁面內包括圖片的全部元素加載完畢後才能執行
314         $(document).ready()是DOM結構繪製完畢後就執行，沒必要等到加載完畢。 
315     2.編寫個數不一樣
316         window.onload不能同時編寫多個，若是有多個window.onload方法，只會執行一個 
317                $(document).ready()能夠同時編寫多個，而且均可以獲得執行
318     3.簡化寫法
319         window.onload沒有簡化寫法 
320             $(document).ready(function(){})能夠簡寫成$(function(){});
321 
322 2.簡述如下代碼的做用
323     $(".stu .name")        //選擇全部類名爲stu元素下面的全部類名爲name的全部元素
324     $(".stu,.name")        //選擇全部類名爲stu元素和 name的全部元素
325     $(".stu > .name")    //選擇全部類名爲stu元素的直系子元素類名爲name的全部元素
326 
327 3.簡述jQuery中 text()、html()、val()方法的做用
328     text() - 設置或返回所選元素的文本內容
329     html() - 設置或返回所選元素的內容（包括 HTML 標記）
330     val() - 設置或返回表單字段的值
331 
332 4.使用jQuery 的 animate()出現動畫列隊時如何保證在執行下一個動畫前結束當前動畫
333     使用stop()方法        //中止當前動畫     
334     應用場景：
335     當在滑動輪播圖時，當點擊不少次是，即便再也不點擊，可是動畫仍列隊仍然執行，因此須要中止當前動畫
336 
337 //zepto相關
338 1.zepto.js中tap() 和 jQuery 中clik()方法的區別
339     click():會有200-300毫秒的延遲
340     tap():  無延遲
341 
342 //HTML5相關
343 1.HTML5 中新增了哪些特性？
344     用於繪畫的 canvas 元素
345     用於媒介回放的 video 和 audio 元素
346     對本地離線存儲的更好的支持
347     新的特殊內容元素，好比 article、footer、header、nav、section
348     新的表單控件，好比 calendar、date、time、email、url、search
349 
350 /**綜合**/
351 1.你有哪些性能優化的方法？
352   （1） 減小http請求次數：CSS Sprites（又稱css精靈或者css雪碧圖）, JS、CSS源碼壓縮、圖片大小控制合適；CDN託管，data緩存 ，
353 
354 圖片服務器。
355   （2） 前端模板 JS+數據，減小因爲HTML標籤致使的帶寬浪費，前端用變量保存AJAX請求結果，每次操做本地變量，不用請求，減小請求
356 
357 次數
358   （3） 用innerHTML代替DOM操做，減小DOM操做次數，優化javascript性能。
359   （4） 當須要設置的樣式不少時設置className而不是直接操做style。
360   （5） 少用全局變量、緩存DOM節點查找的結果。減小IO讀取操做。
361   （6） 避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。
362   （7） 圖片預加載，將樣式表放在頂部，將腳本放在底部  加上時間戳。
363 
364 2.事件兼容寫法
365      /*調試*/
366         addEventHandler(def,'click',preDefault);
367         addEventHandler(def,'click',stopBubble);
368         
369         /*類庫*/
370         /*事件綁定*/
371         function addEventHandler(obj,eventName,handler) {
372             if (document.attachEvent) {
373                 obj.attachEvent('on'+eventName,handler);
374             }else if (document.addEventListener) {
375                 obj.addEventListener(eventName,handler,false);
376             }
377         }
378         /*事件移除*/
379         function removeEventHandler(obj,eventName,handler) {
380             if (document.detachEvent) {
381                 obj.detachEvent('on'+eventName,handler);
382             }else if (document.removeEventListener) {
383                 obj.removeEventListener(eventName,handler,false);
384             }            
385         }
386         /*獲取事件對象*/
387         function eventTarget(evt) {
388             var evt = evt||window.event;
389             var targetElement = evt.target||evt.srcElement;
390             return targetElement;
391         }
392         /*阻止冒泡*/
393         function stopBubble(evt) {
394             var evt = evt||window.event;
395             if (evt.stopPropagation) {
396                 evt.stopPropagation();
397             }
398             else {
399                 window.event.cancelBubble = true;
400             }
401         }
402         /*阻止默認*/
403         function preDefault(evt){
404             var evt=event||window.event;
405             if (evt&&evt.preventDefault) {
406                 evt.preventDefault();
407             }
408             else {
409                 window.event.returnValue = false;
410             }
411         }

固然再整理的過程不免會出披露，但願發現的朋友指出以便更正，也防止誤人子弟！與君共勉！