今日內(nèi)容：
- JavaScript：
- ECMAScript：
- BOM：
- DOM：
1. 事件
DOM簡單學(xué)習(xí)：為了滿足案例要求
- 功能：控制html文檔的內(nèi)容
- 獲取頁面標簽(元素)對象：Element
* document.getElementById("id值"):通過元素的id獲取元素對象
* 操作Element對象：
1. 修改屬性值：
a. 明確獲取的對象是哪一個？
b. 查看API文檔酒朵，找其中有哪些屬性可以設(shè)置
2. 修改標簽體內(nèi)容：
* 屬性：innerHTML
a. 獲取元素對象
b. 使用innerHTML屬性修改標簽體內(nèi)容
事件簡單學(xué)習(xí)
一桦锄、功能： 某些組件被執(zhí)行了某些操作后，觸發(fā)某些代碼的執(zhí)行蔫耽。
* 造句： xxx被xxx,我就xxx
* 我方水晶被摧毀后结耀，我就責(zé)備對友。
* 敵方水晶被摧毀后匙铡，我就夸獎自己图甜。
二、 如何綁定事件
1. 直接在html標簽上鳖眼，指定事件的屬性(操作)黑毅，屬性值就是js代碼
a. 事件：onclick--- 單擊事件
2. 通過js獲取元素對象，指定事件屬性钦讳，設(shè)置一個函數(shù)
代碼：
<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('咋老點我矿瘦？');
}
//1.獲取light2對象
var light2 = document.getElementById("light2");
//2.綁定事件
light2.onclick = fun2;
</script>
</body>
- 案例1：電燈開關(guān)
<!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.獲取圖片對象
2.綁定單擊事件
3.每次點擊切換圖片
* 規(guī)則：
* 如果燈是開的 on,切換圖片為 off
* 如果燈是關(guān)的 off,切換圖片為 on
* 使用標記flag來完成
*/
//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>
BOM:
一. 概念：Browser Object Model 瀏覽器對象模型
* 將瀏覽器的各個組成部分封裝成對象。
二. 組成：
* Window：窗口對象
* Navigator：瀏覽器對象
* Screen：顯示器屏幕對象
* History：歷史記錄對象
* Location：地址欄對象
三. Window：窗口對象
- 創(chuàng)建
- 方法
a. 與彈出框有關(guān)的方法：
alert() 顯示帶有一段消息和一個確認按鈕的警告框琼开。
confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框易结。
* 如果用戶點擊確定按鈕，則方法返回true
* 如果用戶點擊取消按鈕，則方法返回false
prompt() 顯示可提示用戶輸入的對話框衬衬。
* 返回值：獲取用戶輸入的值
b. 與打開關(guān)閉有關(guān)的方法：
close()關(guān)閉瀏覽器窗口买猖。
* 誰調(diào)用我 ，我關(guān)誰
open() 打開一個新的瀏覽器窗口
* 返回新的Window對象
c. 與定時器有關(guān)的方式
setTimeout() 在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式滋尉。
* 參數(shù)：
i. js代碼或者方法對象
ii. 毫秒值
* 返回值：唯一標識玉控，用于取消定時器
clearTimeout() 取消由 setTimeout() 方法設(shè)置的 timeout。
setInterval() 按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達式狮惜。
clearInterval() 取消由 setInterval() 設(shè)置的 timeout高诺。 - 屬性：
a. 獲取其他BOM對象：
history
location
Navigator
Screen:
b. 獲取DOM對象
document - 特點
* Window對象不需要創(chuàng)建可以直接使用 window使用。 window.方法名();
* window引用可以省略碾篡。 方法名();
四. Location：地址欄對象
1. 創(chuàng)建(獲取)：
a. window.location
b. location
2. 方法：
* reload() 重新加載當前文檔虱而。刷新
3. 屬性
* href 設(shè)置或返回完整的 URL。
五. History：歷史記錄對象
1. 創(chuàng)建(獲取)：
a. window.history
b. history
2. 方法：
* back() 加載 history 列表中的前一個 URL开泽。
* forward() 加載 history 列表中的下一個 URL牡拇。
* go(參數(shù)) 加載 history 列表中的某個具體頁面。
* 參數(shù)：
* 正數(shù)：前進幾個歷史記錄
* 負數(shù)：后退幾個歷史記錄
3. 屬性：
* length 返回當前窗口歷史列表中的 URL 數(shù)量穆律。
DOM：
- 概念： Document Object Model 文檔對象模型
* 將標記語言文檔的各個組成部分惠呼，封裝為對象÷驮牛可以使用這些對象剔蹋，對標記語言文檔進行CRUD的動態(tài)操作 - W3C DOM 標準被分為 3 個不同的部分：
一、核心 DOM - 針對任何結(jié)構(gòu)化文檔的標準模型
1. Document：文檔對象
2. Element：元素對象
3. Attribute：屬性對象
4. Text：文本對象
5. Comment:注釋對象
6. Node：節(jié)點對象辅髓，其他5個的父對象
二泣崩、 XML DOM - 針對 XML 文檔的標準模型
三、 HTML DOM - 針對 HTML 文檔的標準模型
核心DOM模型：
一洛口、 Document：文檔對象
- 創(chuàng)建(獲取)：在html dom模型中可以使用window對象來獲取
a. window.document
b. document - 方法：
a. 獲取Element對象：
i. getElementById() ： 根據(jù)id屬性值獲取元素對象矫付。id屬性值一般唯一
ii. getElementsByTagName()：根據(jù)元素名稱獲取元素對象們。返回值是一個數(shù)組
iii. getElementsByClassName():根據(jù)Class屬性值獲取元素對象們绍弟。返回值是一個數(shù)組
v. getElementsByName(): 根據(jù)name屬性值獲取元素對象們技即。返回值是一個數(shù)組
b. 創(chuàng)建其他DOM對象：
createAttribute(name)
createComment()
createElement()
createTextNode() - 屬性
二著洼、 Element：元素對象
1. 獲取/創(chuàng)建：通過document來獲取和創(chuàng)建
2. 方法：
a.removeAttribute()：刪除屬性
b.setAttribute()：設(shè)置屬性
三樟遣、Node：節(jié)點對象，其他5個的父對象
1. 特點：所有dom對象都可以被認為是一個節(jié)點
2. 方法：
* CRUD dom樹：
* appendChild()：向節(jié)點的子節(jié)點列表的結(jié)尾添加新的子節(jié)點身笤。
* removeChild() ：刪除（并返回）當前節(jié)點的指定子節(jié)點豹悬。
* replaceChild()：用新節(jié)點替換一個子節(jié)點。
3.屬性：
* parentNode 返回節(jié)點的父節(jié)點液荸。
/*
超鏈接功能：
1.可以被點擊：樣式
2.點擊后跳轉(zhuǎn)到href指定的url
需求：保留1功能瞻佛，去掉2功能
實現(xiàn)：href="javascript:void(0);"
*/
四、 HTML DOM
- 標簽體的設(shè)置和獲取：innerHTML
- 使用html元素對象的屬性
- 控制元素樣式
a. 使用元素的style屬性來設(shè)置
如：
//修改樣式方式1
div1.style.border = "1px solid red";
div1.style.width = "200px";
//font-size--> fontSize
div1.style.fontSize = "20px";
b. 提前定義好類選擇器的樣式伤柄，通過元素的className屬性來設(shè)置其class屬性值绊困。
var div2=document.getElementById("div2");
div2.onclick=function () {
div2.className="d1";
}
事件監(jiān)聽機制：
一、 概念：某些組件被執(zhí)行了某些操作后适刀，觸發(fā)某些代碼的執(zhí)行秤朗。
- 事件：某些操作。如： 單擊笔喉，雙擊取视，鍵盤按下了，鼠標移動了
- 事件源：組件常挚。如： 按鈕 文本輸入框...
- 監(jiān)聽器：代碼作谭。
- 注冊監(jiān)聽：將事件，事件源奄毡，監(jiān)聽器結(jié)合在一起折欠。 當事件源上發(fā)生了某個事件，則觸發(fā)執(zhí)行某個監(jiān)聽器代碼吼过。
二怨酝、常見的事件：
- 點擊事件：
a. onclick：單擊事件
b. ondblclick：雙擊事件 - 焦點事件
a. onblur：失去焦點
i:一般用于表單校驗
b. onfocus:元素獲得焦點。 - 加載事件：
a. onload：一張頁面或一幅圖像完成加載那先。 - 鼠標事件：
a. onmousedown 鼠標按鈕被按下农猬。
i：定義方法時，定義一個形參event對象售淡。
ii:event對象的button屬性可以獲取鼠標被點擊的鍵斤葱。
b. onmouseup 鼠標按鍵被松開。
c. onmousemove 鼠標被移動揖闸。
d. onmouseover 鼠標移到某元素之上揍堕。
e. onmouseout 鼠標從某元素移開。 - 鍵盤事件：
a. onkeydown 某個鍵盤按鍵被按下汤纸。
i:同鼠標onmousedown衩茸，獲取被按下鍵的對象keyCode。
b. onkeyup 某個鍵盤按鍵被松開贮泞。
c. onkeypress 某個鍵盤按鍵被按下并松開楞慈。 - 選擇和改變
a. onchange 域的內(nèi)容被改變。
b. onselect 文本被選中啃擦。 - 表單事件：
a. onsubmit 確認按鈕被點擊囊蓝。
- 可以阻止表單的提交：方法返回false則表單被阻止提交。
b. onreset 重置按鈕被點擊令蛉。
