Web API（一）
1.1. Web API介紹
1.1.1 API的概念
API（Application Programming Interface募舟，應(yīng)用程序編程接口）是一些預(yù)先定義的函數(shù)，目的是提供應(yīng)用程序與開(kāi)發(fā)人員基于某軟件或硬件得以訪問(wèn)一組例程的能力唬渗，而又無(wú)需訪問(wèn)源碼，無(wú)需理解其內(nèi)部工作機(jī)制細(xì)節(jié)肩榕，只需直接調(diào)用使用即可吹泡。
舉例解釋什么是API。
例如吃沪，
? C語(yǔ)言中有一個(gè)函數(shù) fopen()可以打開(kāi)硬盤(pán)上的文件，這個(gè)函數(shù)對(duì)于我們來(lái)說(shuō)什猖，就是一個(gè)C語(yǔ)言提供的打開(kāi)文件的工具票彪。
? javascript中有一個(gè)函數(shù)alert()可以在頁(yè)面彈一個(gè)提示框，這個(gè)函數(shù)就是js提供的一個(gè)彈框工具不狮。
這些工具（函數(shù)）由編程語(yǔ)言提供降铸，內(nèi)部的實(shí)現(xiàn)已經(jīng)封裝好了，我們只要學(xué)會(huì)靈活的使用這些工具即可摇零。
1.1.2 Web API的概念
? Web API 是瀏覽器提供的一套操作瀏覽器功能和頁(yè)面元素的 API ( BOM 和 DOM )垮耳。
? 現(xiàn)階段我們主要針對(duì)于瀏覽器講解常用的 API , 主要針對(duì)瀏覽器做交互效果。比如我們想要瀏覽器彈出一個(gè)警示框遂黍， 直接使用 alert(‘彈出’)
? MDN 詳細(xì) API : https://developer.mozilla.org/zh-CN/docs/Web/API
? 因?yàn)?Web API 很多，所以我們將這個(gè)階段稱為 Web APIs俊嗽。
? 此處的 Web API 特指瀏覽器提供的一系列API(很多函數(shù)或?qū)ο蠓椒?雾家，即操作網(wǎng)頁(yè)的一系列工具。例如：操作html標(biāo)簽绍豁、操作頁(yè)面地址的方法芯咧。
1.1.3 API 和 Web API 總結(jié)
API 是為我們程序員提供的一個(gè)接口，幫助我們實(shí)現(xiàn)某種功能竹揍，我們會(huì)使用就可以了敬飒，不必糾結(jié)內(nèi)部如何實(shí)現(xiàn)
Web API 主要是針對(duì)于瀏覽器提供的接口，主要針對(duì)于瀏覽器做交互效果芬位。
Web API 一般都有輸入和輸出（函數(shù)的傳參和返回值）无拗，Web API 很多都是方法（函數(shù)）
學(xué)習(xí) Web API 可以結(jié)合前面學(xué)習(xí)內(nèi)置對(duì)象方法的思路學(xué)習(xí)
1.2. DOM 介紹
1.2.1 什么是DOM
? 文檔對(duì)象模型（Document Object Model，簡(jiǎn)稱DOM）昧碉，是 W3C 組織推薦的處理可擴(kuò)展標(biāo)記語(yǔ)言（html或者xhtml）的標(biāo)準(zhǔn)編程接口英染。
? W3C 已經(jīng)定義了一系列的 DOM 接口揽惹，通過(guò)這些 DOM 接口可以改變網(wǎng)頁(yè)的內(nèi)容、結(jié)構(gòu)和樣式四康。
DOM是W3C組織制定的一套處理 html和xml文檔的規(guī)范搪搏，所有的瀏覽器都遵循了這套標(biāo)準(zhǔn)。
1.2.2. DOM樹(shù)
DOM樹(shù) 又稱為文檔樹(shù)模型闪金，把文檔映射成樹(shù)形結(jié)構(gòu)疯溺，通過(guò)節(jié)點(diǎn)對(duì)象對(duì)其處理，處理的結(jié)果可以加入到當(dāng)前的頁(yè)面哎垦。
- 文檔：一個(gè)頁(yè)面就是一個(gè)文檔囱嫩，DOM中使用document表示
- 節(jié)點(diǎn)：網(wǎng)頁(yè)中的所有內(nèi)容，在文檔樹(shù)中都是節(jié)點(diǎn)（標(biāo)簽撼泛、屬性挠说、文本、注釋等）愿题，使用node表示
- 標(biāo)簽節(jié)點(diǎn)：網(wǎng)頁(yè)中的所有標(biāo)簽损俭，通常稱為元素節(jié)點(diǎn)，又簡(jiǎn)稱為“元素”潘酗，使用element表示
1.3. 獲取元素
為什么要獲取頁(yè)面元素杆兵？
例如：我們想要操作頁(yè)面上的某部分(顯示/隱藏，動(dòng)畫(huà))仔夺，需要先獲取到該部分對(duì)應(yīng)的元素琐脏，再對(duì)其進(jìn)行操作。
1.3.1. 根據(jù)ID獲取
語(yǔ)法：document.getElementById(id)
作用：根據(jù)ID獲取元素對(duì)象
參數(shù)：id值缸兔，區(qū)分大小寫(xiě)的字符串
返回值：元素對(duì)象 或 null
案例代碼
<body>
<div id="time">2019-9-9</div>
<script>
// 因?yàn)槲覀兾臋n頁(yè)面從上往下加載日裙，所以先得有標(biāo)簽 所以我們script寫(xiě)到標(biāo)簽的下面
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
// console.dir 打印我們返回的元素對(duì)象 更好的查看里面的屬性和方法
console.dir(timer);
</script>
</body>
1.3.2. 根據(jù)標(biāo)簽名獲取元素
語(yǔ)法：document.getElementsByTagName('標(biāo)簽名') 或者 element.getElementsByTagName('標(biāo)簽名')
作用：根據(jù)標(biāo)簽名獲取元素對(duì)象
參數(shù)：標(biāo)簽名
返回值：元素對(duì)象集合（偽數(shù)組，數(shù)組元素是元素對(duì)象）
案例代碼
<body>
<ul>
<li>知否知否惰蜜，應(yīng)是等你好久11</li>
<li>知否知否昂拂，應(yīng)是等你好久22</li>
<li>知否知否，應(yīng)是等你好久33</li>
<li>知否知否抛猖，應(yīng)是等你好久44</li>
<li>知否知否格侯，應(yīng)是等你好久55</li>
</ul>
<ul id="nav">
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
</ul>
<script>
// 1.返回的是 獲取過(guò)來(lái)元素對(duì)象的集合 以偽數(shù)組的形式存儲(chǔ)的
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
// 2. 我們想要依次打印里面的元素對(duì)象我們可以采取遍歷的方式
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
// 3. element.getElementsByTagName() 可以得到這個(gè)元素里面的某些標(biāo)簽
var nav = document.getElementById('nav'); // 這個(gè)獲得nav 元素
var navLis = nav.getElementsByTagName('li');
console.log(navLis);
</script>
</body>
注意：getElementsByTagName()獲取到是動(dòng)態(tài)集合，即：當(dāng)頁(yè)面增加了標(biāo)簽财著，這個(gè)集合中也就增加了元素联四。
1.3.3. H5新增獲取元素方式
案例代碼
<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首頁(yè)</li>
<li>產(chǎn)品</li>
</ul>
</div>
<script>
// 1. getElementsByClassName 根據(jù)類名獲得某些元素集合
var boxs = document.getElementsByClassName('box');
console.log(boxs);
// 2. querySelector 返回指定選擇器的第一個(gè)元素對(duì)象 切記 里面的選擇器需要加符號(hào) .box #nav
var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);
// 3. querySelectorAll()返回指定選擇器的所有元素對(duì)象集合
var allBox = document.querySelectorAll('.box');
console.log(allBox);
var lis = document.querySelectorAll('li');
console.log(lis);
</script>
</body>
1.3.4 獲取特殊元素（body，html）
1.4. 事件基礎(chǔ)
1.4.1. 事件概述
JavaScript 使我們有能力創(chuàng)建動(dòng)態(tài)頁(yè)面撑教，而事件是可以被 JavaScript 偵測(cè)到的行為朝墩。
簡(jiǎn)單理解： 觸發(fā)--- 響應(yīng)機(jī)制。
? 網(wǎng)頁(yè)中的每個(gè)元素都可以產(chǎn)生某些可以觸發(fā) JavaScript 的事件伟姐，例如鱼辙，我們可以在用戶點(diǎn)擊某按鈕時(shí)產(chǎn)生一個(gè) 事件廉嚼，然后去執(zhí)行某些操作。
1.4.2. 事件三要素
- 事件源（誰(shuí)）：觸發(fā)事件的元素
- 事件類型（什么事件）： 例如 click 點(diǎn)擊事件
- 事件處理程序（做啥）：事件觸發(fā)后要執(zhí)行的代碼(函數(shù)形式)倒戏，事件處理函數(shù)
案例代碼
<body>
<button id="btn">唐伯虎</button>
<script>
// 點(diǎn)擊一個(gè)按鈕怠噪，彈出對(duì)話框
// 1. 事件是有三部分組成 事件源 事件類型 事件處理程序 我們也稱為事件三要素
//(1) 事件源 事件被觸發(fā)的對(duì)象 誰(shuí) 按鈕
var btn = document.getElementById('btn');
//(2) 事件類型 如何觸發(fā) 什么事件 比如鼠標(biāo)點(diǎn)擊(onclick) 還是鼠標(biāo)經(jīng)過(guò) 還是鍵盤(pán)按下
//(3) 事件處理程序 通過(guò)一個(gè)函數(shù)賦值的方式 完成
btn.onclick = function() {
alert('點(diǎn)秋香');
}
</script>
</body>
1.4.3. 執(zhí)行事件的步驟
案例代碼
<body>
<div>123</div>
<script>
// 執(zhí)行事件步驟
// 點(diǎn)擊div 控制臺(tái)輸出 我被選中了
// 1. 獲取事件源
var div = document.querySelector('div');
// 2.綁定事件 注冊(cè)事件
// div.onclick
// 3.添加事件處理程序
div.onclick = function() {
console.log('我被選中了');
}
</script>
</body>
1.4.4. 常見(jiàn)的鼠標(biāo)事件
1.4.5. 分析事件三要素
下拉菜單三要素
關(guān)閉廣告三要素
1.5. 操作元素
JavaScript的 DOM 操作可以改變網(wǎng)頁(yè)內(nèi)容、結(jié)構(gòu)和樣式杜跷，我們可以利用 DOM 操作元素來(lái)改變?cè)乩锩娴膬?nèi)容傍念、屬性等。（注意：這些操作都是通過(guò)元素對(duì)象的屬性實(shí)現(xiàn)的）
1.5.1. 改變?cè)貎?nèi)容（獲取或設(shè)置）
innerText改變?cè)貎?nèi)容
<body>
<button>顯示當(dāng)前系統(tǒng)時(shí)間</button>
<div>某個(gè)時(shí)間</div>
<p>1123</p>
<script>
// 當(dāng)我們點(diǎn)擊了按鈕葛闷， div里面的文字會(huì)發(fā)生變化
// 1. 獲取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
// 2.注冊(cè)事件
btn.onclick = function() {
// div.innerText = '2019-6-6';
div.innerHTML = getDate();
}
function getDate() {
var date = new Date();
// 我們寫(xiě)一個(gè) 2019年 5月 1日 星期三
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
}
</script>
</body>
innerText和innerHTML的區(qū)別
- 獲取內(nèi)容時(shí)的區(qū)別：
? innerText會(huì)去除空格和換行憋槐，而innerHTML會(huì)保留空格和換行
- 設(shè)置內(nèi)容時(shí)的區(qū)別：
? innerText不會(huì)識(shí)別html，而innerHTML會(huì)識(shí)別
案例代碼
<body>
<div></div>
<p>
我是文字
<span>123</span>
</p>
<script>
// innerText 和 innerHTML的區(qū)別
// 1. innerText 不識(shí)別html標(biāo)簽 非標(biāo)準(zhǔn) 去除空格和換行
var div = document.querySelector('div');
// div.innerText = '<strong>今天是：</strong> 2019';
// 2. innerHTML 識(shí)別html標(biāo)簽 W3C標(biāo)準(zhǔn) 保留空格和換行的
div.innerHTML = '<strong>今天是：</strong> 2019';
// 這兩個(gè)屬性是可讀寫(xiě)的 可以獲取元素里面的內(nèi)容
var p = document.querySelector('p');
console.log(p.innerText);
console.log(p.innerHTML);
</script>
</body>
1.5.2. 常用元素的屬性操作
獲取屬性的值
元素對(duì)象.屬性名
設(shè)置屬性的值
元素對(duì)象.屬性名 = 值
案例代碼
<body>
<button id="ldh">劉德華</button>
<button id="zxy">張學(xué)友</button> <br>
<img src="images/ldh.jpg" alt="" title="劉德華">
<script>
// 修改元素屬性 src
// 1. 獲取元素
var ldh = document.getElementById('ldh');
var zxy = document.getElementById('zxy');
var img = document.querySelector('img');
// 2. 注冊(cè)事件 處理程序
zxy.onclick = function() {
img.src = 'images/zxy.jpg';
img.title = '張學(xué)友思密達(dá)';
}
ldh.onclick = function() {
img.src = 'images/ldh.jpg';
img.title = '劉德華';
}
</script>
</body>
1.5.3. 案例：分時(shí)問(wèn)候
1.5.4. 表單元素的屬性操作
獲取屬性的值
元素對(duì)象.屬性名
設(shè)置屬性的值
元素對(duì)象.屬性名 = 值
表單元素中有一些屬性如：disabled淑趾、checked阳仔、selected，元素對(duì)象的這些屬性的值是布爾型扣泊。
案例代碼
<body>
<button>按鈕</button>
<input type="text" value="輸入內(nèi)容">
<script>
// 1. 獲取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
// 2. 注冊(cè)事件 處理程序
btn.onclick = function() {
// 表單里面的值 文字內(nèi)容是通過(guò) value 來(lái)修改的
input.value = '被點(diǎn)擊了';
// 如果想要某個(gè)表單被禁用 不能再點(diǎn)擊 disabled 我們想要這個(gè)按鈕 button禁用
// btn.disabled = true;
this.disabled = true;
// this 指向的是事件函數(shù)的調(diào)用者 btn
}
</script>
</body>
1.5.5. 案例：仿京東顯示密碼
1.5.6. 樣式屬性操作
我們可以通過(guò) JS 修改元素的大小近范、顏色、位置等樣式延蟹。
常用方式
方式1：通過(guò)操作style屬性
元素對(duì)象的style屬性也是一個(gè)對(duì)象评矩！
元素對(duì)象.style.樣式屬性 = 值;
案例代碼
<body>
<div></div>
<script>
// 1. 獲取元素
var div = document.querySelector('div');
// 2. 注冊(cè)事件 處理程序
div.onclick = function() {
// div.style里面的屬性 采取駝峰命名法
this.style.backgroundColor = 'purple';
this.style.width = '250px';
}
</script>
</body>
案例：淘寶點(diǎn)擊關(guān)閉二維碼
案例：循環(huán)精靈圖背景
案例：顯示隱藏文本框內(nèi)容
方式2：通過(guò)操作className屬性
元素對(duì)象.className = 值;
因?yàn)閏lass是關(guān)鍵字，所有使用className阱飘。
案例代碼
<body>
<div class="first">文本</div>
<script>
// 1. 使用 element.style 獲得修改元素樣式 如果樣式比較少 或者 功能簡(jiǎn)單的情況下使用
var test = document.querySelector('div');
test.onclick = function() {
// this.style.backgroundColor = 'purple';
// this.style.color = '#fff';
// this.style.fontSize = '25px';
// this.style.marginTop = '100px';
// 2. 我們可以通過(guò) 修改元素的className更改元素的樣式 適合于樣式較多或者功能復(fù)雜的情況
// 3. 如果想要保留原先的類名斥杜，我們可以這么做 多類名選擇器
// this.className = 'change';
this.className = 'first change';
}
</script>
</body>
案例：密碼框格式提示錯(cuò)誤信息
1.6. 總結(jié)
