溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
自己是個做了幾年開發的老碼農，希望本文對你有用！ 這里推薦一下我的前端學習交流圈：767273102 ，里面都是學習前端的，從最基礎的HTML+CSS+JS【炫酷特效，游戲，插件封裝，設計模式】到移動端HTML5的項目實戰的學習資料都有整理，送給每一位前端小伙伴。2019最新技術，與企業需求同步。好友都在里面學習交流，每天都會有大牛定時講解前端技術!
點擊： 加入
API的概念
API（Application Programming Interface,應用程序編程接口）是一些預先定義的函數，目的是提供應用程序與開發人員基于某軟件或硬件得以訪問一組例程的能力，而又無需訪問源碼，或理解內部工作機制的細節。
瀏覽器提供的一套操作瀏覽器功能和頁面元素的API(BOM和DOM)
此處的Web API特指瀏覽器提供的API(一組方法)，Web API在后面的課程中有其它含義
MDN-Web API
JavaScript的組成
定義了javascript的語法規范
JavaScript的核心，描述了語言的基本語法和數據類型，ECMAScript是一套標準，定義了一種語言的標準與具體實現無關
一套操作瀏覽器功能的API
通過BOM可以操作瀏覽器窗口，比如：彈出框、控制瀏覽器跳轉、獲取分辨率等
一套操作頁面元素的API
DOM可以把HTML看做是文檔樹，通過DOM提供的API可以對樹上的節點進行操作
BOM的概念
BOM(Browser Object Model) 是指瀏覽器對象模型，瀏覽器對象模型提供了獨立于內容的、可以與瀏覽器窗口進行互動的對象結構。BOM由多個對象組成，其中代表瀏覽器窗口的Window對象是BOM的頂層對象，其他對象都是該對象的子對象。
我們在瀏覽器中的一些操作都可以使用BOM的方式進行編程處理，
比如：刷新瀏覽器、后退、前進、在瀏覽器中輸入URL等
window是瀏覽器的頂級對象，當調用window下的屬性和方法時，可以省略window
注意：window下一個特殊的屬性 window.name
onload
window.onload = function () {
// 當頁面加載完成執行
// 當頁面完全加載所有內容（包括圖像、腳本文件、CSS 文件等）執行
}
onunload
window.onunload = function () {
// 當用戶退出頁面時執行
}
setTimeout()和clearTimeout()
在指定的毫秒數到達之后執行指定的函數，只執行一次
// 創建一個定時器，1000毫秒后執行，返回定時器的標示
var timerId = setTimeout(function () {
console.log('Hello World');
}, 1000);
// 取消定時器的執行
clearTimeout(timerId);
定時調用的函數，可以按照給定的時間(單位毫秒)周期調用函數
// 創建一個定時器，每隔1秒調用一次
var timerId = setInterval(function () {
var date = new Date();
console.log(date.toLocaleTimeString());
}, 1000);
// 取消定時器的執行
clearInterval(timerId);
location對象是window對象下的一個屬性，時候的時候可以省略window對象
location可以獲取或者設置瀏覽器地址欄的URL
統一資源定位符 (Uniform Resource Locator, URL)
URL的組成
scheme://host:port/path?query#fragment
scheme:通信協議
常用的http,ftp,maito等
host:主機
服務器(計算機)域名系統 (DNS) 主機名或 IP 地址。
port:端口號
整數，可選，省略時使用方案的默認端口，如http的默認端口為80。
path:路徑
由零或多個'/'符號隔開的字符串，一般用來表示主機上的一個目錄或文件地址。
query:查詢
可選，用于給動態網頁傳遞參數，可有多個參數，用'&'符號隔開，每個參數的名和值用'='符號隔開。例如：name=zs
fragment:信息片斷
字符串，錨點.
location有哪些成員？
使用chrome的控制臺查看
查MDN
MDN
成員
history對象
navigator對象
通過userAgent可以判斷用戶瀏覽器的類型
通過platform可以判斷瀏覽器所在的系統平臺類型.
文檔對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴展標志語言的標準編程接口。在網頁上，組織頁面（或文檔）的對象被組織在一個樹形結構中，用來表示文檔中對象的標準模型就稱為DOM。Document Object Model的歷史可以追溯至1990年代后期微軟與Netscape的“瀏覽器大戰”，雙方為了在JavaScript與JScript一決生死，于是大規模的賦予瀏覽器強大的功能。微軟在網頁技術上加入了不少專屬事物，既有VBScript、ActiveX、以及微軟自家的DHTML格式等，使不少網頁使用非微軟平臺及瀏覽器無法正常顯示。DOM即是當時蘊釀出來的杰作。
DOM又稱為文檔樹模型
var div = document.getElementById('main');
console.log(div);
// 獲取到的數據類型 HTMLDivElement，對象都是有類型的
// HTMLDivElement <-- HTMLElement <-- Element <-- Node <-- EventTarget
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
console.log(div);
}
var inputs = document.getElementsByName('hobby');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
console.log(input);
}
var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {
var main = mains[i];
console.log(main);
}
var text = document.querySelector('#text');
console.log(text);
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
var box = boxes[i];
console.log(box);
}
總結
掌握
getElementById() getElementsByTagName()
了解
getElementsByName() getElementsByClassName() querySelector() querySelectorAll()
事件：觸發-響應機制
Event接口表示在DOM中發生的任何事件，一些是用戶生成的（例如鼠標或鍵盤事件），而其他由API生成。
var box = document.getElementById('box');
box.onclick = function() {
console.log('代碼會在box被點擊后執行');
};
href、title、id、src、className
var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);
var pic = document.getElementById('pic');
console.log(pic.src);
innerHTML和innerText
var box = document.getElementById('box');
box.innerHTML = '我是文本<p>我會生成為標簽</p>';
console.log(box.innerHTML);
box.innerText = '我是文本<p>我不會生成為標簽</p>';
console.log(box.innerText);
HTML轉義符
" "
‘ '
& &
< < //less than 小于
> // greater than 大于空格
? ?
var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';
var box = document.getElementById('box');
box.className = 'clearfix';
document.write()
document.write('新設置的內容<p>標簽也可以生成</p>');
innerHTML
var box = document.getElementById('box');
box.innerHTML = '新內容<p>新標簽</p>';
document.createElement()
var div = document.createElement('div');
document.body.appendChild(div);
var body = document.body;
var div = document.createElement('div');
body.appendChild(div);
var firstEle = body.children[0];
body.insertBefore(div,firstEle);
body.removeChild(firstEle);
var text = document.createElement('p');
body.replaceChild(text, div);
重點講父子屬性，兄弟屬性畫圖講解
var box = document.getElementById('box');
console.log(box.parentNode);
console.log(box.childNodes);
console.log(box.children);
console.log(box.nextSibling);
console.log(box.previousSibling);
console.log(box.firstChild);
console.log(box.lastChild);
注意
childNodes和children的區別，childNodes獲取的是子節點，children獲取的是子元素
nextSibling和previousSibling獲取的是節點，獲取元素對應的屬性是nextElementSibling和previousElementSibling獲取的是元素
nextElementSibling和previousElementSibling有兼容性問題，IE9以后才支持
總結
節點操作，方法
appendChild() insertBefore() removeChild() replaceChild()
節點層次，屬性
parentNode childNodes children nextSibling/previousSibling firstChild/lastChild
var box = document.getElementById('box');
box.onclick = function () {
console.log('點擊后執行');
};
box.onclick = null;
box.addEventListener('click', eventCode, false);
box.removeEventListener('click', eventCode, false);
box.attachEvent('onclick', eventCode);
box.detachEvent('onclick', eventCode);
function eventCode() {
console.log('點擊后執行');
}
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
