js(Dom+Bom)第六天（1）

webAPI

01-键盘事件

知识点-onkeydown事件[掌握]

onkeydown: 当键盘上的键被按下时候触发的一个事件

知识点-onkeyup事件[掌握]

onkeyup: 键盘上键弹起时候触发的一个事件

知识点-onkeypress事件[了解]

onkeypress: 当键盘上的键被按下时候触发的事件

onkeydown 和 onkeypress的区别

onkeydown 事件课可以将键盘上所有的键都执行onkeypress: 无法执行功能键的事件(tab, shift, ctrl ....)

键盘事件对象参数

key
```
e.key   ----> 获取键的名字
```
keycode
```
e.keyCode   -----> 键对应的值
```

02-BOM

☞概念

BOM: （Browser Object Model）即浏览器对象模型。

☞顶级对象

DOM对象  ----> 整个网页是一个对象   (document)BOM对象  ----> 浏览器对象  (window)js中的顶级对象是 window 对象. 可以省略不写.

☞学习路径

onload事件

onload 事件, 当页面中的元素,外部的css样式都加载完成后,就会触发该事件
window.onload = function() {var div = document.querySelector('div');console.log(div);
}

location对象

location对象是window对象下的一个属性，使用location可以设置或者获取浏览器地址栏中的 url

location对象中的属性

href属性

保存的就是网页地址location.href  				----> 获取网页地址
location.href = '网站地址'   ------> 设置备注:
location.href = '网站地址' ; 在当前窗口中打开页面如果希望在新窗口中打开页面,那么使用
window.open('url路径');

其他方法介绍

//作用: 页面跳转 (委派)
location.assign('http://www.baidu.com');  //设置跳转页面//作用: 也是用来跳转页面的, 跳转页面后,浏览器中的后退按钮是不能点击的
location.replace('http://www.baidu.com');//作用: 刷新页面
location.reload(boolean);boolean参数: true 代表强制从服务端重新获取数据 , false 代表在本地缓存中获取数据

其他属性与网站地址相关的属性[了解]
1. location.protocol 获取当前网站地址的协议类型
2. location.host 获取当前网站地址中的主机(IP地址)
3. location.port 代表端口号(类似于房间号, 默认是 80)
4. location.pathname 代表访问的具体的文件路径

定时器

setInterval()

setInterval() 定时器类似于闹钟 (可以重复执行, 也可以停止)

语法

setInterval(function(){}, time);备注:
1. time 时间参数表示的是一个毫秒
2. 1000毫秒 = 1 秒
3. 第一个参数既可以是匿名函数也可以是一个命名函数

如何关掉setInterval定时器

通过 clearInterval() 方法可以停止定时器(关掉定时器)备注:
1. clearInterval() 方法中需要一个参数
2. clearInterval() 的这个参数表示的就是定时器的标志(ID值)例如:
//开启定时器
var id = setInterval(function(){console.log('你好');
}, 2000);clearInterval(id);  //关掉定时器

setTimeout()

setTimeout() 定时器类似于定时炸弹 (到了规定的时间就执行, 不能重复执行)

语法

setTimeout(function(){}, time);备注:
1. 第一个参数处理程序可以是匿名函数也可以是命名函数
2. 第二参数表示的是一个延时时间,是一个毫秒单位特点:
该定时器执行一次, 意思是多长时间之后执行函数中的代码

如果关掉setTimeout?

通过 clearTimeout() 方法关掉setTimeout定时器备注:
1. clearTimeout() 中也需要一个定时器的id值例如://开启定时器
var id = setTimeout(function(){console.log('你好');
}, 5000);
//关闭定时器
clearTimeout(id);