BOM 概述
1. BOM（瀏覽器模型）
Browser Object Moder
瀏覽器對象模型
- 什么是BOM 脏榆？
- BOM 是JS 的組成之一，
- 事項和HTML 的交互
- BOM 中提供了非常對的對象泽谨，用于訪問瀏覽器的
- 功能兔毒，這些功能與任何網(wǎng)頁內(nèi)容都無關(guān)
- BOM 的作用：
- 將相關(guān)的元素組織包裹起來咖楣，提供給我們
BOM核心--- Window
window 實際上表示瀏覽器的一個實例，
在瀏覽器中处渣，window實際上扮演了兩個角色
它既是通過JS 去訪問瀏覽器窗口的一個接口
又是ECMAScript 中規(guī)定的Global 對象伶贰，
可以通過window 來操作整個瀏覽器
============
- 拓展：
- Global 對象
是ECMAScript 總非常特殊的一個對象，
因為這個對象其實根本不存在罐栈。但是Global 無法通過new 創(chuàng)建黍衙。
但是Global 還擁有自己的屬性、方法荠诬、
甚至還擁有全局對象一般來說 Global 都是默認在瀏覽器引擎
啟動時候琅翻，自動初始化完成的
===========
window 對象就是BOM 的核心對象
- 所有的對象都是由window 對象延伸出來
- 全局作用域
var age = 18; //全局變量
function sayAge(){ // 全局方法
// console.log(this.age) //
console.log(window.age) ；
}
sayAge();
console.log(age);
window.sayAge();
//this 高級的時候會講柑贞，代表
由于window 對象同時扮演者ECMAScript 的Global
對象方椎，因此所有的全局作用域中聲明的全局變量以及函數(shù)
等，全部都會變成window 對象的屬性和方法
3_window窗口大小問題
- 針對 IE9+,Chrome,FireFox,Opera 和safari
- 瀏覽器窗口的內(nèi)部寬度
window.innerWidth - 瀏覽器窗口的內(nèi)部高度
window.innerHeight
var msg="窗口的高度"+window.innerHeight+
"\n窗口的高度"+window.innerWidth;
- 針對IE6/ IE7/ IE8 /IE5
- 支持Chrome 和 FireFox
- 瀏覽器內(nèi)部高度
docment.documentElement.clientHight - 瀏覽器內(nèi)部寬度
docment.documentElement.clientWidth
- 兼容的版本
var w =window.innerWidth ||
document.documentElement.clientWidth;
var h =
alert("窗口寬度"+w)
4_調(diào)整窗口大小
調(diào)整窗口大小
resizeTO()
調(diào)整到指定大小-
resizeBy()
- 增加指定的寬度和高度（寬度和高度增加10px）
在IE 8 中 還可以使用
5_打開窗口
open()
open(URL,name,features)
該方法用于打開一個新窗口
查找一個已經(jīng)命名的窗口參數(shù)：
-
URL:
- 可選參數(shù)
- 主要聲明了要在瀏覽器新窗口中顯示文檔的
- URL钧嘶。如果省略該參數(shù)或者該參數(shù)數(shù)值為空
- 則新窗口不會顯示任何文檔
-
name ：
- 可選參數(shù)
- 由多個逗號
- 包括數(shù)字棠众，字母，下劃線
- 聲明新窗口的名稱
- 標記<a> <from>的target 屬性
- 如果指定存在窗口
- 那么open()方法不在創(chuàng)建新窗口
- 而是返回對該窗口的引用
- 同時忽略features
-
features:
- 可選參數(shù)
- 聲明標準瀏覽器特征
- 如果省略有决，則新窗口具有所有瀏覽器
- 標準特征
- 如果聲明特殊的特征摄欲，則按照聲明執(zhí)行
備注：
=========
窗口特征
- width/height
- left/top
- 默認是像素
- toolbar
- yes/no
- 1/0
- scrollbar
- yes/no 默認是 yes
- 1/0
- location
- yes/no
- 1/0
- status
- yes/no
- 1/0
- fullscreen 是否使用全屏顯示
- yes/no
- 1/0 默認是 no
- menubar 是否顯示菜單欄
- yes/no
- 1/0
- resizable 是否可調(diào)節(jié)尺寸
- yes/no
- 1/0
- titlebar 顯示標題欄
- yes/no
- 1/0
<body>
<button onclick="openAnother()">打開新窗口</button>
<script type...>
var win;
function openAnother(){
win = window.open("http....","","w400,h400,toolbar=no,menubar= no,left=50,top = 500");
}
//關(guān)閉當前窗口
window.close();//一般設置按鈕關(guān)閉轿亮，這里設置了，打開一瞬間就關(guān)閉了胸墙。
</scrlpt>
</body>
6_定時器
window 中的定時器
- window 對象中的...方法
- JS 中式單線程語言，但是它允許通過設置超時數(shù)值按咒，
- 以及間歇時間來調(diào)用代碼在特定時間執(zhí)行
- 超時迟隅。。在指定的時間后去執(zhí)行某段代碼
- 周期調(diào)用時指 每隔指定多長時間....
- 超時調(diào)用
- window.setIimeout()
- 周期調(diào)用
- window.setInterval()
estTimeout(code,millisec)
- 參數(shù)：
- code
- 指需要放入的函數(shù)
- millisec
- 執(zhí)行參數(shù)1中的代碼
- 時間單位毫秒（ms）
- 1s=1000ms
var timeoutId = window.setTimeout(go,3000);
調(diào)用函數(shù)時需要注意：
- 傳入函數(shù)的時候励七，函數(shù)名千萬不要加括號
- 因為這個方法不是由我們自己調(diào)用
- 而是通過引擎去進行調(diào)用
function go{
window.open("http://baidu.com");
}
//取消超時調(diào)用
//但是如果當前的超時調(diào)用已經(jīng)執(zhí)行智袭，那么無效果
timeoutId.cancel;
上面的內(nèi)容相互疊加就可以了。
定時器
<h1></h1>
var h1 = document.getElementById("time");
window.setIntervall(function){
var msg = new Date().toLocaleString();
}
講事件還會將
系統(tǒng)對話框
- alert() 警告框
- confirm() 提示框（對話框）
- prompt() 提示框
var msg = prompt("請輸入你的名字")掠抬；
if(msg != null && msg.length > 0){
comsole.log(msg);
}
設置判斷
該方法用于清除 超時問題
window.clearTimeout(timeoutId)
8_location 對象
location 對象
- location 對象可以稱為window 的子對象吼野，
- 也是最有用的BOM 對象之一
- 我們可以通過window.location 來使用它，
- 但是一般我們都會將 window省略
- 提供了域當前窗口加載文檔有關(guān)信息
- 導航功能
- 應用場景：
- 魚魚獲取當前網(wǎng)頁的URL两波，并瀏覽器重定向到新的界面
====
- location 對象的常用屬性
- host 主機名稱和URL端口名
- hostname 主機名
- href 完整的URL
- psthname 路徑部分
- port 端口號
- protocol 協(xié)議
- search 查詢
協(xié)議
document.write("protocol"+location.protocol+
"<br>");
主機名
document.write("hostname"+location.hostname+
"<br>");
將好幾個一塊寫出來
<script...>
document.write("host"+location.host+
"<br>");
document.write("post"+location.post+
"<br>");
document.write("href:"+location.href+
"<br>");
document.write("protocol"+location.protocol+
"<br>");
</script>
HBulider 邊改邊看模式
9_location常用方法
location 常用方法
- assign(url) 加載新的文檔
- reload(reforce) 重新加載當前文檔
- replace(newURL) 用新的文檔替換當前文檔
<body>
<button onclick="" ...>按鈕</button>
</body>
<script...>
function openNewURL(){
location.assign("http://www.baidu.com");
}
function reload(){
location.reload(true)
}
</script>
reload(reforce)
- 重新加載當前文檔
- 參數(shù)：
- reforce
- 可選參數(shù)
- 一般填寫 true
- 該方法如果沒有規(guī)定參數(shù)瞳步，或者填寫參數(shù)為false
- 采用HTTP 中的頭if-Modifed-Since
- 來檢測服務器上文檔是否發(fā)生改變
- 如果文檔已經(jīng)改變，則會通過reload()方法
- 重新加載該文檔
- 如果沒有腰奋，則該方法從緩存中加載文件
- 該方法如果有參數(shù)单起，則會從服務器中重新加載
- 該方法如果沒有參數(shù)，則會優(yōu)先從緩存器中重新加載
注意：
- reload()方法調(diào)用之后可能會造成reload 加載順序
- 之后的文檔不執(zhí)行
- 所以一般講reload()放在最后
relace()
- 用新的文檔代替當前文檔
- 該方法不會在history 對象中生成記錄劣坊。
- 使用該方法時嘀倒，會直接采用新的URL 覆蓋History
History 對象
- history 對象包含用戶（當前瀏覽器窗口）中訪問過的URL
- history 對象是window 對象的一部分
- 可以進行window.history 進行訪問
- 屬性：
- length
- 方法：
- back() 加載history 列表中的前一個URL
- toward()加載history 列表中的下一個URL
- go()加載history 列表中指定的某一頁面
- 如果為負數(shù)，代表后退
- 如果為正數(shù)局冰，代表前進
<body>
<button onclick="urlCount()">顯示歷史記錄
<script..>
function urlCount(){
alert("歷史列表中"+history.length + "個URL")测蘑；
}
function myForward(){
history.forward();//前進
}
function myBack(){
history.back();//后退
}
function myGo(){
history.myGO(-2);//后退兩步
</script>
10_navigator 對象
- navigator 對象包含關(guān)于瀏覽器的信息
- navigator 對象包含屬性描述正在使用的瀏覽器
- 我們根據(jù)這些屬性，進行專門平臺的配置
- 屬性：
- appCodeName
- appName
- appVersion
- systemLanguage
- language
- onLine
- cookieEnable
- Cookie
- true
- false
- platfrom
- plugins
- userAgent
用法：
- navigator.對應的屬性
document.write("appCodeName"+navigator.appCodeName+"<br>");
document.write("appCodeName"+navigator.appCodeName+"<br>");
document.write("appCodeName"+navigator.appCodeName+"<br>");
相應的修改調(diào)用上面的數(shù)
移動端 B 階段
媒體查詢
Chrome和userAgent
Screen 對象
Screen 對象
- Screen 對象 包含有關(guān)用于屏幕的信息
- 雖然Screen 對 在JS 中用處不大康二，
- 但是Screen 對象 包含瀏覽器窗口外部的顯示器信息
- 例如能夠獲取到相應的 像素寬度和高度等
- 各個瀏覽器的Screen 對象 都至少包含以下信息
- =========
- windth 像素寬度
- height 像素高度
- colorDepth 顏色位數(shù)
- avaiWidth 屏幕的像素寬度減去...任務欄
- availHeight 屏幕的像素高度減去...任務欄
document.write("width : " + screen.width +"<br>");
document.write("height : " + screen.height +"<br>");
document.write("colorDepth : " + screen.colorDepth +"<br>");
document.write("availWidth: " + screen.availWidth +"<br>");
document.write("availHeight: " + screen.availHeight+"<br>");
cookie
注意：本地終端
打開百度
cookie實際是能看到的碳胳。
JQ...
首先：E C S Network T（網(wǎng)絡加載）P Application <-
Application 里面實際是可以看到的
cookie作用 可以作為1.全局變量2. 3. 4. 注意看
cookie缺陷 1.2.3.4. 針對瀏覽器 例如看到的百度這邊
以后工作注意提前進行加密
1.2.。4.56.7.在控制臺會有相應的對應
有心情可以查查赠摇，目前對我們游泳的是刪固逗，增，查
cookie 存儲
有兩個詞必須要給出的
name和value
- 參數(shù)1 : cookie 的 name
- 參數(shù)2: cookie 的 value
- 參數(shù)3: cookie 的 存儲時間（單位 day）
- cookie 中 name 不同藕帜，那么就可以存儲多個 cookil
function saveCookie(name,value,expireday){
//聲明一個日期對象
var date = new Date();
console.log(date.getDate());
date.setDate(date.getDate()+expireday);
console.log(date.toGMTString());
}
cookie 的內(nèi)容其實就是一段純文本
encodeURLComponent()
- 該函數(shù)可以將字符串作為URL 組件去進行編碼
- 返回值：
- URLString 的副本烫罩，其中某些字符將其
- 十六進制轉(zhuǎn)義序列化
var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value) + ";expires = " + date.toGMTString();
document.cookie = cookieText;
}
</script>
</html>
儲存
function getCookie(name){
//先去拿到cookie 中的字符串
var cookieText = document.cookie;
//獲取要查找到的cookie 的name 所在的下標
var index = cookieText.indexOf(name+"=");
if(index != -1){
//查找指定的cookie 結(jié)束位置
var endIndex =
cookieText.indexOf
...
//把想要的cookie 中的 value 獲取出來
}
}
