[TOC] js BOM(瀏覽器對象模型) 由上圖可知，window對象是 BOM 的核心對象，所有對象都是通過它延伸出來的，也可以稱為window的子對象。 DOM是BOM的一部分 window對象 所有瀏覽器都支持window對象，它表示瀏覽器的介面。 常用window方法 :：瀏覽器視窗的內部 ...
目錄
js
BOM(瀏覽器對象模型)
- 由上圖可知，window對象是BOM的核心對象，所有對象都是通過它延伸出來的，也可以稱為window的子對象。
- DOM是BOM的一部分
window對象
所有瀏覽器都支持window對象，它表示瀏覽器的介面。
常用window方法
window.innerHeight:：瀏覽器視窗的內部高度window.innerWidth：瀏覽器視窗的內部寬度window.open：打開新視窗window.close：關閉當前視窗
window子對象
navigator對象
navigator.appName // Web瀏覽器全稱
navigator.appVersion // 文本瀏覽器廠商和版本的詳細字元串
navigator.userAgent // 客戶端絕大部分信息
navigator.platform // 瀏覽器運行的操作系統開頭window可不寫，BOM預設window開頭
screen對象
screen.avallWidth // 可用的屏幕寬度
screen.avallHeight // 可用的屏幕高度history對象
window.history 對象包含瀏覽器的歷史，瀏覽歷史對象
history.forward() // 前進一頁
history.back() // 後退一頁location對象
location.href // 獲取URL
location.href="URL" // 跳轉到指定頁面
location.reload // 重新載入頁面彈出框
可以在js中創建三種消息框，分別是：警告框確認框和提示框
警告框
用於確保用戶可以得到某些信息
當警告框出現時，用戶需要點擊確定按鈕才能繼續操作
例：
alert("hello world");
確認框
用於使用戶可以驗證或者接受某些信息
當確認框出現時，用戶需要點擊確定或者取消按鈕才能繼續操作
confirm("Are you sure")
提示框
用於提示用戶進入頁面前輸入某個值
當提示框出現時，用戶需要輸入某個值，用戶需要點擊確定或者取消按鈕才能繼續操作
如果用戶點擊確認，那麼返回值為輸入的值，如果用戶點擊取消，那麼返回的值為null
prompt("請輸入"，"答案")
計時事件
setTimeout(定時器，非同步運行)
var t = setTimeout('js語句','毫秒')
setInterval(實時刷新)
// 在指定時間之後執行一次相應函數
var t = setInterval('js語句',毫秒)註意：如果要求在每隔一個固定的時間間隔後就精確地執行某動作，最好使用setInterval；如果不想連續調用產生互相干擾的問題，而且需要進行複雜計算的時候，推薦使用setTimeout
DOM(文檔對象模型)
DOM是一套對文檔內容進行結構化展示，並讓js操作html元素而制定的一個規範
由上圖可知，DOM規定html文檔的每個成分都是一個節點
- 文檔節點(
document對象)：代表整個文檔 - 元素節點(
element對象)：代表一個元素(標簽) - 屬性節點(
attribute對象)：代表一個屬性
查找標簽
直接查找
document.getElementById 根據ID獲取一個標簽
document.getElementsByClassName 根據class屬性獲取
document.getElementsByName 根據標簽名獲取標簽合集間接查找
parentElement 父節點標簽元素節點操作
創建節點
createElement(標簽名)
var divEle = document.createElement("div")插入節點
//追加一個子節點(作為最後的子節點)
somenode.appendChild(newnode)
//把增加的節點放到某個節點的前邊
somenode.insertBefore(newnode,某個節點)
例：
var imgEle = document.createElement("img");
imgEle.setAttribute("src", https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1906254523,3408854892&fm=26&gp=0.jpg);
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);
刪除節點
獲得要刪除的元素，通過父元素調用該方法刪除
somenode.removeChild(要刪除的節點)
替換節點
somenode.replaceChild(newnode,某個節點)
屬性節點
獲取文本節點的值
var divEle = document.getElementById('d1')
diveEle.innerText
divEle.innerHTML設置文本節點的值
var divEle = document.getElementById('d1')
diveEle.innerText='<p>1<p>'
divEle.innerHTML='<p>2<p>'註意：
diveEle.innerText設置文本節點值只會把代碼寫出來，無法識別js代碼，而divEle.innerHTML可以做到
attribute操作
var divEle = document.getElementById('d1');
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")
// 自帶的屬性還可以直接.屬性名來獲取和設置
imgEle.src
imgEle.src="..."事件
JS是以事件驅動為核心的一門語言
常用事件
onclick 當用戶點擊某個對象時調用的事件句柄。
ondblclick 當用戶雙擊某個對象時調用的事件句柄。
onfocus 元素獲得焦點。 // 練習：輸入框
onblur 元素失去焦點。 應用場景：用於表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.
onchange 域的內容被改變。 應用場景：通常用於表單元素,當元素內容被改變時觸發.（select聯動）
onkeydown 某個鍵盤按鍵被按下。 應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress 某個鍵盤按鍵被按下並鬆開。
onkeyup 某個鍵盤按鍵被鬆開。
onload 一張頁面或一幅圖像完成載入。
onmousedown 滑鼠按鈕被按下。
onmousemove 滑鼠被移動。
onmouseout 滑鼠從某元素移開。
onmouseover 滑鼠移到某元素之上。
onselect 在文本框中的文本被選中時發生。
onsubmit 確認按鈕被點擊，使用的對象是form。綁定方式
方式一
<div id='d1' onclick='changecolor(this);'>Click Me
<script>
function changecolor(ths) {
ths.style.background-color='green'
}
</script>
</div>註意：
this是實參，表示觸發事件的當前元素
函數定義過程中的ths為形參
方式二：
<div id='d2'>Click Me
<script>
var divEle2 = document.getElementById('d2')
divEle2.onclick=function() {
this.innerText='啊~'
}
</script>
</div>jQuery
jQuery介紹
1.jQuery是一個輕量級的，可相容多瀏覽器的JavaScript庫
2.jQuery是用戶能更方便地處理HTML Document、Events、實現動畫效果、方便與Ajax交互，能夠極大的簡化JavaScript編程。
jQuery的優勢
1.jQuery核心的js文件才幾十kb，不會影響頁面的載入
2.有豐富的jQuery選擇器，用起來非常方便
3.可進行鏈式操作，jQuery可以把多個操作寫在一個代碼里，更加簡潔
4.事件、樣式、動畫支持，jQuery簡化了js操作css的代碼
5.Ajax操作支持
6.跨瀏覽器相容
7.插件擴展開發
