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

获取页面元素相关信息

js(Dom+Bom)第六天（1）相关推荐

js(Dom+Bom)第一天（1）
JavaScript-DOM(BOM)操作核心知识获取页面元素事件设置样式学习目标能够使用id名,标签名等方式获取页面中元素能够给标签注册点击事件,并实现对应效果能够给标签通过js方式 ...
js(Dom+Bom)第七天（1）
JavaScript BOM介绍概念 BOM(Browser Object Model)即浏览器对象模型. 本质: 通过对象抽象浏览器中的一些功能例如:(刷新页面,alert,confirm,po ...
js(Dom+Bom)第五天（2）
webAPI 01-事件监听为什么要学事件监听之前给元素注册事件的时候,同一个事件会被覆盖掉事件监听的本质通过另外一种方式给元素注册事件, 同时可以解决同一个事件不会被覆盖掉. 知识点-通过 ...
js(Dom+Bom)第五天（1）
JavaScript BOM介绍概念 BOM(Browser Object Model)即浏览器对象模型. 本质: 通过对象抽象浏览器中的一些功能例如:(刷新页面,alert,confirm,po ...
js(Dom+Bom)第一天（2）
webAPI 00-复习内置对象中的方法 01-JavaScript组成知识点-ECMASCRIPT 重点回顾存储容器变量数组对象逻辑语法分支语句循环语句 switch语句知识点- ...
js(Dom+Bom)第八天—Swiper(插件)
Swiper插件(库) 01-基本介绍 Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架,使用硬件加速过渡(如果该设备支持的话).主要使用于移动端的网站.移动web apps,nativ ...
js(Dom+Bom)第七天（2）
webAPI 01-动画封装应用到的知识点点击事件给元素设置一个绝对定位定时器(setInterval) 封装动画1的步骤: 让元素设置为绝定位设置元素的开始位置(从哪开始移动) 设置元素的 ...
js(Dom+Bom)第四天（1）
webAPI 1-通过DOM节点方式获取元素 1-0注意事项下面的内容都在在文档树上直接操作的 (节点 + 元素)重点是: 与元素相关的内容 1-1与父节点相关的操作方式 1-1-1.知识点-判断父 ...
js(Dom+Bom)第三天（2）
webAPI 0-操作标签属性系统属性作用: 1. 可以操作标签身上的任何一个系统中的自带属性 (id, class, name ....) 2. 还可以操作用户自定义的属性 dom.getAtt ...

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