1、BOM和DOM
JavaScript分爲 ECMAScript，DOM，BOM。
BOM（Browser Object Model）是指瀏覽器對象模型，它使 JavaScript 有能力與瀏覽器進行「對話」。
DOM （Document Object Model）是指文檔對象模型，經過它，能夠訪問HTML文檔的全部元素。
2、window對象
全部瀏覽器都支持 window 對象。它表示瀏覽器窗口。
若是文檔包含框架（frame 或 iframe 標籤），瀏覽器會爲 HTML 文檔建立一個 window 對象，併爲每一個框架建立一個額外的 window 對象。
沒有應用於 window 對象的公開標準，不過全部瀏覽器都支持該對象。
全部 JavaScript 全局對象、函數以及變量均自動成爲 window 對象的成員。
全局變量是 window 對象的屬性。全局函數是 window 對象的方法。
HTML DOM 的 document 也是 window 對象的屬性之一。
一些經常使用的Window方法：
window.innerHeight - 瀏覽器窗口的內部高度
window.innerWidth - 瀏覽器窗口的內部寬度
window.open() - 打開新窗口
window.close() - 關閉當前窗口
3、window的子對象(BOM)
注意：
Window對象是客戶端JavaScript最高層對象之一，因爲window對象是其它大部分對象的共同祖先，在調用window對象的方法和屬性時，能夠省略window對象的引用。
例如：window.document.write()能夠簡寫成：document.write()。
一、location對象(重)
window.location 對象用於得到當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面
window.location.href 能夠寫成：location.href // 獲取URL
location.href="URL" // 跳轉到指定頁面
location.reload() // 從新加載頁面
二、計時相關(重)
設定一個時間間隔，在必定時間間隔以後再來執行JS代碼，就是計時事件
1.setTimeout()
語法：
var t = setTimeout("JS語句",毫秒)
解析：
setTimeout() 方法會返回某個值，這個值是你執行當前setTimeout代碼的任務編號(任務id，第幾個任務)，把這個值儲在一個變量中。
當你想取消這個setTimeout()任務時，就可使用這個變量來指定取消它。
setTimeout() 的第一個參數是含有JavaScript 語句的字符串，如 setTimeout("alert('I Love U')", 3000 )，也能夠是函數名，若是是函數名則不須要雙引號，如setTimeout(f, 3000 )，
還能夠是匿名函數，如 setTimeout(function(){alert('I Love U')}, 3000 )，
第二個參數是指從當前起多少毫秒後執行第一個參數（1000 毫秒等於一秒）
例如：
JS語句：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title></title>
<script>
setTimeout("alert('I Love U')", 3000 )
</script>
</head>
<body>
<p>請靜候三秒</p>
</body>
</html>
函數名：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title></title>
<script>
function f(){
alert('I Love U')
}
setTimeout(f, 3000 )
</script>
</head>
<body>
<p>請靜候三秒</p>
</body>
</html>
setTimeout
2.clearTimeout()
語法：
clearTimeout(setTimeout_variable)
例子：
// 在指定時間以後執行一次相應函數
var tid = setTimeout(function(){alert('hello world');}, 2000)
// 取消setTimeout設置
clearTimeout(tid);
3.setInterval()
setInterval() 方法可按照指定的週期來調用函數或計算表達式。
setInterval() 方法會無限循環調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用做 clearInterval() 方法的參數。
語法：
setInterval("JS語句",時間間隔)
返回值：
一個能夠傳遞給 Window.clearInterval() 從而取消setInterval的週期性執行
4.clearInterval()
clearInterval() 方法可取消由 setInterval() 設置的 timeout。
clearInterval() 方法的參數必須是由 setInterval() 返回的 ID 值。
語法：
clearInterval(setinterval返回的ID值)
例子：
// 每隔一段時間就執行一次相應函數
var tid = setInterval(function(){console.log('hello world!');}, 2000)
// 取消setInterval設置
clearInterval(tid);
三、navigator對象
瀏覽器對象，經過這個對象能夠斷定用戶所使用的瀏覽器，包含了瀏覽器相關信息。
navigator.appName // Web瀏覽器全稱
navigator.appVersion // Web瀏覽器廠商和版本的詳細字符串
navigator.userAgent // 客戶端絕大部分信息
navigator.platform // 瀏覽器運行所在的操做系統
四、screen對象
屏幕對象，不經常使用
屬性：
screen.availWidth - 可用的屏幕寬度
screen.availHeight - 可用的屏幕高度
五、history對象
window.history 對象包含瀏覽器的歷史。
瀏覽歷史對象，包含了用戶對當前頁面的瀏覽歷史，但咱們沒法查看具體的地址，能夠簡單的用來前進或後退一個頁面。
history.forward() // 前進一頁
history.back() // 後退一頁
六、彈出框
能夠在 JavaScript 中建立三種消息框：警告框、確認框、提示框。
1.警告框
警告框常常用於確保用戶能夠獲得某些信息。
當警告框出現後，用戶須要點擊肯定按鈕才能繼續進行操做。
語法：
alert("警告信息");
2.確認框
確認框用於使用戶能夠驗證或者接受某些信息。
當確認框出現後，用戶須要點擊肯定或者取消按鈕才能繼續進行操做。
若是用戶點擊確認，那麼返回值爲 true。若是用戶點擊取消，那麼返回值爲 false。
語法：
confirm("你肯定嗎？")
3.提示框
提示框常常用於提示用戶在進入頁面前輸入某個值。
當提示框出現後，用戶須要輸入某個值，而後點擊確認或取消按鈕才能繼續操縱。
若是用戶點擊確認，那麼返回值爲輸入的值。若是用戶點擊取消，那麼返回值爲 null。
語法：
prompt("請輸入","答案")
4、DOM
DOM（Document Object Model）是一套對文檔的內容進行抽象和概念化的方法。
當網頁被加載時，瀏覽器會建立頁面的文檔對象模型（Document Object Model）。
HTML DOM 模型被構造爲對象的樹
5、HTML DOM 樹
圖：DOM樹
DOM標準規定HTML文檔中的每一個成分都是一個節點(node)：
文檔節點(document對象)：表明整個文檔
元素節點(element 對象)：表明一個元素（標籤）
文本節點(text對象)：表明元素（標籤）中的文本
屬性節點(attribute對象)：表明一個屬性，元素（標籤）纔有屬性
註釋是註釋節點(comment對象)
JavaScript 能夠經過DOM建立動態的 HTML：
JavaScript 可以改變頁面中的全部 HTML 元素
JavaScript 可以改變頁面中的全部 HTML 屬性
JavaScript 可以改變頁面中的全部 CSS 樣式
JavaScript 可以對頁面中的全部事件作出反應
6、查找標籤
一、直接查找
document.getElementById 根據ID獲取一個標籤
document.getElementsByClassName 根據class屬性獲取
document.getElementsByTagName 根據標籤名獲取標籤合集
注意：找ID的時候，ID是惟一的，因此getElement 沒有s,而其餘的都有s
二、間接查找
parentElement 父節點標籤元素
children 全部子標籤
firstElementChild 第一個子標籤元素
lastElementChild 最後一個子標籤元素
nextElementSibling 下一個兄弟標籤元素
previousElementSibling 上一個兄弟標籤元素
三、例子
注意：返回數組的那些查找方式，能夠經過索引取出具體的某個標籤
// 找到ID爲d1的節點(元素)
var divEle = document.getElementById('d1');
// ID爲d1的節點的父節點
divEle.parentElement;
// ID爲d1的節點的全部子節點(返回一個包含全部子節點的數組)
dEle.children;
dEle.children[0]; // 取出第一個元素
// ID爲d1的節點的第一個子節點
dEle.firstElementChild;
// ID爲d1的節點的最後一個子節點
dEle.lastElementChild;
// ID爲d1的節點的下一個兄弟節點
dEle.nextElementSibling;
//ID爲d1的節點的上一個兄弟節點
dEle.previousElementSibling;
7、節點操做(增刪改的節點都是子節點，是要基於父節點進行的)
一、建立節點
語法：
document.createElement("標籤名")
示例：
var pEle = document.createElement("p");
二、添加節點(子節點)
追加一個子節點（做爲最後的子節點）
somenode.appendChild(newnode)；
把增長的節點放到某個節點的前邊。
somenode.insertBefore(newnode,某個節點);
示例1：
//建立節點
var pEle = document.createElement("p");
//先找一個父節點
var dEle = document.getElementById("d");
//把子節點追加到父節點
dEle.appendChild(pEle);
示例2：
//建立節點
var pEle = document.createElement("p");
//先找一個父節點
var dEle = document.getElementById("d");
//父節點裏面的某個節點
var d1 = document.getElementById('d1');
//把子節點放到d1這個節點前面
dEle.insertBefore(pEle,d1);
三、刪除節點
語法：
得到要刪除的元素，經過父元素調用該方法刪除
somenode.removeChild(要刪除的節點)
示例：
//先找一個父節點
var dEle = document.getElementById("d");
//找到父節點裏面想要刪除的子節點
var d1 = document.getElementById('d1');
//刪除子節點
dEle.removeChild(d1);
四、替換節點
語法：
somenode.replaceChild(newnode, 某個節點);
示例：
//建立節點
var pEle = document.createElement("p");
//先找一個父節點
var dEle = document.getElementById("d");
//父節點裏面的某個節點
var d1 = document.getElementById('d1');
//用新建的節點替換d1
dEle.replaceChild(pEle,d1);
五、屬性節點
1.獲取文本節點的值：
//獲取某個節點
var dEle = document.getElementById("d");
//獲取某個節點的Text文本內容
dEle.innerText;
//獲取某個節點的HTML內容
dEle.innerHTML;
注意：Text文本內容是不認識標籤的，即不認識div、span等標籤的，而HTML是認識標籤的。
2.設置文本節點的值：
//獲取某個節點
var dEle = document.getElementById("d");
//設置某個節點的Text文本內容
dEle.innerText = "Hello World!";
//設置某個節點的HTML內容
dEle.innerHTML = "<div>Hello World!</div>";
3.屬性(attribute)操做
語法：
爲某節點增長一個屬性
somenode.setAttribute("屬性名","值");
獲取這個屬性值
somenode.getAttribute("屬性名");
刪除屬性
somenode.removeAttribute("屬性名");
示例：
var dEle = document.getElementById("d");
dEle.setAttribute("name","dd")
dEle.getAttribute("name")
dEle.removeAttribute("name")
// 自帶的屬性還能夠直接.屬性名來獲取和設置
imgEle.src
imgEle.src="..."
六、獲取值操做
語法：
elementNode.value
適用於如下標籤： input select textarea
示例：
//input的值
var inputEle = document.getElementById("i");
console.log(inputEle.value);
//select的值
var sEle = document.getElementById("s");
console.log(sEle.value);
//textarea的值
var tEle = document.getElementById("t");
console.log(tEle.value);
七、class的操做
somenode.className 獲取全部樣式類名(字符串)
somenode.classList 獲取全部樣式類名(數組)
somenode.classList.remove("cls") 刪除指定類
somenode.classList.add("cls") 添加類
somenode.classList.contains("cls") 存在返回true，不然返回false
somenode.classList.toggle("cls") 存在就刪除(返回false)，不存在則添加(返回true)
示例：
HTML代碼：
<div class="c1 c2" id="d1"></div>
//找到ID爲d1這個節點
var divEle = document.getElementById("d1");
//獲取這個節點的class樣式名
divEle.className; // "c1 c2"
//獲取這個節點的class樣式名
divEle.classList; // ["c1", "c2", value: "c1 c2"]
// 刪除c2這個樣式
divEle.classList.remove("c2");
// 增長c3這個樣式
divEle.classList.add("c3");
// 判斷c3這個樣式是否存在
divEle.classList.contains("c3"); // true
//c3存在，因此刪除這個樣式
divEle.classList.toggle("c3");
八、指定CSS操做
JS操做CSS屬性的規律
1.對於沒有中橫線的CSS屬性通常直接使用style.屬性名便可。如：
somenode.style.margin
somenode.style.width
somenode.style.left
somenode.style.position
2.對含有中橫線的CSS屬性，將中橫線後面的第一個字母換成大寫便可。
如：CSS中的margin-top、background-color、z-index、font-family等
somenode.style.marginTop
somenode.style.backgroundColor
somenode.style.zIndex
somenode.style.fontFamily
示例：
var divEle = document.getElementById("d1");
divEle.style.backgroundColor = "red";
九、注意事項
用document.getElementById找到的標籤是惟一的，由於ID是惟一的，因此用ID找到的標籤能夠直接使用DOM的方法操做，
而用document.getElementsByClassName或者document.getElementsByTagName找到的標籤不是惟一的，
由於class類和標籤名是能夠重複使用的，因此使用的時候要寫索引代表是對哪一個標籤進行操做。
而在jQuery中，類選擇器選擇到的全部類，能夠直接進行操做，即一次性對選擇到的類進行操做，若是想要單獨對某個類進行操做，
則須要使用篩選器進行篩選
jQuery中
<!--HTML代碼 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li class="c1" style="color: deeppink;">1</li>
<li class="c1">2</li>
<li id="l3" class="c1">3</li>
<li class="c1">4</li>
<li class="c1">5</li>
</ul>
</body>
</html>
HTML代碼
//使用class改變樣式
var liEle = document.getElementsByClassName("c1");
liEle[2].style.color = "red";
//使用ID改變樣式
var liEle2 = document.getElementById("l3");
liEle2.style.color = "green";
示例
8、事件
一、經常使用事件
onclick 當用戶點擊某個對象時調用的事件句柄。
ondblclick 當用戶雙擊某個對象時調用的事件句柄。(double簡寫dbl)
onfocus 元素得到焦點。 輸入框
onblur 元素失去焦點。 應用場景：用於表單驗證,用戶離開某個輸入框時,表明已經輸入完了,咱們能夠對它進行驗證.
onchange 域的內容被改變。 應用場景：一般用於表單元素,當元素內容被改變時觸發.（select聯動）
onkeydown 某個鍵盤按鍵被按下。 應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress 某個鍵盤按鍵被按下並鬆開。
onkeyup 某個鍵盤按鍵被鬆開。
onload 一張頁面或一幅圖像完成加載。
onmousedown 鼠標按鈕被按下。
onmousemove 鼠標被移動。
onmouseout 鼠標從某元素移開。
onmouseover 鼠標移到某元素之上。
onselect 在文本框中的文本被選中時發生。
onsubmit 確認按鈕被點擊，使用的對象是form。
二、 綁定方式
方式一：在標籤中寫屬性的方式綁定
<div id="d1" onclick="changeColor(this);">點我改變背景顏色</div>
<script>
function changeColor(ths) {
ths.style.backgroundColor="green";
}
</script>
注意：
this是實參，表示觸發事件的當前元素。
函數定義過程當中的ths爲形參。
方式二：經過JS代碼綁定
<div id="d2">點我有驚喜</div>
<script>
var divEle = document.getElementById("d2");
divEle.onclick=function () {
alert("驚不驚喜，刺不刺激！");
}
</script>
三、示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="i1">
<input type="button" id="start" value="開始">
<button type="button" id="stop" value="中止">中止</button>
<!--<input type="button" id="stop" value="中止">-->
<script>
// 把當前時間顯示到i1標籤中
function setTime() {
// 1. 找到標籤
var i1Ele = document.getElementById('i1');
// 2. 拿到當前時間
var now = new Date();
// 3. 設置i1標籤的value屬性爲now時間
i1Ele.setAttribute('value', now.toLocaleString())
}
setTime();
// 定義一個存放計時器id的全局變量
var t;
// 點擊開始按鈕，讓i1標籤中的時間動起來
// 1. 找到開始按鈕,綁定點擊事件
var startBtn = document.getElementById('start');
startBtn.onclick = function () {
// 要作的事兒
if (t === undefined) {
// 一秒鐘執行一次設置value的動做
t = setInterval(setTime, 1000);
}
};
// 點擊結束按鈕，終止設置時間的定時任務
// 1. 找到結束按鈕，綁定點擊事件
var stopBtn = document.getElementById('stop');
stopBtn.onclick = function () {
// 要作的事兒
// 清除上面的定時器
clearInterval(t);
t = undefined;
}
</script>
</body>
</html>
計時器示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索框示例</title>
<script type="text/javascript">
function foo() {
var inputEle = document.getElementById("i1");
inputEle.setAttribute('value', '');
}
function foo1() {
var inputEle = document.getElementById("i1");
inputEle.setAttribute('value', '請輸入關鍵字');
}
</script>
</head>
<body>
<div>
<!--方式一：在在標籤中寫屬性的方式綁定-->
<input type="text" id="i1" value="請輸入關鍵字" onfocus="foo()" onblur="foo1()">
<input type="button" value="搜索">
</div>
<!--方式二：經過JS代碼綁定-->
<input type="text" id="i2" value="請輸入關鍵字">
<input type="button" value="搜索">
<script type="text/javascript">
var inputEle2 = document.getElementById('i2');
inputEle2.onfocus = function () {
inputEle2.setAttribute('value','');
}
inputEle2.onblur = function () {
this.setAttribute('value','請輸入關鍵字');
}
</script>
</body>
</html>
搜索框示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select id="s1">
<option>請選擇省</option>
</select>
<select id="s2">
</select>
<script>
var data = {"廣東省": ["廣州市", "深圳市", "惠州"], "北京": ["朝陽區", "海淀區"], "山東": ["威海市", "煙臺市"]};
var s1Ele = document.getElementById('s1');
var s2Ele = document.getElementById('s2');
// 頁面一刷新把全部的省加載到第一個select標籤中
for (var i in data) {
console.log(i);
// 建立一個option標籤
var op = document.createElement('option');
// 設置文本
op.innerText = i;
// 把建立好的標籤追加到第一個select標籤內部
s1Ele.appendChild(op);
}
// 給第一個select標籤綁定一個值發生變化的事件
s1Ele.onchange = function () {
// 0. 獲取當前select選中的值
var value = s1Ele.value;
// 1. 去data裏找到對應的地區信息
var data2 = data[value];
// 2. 清空第二個select標籤的option選項
s2Ele.innerText = '';
// 3. 把對應的地區信息追加到第二個select標籤內部
for (var j=0;j<data2.length;j++) {
// 建立一個option標籤
var op = document.createElement('option');
// 設置文本
op.innerText = data2[j];
// 把建立好的標籤添加到第二個select標籤內部
s2Ele.appendChild(op);
}
}
</script>
</body>
</html>
select聯動示例