1|0前戲
到目前爲止，咱們已經學過了JavaScript的一些簡單的語法。可是這些簡單的語法，並無和瀏覽器有任何交互。html
也就是咱們還不能製做一些咱們常常看到的網頁的一些交互，咱們須要繼續學習BOM和DOM相關知識。node
JavaScript分爲 ECMAScript，DOM，BOM。瀏覽器
BOM（Browser Object Model）是指瀏覽器對象模型，它使 JavaScript 有能力與瀏覽器進行「對話」。app
DOM （Document Object Model）是指文檔對象模型，經過它，能夠訪問HTML文檔的全部元素。框架
Window對象是客戶端JavaScript最高層對象之一，因爲window對象是其它大部分對象的共同祖先，在調用window對象的方法和屬性時，能夠省略window對象的引用。例如：window.document.write()能夠簡寫成：document.write()。dom
1|1window對象
全部瀏覽器都支持 window 對象。它表示瀏覽器窗口。ide
*若是文檔包含框架（frame 或 iframe 標籤），瀏覽器會爲 HTML 文檔建立一個 window 對象，併爲每一個框架建立一個額外的 window 對象。函數
*沒有應用於 window 對象的公開標準，不過全部瀏覽器都支持該對象。post
全部 JavaScript 全局對象、函數以及變量均自動成爲 window 對象的成員。學習
全局變量是 window 對象的屬性。全局函數是 window 對象的方法。
接下來要講的HTML DOM 的 document 也是 window 對象的屬性之一。
一些經常使用的Window方法：
- window.innerHeight - 瀏覽器窗口的內部高度
- window.innerWidth - 瀏覽器窗口的內部寬度
- window.open() - 打開新窗口
- window.close() - 關閉當前窗口
1|2window的子對象
navigator對象（瞭解便可）
瀏覽器對象，經過這個對象能夠斷定用戶所使用的瀏覽器，包含了瀏覽器相關信息。
screen對象（瞭解便可）
屏幕對象，不經常使用。
一些屬性：
- screen.availWidth - 可用的屏幕寬度
- screen.availHeight - 可用的屏幕高度
history對象（瞭解便可）
window.history 對象包含瀏覽器的歷史。
瀏覽歷史對象，包含了用戶對當前頁面的瀏覽歷史，但咱們沒法查看具體的地址，能夠簡單的用來前進或後退一個頁面。
location對象
window.location 對象用於得到當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面。
經常使用屬性和方法：
彈出框
能夠在 JavaScript 中建立三種消息框：警告框、確認框、提示框。
警告框
警告框常常用於確保用戶能夠獲得某些信息。
當警告框出現後，用戶須要點擊肯定按鈕才能繼續進行操做。
語法：
確認框（瞭解便可）
確認框用於使用戶能夠驗證或者接受某些信息。
當確認框出現後，用戶須要點擊肯定或者取消按鈕才能繼續進行操做。
若是用戶點擊確認，那麼返回值爲 true。若是用戶點擊取消，那麼返回值爲 false。
語法：
提示框（瞭解便可）
提示框常常用於提示用戶在進入頁面前輸入某個值。
當提示框出現後，用戶須要輸入某個值，而後點擊確認或取消按鈕才能繼續操縱。
若是用戶點擊確認，那麼返回值爲輸入的值。若是用戶點擊取消，那麼返回值爲 null。
語法：
計時相關
經過使用 JavaScript，咱們能夠在必定時間間隔以後來執行代碼，而不是在函數被調用後當即執行。咱們稱之爲計時事件。
setTimeout()
語法：
setTimeout() 方法會返回某個值。在上面的語句中，值被儲存在名爲 t 的變量中。假如你但願取消這個 setTimeout()，你可使用這個變量名來指定它。
setTimeout() 的第一個參數是含有 JavaScript 語句的字符串。這個語句可能諸如 "alert('5 seconds!')"，或者對函數的調用，諸如 alertMsg()"。
第二個參數指示從當前起多少毫秒後執行第一個參數（1000 毫秒等於一秒）。
clearTimeout()
語法：
舉個例子：
setInterval()
setInterval() 方法可按照指定的週期（以毫秒計）來調用函數或計算表達式。
setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用做 clearInterval() 方法的參數。
語法：
返回值
一個能夠傳遞給 Window.clearInterval() 從而取消對 code 的週期性執行的值。
clearInterval()
clearInterval() 方法可取消由 setInterval() 設置的 timeout。
clearInterval() 方法的參數必須是由 setInterval() 返回的 ID 值。
語法：
舉個例子：
2|0DOM
DOM（Document Object Model）是一套對文檔的內容進行抽象和概念化的方法。
當網頁被加載時，瀏覽器會建立頁面的文檔對象模型（Document Object Model）。
HTML DOM 模型被構造爲對象的樹。
2|1HTML DOM 樹
DOM標準規定HTML文檔中的每一個成分都是一個節點(node)：
- 文檔節點(document對象)：表明整個文檔
- 元素節點(element 對象)：表明一個元素（標籤）
- 文本節點(text對象)：表明元素（標籤）中的文本
- 屬性節點(attribute對象)：表明一個屬性，元素（標籤）纔有屬性
- 註釋是註釋節點(comment對象)
JavaScript 能夠經過DOM建立動態的 HTML：
- JavaScript 可以改變頁面中的全部 HTML 元素
- JavaScript 可以改變頁面中的全部 HTML 屬性
- JavaScript 可以改變頁面中的全部 CSS 樣式
- JavaScript 可以對頁面中的全部事件作出反應
2|2查找標籤
直接查找
注意：
涉及到DOM操做的JS代碼應該放在文檔的哪一個位置。
間接查找
2|3節點操做
建立節點
語法：
createElement(標籤名)
示例：
添加節點
語法：
追加一個子節點（做爲最後的子節點）
somenode.appendChild(newnode)；
把增長的節點放到某個節點的前邊。
somenode.insertBefore(newnode,某個節點);
示例：
刪除節點：
語法：
得到要刪除的元素，經過父元素調用該方法刪除。
somenode.removeChild(要刪除的節點)
替換節點：
語法：
somenode.replaceChild(newnode, 某個節點);
屬性節點
獲取文本節點的值：
設置文本節點的值：
attribute操做
獲取值操做
語法：
elementNode.value
適用於如下標籤：
- .input
- .select
- .textarea
class的操做
指定CSS操做
JS操做CSS屬性的規律：
1.對於沒有中橫線的CSS屬性通常直接使用style.屬性名便可。如：
2.對含有中橫線的CSS屬性，將中橫線後面的第一個字母換成大寫便可。如：
2|4事件
HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動做（action），好比當用戶點擊某個 HTML 元素時啓動一段 JavaScript。下面是一個屬性列表，這些屬性可插入 HTML 標籤來定義事件動做。
經常使用事件
綁定方式：
方式一：
注意：
this是實參，表示觸發事件的當前元素。
函數定義過程當中的ths爲形參。
方式二：
事件示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<input type="text" id="i1">
<button id="b1">開始</button>
<button id="b2">結束</button>
<script>
var t;
function showTime() {
var i1Ele = document.getElementById('i1');
var time = new Date();
i1Ele.value = time.toLocaleString();
}
showTime();
var b1Ele = document.getElementById('b1');
b1Ele.onclick = function (ev) {
if (!t){
t = setInterval(showTime,1000)
}
};
var b2Ele = document.getElementById('b2');
b2Ele.onclick = function (ev) {
clearInterval(t);
t = undefined
};
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索框示例</title>
</head>
<body>
<input id="d1" type="text" value="請輸入關鍵字" onblur="blur()" onfocus="focus()">
<script>
function focus(){
var inputEle=document.getElementById("d1");
if (inputEle.value==="請輸入關鍵字"){
inputEle.value="";
}
}
function blur(){
var inputEle=document.getElementById("d1");
var val=inputEle.value;
if(!val.trim()){
inputEle.value="請輸入關鍵字";
}
}
</script>
</body>
</html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>select聯動</title> </head> <body> <select id="province"> <option>請選擇省:</option> </select> <select id="city"> <option>請選擇市:</option> </select> <script> data = {"河北省": ["廊坊", "邯鄲"], "北京": ["朝陽區", "海淀區"], "山東": ["威海市", "煙臺市"]}; var p = document.getElementById("province"); var c = document.getElementById("city"); for (var i in data) { var optionP = document.createElement("option"); optionP.innerHTML = i; p.appendChild(optionP); } p.onchange = function () { var pro = (this.options[this.selectedIndex]).innerHTML; var citys = data[pro]; // 清空option c.innerHTML = ""; for (var i=0;i<citys.length;i++) { var option_city = document.createElement("option"); option_city.innerHTML = citys[i]; c.appendChild(option_city); } } </script> </body> </html>
2|5window.onload
當咱們給頁面上的元素綁定事件的時候，必須等到文檔加載完畢。由於咱們沒法給一個不存在的元素綁定事件。
window.onload事件在文件加載過程結束的時候觸發。此時，文檔中的全部對象都位於DOM中，而且全部圖像，腳本，連接和子框架都已完成加載。
注意：.onload()函數存在覆蓋現象。