BOM
BOM:Browser Object Modelhtml
BOM: 專門操做瀏覽器窗口/軟件的一套APInode
問題: 沒有標準瀏覽器
什麼時候: 但願操做瀏覽器窗口或讀取瀏覽器軟件的信息時緩存
一.
1.包括:window: 2個角色:
1). 代替ES中的global充當全局做用域對象服務器
2). 包含全部ES，DOM和BOM的APIcookie
又包括: history, location, document, navigator, screen, eventide
2.獲取窗口大小:
1).2組:函數
*). 完整的窗口大小: window.outerWidth優化
window.outerHeightthis
*). 文檔顯示區大小: window.innerWidth
window.innerHeight
3.打開和關閉窗口:
1). 打開窗口: window.open()
4種:
*). 在當前窗口打開，可後退:
html:<a href="url" target="_self">
js: open("url", "_self");
*). 在當前窗口打開，禁止後退:
js: location.replace("url")
*). 在新窗口打開，可打開多個:
html:<a href="url" target="_blank">
js: open("url", "_blank");
*). 在新窗口打開，只能打開一個:
html: <a href="url" target="自定義窗口名">
js:
原理: 瀏覽器內存中，每一個窗口都有一個惟一的窗口名
打開窗口時，也可經過target屬性，爲新窗口指定自定義的窗口名
瀏覽器規定同名的窗口只能打開一個。
後打開的同名窗口會自動將先打開的同名窗口覆蓋掉
內置窗口名:
_self: 自動獲取當前窗口本身的名字，做爲新窗口的名字。
_blank: 不指定窗口名，在運行時，瀏覽器會自動隨機分配窗口名。
關閉窗口: window.close()
4.history對象:
內存中保存當前窗口打開後，成功訪問過的url的歷史記錄棧
每成功訪問一個url，就會向history中push一個url記錄
什麼時候: 用程序模擬前進，後退或刷新時
如何: history.go(1) 前進一步
history.go(-1) 後退一步
history.go(-2) 後退兩步
history.go(0) 刷新
5. location對象:
1).保存當前窗口正在打開的url的對象
2).屬性: location.href 完整url
location.protocol 協議
location.host 主機名+端口號: 好比localhost:3000
location.hostname 主機名: 好比localhost
location.port 端口號: 3000
location.pathname 相對路徑
location.hash #錨點地址
location.search ?查詢字符串
3).方法:
*). 也可實如今當前窗口打開，可後退
location.assign("新url")和
location.href="新url"是一個意思倆種寫法
location="新url"
幾種方法都是同樣的
*). 實現禁止後退:
location.replace("新url")
原理: 用新url替換history中舊的url
4). 刷新: 2種:
*). 普通刷新: 優先從瀏覽器本地緩存中獲取資源。緩存中沒有或過時，纔去服務器下載新的。
F5
history.go(0)
location.reload()
*). 強制刷新: 跳過瀏覽器緩存，老是從服務器下載最新的資源
location.reload(true) true表示強迫
6.navigator對象:
保存瀏覽器配置信息的對象
1). 什麼時候: 只要想得到瀏覽器的配置信息時
2).包括:
*). cookieEnabled: 判斷當前瀏覽器是否啓用了cookie
什麼是cookie: 在客戶端本地持久保存用戶私密信息的小文件。
爲何: 程序中的數據，都是臨時的。程序退出後，都釋放。
什麼時候: 只要但願程序關閉，數據也不丟失時
*）. plugins: 保存瀏覽器安裝的全部插件信息的集合
plugin: 插件，爲瀏覽器提供新功能的小軟件
*）. userAgent: 保存瀏覽器名稱(browser)和版本號(version)的字符串
什麼時候: 只要判斷瀏覽器的名稱和版本號時
<!DOCTYPE HTML> <html> <head> <title>navigator對象經常使用屬性</title> <meta charset="utf-8" /> </head> <body> <script> if(navigator.cookieEnabled==true){ document.write("<h1>已啓用cookie，請妥善保存我的信息。</h1>") }else{ document.write("<h1>cookie已禁用，沒法記住密碼！</h1>") } //設置cookie: 打開Chrome右上角設置->高級->隱私...->內容管理->cookie->關閉第一項 if(navigator.plugins["Chrome PDF Plugin"]===undefined){ document.write(`<h1>未安裝PDF插件，<a href="#">點此下載</a></h1>`) }else{ document.write(`<h1>已安裝PDF插件！</h1>`) } //Edge瀏覽器 document.write(`<h1>${navigator.userAgent}</h1>`); var ua=navigator.userAgent; var browser, version; //若是ua中包含"Firefox" if(ua.indexOf("Firefox")!=-1){ browser="Firefox";//browser是Firefox }//不然若是ua中包含"IE"，則browser是IE else if(ua.indexOf("IE")!=-1){ browser="IE"; }//不然若是ua中包含"Trident" else if(ua.indexOf("Trident")!=-1){ //則browser是IE，且version是11 browser="IE",version=11; }//不然若是ua中包含"OPR"，則browser是OPR else if(ua.indexOf("OPR")!=-1){ browser="OPR"; }//不然若是ua中包含"Edge"，則browser是Edge else if(ua.indexOf("Edge")!=-1){ browser="Edge"; }//不然若是ua中包含"Chrome"，則browser是Chrome else if(ua.indexOf("Chrome")!=-1){ browser="Chrome"; }//不然若是ua中包含"Safari"，則browser是Safari else if(ua.indexOf("Safari")!=-1){ browser="Safari"; } document.write(`<h1>${browser}</h1>`); if(version===undefined){ //得到瀏覽器名稱第一個字符的位置 var i=ua.indexOf(browser); //跳過瀏覽器名稱的長度再+1，到達版本號開始的位置 i=i+browser.length+1; //從版本號開始位置向後截取3位，轉爲數字 version=parseFloat(ua.slice(i,i+3)); } document.write(`<h1>${version}</h1>`); </script> </body> </html>
7. 事件:
什麼是事件: 瀏覽器自動觸發的或人爲觸發的頁面內容狀態的改變
什麼是事件處理函數: 當事件發生時自動執行的函數
瀏覽器容許在事件發生以前，就提早爲一個元素的事件屬性綁定一個處理函數。
1）.綁定
如何綁定事件:
*). 在HTML中: <ANY on事件名="js語句">
當事件發生時，自動執行提早規定的js語句
*). 在js中綁定: 賦值方式
elem.on事件名=function(){
//this->當前觸發事件的.前的元素對象自己
}
問題: 一個事件屬性，只能綁定一個處理函數
*). 在js中綁定: 添加事件監聽對象的方式:
elem.addEventListener("事件名",處理函數)
事件監聽對象: 封裝一組:事件名+元素+處理函數的組合的對象
瀏覽器中包含一個巨大的事件監聽對象隊列
每添加一個監聽對象，都是加入到瀏覽器的監聽對象隊列中
如何查看事件監聽對象:
F12->Elements->選中元素->Event Listener->展開click
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>...</title> </head> <body> <button id="btnShoot">shoot</button><br> <button id="btnAward">得到跟蹤導彈</button><br> <button id="btnBreak">失去跟蹤導彈</button><br> <script> var btnShoot= document.getElementById("btnShoot"); var btnAward= document.getElementById("btnAward"); var btnBreak= document.getElementById("btnBreak"); //單擊btnShoot，發射普通子彈 btnShoot.addEventListener("click",function(){ console.log("發射普通子彈..."); }); function shoot2(){ alert("發射跟蹤導彈=>=>=>"); } //當單擊btnAward時 btnAward.onclick=function(){ //爲btnShoot的單擊事件再綁定第二種處理函數 btnShoot.addEventListener("click",shoot2) } //當單擊btnBreak時 btnBreak.onclick=function(){ //從btnShoot上移除發射導彈的處理函數 btnShoot.removeEventListener( "click",shoot2 ) } </script> </body> </html>
*).移除監聽對象:
elem.removeEventListener("事件名",原處理函數)
強調: 若是一個處理函數有可能被移除，則綁定時，就要用有名字的函數綁定。移除時才能使用函數名找到原處理函數。
2）.事件模型: 事件發生時到觸發完全部處理函數的執行過程
全部瀏覽器的開發者認爲，點在內層元素上，也等效於同時點在外層元素上。
點在d3同時觸發d1.d2
三個階段:
*）. 捕獲: 由外向內依次記錄各級父元素上的處理函數
只記錄，不執行
*). 目標觸發: 優先觸發目標元素上的處理函數
目標元素: 最初點擊的那個元素
*). 冒泡: 由內向外依次執行捕獲階段記錄的各級父元素上的處理函數
3).event對象:
什麼是事件對象: 當事件發生時，自動建立的保存事件信息和API的對象
什麼時候: 2種:
*). 若是要得到事件相關的信息時:
好比: 得到目標元素, 得到鼠標的位置
*). 若是但願改變事件的行爲時:
好比: 阻止冒泡
如何:
*). 得到事件對象: 事件對象老是自動做爲處理函數的第一個實參傳入。
event對象
↓
elem.on事件名=function( e ){
}
API:
*). 取消冒泡: e.stopPropagation()
*). 利用冒泡:
優化: 儘可能減小事件監聽的個數
爲何: 由於瀏覽器觸發事件時是採用遍歷監聽隊列的方式找到符合條件的監聽對象並執行處理函數。
監聽對象的個數，就決定了遍歷的速度。
如何: 當多個子元素須要綁定相同的事件時，其實只要在父元素上綁定一次便可。全部子元素經過冒泡共用！
兩個難題:
*）. 如何得到實際點擊的目標元素:
this不行: this->父元素
e.target -> 目標元素
*）. 鑑別目標元素是否想要的:
經過: class， 標籤名, ......
<!DOCTYPE HTML> <html> <head> <title>取消與利用冒泡</title> <meta charset="utf-8"/> </head> <body> <div id="keys"> <button>1</button> <button>2</button> <button>3</button> <button>4</button><br> <button>C</button> <button>+</button> <button>-</button> <button>=</button> </div> <textarea id="sc" style="resize:none;width:200px; height:50px;" readonly></textarea> <script> var keys=document.getElementById("keys"); //查找用於顯示的文本域元素 var sc=document.getElementById("sc"); keys.onclick=function(e){//e←event對象 var btn=e.target; //只有btn是button時，才執行後續任務 if(btn.nodeName=="BUTTON"){ alert(`我是 ${btn.innerHTML}`); switch(btn.innerHTML){//判斷btn的內容 case "="://若是btn的內容是= //就得到sc的內容，放入eval()中計算，並將計算結果放回sc的內容中 try{ sc.value=eval(sc.value); }catch(err){ sc.value="Error"; } break; case "C"://不然若是btn的內容是C sc.value="";//就清空sc的內容 break; default://其他 sc.value+=btn.innerHTML;//就將btn的內容追加到sc的內容中 } } } </script> </body> </html>
阻止默認行爲: e.preventDefault()
得到事件發生時，鼠標的位置:
事件座標 3組:
*）. 相對於顯示屏左上角: e.screenX, e.screenY
*）. 相對於文檔顯示區左上角: e.clientX, e.clientY
*）. 相對於事件發生的元素左上角: e.offsetX, e.offsetY
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>在當前顯示區範圍內實現點不到的小方塊</title> <style> div{position:fixed;width:100px;height:100px; background-image:url(images/xiaoxin.gif); background-size:100%; } </style> </head> <body> <div id="pop"></div> <script> var pop=document.getElementById("pop"); //定義開關變量，用於控制圖片是否跟隨鼠標移動 var canMove=false; //定義變量在開始拖拽時，就保存鼠標距div左上角的相對位置 var offsetX,offsetY; //當在pop上按下鼠標時 pop.onmousedown=function(e){ canMove=true;//能夠開始拖拽 //開始拖拽時，馬上得到鼠標距圖片左上角的相對位置 offsetX=e.offsetX; offsetY=e.offsetY; } //當鼠標在窗口中移動時 window.onmousemove=function(e){ //只有當pop能夠移動時 if(canMove==true){ //才讓pop跟隨鼠標移動 //求pop的top和left var left=e.clientX-offsetX; var top=e.clientY-offsetY; //設置pop的top和left屬性: pop.style.left=left+"px"; pop.style.top=top+"px"; } } //當在pop上擡起鼠標按鍵時 pop.onmouseup=function(){ canMove=false;//中止拖拽 } </script> </body> </html>
-
每一个你不满意的现在，都有一个你没有努力的曾经。