bom瀏覽器對象模型（基礎）

頁面中有一個頂級對象: document -> 操做頁面元素

 

瀏覽器中也有個頂級對象: window -> 頁面中全部的東西都是屬於window的

 

變量屬於window

var num = 10;

console.log(window.num);

 

函數屬於window

function fn(){

console.log('今天工地的磚頭格外的燙手');

}

window.fn();

 

由於頁面中全部的東西都是屬於window的, 因此window能夠省略

 

name變量屬於window, 不要去使用

console.log(name);

 

console.log(top);  能夠使用top代替window

console.log(window);

 

window.document.write　　將一段HTML代碼或是一段文本內容輸出到顯示器上（網頁面中寫入）.

window.document.write('<h1>今天工地的磚頭格外的燙手,馬路對面的蘭博基尼依舊是我高不可攀的夢想,微風吹過個人臉龐,我很迷茫,多但願有位富婆能讓我放下全部的假裝,走進她500平的心(新)房</h1>')

 

onload 頁面加載的時候,按鈕還沒建立 -> null

頁面加載事件 -> 等到頁面中全部的內容(標籤、屬性、文本、圖片)都加載完畢才執行

window.onload = function () {

document.getElementById('btn').onclick = function () {

console.log('同窗,吸菸有害健康');

};

}

 

document.getElementById('btn').onclick = function(){

// 頁面跳轉到指定地址

location.href = 'https://www.baidu.com';

location.assign('https://www.baidu.com');

// location.reload();

// location.replace('https://www.baidu.com');打開以後不能返回.

// location.pathname = 'https://www.baidu.com';

}

 

history用於存儲瀏覽器的歷史信息

forward();表示返回到下一頁面，效果至關於go(1);

back();表示返回到上一頁面，效果至關於go(-1);

go();用於指定頁的跳轉，好比go(-2)表示返回到瀏覽過的前兩個頁面

document.getElementById('btn2').onclick = function(){

location.href = 'https://www.cnblogs.com/fengdashuai/';

history.forward();

history.back();

history.go(1);

}

 

console.log(navigator.userAgent);獲取瀏覽器的信息.

 

// 定時器 -- 重點

// 參數1: 函數

// 參數2: 時間, 單位是毫秒

// 返回值: 定時器的id

// 特色: 反覆執行

var timeId = setInterval(function(){

alert('哈哈, 我彈出來了');

},3000);

document.getElementById('btn').onclick = function(){

clearInterval(timeId);

}

setInterval定時器

clearInterval清理定時器

 

 

// 定時器 -- 重點

// 參數1: 函數

// 參數2: 時間, 單位是毫秒

// 返回值: 定時器的id

// 特色: 一次性的 -> 也要清理定時器

// JS常見的內存陷阱: 被遺漏的定時器、過多的所有變量、閉包

var timeId = setTimeout(function(){

alert('下不爲例');

},3000);

document.getElementById('btn').onclick = function(){

clearTimeout(timeId);

};

 

 

定時器圖片抖動.