前端面試題（二）

時間 2019-11-20

標籤端面試題简体版

原文原文鏈接

1、H5存儲類型有什麼區別javascript

localStorage 沒有時間限制的數據存儲，數據永遠不會過時，關閉瀏覽器也不會丟失html

sessionStorage 針對session的一個數據存儲，針對同一個會話頁面中才能訪問，而且結束後，會話才能銷燬。限於窗口java

cookie 單個cookie大小不能超過4KB，有有效期。任何cookie形式存儲的數據，不論服務器端是否須要，每一次http請求都會吧這些數據傳輸到服務器端。不限於窗口jquery

2、H5中的canvas有什麼做用？web

用於在網頁上繪製徒刑，能夠直接在H5上進行圖像操做。ajax

3、H5廢棄了哪些H4標籤數據庫

applet、basefont、center、dir、font、isindex、s（定義加刪除線的文本）、strike（定義加刪除線的文本）、u（定義下劃線文本）、xmp（定義預格式文本）canvas

4、H5提供了哪些新的API瀏覽器

canvas緩存

本地存儲：localStorage、sessionStorage

媒體控制：如音樂播放器中添加滾動條

離線網頁程序：能夠將資源文件徹底存儲於客戶端，而且用JS的一些方法清除緩存

文檔的編輯：更好的支持文檔編輯

拖動：支持拖動某個文件到某個區域上傳

跨文檔請求：websocket,一種更加高效的通信方式

歷史管理：能夠經過JS管理和插入歷史記錄

MIME頭自定義

地理位置共享

本地數據庫

索引數據庫

5、H5應用程序緩存和瀏覽器緩存有什麼區別

H5引入了應用程序緩存，意味着web應用可進行緩存，可在沒有因特網時進行訪問

應用程序的緩存優點：

離線緩存：用戶可在離線時使用他們

速度：加載速度更快

減小服務器負載：瀏覽器只從服務器下載更新的或者更改過的資源

實現藉助於 manifest 文件

<html manifest="demo.appcache">

6、doctype 做用？嚴格模式與混合模式如何區分？它們有何意義？

做用：告知瀏覽器用哪一種html或者XHTML規範。

在標準模式中，瀏覽器根據規範呈現頁面，混合模式，頁面以一種比較寬鬆的方式向後兼容的方式顯示

<!-- HTML4.01文檔嚴格定義類型，此類型定義的文檔可使用HTML中的標籤與元素，不能包含不被W3C推薦的標籤，不可使用框架 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- HTML4.01文檔過渡定義類型，此類型定義的文檔可使用HTML中的標籤與元素包括一些不被W3C推薦的標籤，不可使用框架 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- HTML4.01文檔框架定義類型，此類型等同於HTML4.01文檔過渡定義類型，但可使用框架 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">


<!-- XHTML1.0文檔過渡定義類型，此類型定義的文檔可使用HTML中的標籤與元素包括一些不被W3C推薦的標籤，不可使用框架 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- XHTML1.0文檔嚴格定義類型，此類型定義的文檔只可使用HTML中定義的標籤與元素，不能包含不被W3C推薦的標籤，不可使用框架 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- XHTML1.0文檔框架定義類型，等同於XHTML1.0文檔過渡定義類型，但可使用框架 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


<!-- XHTML1.1文檔嚴格定義類型，等同於XHTML1.0文檔過渡定義類型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

7、用js寫個原生的ajax過程

var Ajax={
    get: function(url, fn) {
        var obj = new XMLHttpRequest();  // XMLHttpRequest對象用於在後臺與服務器交換數據          
        obj.open('GET', url, true);
        obj.onreadystatechange = function() {
            if (obj.readyState == 4 && obj.status == 200 || obj.status == 304) { // readyState == 4說明請求已完成
                fn.call(this, obj.responseText);  //從服務器得到數據
            }
        };
        obj.send();
    },
    post: function (url, data, fn) {         // datat應爲'a=a1&b=b1'這種字符串格式，在jq裏若是data爲對象會自動將對象轉成這種字符串格式
        var obj = new XMLHttpRequest();
        obj.open("POST", url, true);
        obj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  // 添加http頭，發送信息至服務器時內容編碼類型
        obj.onreadystatechange = function() {
            if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) {  // 304未修改
                fn.call(this, obj.responseText);
            }
        };
        obj.send(data);
    }
}

jQuery的ajax請求

$.ajax({
    url: ,
    type: '',
    dataType: '',
    data: {
          
    },
    success: function(){
         
    },
    error: function(){
          
    }
 })

8、請實現，鼠標點擊頁面中的任意標籤，alert 該標籤的名稱（注意兼容性）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>alert標籤名</title>
</head>
<body>
    <div>div</div>
    <a href="javascript:;">a</a>
    <b>b</b>
    <script>
    function elementName(evt){  
          evt = evt|| window.event;   // IE: window.event  
          // IE用srcElement獲取事件源，而FF用target獲取事件源  
          var selected = evt.target || evt.srcElement;  
          alert(selected.tagName);  
      }  
      window.onload = function(){  
          var el =document.getElementsByTagName('body');  
          el[0].onclick = elementName;
      }
    </script>
</body>
</html>

9、請寫出jquery綁定事件的方法

on ,bind ,live ,delegete

.live()是經過冒泡的方式的方式綁定在元素上，支持動態數據，但因爲性能的緣由已經廢棄

.delegate() 更精確的小範圍的使用事件代理，因爲.live

$('.myClass').on({
    click:function(eleDom){ 
        ...do someting
    }, 
    dbclick:function(eleDom){ 
        ...do someting    
    } 
})

$("button").bind("click",function(){
  $("p").slideToggle();
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。