摘要:常說的瀏覽器執(zhí)行的包含兩部分基礎知識標準標準的內(nèi)容包括事件綁定請求包括協(xié)議存儲標準沒有規(guī)定任何基礎相關的東西。如果未經(jīng)允許即可獲取,那是瀏覽器同源策略出現(xiàn)了漏洞。
常說的JS(瀏覽器執(zhí)行的JS)包含兩部分
JS基礎知識(ECMA 262 標準)
JS-Web-API(W3C 標準)
JS-Web-API的內(nèi)容包括
DOM
BOM
事件綁定
ajax請求(包括http協(xié)議)
存儲
W3C 標準沒有規(guī)定任何JS基礎相關的東西。W3C不管變量類型、原型、作用域和異步,只管定義于瀏覽器中JS操作頁面的API和全局變量。
DOMDOM(Document Object Model) 文檔對象模型
DOM可以理解為:瀏覽器把拿到的html代碼,結構化成瀏覽器能識別并且JS可操作的一個模型
DOM 是哪種基本的數(shù)據(jù)結構?
樹
DOM 操作的常用API有哪些?
獲取節(jié)點,以及節(jié)點的 property 和 attribute
獲取父節(jié)點,獲取子節(jié)點
新增節(jié)點,移動節(jié)點,刪除節(jié)點
DOM 節(jié)點的 attribute 和 property 有何區(qū)別?
attribute 是對html標簽屬性的操作BOM
property 是對js對象屬性的操作
BOM(Browser Object Model) 瀏覽器對象模型
如何檢測瀏覽器的類型?
// navigator var ua = navigator.userAgent; var isChrome = ua.indexOf("Chrome"); console.log(isChrome);
如何拆解url的各部分?
// location console.log(location.href); // 整個地址 console.log(location.protocol); // 協(xié)議 "http:" "https:" console.log(location.host); // 域名 "172.24.1.99" console.log(location.pathname); // path "/home/subject" console.log(location.search); // "?uid=99" console.log(location.hash); // "#mid=100"
如何獲取當前設備的屏幕分辨率?
// screen console.log(screen.width); console.log(screen.height);
瀏覽器的后退和前進功能?
// history history.back(); // 后退 history.forward(); // 前進事件綁定
事件冒泡的過程?
事件冒泡是指,觸發(fā)內(nèi)層的事件之后,事件會按照DOM的樹形結構像水泡一樣不斷的向上觸發(fā)直至頂端。
示例:
激活
取消
取消
取消
取消
取消
function bindEvent(elem, type, fn) { elem.addEventListener(type, fn); } // 冒泡的應用 var p1 = document.getElementById("p1"); var body = document.body; bindEvent(p1, "click", function (e) { e.stopPropagation(); alert("激活"); }); bindEvent(body, "click", function (e) { alert("取消"); });
對于一個無限下拉加載圖片的頁面,如何給每個圖片綁定事件?
// 使用代理 var div3 = document.getElementById("div3"); div3.addEventListener("click", function (e) { var target = e.target; if (target.nodeName === "A") { alert(target.innerHTML); } });
一個通用的事件監(jiān)聽函數(shù)(通用事件綁定)
function bindEvent(elem, type, selector, fn) { if (fn == null) { fn = selector; selector = null; } elem.addEventListener(type, function (e) { var target; if (selector) { target = e.target; if (target.matches(selector)) { fn.call(target, e); } } else { fn(e); } }); }
// 使用代理 var div1 = document.getElementById("div1"); bindEvent(div1, "click", "a", function (e){ console.log(this.innerHTML); }); // 不使用代理 var a1 = document.getElementById("a1"); bindEvent(a1, "click", function (e){ console.log(a1.innerHTML); });ajax
手動編寫一個ajax,不依賴第三方庫
var xhr = new XMLHttpRequest(); xhr.open("GET", "http://api.douban.com/v2/movie/top250", false); // false => 異步 xhr.onreadystatechange = function () { // 這里的函數(shù)異步執(zhí)行 if (xhr.readyState === 4) { if (xhr.status === 200) { console.log(xhr.responseText); } } }; xhr.send(null);
狀態(tài)碼說明
readyState
0 - (未初始化) 還沒有調(diào)用send()方法
1 - (載入) 已調(diào)用send()方法,正在發(fā)送請求
2 - (載入完成) send()方法執(zhí)行完成,已經(jīng)接收到全部響應內(nèi)容
3 - (交互) 正在解析響應內(nèi)容
4 - (完成) 響應內(nèi)容解析完成,可以在客戶端調(diào)用了
status http狀態(tài)碼跨域
2xx - 表示成功處理請求。如200
3xx - 需要重定向,瀏覽器直接跳轉(zhuǎn)
4xx - 客戶端請求錯誤,如404
5xx - 服務端錯誤
什么是跨域?
瀏覽器有同源策略,不允許ajax訪問其他域的接口
跨域條件:協(xié)議、域名、端口,有一個不同就算跨域
跨域的幾種實現(xiàn)方式?
前端:JSONP,vue proxyTable設置代理
服務器端:設置 http header
JSONP簡單示例
可以跨域的標簽?
用于打點統(tǒng)計,統(tǒng)計網(wǎng)站可能是其他域