99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

這篇文章主要講解了“JavaScript的BOM技術(shù)怎么用”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“JavaScript的BOM技術(shù)怎么用”吧！

創(chuàng)新互聯(lián)主要從事網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務。立足成都服務常州,10余年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:13518219792

1、BOM概述

• BOM = Browser Object Model 瀏覽器對象模型

• 它提供了獨立于內(nèi)容而與瀏覽器窗口進行交互的對象，其核心對象是 window

• BOM 由一系列相關(guān)的對象構(gòu)成，并且每個對象都提供了很多方法與屬性

• BOM 缺乏標準，JavaScript 語法的標準化組織是 ECMA, DOM 的標準化組織是 W3C, BOM最初是Netscape 瀏覽器標準的一部分

DOM	BOM
文檔對象模型	瀏覽器對象模型
DOM 就是把文檔當作一個對象來看待	把瀏覽器當作一個對象來看待
DOM 的頂級對象是document	BOM 的頂級對象是window
DOM 主要學習的是操作頁面元素	BOM 學習的是瀏覽器窗口交互的一些對象
DOM 是 W3C 標準規(guī)范	BOM 是瀏覽器廠商在各自瀏覽器上定義的，兼容性較差

1.1、BOM的構(gòu)成

• BOM 比 DOM 更大。它包含 DOM。

• window 對象是瀏覽器的頂級對象，它具有雙重角色

• 它是 JS 訪問瀏覽器窗口的一個接口

• 它是一個全局對象。定義在全局作用域中的變量、函數(shù)都會變成 window 對象的屬性和方法

• 在調(diào)用的時候可以省略 window，前面學習的對話框都屬于 window 對象方法，如 alert()、prompt()等。

• 注意：window下的一個特殊屬性 window.name

// 定義在全局作用域中的變量會變成window對象的屬性
var num = 10;
console.log(window.num);
// 10

// 定義在全局作用域中的函數(shù)會變成window對象的方法
function fn() {
    console.log(11);
}
console.fn();
// 11

var name = 10;  //不要用這個name變量,window下有一個特殊屬性window.name
console.log(window.num);

2、window 對象的常見事件

2.1、窗口加載事件

window.onload是窗口（頁面）加載事件，當文檔內(nèi)容完全加載完成會觸發(fā)該事件（包括圖像，腳本文件，CSS文件等），就調(diào)用的處理函數(shù)。

window.onload = function(){
    };// 或者window.addEventListener("load",function(){});

注意：

• 有了window.onload就可以把JS代碼寫到頁面元素的上方

• 因為onload是等頁面內(nèi)容全部加載完畢，再去執(zhí)行處理函數(shù)

• window.onload 傳統(tǒng)注冊事件方式，只能寫一次

• 如果有多個，會以最后一個window.onload為準

• 如果使用addEventListener 則沒有限制

document.addEventListener('DOMContentLoaded',function(){})

接收兩個參數(shù)：

• DOMCountentLoaded事件觸發(fā)時，僅當DOM加載完成，不包括樣式表，圖片，flash等等

• 如果頁面的圖片很多的話, 從用戶訪問到onload觸發(fā)可能需要較長的時間

• 交互效果就不能實現(xiàn)，必然影響用戶的體驗，此時用 DOMContentLoaded事件比較合適。

2.1.1、區(qū)別

• load等頁面內(nèi)容全部加載完畢，包括頁面dom元素，圖片，flash，css等

• DOMContentLoaded 是DOM加載完畢，不包含圖片 flash css 等就可以執(zhí)行，加載速度比load更快一些

2.2、調(diào)整窗口大小事件

window.onresize 是調(diào)整窗口大小加載事件，當觸發(fā)時就調(diào)用的處理函數(shù)

window.onresize = function() {}// 或者window.addEventListener('resize',function(){});

• 只要窗口大小發(fā)生像素變化，就會觸發(fā)這個事件

• 我們經(jīng)常利用這個事件完成響應式布局。window.innerWidth 當前屏幕的寬度

3、定時器

window 對象給我們提供了兩個定時器

• setTimeout()

• setInterval()

3.1、setTimeout()定時器

setTimeout()方法用于設(shè)置一個定時器，該定時器在定時器到期后執(zhí)行調(diào)用函數(shù)。

window.setTimeout(調(diào)用函數(shù),[延遲的毫秒數(shù)]);

注意：

• window可以省略

• 這個調(diào)用函數(shù)

• 可以直接寫函數(shù)

• 或者寫函數(shù)名

• 或者采取字符串 ‘函數(shù)名()’（不推薦）

• 延遲的毫秒數(shù)省略默認是0，如果寫，必須是毫秒

• 因為定時器可能有很多，所以我們經(jīng)常給定時器賦值一個標識符

• setTimeout() 這個調(diào)用函數(shù)我們也稱為回調(diào)函數(shù)callback

• 普通函數(shù)是按照代碼順序直接調(diào)用，而這個函數(shù)，需要等待事件，事件到了才會去調(diào)用這個函數(shù)，因此稱為回調(diào)函數(shù)。

3.2、clearTimeout()停止定時器

• clearTimeout()方法取消了先前通過調(diào)用 setTimeout()建立的定時器

window.clearTimeout(timeoutID)

注意：

• window可以省略

• 里面的參數(shù)就是定時器的標識符

    點擊停止定時器
    

3.3、setInterval()定時器

• setInterval()方法重復調(diào)用一個函數(shù)，每隔這個時間，就去調(diào)用一次回調(diào)函數(shù)

window.setInterval(回調(diào)函數(shù),[間隔的毫秒數(shù)]);

• window可以省略

• 這個回調(diào)函數(shù):

• 可以直接寫函數(shù)

• 或者寫函數(shù)名

• 或者采取字符 ‘函數(shù)名()’

• 第一次執(zhí)行也是間隔毫秒數(shù)之后執(zhí)行，之后每隔毫秒數(shù)就執(zhí)行一次

3.4、clearInterval()停止定時器

• clearInterval ( ) 方法取消了先前通過調(diào)用 setInterval() 建立的定時器

注意：

• window可以省略

• 里面的參數(shù)就是定時器的標識符

    開啟定時器
    停止定時器
    

3.5、this指向

• this的指向在函數(shù)定義的時候是確定不了的，只有函數(shù)執(zhí)行的時候才能確定this到底指向誰

現(xiàn)階段，我們先了解一下幾個this指向

• 全局作用域或者普通函數(shù)中this指向全局對象window(注意定時器里面的this指向window)

• 方法調(diào)用中誰調(diào)用this指向誰

• 構(gòu)造函數(shù)中this指向構(gòu)造函數(shù)實例

    點擊
    

4、JS執(zhí)行機制

4.1、JS是單線程

• JavaScript 語言的一大特點就是單線程，也就是說，同一個時間只能做一件事。這是因為 Javascript 這門腳本語言誕生的使命所致——JavaScript 是為處理頁面中用戶的交互，以及操作 DOM 而誕生的。比如我們對某個 DOM 元素進行添加和刪除操作，不能同時進行。 應該先進行添加，之后再刪除。

• 單線程就意味著，所有任務需要排隊，前一個任務結(jié)束，才會執(zhí)行后一個任務。這樣所導致的問題是： 如果 JS 執(zhí)行的時間過長，這樣就會造成頁面的渲染不連貫，導致頁面渲染加載阻塞的感覺。

4.2、一個問題

以下代碼執(zhí)行的結(jié)果是什么？

console.log(1);setTimeout(function() {
    console.log(3);},1000);console.log(2);

那么以下代碼執(zhí)行的結(jié)果又是什么？

console.log(1);setTimeout(function() {
    console.log(3);},0);console.log(2);

4.3、同步和異步

• 為了解決這個問題，利用多核 CPU 的計算能力，HTML5 提出 Web Worker 標準，允許 JavaScript 腳本創(chuàng)建多個線程

• 于是，JS 中出現(xiàn)了同步和異步。

• 同步:

• 前一個任務結(jié)束后再執(zhí)行后一個任務

• 異步：

• 在做這件事的同時，你還可以去處理其他事情

同步任務

• 同步任務都在主線程上執(zhí)行，形成一個執(zhí)行棧

異步任務

• JS中的異步是通過回調(diào)函數(shù)實現(xiàn)的

• 異步任務有以下三種類型

• 普通事件，如click,resize等

• 資源加載，如load,error等

• 定時器，包括setInterval,setTimeout等

• 異步任務相關(guān)回調(diào)函數(shù)添加到任務隊列中

1. 先執(zhí)行執(zhí)行棧中的同步任務

2. 異步任務(回調(diào)函數(shù))放入任務隊列中

3. 一旦執(zhí)行棧中的所有同步任務執(zhí)行完畢，系統(tǒng)就會按次序讀取任務隊列中的異步任務，于是被讀取的異步任務結(jié)束等待狀態(tài)，進入執(zhí)行棧，開始執(zhí)行

此時再來看我們剛才的問題：

console.log(1);setTimeout(function() {
    console.log(3);},1000);console.log(2);

• 執(zhí)行的結(jié)果和順序為 1、2、3

console.log(1);setTimeout(function() {
    console.log(3);},0);console.log(2);

• 執(zhí)行的結(jié)果和順序為 1、2、3

// 3. 第三個問題console.log(1);document.onclick = function() {
    console.log('click');}console.log(2);setTimeout(function() {
    console.log(3)}, 3000)

同步任務放在執(zhí)行棧中執(zhí)行，異步任務由異步進程處理放到任務隊列中，執(zhí)行棧中的任務執(zhí)行完畢會去任務隊列中查看是否有異步任務執(zhí)行，由于主線程不斷的重復獲得任務、執(zhí)行任務、再獲取任務、再執(zhí)行，所以這種機制被稱為事件循環(huán)（ event loop）。

5、location對象

• window 對象給我們提供了一個 location屬性用于獲取或者設(shè)置窗體的url，并且可以解析url。因為這個屬性返回的是一個對象，所以我們將這個屬性也稱為 location 對象。

5.1、url

==統(tǒng)一資源定位符（uniform resouce locator）==是互聯(lián)網(wǎng)上標準資源的地址。互聯(lián)網(wǎng)上的每個文件都有一個唯一的 URL，它包含的信息指出文件的位置以及瀏覽器應該怎么處理它。

url 的一般語法格式為：

protocol://host[:port]/path/[?query]#fragment

http://www.itcast.cn/index.html?name=andy&age=18#link

組成	說明
protocol	通信協(xié)議 常用的http,ftp,maito等
host	主機(域名) www.itheima.com
port	端口號，可選
path	路徑 由零或多個'/'符號隔開的字符串
query	參數(shù) 以鍵值對的形式，通過&符號分隔開來
fragment	片段 #后面內(nèi)容 常見于鏈接 錨點

5.2、location對象屬性

location對象屬性	返回值
location.href	獲取或者設(shè)置整個URL
location.host	返回主機（域名）www.baidu.com
location.port	返回端口號，如果未寫返回空字符串
location.pathname	返回路徑
location.search	返回參數(shù)
location.hash	返回片段 #后面內(nèi)容常見于鏈接 錨點

重點記住：href和search

需求：5s之后跳轉(zhuǎn)頁面

    點擊
    

    

5.3、location對象方法

location對象方法	返回值
location.assign()	跟href一樣，可以跳轉(zhuǎn)頁面（也稱為重定向頁面）
location.replace()	替換當前頁面，因為不記錄歷史，所以不能后退頁面
location.reload()	重新加載頁面，相當于刷新按鈕或者 f5 ，如果參數(shù)為true 強制刷新 ctrl+f5

    點擊
    

5.4、獲取URL參數(shù)

我們簡單寫一個登錄框，點擊登錄跳轉(zhuǎn)到 index.html

    
        用戶名： 
        
    

接下來我們寫 index.html

這樣我們就能獲取到路徑上的URL參數(shù)

6、navigator對象

• navigator 對象包含有關(guān)瀏覽器的信息，它有很多屬性

• 我們常用的是userAgent,該屬性可以返回由客戶機發(fā)送服務器的user-agent頭部的值

下面前端代碼可以判斷用戶是用哪個終端打開頁面的，如果是用 PC 打開的，我們就跳轉(zhuǎn)到 PC 端的頁面，如果是用手機打開的，就跳轉(zhuǎn)到手機端頁面

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";     //手機
 } else {
    window.location.href = "";     //電腦
 }

7、history對象

• window 對象給我們提供了一個 history 對象，與瀏覽器歷史記錄進行交互

• 該對象包含用戶（在瀏覽器窗口中）訪問過的 URL。

history對象方法	作用
back()	可以后退功能
forward()	前進功能
go(參數(shù))	前進后退功能，參數(shù)如果是 1 前進1個頁面 如果是 -1 后退1個頁面

    點擊我去往列表頁
    前進
    

感謝各位的閱讀，以上就是“JavaScript的BOM技術(shù)怎么用”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對JavaScript的BOM技術(shù)怎么用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

網(wǎng)站標題：JavaScript的BOM技術(shù)怎么用
文章來源：http://www.ef60e0e.cn/article/pcdjds.html