從零開始學 Web 之 BOM（一）BOM的概念，一些BOM物件
大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新......
+------------------------------------------------------------
github：https://github.com/Daotin/Web
微信公眾號：Web前端之巔
部落格園：http://www.cnblogs.com/lvonve/
CSDN：https://blog.csdn.net/lvonve/
+-----------------------------------------------------------
在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！
一、BOM
1、BOM的概念
BOM（Browser Object Model）：瀏覽器物件模型。
在瀏覽器中的一些操作都可以使用 BOM 的方法進行程式設計處理。
比如：重新整理瀏覽器、前進、後退、在位址列輸入 URL 等。
2、BOM 頂級物件
BOM 的頂級物件是：window
window 是瀏覽器的頂級物件，當呼叫 window 下的屬性和方法時，可以省略 window。
注意：
1、window 下的一個特殊屬性：window.name，所以不要輕易定義 name 變數，會導致 window.name 被修改。
2、top 等同於 windows。
3、系統對話方塊
window.alert(); window.prompt(); window.confirm(); // 兩個按鈕，分別返回 true 和 false。
以上對話方塊都不建議使用。
1、彈框時頁面無法載入；
2、各個瀏覽器的樣式不相同，且樣式不可自定義。
4、頁面載入物件
提出問題：
我們知道，如果將 script 標籤放在 head 裡面的話，頁面載入的時候是先載入的 script 標籤，之後才載入 body 裡面的標籤。如果 script 特別大的話，就很影響使用者體驗。
解決辦法：
1、將 script 標籤放在 body 最後。
2、使用 window.onload 事件。
<head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload = function () { document.getElementById("btn").onclick = function () { alert("haha"); } } </script> </head> <body> <input type="button" value="BUTTON" id="btn"> </body>
1、如果不寫 window.onload 的話，執行到 document.getElementById("btn") 會報錯，因為程式是從上至下執行。
2、window.onload 事件會在頁面載入完畢（頁面中所有內容、標籤、屬性以及外部引入的 js檔案）時觸發。
3、window.onload 可以省略 window。
window.onunload = function () {
alert("yes");
}
onunload： 頁面關閉後才觸發的事件
window.onbeforeunload = function () {
alert("yes");
}
onbeforeunload：在頁面關閉之前觸發的事件
5、location 物件（位址列）
學習一個物件主要是學習它裡面的屬性和方法。
5.1、屬性
console.log(window.location.hash); // 位址列上#及後面的內容
console.log(window.location.host); // localhost:63342 ---- 主機名及埠號
console.log(window.location.hostname); // localhost ---- 主機名
console.log(window.location.port); //63342 ---- 埠號
console.log(window.location.pathname);// /JS/images/location.html --- 相對路徑
console.log(window.location.protocol);// http: --- 協議
console.log(window.location.search);//?_ijt=28855sggj8kcffva8q9bhc1eh0 --- 搜尋的內容5.2、方法
document.getElementById("btn").onclick = function () {
location.href = "http://fengdaoting.com";
location.assign("http://fengdaoting.com");
location.reload();
location.replace("http://fengdaoting.com");
};
location.href和location.assign()： 設定跳轉的頁面地址，這兩個屬性和方法作用相同，並且都儲存跳轉前的地址（在瀏覽器中可以點選返回按鈕）。
location.reload()： 重新整理頁面
location.replace(): 設定跳轉的頁面地址，但是不儲存跳轉前的地址。
6、history 物件
6.1、方法
window.history.forward(); // 前進
window.history.back() // 後退
window.history.go(number); // number為正，前進；為負，後退。7、navigator 物件
7.1、屬性
window.navigator.platform; // 判斷瀏覽器所在的系統平臺
// win32
window.navigator.userAgent; // 判斷瀏覽器的型別，是谷歌火狐還是IE
// chrome 下結果：Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36
相關推薦
從零開始學 Web 之 CSS3（一）CSS3概述，選擇器
https 兼容問題 3.1 線性 web前端 不同 錨點 splay lock 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔
從零開始學 Web 之 HTML5（一）HTML5概述，語義化標籤
一、HTML5簡介 1、什麼是html5 html5 不是一門新的語言，而是我們之前學習的 html 的第五次重大修改版本。 2、html的發展歷史 超文字標記語言（第一版，不叫 HTML 1.0）——在1993年6月作為網際網路工程工作小組（IETF）工作草案發布（並非標準）； HTML 2.0——19
從零開始學 Web 之 jQuery（七）事件冒泡，事件引數物件，鏈式程式設計原理
一、事件冒泡與阻止事件冒泡 事件冒泡：當一個元素觸發某個事件的時候，會把這個事件傳播到其父元素，一直到頂層元素。 阻止事件冒泡：在被觸發事件的子元素中新增 return false; 即可。 二、事件的觸發 之前講的繫結事件是事件觸發後的事件處理過程，並且上面的事件觸發是被動的事件觸發，怎麼可以主動觸發事
從零開始學 Web 之 DOM（一）DOM的概念，對標簽操作
關註 1.5 pan 什麽 tin p標簽 nod text == 大家好，這裏是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，
從零開始學 Web 之 jQuery（七）事件冒泡，事件參數對象，鏈式編程原理
eval uri turn 定位 return 也會 否則 ont sele 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔 博客
從零開始學 Web 之 Ajax（三）Ajax 概述，快速上手
lan 技術分享 php 概述 由於 val asc logs 更新 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔 博客園：ht
從零開始學 Web 之 HTML5（二）表單，多媒體新增內容，新增獲取操作元素，自定義屬性
器） user 對比 style 按鈕 ont mp3 url -- 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔 博客園：ht
從零開始學 Web 之 CSS（一）選擇器
大家好，這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 W
從零開始學 Web 之 CSS3（二）顏色模式，文字陰影，盒模型，邊框圓角，邊框陰影
一、顏色模式 顏色模式有兩種： RGBA rgba(0,0,0,0.5); //黑色，透明度0.5 HSLA（顏色(0~360)，飽和度(0%~100%)，明度(0%~100%)，透明度(0~1)） 紅橙黃綠青藍紫紅：顏色從 0~360 順序，各佔30度。比如紅色為0，黃色為120，綠色為240。
從零開始學 Web 之 jQuery（三）元素操作，鏈式程式設計，動畫方法
一、使用css操作元素樣式 1、常規寫法 $("#dv").css("width", "200px"); $("#dv").css("height", "100px"); $("#dv").css("background", "red"); 2、鏈式寫法 $("#dv").css("width", "20
從零開始學 Web 之 CSS3（六）動畫animation，Web字型
大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 部落格園：http://www.cnblogs.com/lvonve/ CSDN：https://blog.csdn.net/lvonve/
從零開始學 Web 之 DOM（一）DOM的概念，對標籤操作
大家好，這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！ 一、DOM概念 D
從零開始學 Web 之 jQuery（一）jQuery的概念，頁面載入事件
一、jQuery的概念 1、什麼是 JavaScript 庫？ JavaScript 開發的過程中，處理瀏覽器的相容很複雜而且很耗時，於是一些封裝了這些操作的庫應運而生。這些庫還會把一些常用的程式碼進行封裝。 把一些常用到的方法寫到一個單獨的 js 檔案，使用的時候直接去引用這js檔案就可以了，這個 js
從零開始學 Web 之 HTML（一）認識前端
大家好，這裡是 Daotin 從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！ 1、什麼是前端 前端對於網站來說，
從零開始學 Web 之 JavaScript（一）JavaScript概述
大家好，這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！ 一、JavaScr
從零開始學 Web 之 Ajax（一）伺服器相關概念
一、伺服器和客戶端 伺服器和客戶端都是電腦，在硬體層面上沒有明顯的劃分，配置很差的個人電腦任然可以作為伺服器。 伺服器如果想對外提供服務，必須安裝相應的軟體，所以不是伺服器這臺電腦可以提供服務，而是其安裝的軟體提供的服務。比如： HTTP網頁服務：Apache，Tomcat，IIS等 檔案上傳下載服務：V
從零開始學 Web 之 ES6（一）ES5嚴格模式
一、ECMAScript 5 嚴格模式 1、概述 除了正常執行模式，ECMAscript 5添加了第二種執行模式："嚴格模式"（strict mode）。顧名思義，這種模式使得Javascript在更嚴格的條件下執行。 2、目的 消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為;
從零開始學 Web 之 CSS3（四）邊框圖片，過渡
一、邊框圖片 邊框圖片：就是給邊框加圖片背景。 我們之前加的邊框都是純顏色的邊框，那麼我們怎麼給邊框加圖片呢？ 原理：把一張圖片分成九宮格的形式，然後一一對應到需要新增邊框的元素上。 並且，新增邊框圖片是以背景的方式新增的，所以會有可能文字覆蓋在邊框的情況，後面也會介紹處理方法。 語法： /* bord
從零開始學 Web 之 DOM（四）節點
def clas scrip while p標簽 設置 ner 操作 text 大家好，這裏是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相
從零開始學 Web 之 jQuery（二）獲取和操作元素的屬性
eight images idt 隱藏 lis 屬性 ner master lin 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔