一惨缆、javascript組成

JavaScript由三部分組成:
1. 核心(ECMAScript)
2. 瀏覽器對象模型(BOM)
3. 文檔對象模型(DOM)

ECMAScript：是一種由ECMA國際(前身為歐洲計(jì)算機(jī)制造商協(xié)會(huì),英文名稱是European Computer Manufacturers Association)通過ECMA-262標(biāo)準(zhǔn)化的腳本程序設(shè)計(jì)語言。ECMAScript 定義的只是這門語言的基礎(chǔ)纤虽，他的組成部分有：語法京革、類型绳泉、語句冠跷、關(guān)鍵字合是、保留字衫樊、操作符飒赃、對象等

BOM： Browse Object Model, 瀏覽器對象模型，提供與瀏覽器交互的方法和接口(API ), 開發(fā)人員使用BOM可以控制瀏覽器顯示頁面以外的部分.

DOM： Document Object Model, 文檔對象模型科侈，提供訪問和操作網(wǎng)頁HTML內(nèi)容的方法和接口

二载佳、BOM

• window對象
  BOM的核心是window對象(全局),window對象的方法:
  alert(text): 彈出提示框(警告框)
  confirm(): 創(chuàng)建一個(gè)需要用戶確認(rèn)的對話框
  open(url,[options]) : 打開一個(gè)新窗口并返回新 window 對象(默認(rèn)新建，_self當(dāng)前窗口; 調(diào)用window對象close方法即關(guān)閉窗口)

• location對象
  location.href = 'http://www.baidu.com' //跳轉(zhuǎn)到指定的URL
  location.assign('http://www.baidu.com'); //跳轉(zhuǎn)到指定的URL
  location.reload(); //最有效的重新加載,有緩存加載

三臀栈、DOM

• DOM的概念
  DOM就是Document Object Model(文檔對象模型)的縮寫蔫慧，DOM 是 W3C（萬維網(wǎng)聯(lián)盟）的標(biāo)準(zhǔn)。
  DOM是中立于平臺和語言的接口权薯，它允許程序和腳本動(dòng)態(tài)地訪問和更新文檔的內(nèi)容姑躲、結(jié)構(gòu)和樣式。

HTML(頁面結(jié)構(gòu)) CSS(頁面樣式) JavaScript(頁面行為操作)

• 節(jié)點(diǎn)樹
  加載HTML頁面時(shí)盟蚣，web瀏覽器生成一個(gè)樹形結(jié)構(gòu)黍析，用來表示頁面內(nèi)部結(jié)構(gòu)。DOM將這種樹形結(jié)構(gòu)理解為由節(jié)點(diǎn)組成:

  
  
  節(jié)點(diǎn)樹

上圖樹形結(jié)構(gòu)屎开，html標(biāo)簽阐枣，沒有父輩，沒有兄弟奄抽，所以html標(biāo)簽為根標(biāo)簽蔼两。head標(biāo)簽是html的子標(biāo)簽，meta和title標(biāo)簽是兄弟關(guān)系逞度。如果把每個(gè)標(biāo)簽當(dāng)作一個(gè)節(jié)點(diǎn)额划，那么這些節(jié)點(diǎn)組合成的就是節(jié)點(diǎn)樹。

• 節(jié)點(diǎn)種類
  元素節(jié)點(diǎn)第晰、文本節(jié)點(diǎn)锁孟、屬性節(jié)點(diǎn);

  <div id="box">測試Div</div>
  元素節(jié)點(diǎn): div
  屬性節(jié)點(diǎn): id="box"
  文本節(jié)點(diǎn): 測試Div

• 元素節(jié)點(diǎn)對象的獲取方式

- getElementById(): 獲取特定ID元素的節(jié)點(diǎn)對象(返回一個(gè)對象)
- getElementByClassName():  獲取指定類名的元素節(jié)點(diǎn)列表(返回一個(gè)數(shù)組)
- getElementsByTagName():  獲取指定標(biāo)簽名的節(jié)點(diǎn)列表(返回一個(gè)數(shù)組)
- getElementsByName():  獲取相同name屬性值的節(jié)點(diǎn)列表(返回一個(gè)數(shù)組)

錯(cuò)誤提醒: 如果id值存在, 但是返回null，則是執(zhí)行順序的問題茁瘦！
  解決方式一: 把<script>標(biāo)簽(JS代碼)移到html結(jié)構(gòu)后面品抽；
  解決方式二: 使用onload事件來處理， onload事件會(huì)在html加載完畢后再調(diào)用甜熔。 
   window.onload=function() {      
       document.getElementById('box');  //id具有唯一性
   };

• 元素節(jié)點(diǎn)的屬性
  tagName: 元素節(jié)點(diǎn)對象所指向的標(biāo)簽名稱
  innerHTML: 元素節(jié)點(diǎn)中的內(nèi)容
  className: 元素節(jié)點(diǎn)的class屬性值
  style: css內(nèi)聯(lián)樣式對象
  children: 某元素的所有子元素節(jié)點(diǎn)
  parentNode: 某元素的父節(jié)點(diǎn)
  value: 輸入框的內(nèi)容

練習(xí): 實(shí)現(xiàn)一個(gè)個(gè)人信息頁面 姓名 年齡 學(xué)歷 專業(yè), 可以獲取到輸入的信息, 點(diǎn)擊保存按鈕以后, 輸出信息(信息顯示形式: 姓名:張三,年齡:33,學(xué)歷:本科,專業(yè):計(jì)算機(jī))

• DOM節(jié)點(diǎn)操作
  DOM節(jié)點(diǎn)操作指的是: 創(chuàng)建節(jié)點(diǎn)圆恤、復(fù)制節(jié)點(diǎn)、插入節(jié)點(diǎn)、刪除節(jié)點(diǎn)和替換節(jié)點(diǎn)等盆昙。

- createElement(); 創(chuàng)建一個(gè)元素節(jié)點(diǎn)
  var op1 = document.createElement('p')
- appendChild(); 添加一個(gè)新子節(jié)點(diǎn)到子節(jié)點(diǎn)的末尾
  box.appendChild(op1)
- createTextNode(); 創(chuàng)建一個(gè)文本節(jié)點(diǎn)
  var txt = document.createTextNode('哈哈')
- insertBefore(); 將新節(jié)點(diǎn)插入到某節(jié)點(diǎn)前面
  box.insertBefore(div3, div1) // 將div3加入到div1的前面
- replaceChild(); 將新節(jié)點(diǎn)替換舊節(jié)點(diǎn)
  box.replaceChild(op, div1)  // 將div1替換為op
- cloneNode(true); 復(fù)制節(jié)點(diǎn)
  div1.appendChild(div1.cloneNode(true))
- removeChild(); 移除節(jié)點(diǎn)
  box.removeChild(op1)

• this對象
  this是javascript的一個(gè)關(guān)鍵字羽历。隨著函數(shù)使用場合不同，this的值會(huì)發(fā)生變化淡喜。但是總有一個(gè)原則秕磷，誰調(diào)用即指向誰(this指的是調(diào)用函數(shù)的那個(gè)對象)。

var box = document.getElementById('box');  
box.onclick = function() { 
      console.log(this);  // this表示box對象 
};

// 通過for循環(huán)添加事件, 使用this
var aInput = document.getElementsByTagName('input');
for (var i=0; i<aInput.length; i++) { 
        aInput[i].onclick = function() { 
                console.log(this.value);  //這里的this表示被點(diǎn)擊的那個(gè)input元素節(jié)點(diǎn)對象 
        };
}

• 練習(xí): 動(dòng)態(tài)表格的創(chuàng)建, 在輸入框中輸入內(nèi)容后,點(diǎn)擊保存則在表格末尾添加一條記錄, 點(diǎn)擊刪除則會(huì)刪除對應(yīng)行的記錄

  
  
  練習(xí).png

四炼团、事件

• 鼠標(biāo)事件

# 鼠標(biāo)事件澎嚣，頁面所有元素都可觸發(fā)鼠標(biāo)事件;

click： 當(dāng)單擊鼠標(biāo)按鈕并在松開時(shí)觸發(fā)
oBox.onclick = function() {
        console.log('單擊了鼠標(biāo)'); 
};

dblclick： 當(dāng)雙擊鼠標(biāo)按鈕時(shí)觸發(fā)。
oBox.ondblclick = function() {
        console.log('雙擊了鼠標(biāo)'); 
};

mousedown：當(dāng)按下了鼠標(biāo)還未松開時(shí)觸發(fā)瘟芝。 
oBox.onmousedown = function() {
        console.log('按下鼠標(biāo)'); 
};

mouseup： 釋放鼠標(biāo)按鈕時(shí)觸發(fā)易桃。 
oBox.onmouseup = function() {
        console.log('松開了鼠標(biāo)'); 
};

mousemove：當(dāng)鼠標(biāo)指針在某個(gè)元素上移動(dòng)時(shí)觸發(fā)。
oBox.onmousemove = function() {
        console.log('鼠標(biāo)移動(dòng)了'); 
};  

mouseenter/mouseover：當(dāng)鼠標(biāo)移入某個(gè)元素的那一刻觸發(fā)锌俱。
oBox.onmouseenter = function() {
        console.log('鼠標(biāo)移入了'); 
}; 

mouseleave/mouseout：當(dāng)鼠標(biāo)剛移出某個(gè)元素的那一刻觸發(fā)晤郑。 
oBox.onmouseleave = function() {
        console.log('鼠標(biāo)移出了'); 
};

• 鍵盤事件

#  鍵盤事件，在鍵盤上按下鍵時(shí)觸發(fā)的事件(一般由window對象或者document對象調(diào)用)

keydown：當(dāng)用戶按下鍵盤上某個(gè)鍵觸發(fā)贸宏，如果按住不放造寝，會(huì)重復(fù)觸發(fā)。
window.onkeydown = function() {
        console.log(按下了鍵盤上的某個(gè)鍵); 
};

keypress：當(dāng)用戶按下鍵盤上的字符鍵觸發(fā)吭练，如果按住不放匹舞，會(huì)重復(fù)觸發(fā)
window.onkeypress = function() { 
        console.log('按下了鍵盤上的字符鍵'); 
};

keyup：當(dāng)用戶釋放鍵盤上的某個(gè)鍵觸發(fā)。
window.onkeyup = function() {
        console.log('松開鍵盤上的某個(gè)鍵'); 
};

ev.keyCode 鍵碼

• HTML事件

# HTML事件线脚，跟HTML頁面相關(guān)的事件; 

load：當(dāng)頁面完全加載后觸發(fā)
window.onload = function() { 
        console.log('頁面已經(jīng)加載完畢'); 
};

unload：當(dāng)頁面完全卸載后觸發(fā)
window.onunload = function() { 
        console.log('頁面已經(jīng)卸載完畢'); 
};

select：當(dāng)用戶選擇文本框(input 或 textarea)中的內(nèi)容觸發(fā)。 
input.onselect = function() { 
        console.log('選擇了文本框中的內(nèi)容'); 
};

change：當(dāng)文本框(input 或 textarea)內(nèi)容改變且失去焦點(diǎn)后觸發(fā)叫榕。 
input.onchange = function() { 
        console.log('文本框中內(nèi)容改變了'); 
};

focus：當(dāng)頁面或者元素獲得焦點(diǎn)時(shí)觸發(fā)浑侥。 
input.onfocus = function() { 
        console.log('文本框獲得焦點(diǎn)'); 
};

blur：當(dāng)頁面或元素失去焦點(diǎn)時(shí)觸發(fā)。
input.onblur = function() { 
        console.log('文本框失去焦點(diǎn)'); 
};

submit：當(dāng)用戶點(diǎn)擊提交按鈕在<form>元素節(jié)點(diǎn)上觸發(fā)晰绎。
form.onsubmit = function() { 
        console.log('提交form表單');  
};

reset：當(dāng)用戶點(diǎn)擊重置按鈕在<form>元素節(jié)點(diǎn)上觸發(fā)寓落。 
form.onreset = function() { 
        console.log('重置form表單'); 
};

scroll：當(dāng)用戶滾動(dòng)帶滾動(dòng)條的元素時(shí)觸發(fā)。
window.onscroll= function() { 
        console.log('滾動(dòng)了滾動(dòng)條了'); 
};

• 案例

    有一塊空白區(qū)域,
    當(dāng)鼠標(biāo)移動(dòng)到區(qū)域內(nèi),顯示"親愛的, 我愛你",
    當(dāng)我鼠標(biāo)移開的時(shí)候,顯示"對不起, 開玩笑",
    當(dāng)我鼠標(biāo)不停的在區(qū)域內(nèi)移動(dòng)的時(shí)候, 變換隨機(jī)顏色(隨機(jī)十六進(jìn)制的顏色：#FFFFFF)

• 事件對象event
  通過事件的執(zhí)行函數(shù)傳入的event對象(事件對象) 不是在所有瀏覽器都有值, 在IE瀏覽器上event對象并沒有傳過來, 這里我們要用window.event來獲取, 而在火狐瀏覽器上window.event無法獲取, 而谷歌瀏覽器支持event事件傳參和window.event兩種, 為了兼容所有瀏覽器, 我們使用以下方式來得到event事件對象:

box.onclick = function(evt){ 
     var e= evt || window.event; //獲取到event對象(事件對象)
     console.log(e);
};

其中window.event中的window可以省略, 最終我們可以寫成: 
box.onclick = function(evt){ 
     var e= evt || event; //獲取到event對象(事件對象)
     console.log(e);
};

注意: evt || event不要倒過來寫

• 事件對象屬性

target: 返回觸發(fā)此事件的元素（事件的目標(biāo)節(jié)點(diǎn)）
clientX: 瀏覽器可視區(qū)域的x坐標(biāo)
clientY: 瀏覽器可視區(qū)域的y坐標(biāo)
screenX: 顯示器屏幕的x坐標(biāo)
screenY: 顯示器屏幕的y坐標(biāo)
offsetX: 鼠標(biāo)點(diǎn)擊的元素位置距離元素左邊界的x坐標(biāo)
offsetY: 鼠標(biāo)點(diǎn)擊的元素位置距離元素上邊界的y坐標(biāo)

• 案例(下拉菜單)
  1, 最開始效果如左圖1
  2, 鼠標(biāo)滑過”請選擇游戲名稱”區(qū)域時(shí),效果如圖2
  3, 鼠標(biāo)滑過下拉選項(xiàng)區(qū)域時(shí), 讓下拉選項(xiàng)可以繼續(xù)顯示,移開后隱藏
  4, 鼠標(biāo)在選項(xiàng)中滑過時(shí), 顯示效果圖3
  5, 選擇某一項(xiàng), 將頂部的名稱改成你選擇的游戲名稱

  
  
  下拉菜單效果

五荞下、事件冒泡

• 事件冒泡
  當(dāng)一個(gè)元素接收到事件以后伶选，會(huì)將接收到的事件傳遞給父級元素，一直傳遞給頂層window尖昏；可以利用事件冒泡仰税，可以減少事件的綁定，有利于性能優(yōu)化

注意: 事件傳遞給某個(gè)元素抽诉，并不一會(huì)觸發(fā)該事件陨簇；會(huì)不會(huì)觸發(fā)該事件，和你是否添加該事件有關(guān)迹淌；

事件冒泡

• 阻止事件冒泡

  非IE: ev.stopPropagation()
  IE: ev.cancelBubble = true;
  // 兼容寫法
  ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true;

• 事件冒泡的使用(擴(kuò)展)
  點(diǎn)擊單元格時(shí)河绽，可以編輯單元格的內(nèi)容己单，點(diǎn)擊表格以外即編輯完成。

  
  
  表格的編輯.png