今日內容
- ECMAScript
- BOM
- DOM：
- 事件
![JavaScript高級]()
- 事件
1 事件簡單學習
1.1 功能：某些組件被執行了某些操作後，出發某些代碼的執行
如：xxx被xxx，我就xxx
我方水晶杯摧毀後，我就責備隊友
1.2 如何綁定事件
- 直接在html標籤上，指定事件的屬性(操作)，屬性值就是js代碼
onclick：單擊事件 - 通過js獲取元素對象，指定事件屬性，設置一個函數
<body>
<img id="light" src="img/off.gif" onclick="fun();">
<img id="light2" src="img/off.gif">
<script>
function fun() {
alert('我被點了');
alert('我又被點了');
}
function fun2() {
alert('你咋老點我？');
}
//獲取light2對象
var light2 = document.getElemnetById("light2");
//綁定事件
light2.onclick = fun2;
</script>
</body>
- 案例1：電燈開關
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>電燈開關</title>
</head>
<body>
<img src="img/off.gif" id="light">
<script>
//1.獲取圖片對象
var light = document.getElementById("light");
//綁定單擊事件
var flag = true;
light.onclick = function () {
if(flag) {
//如果燈是滅的，則開開
light.src = "img/on.gif";
flag = false;
}else {
//如果燈是開的，則滅掉
light.src = "img/off.gif";
flag = true;
}
}
</script>
</body>
</html>
2 BOM
2.1 概念：Browser Object Model瀏覽器對象模型
將瀏覽器的各個組成部分封裝成對象。
2.2 組成：
- Window：窗口對象
- History：歷史記錄對象
- Location：地址欄對象
- Navigator：瀏覽器對象
- Screen：顯示器屏幕對象
2.3 Window：窗口對象
- 創建
- 方法
- 與彈出框有關的方法：
- alert() 顯示帶有一段消息和一個確認按鈕的警告框
- confirm() 顯示帶有一段消息以及確認和取消按鈕的對話框
*確定：返回true
*取消：返回false - prompt() 顯示可提示用戶輸入的對話框
*返回值：獲取用戶輸入的值
- 與打開關閉有關的方法：
- close() 關閉瀏覽器窗口
*誰調用，關誰 - open() 打開一個新的瀏覽器窗口
*返回新的Window對象
- close() 關閉瀏覽器窗口
- 與定時器有關的方法
-
setTimeout() 在指定的毫秒數後調用函數或計算表達式
*參數：- js代碼或者方法對象
- 毫秒值
*返回值：唯一標識，用於取消定時器
-
clearTimeout() 取消由setTimeout()方法設置的timeout
-
setInterval() 按照指定的週期(以毫秒計)來調用函數或計算表達式
-
clearInterval() 取消由setInterval()設置的timeout
-
- 與彈出框有關的方法：
- 屬性：
- 獲取其他BOM對象：
history
location
Navigator
Screen - 獲取DOM對象
document
- 獲取其他BOM對象：
- 特點
- Window對象不需要創建可以直接使用
window.方法名(); - window引用可以省略。
方法名();
- Window對象不需要創建可以直接使用
2.4 Location：地址欄對象
- 創建(獲取)：
- window.location
- location
- 方法
reload()重新加載當前文檔。刷新 - 屬性
href 設置或返回完整的URL
2.5 History：歷史記錄對象
- 創建(獲取)：
- window.history
- history
- 方法
- back() 加載history列表中的前一個URL
- forward() 加載history列表中的下一個URL
- go(參數) 加載history列表中的某個具體頁面
參數：
正數：前進幾個歷史記錄
負數：後退幾個歷史記錄
- 屬性
length 返回當前窗口歷史記錄列表中的URL數量
3 DOM
3.1 概念：Document Object Model 文檔對象模型
將標記語言文檔的各個組成部分，封裝成對象。可以使用這些對象，對標記語言文檔進行CRUD的動態操作
- W3C DOM標準被分爲三個不同的部分：
- 核心DOM：針對任何結構化文檔的標準模型
- Document：文檔對象
- Element：元素對象
- Attribute：屬性對象
- Text：文本對象
- Comment：註釋對象
- Node：節點對象，其他5個的父對象
- XML DOM：針對XML文檔的標準模型
- HTML DOM：針對HTML文檔的標準模型
- 核心DOM：針對任何結構化文檔的標準模型
3.2 核心DOM模型
- Document：文檔對象
- 創建(獲取)：
- window.document
- document
- 方法
- 獲取Element對象：
- getElementById()：根據id屬性值獲取元素對象。id屬性值一般唯一
- getElementsByTagName()：根據元素名稱獲取元素對象們。返回值是一個數組
- getElementsByClassName()：根據Class屬性值獲取元素對象們。返回值是一個數組
- 創建其他DOM對象：
- createAttribute(name)
- createComment()
- createElement()
- createTestNode()
- 獲取Element對象：
- 屬性
- Element：元素對象
- 獲取/創建：通過document來獲取和創建
- 方法：
- removeAttribute()：刪除屬性
- setAttribute()：設置屬性
- Node：節點對象，其他5個的父對象
- 特點：所有dom對象都可以被認爲是一個節點
- 方法：
CRUD dom數：
*appendChild()：向節點的子節點列表的結尾添加新的子節點。
*removeChild()：刪除(並返回)當前節點的指定子節點
*replaceChild()：用新節點替換一個子節點 - 屬性：
parentNode：返回當前節點的父節點
- 創建(獲取)：
3.3 HTML DOM
- 標籤體的設置和獲取：innerHTML
- 使用html元素對象的屬性
- 控制元素樣式
- 使用元素的style屬性來設置
//修改樣式方式一 div1.style.border = "1px solid red" div1.style.width="200px"; //font-size-->fontSize div1.style.fontSize="20px";
- 使用元素的style屬性來設置
4 事件監聽機制
4.1 概念：某些組件被執行了某些操作後，出發某些代碼的執行。
- 事件：某些操作。如：單擊，雙擊，鍵盤按下了，鼠標移動了
- 事件源：組件。如：按鈕 文本輸入框…
- 監聽器：代碼。
- 註冊監聽：將事件，事件源，監聽器結合在一起。當事件源發生了某個事件，則觸發執行某個監聽器代碼。
4.2 常見的事件
- 點擊事件：
- onclick：單擊事件
- ondblclick：雙擊事件
- 焦點事件：
- onblur：失去焦點
- onfocus：元素獲得焦點
- 加載事件
- onload：一張頁面或一副圖像完成加載
- 鼠標事件
- onmousedown：鼠標按鈕被按下。
- onmouseup：鼠標按鍵被鬆開
- onmousemove：鼠標被移動
- onmouseover：鼠標移到某元素之上。
- onmouseout：鼠標從某元素移開。
- 鍵盤事件：
- onkeydown：某個鍵盤按鍵被按下
- onkeyup：某個鍵盤按鍵被鬆開
- onkeypress：某個鍵盤按鍵被按下並鬆開
- 選擇和改變
- onchange 域的內容被改變
- onselect 文本被選中
- 表單事件
- onsubmit 確認按鈕被點擊
- onreset 重置按鈕被點擊