javascript
JavaScript学习笔记04【高级——DOM和事件的简单学习、BOM对象】
- w3school 在線教程：https://www.w3school.com.cn
目錄
07 DOM和事件的簡單學(xué)習(xí)
今日內(nèi)容
DOM簡單學(xué)習(xí)
Image 對象的屬性
事件簡單學(xué)習(xí)
案例1_電燈開關(guān)
08 BOM對象
BOM_概述
Screen：顯示器屏幕對象
BOM_Window_彈出方法
Window——對象、對象集合、對象屬性、對象方法
BOM_Window_打開關(guān)閉方法
open()：打開一個新的瀏覽器窗口
open()：打開一個新的瀏覽器窗口
BOM_Window_定時器方法
一次性定時器
循環(huán)定時器
案例2_輪播圖
BOM_Window_屬性
BOM_Location
Location——對象、對象屬性、對象方法、對象描述
案例3_自動跳轉(zhuǎn)首頁
BOM_History
History——對象、對象屬性
07 DOM和事件的簡單學(xué)習(xí)
今日內(nèi)容
1. JavaScript：
?? ?1. ECMAScript：
?? ?2. BOM：
?? ?3. DOM：
?? ??? ?1. 事件
DOM簡單學(xué)習(xí)
DOM簡單學(xué)習(xí)：為了滿足案例要求。
* 功能：控制html文檔的內(nèi)容
* 獲取頁面標(biāo)簽(元素)對象：Element
? ? ? ? * document.getElementById("id值")：通過元素的id獲取元素對象
* 操作Element對象：
? ? ? ? 1. 修改屬性值：
? ? ? ? ? ? ? ? 1. 明確獲取的對象是哪一個？
? ? ? ? ? ? ? ? 2. 查看API文檔，找其中有哪些屬性可以設(shè)置
? ? ? ? 2. 修改標(biāo)簽體內(nèi)容：
? ? ? ? ? ? ? ? * 屬性：innerHTML
? ? ? ? ? ? ? ? 1. 獲取元素對象
? ? ? ? ? ? ? ? 2. 使用innerHTML屬性修改標(biāo)簽體內(nèi)容
Image 對象的屬性
事件簡單學(xué)習(xí)
* 功能： 某些組件被執(zhí)行了某些操作后，觸發(fā)某些代碼的執(zhí)行。
?? ?* 造句： ?xxx被xxx,我就xxx
?? ??? ?* 我方水晶被摧毀后，我就責(zé)備對友。
?? ??? ?* 敵方水晶被摧毀后，我就夸獎自己。
* 如何綁定事件
?? ?1. 直接在html標(biāo)簽上，指定事件的屬性(操作)，屬性值就是js代碼
? ? ? ? ? ?事件：onclick--- 單擊事件
?? ?2. 通過js獲取元素對象，指定事件屬性，設(shè)置一個函數(shù)
案例1_電燈開關(guān)
分析：
?? ?1.獲取圖片對象
?? ?2.綁定單擊事件
?? ?3.每次點(diǎn)擊切換圖片
?? ??? ?* 規(guī)則：
?? ??? ??? ?* 如果燈是開的 on，切換圖片為 off
?? ??? ??? ?* 如果燈是關(guān)的 off，切換圖片為 on
?? ??? ?* 使用標(biāo)記flag來完成
??
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>電燈開關(guān)</title></head><body><img id="light" src="img/off.gif"><script>// 1.獲取圖片對象var light = document.getElementById("light");var flag = false; // 代表燈是滅的 off圖片// 2.綁定單擊事件light.onclick = function() {if (flag) { // 判斷：如果燈是開的，則滅掉light.src = "img/off.gif";flag = false;} else { // 如果燈是滅的，則打開light.src = "img/on.gif";flag = true;}}</script></body> </html>08 BOM對象
BOM_概述
??
1. 概念：Browser Object Model 瀏覽器對象模型
?? ?* 將瀏覽器的各個組成部分封裝成對象。
2. 組成：
?? ?* Window：窗口對象
?? ?* Navigator：瀏覽器對象
?? ?* Screen：顯示器屏幕對象
?? ?* History：歷史記錄對象
?? ?* Location：地址欄對象
Navigator：瀏覽器對象
Screen：顯示器屏幕對象
BOM_Window_彈出方法
Window：窗口對象
?? ?1. 創(chuàng)建
?? ?2. 方法
?? ??? ? 1. 與彈出框有關(guān)的方法：
?? ??? ??? ?alert()：顯示帶有一段消息和一個確認(rèn)按鈕的警告框。
?? ??? ??? ?confirm()：顯示帶有一段消息以及確認(rèn)按鈕和取消按鈕的對話框。
?? ??? ??? ??? ?* 如果用戶點(diǎn)擊確定按鈕，則方法返回true
?? ??? ??? ??? ?* 如果用戶點(diǎn)擊取消按鈕，則方法返回false
?? ??? ??? ?prompt()：顯示可提示用戶輸入的對話框。
?? ??? ??? ??? ?* 返回值：獲取用戶輸入的值
?? ?3. 屬性
?? ?4. 特點(diǎn)
?? ??? ?* Window對象不需要創(chuàng)建可以直接使用“window”來進(jìn)行調(diào)用：window.方法名();
?? ??? ?* window引用可以省略：方法名();
Window——對象、對象集合、對象屬性、對象方法
BOM_Window_打開關(guān)閉方法
Window：窗口對象
?? ?1. 創(chuàng)建
?? ?2. 方法
?? ??? ? 1. 與彈出框有關(guān)的方法：
?? ??? ??? ?alert()：顯示帶有一段消息和一個確認(rèn)按鈕的警告框。
?? ??? ??? ?confirm()：顯示帶有一段消息以及確認(rèn)按鈕和取消按鈕的對話框。
?? ??? ??? ??? ?* 如果用戶點(diǎn)擊確定按鈕，則方法返回true
?? ??? ??? ??? ?* 如果用戶點(diǎn)擊取消按鈕，則方法返回false
?? ??? ??? ?prompt()：顯示可提示用戶輸入的對話框。
?? ??? ??? ??? ?* 返回值：獲取用戶輸入的值
?? ??? ? 2. 與打開\關(guān)閉有關(guān)的方法：
?? ??? ??? ?close()：關(guān)閉瀏覽器窗口。
?? ??? ??? ??? ?* 誰調(diào)用我 ，我關(guān)誰
?? ??? ??? ?open()：打開一個新的瀏覽器窗口
?? ??? ??? ??? ?* 返回新的Window對象
?? ?3. 屬性
?? ?4. 特點(diǎn)
?? ??? ?* Window對象不需要創(chuàng)建可以直接使用“window”來進(jìn)行調(diào)用：window.方法名();
?? ??? ?* window引用可以省略：方法名();
open()：打開一個新的瀏覽器窗口
open()：打開一個新的瀏覽器窗口
BOM_Window_定時器方法
Window：窗口對象
????1. 創(chuàng)建
????2. 方法
?????????1. 與彈出框有關(guān)的方法：
????????????alert()????顯示帶有一段消息和一個確認(rèn)按鈕的警告框。
????????????confirm()????顯示帶有一段消息以及確認(rèn)按鈕和取消按鈕的對話框。
????????????????* 如果用戶點(diǎn)擊確定按鈕，則方法返回true
????????????????* 如果用戶點(diǎn)擊取消按鈕，則方法返回false
????????????prompt()????顯示可提示用戶輸入的對話框。
????????????????* 返回值：獲取用戶輸入的值
?????????2. 與打開關(guān)閉有關(guān)的方法：
????????????close()????關(guān)閉瀏覽器窗口。
????????????????* 誰調(diào)用我，我關(guān)誰
????????????open()????打開一個新的瀏覽器窗口
????????????????* 返回新的Window對象
?????????3. 與定時器有關(guān)的方式
????????????setTimeout()：在指定的毫秒數(shù)后，調(diào)用函數(shù)或計算表達(dá)式。
????????????????* 參數(shù)：
? ? ? ? ? ? ? ? ? ? ? 1. js代碼或者方法對象
? ? ? ? ? ? ? ? ? ? ? 2. 毫秒值
????????????????* 返回值：唯一標(biāo)識，用于取消定時器
????????????clearTimeout()：取消由 setTimeout() 方法設(shè)置的 timeout。
????????????setInterval()：按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達(dá)式。
????????????clearInterval()：取消由 setInterval() 設(shè)置的 timeout。
????3. 屬性：
????????1. 獲取其他BOM對象：
????????????history
????????????location
????????????Navigator
????????????Screen:
????????2. 獲取DOM對象
????????????document
????4. 特點(diǎn)：
????????* Window對象不需要創(chuàng)建可以直接使用“window”來進(jìn)行調(diào)用：window.方法名();
????????* window引用可以省略：方法名();
一次性定時器
循環(huán)定時器
案例2_輪播圖
分析：
BOM_Window_屬性
Window：窗口對象
????1. 創(chuàng)建
????2. 方法
?????????1. 與彈出框有關(guān)的方法：
????????????alert()????顯示帶有一段消息和一個確認(rèn)按鈕的警告框。
????????????confirm()????顯示帶有一段消息以及確認(rèn)按鈕和取消按鈕的對話框。
????????????????* 如果用戶點(diǎn)擊確定按鈕，則方法返回true
????????????????* 如果用戶點(diǎn)擊取消按鈕，則方法返回false
????????????prompt()????顯示可提示用戶輸入的對話框。
????????????????* 返回值：獲取用戶輸入的值
?????????2. 與打開關(guān)閉有關(guān)的方法：
????????????close()????關(guān)閉瀏覽器窗口。
????????????????* 誰調(diào)用我，我關(guān)誰
????????????open()????打開一個新的瀏覽器窗口
????????????????* 返回新的Window對象
?????????3. 與定時器有關(guān)的方式
????????????setTimeout()：在指定的毫秒數(shù)后，調(diào)用函數(shù)或計算表達(dá)式。
????????????????* 參數(shù)：
? ? ? ? ? ? ? ? ? ? ? 1. js代碼或者方法對象
? ? ? ? ? ? ? ? ? ? ? 2. 毫秒值
????????????????* 返回值：唯一標(biāo)識，用于取消定時器
????????????clearTimeout()：取消由 setTimeout() 方法設(shè)置的 timeout。
????????????setInterval()：按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達(dá)式。
????????????clearInterval()：取消由 setInterval() 設(shè)置的 timeout。
????3. 屬性：
????????1. 獲取其他BOM對象：
????????????history
????????????location
????????????Navigator
????????????Screen
????????2. 獲取DOM對象
????????????document
????4. 特點(diǎn)：
????????* Window對象不需要創(chuàng)建可以直接使用“window”來進(jìn)行調(diào)用：window.方法名();
????????* window引用可以省略：方法名();
BOM_Location
Location：地址欄對象
?? ?1. 創(chuàng)建(獲取)：
?? ??? ?1. window.location
?? ??? ?2. location
?? ?2. 方法：
?? ??? ?* reload()：重新加載當(dāng)前文檔（刷新）。
?? ?3. 屬性
?? ??? ?* href：設(shè)置或返回完整的URL。
\
Location——對象、對象屬性、對象方法、對象描述
案例3_自動跳轉(zhuǎn)首頁
分析：
? ?1.顯示頁面效果 <p>
? ?2.倒計時讀秒效果實(shí)現(xiàn)
?? ? ? 2.1.定義一個方法，獲取span標(biāo)簽，修改span標(biāo)簽體內(nèi)容，時間--（減1）
?? ? ? 2.2.定義一個定時器，1秒執(zhí)行一次該方法
? ?3.在方法中判斷時間如果<= 0 ，則跳轉(zhuǎn)到首頁
BOM_History
History：歷史記錄對象
? ? 1. 創(chuàng)建(獲取)：
? ? ? ? 1. window.history
? ? ? ? 2. history
? ? 2. 方法：
? ? ? ? * back()：加載 history 列表中的前一個 URL。
? ? ? ? * forward()：加載 history 列表中的下一個 URL。
? ? ? ? * go(參數(shù))：加載 history 列表中的某個具體頁面。
? ? ? ? ? ? * 參數(shù)：
? ? ? ? ? ? ? ? * 正數(shù)：前進(jìn)幾個歷史記錄
? ? ? ? ? ? ? ? * 負(fù)數(shù)：后退幾個歷史記錄
? ? 3. 屬性：
? ? ? ? * length：返回當(dāng)前窗口歷史列表中的 URL 數(shù)量。
History——對象、對象屬性
總結(jié)
以上是生活随笔為你收集整理的JavaScript学习笔记04【高级——DOM和事件的简单学习、BOM对象】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript学习笔记02【基础—
- 下一篇： JavaScript学习笔记05【高级—