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);

};

 

 

定时器图片抖动.