键盘事件
(1)方式
1,onkeyup:按键弹起时触发
2,onkeydown:按键按下时触发
3,onkeypress:按键按下时触发,无法识别功能键如:ctrl 、shift等
4,执行顺序:keydown---->keypress---->keyup
(2)属性
1,keyCode:可以得到相应键的ASCII值
2,keyup和keydown事件不区分字母大小写,a和A的ASCII值都是65;(可识别所有键)
3,keypress事件区分字母大小写,a得到97,A得到65;(不可识别功能键)
4,可以利用keyCode返回的ASCII值判断用户按下的键
例子:点击特定按键获得焦点
<body>
<input type="text">
<script>
var input = document.querySelector('input');
document.addEventListener('keyup', function(e) {
if (e.keyCode === 83) {
input.focus();
}
})
</script>
</body>
BOM
(1)概述
1,浏览器对象模型,他提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象为window;
2,BOM由一系列相关的对象构成,每个对象都提供了很多方法和属性;
3,BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分;兼容性较差
(2)构成
1,window对象是浏览器的顶级对象,它具有双重角色;
2,window对象是js访问浏览器窗口的一个接口,是一个全局对象;
3,定义在全局作用域中的变量和函数都会变成window对象的属性和方法;
4,alert()、prompt()都属于window对象方法,在调用时可以省略window;
5,window下有一个特殊属性:window.name;
(3)window窗口加载事件
1,窗口加载事件:window.onload
当文档内容完全加载完成后触发该事件(包括dom元素,图片,flash,css等),可以将js代码写在页面元素上方(传统注册事件方式只能写一次,会以最后一个为准);建议使用:window.addEventListener(' load ' , function(){})
2,IE9支持的窗口加载事件:document.addEventListener(' DOMCententLoaded ' ,function(){})
当DOM加载完毕就可以触发,不包括图片,flash,css等,加载速度比load更快;
(4)调整窗口大小事件
1,window.addEventListener(' resize ' ,function(){})
:只要窗口大小发生像素变化,就会触发;
2,常利用该事件完成响应式布局,window.innerWidth 当前屏幕的宽度;
(5)定时器
1,方式:setTimeout()
、 setInterval()
2,window.setTimeout(调用函数,[ 延迟的毫秒数 ])
;用与设置一个定时器,在定时器到期之后执行调用函数,只调用一次;
2.1,window可以省略;
2.2,调用函数可以直接写函数(function(){})、或者写函数名(fn);
2.3,延迟的毫秒数可以省略,默认是0,单位是毫秒;
2.4,定时器可能有很多,给定时器赋值一个标识符(var time1=)
2.5,setTimeout()的调用函数又叫做回调函数callback;普通函数按照代码顺序直接调用,这个函数需要等待时间,到了时间才调用,因此成为回调函数;点击事件(click)中的函数也称为回调函数;
2.6,停止定时器:clearTimeout(定时器名字)
例子:消失和停止消失
<body>
<button>点击停止消失</button>
<input type="text">
<script>
var btn = document.querySelector('button');
var ipt = document.querySelector('input');
var time1 = setTimeout(function() {
ipt.style.display = 'none';
}, 3000)
btn.addEventListener('click', function() {
clearTimeout(time1);
})
</script>
</body>
3,window.setInterval(回调函数,[ 间隔的毫秒数 ])
;重复调用一个函数,每隔一段时间,就调用一次回调函数;
3.1,特点和setTimeout差不多;
3.2,clearInterval :注意全局变量和局部变量的调用在函数外给一个var time1=null;
例子:倒计时
<body>
<div>
<span class='hour'>1</span>
<span class='minute'>2</span>
<span class='second'>3</span>
</div>
<script>
var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
var inputTime = +new Date('2020-4-16 14:00:00'); //返回用户输入时间总的毫秒数
countDown();
//开启定时器
setInterval(countDown, 1000);
function countDown() {
var nowTime = +new Date(); //返回当前时间总的毫秒数
var times = (inputTime - nowTime) / 1000; //times是剩余时间总的秒数
var h = parseInt(times / 60 / 60 % 24); //计算当前小时
h = h < 10 ? '0' + h : h;
hour.innerHTML = h;
var m = parseInt(times / 60 % 60); //计算当前分钟
m = m < 10 ? '0' + m : m;
minute.innerHTML = m;
var s = parseInt(times % 60); //计算当前秒
s = s < 10 ? '0' + s : s;
second.innerHTML = s;
}
</script>
</body>
例子:获取手机验证码
<body>
请输入验证码:<input type="number"><button>获取验证码</button>
<script>
var btn = document.querySelector('button');
var time = 3; //定义间隔的秒数
btn.addEventListener('click', function() {
btn.disabled = true;
var time1 = setInterval(function() {
if (time === 0) {
//清除定时器并复原按钮
clearInterval(time1);
btn.disabled = false;
btn.innerHTML = '发送';
time = 3;
} else {
btn.innerHTML = '还剩下' + time + '秒';
time--;
}
}, 1000)
})
</script>
</body>
(6)this的指向问题
1,this的最终指向是那个调用它的对象;
2,全局作用域或者普通函数中this指向全局对象window(定时器中的this指向window)
(7)js执行机制
1,js语言的特点就是单线程,同一时间只能做一件事;
2,为了解决这个问题,允许js脚本创建多个线程;于是js出现了同步和异步
2.1,同步:前一个任务结束后执行后一个任务,程序的执行顺序和任务的排列顺序一样;
2.2,异步:在前一个任务还未执行完,允许先执行下一个任务
2.3,本质区别:这条流水线上各个流程的执行顺序不同;
2.4,同步任务:同步任务都在主线程上执行,形成一个执行栈;
2.5,异步任务:js的异步是通过回调函数实现的;异步任务相关回调函数添加到任务队列中
2.6,异步任务有三种类型
2.6.1,普通事件:click,resize等
2.6.2,资源加载:load,error等
2.6.3,定时器:setTimeout,setInterval等
2.7,执行机制:先执行同步栈中的同步任务----异步任务(回调函数)放入任务队列中----当同步任务全部执行完毕,按次序读取任务队列中的异步任务 ;由于主线程不断的重复获得任务,执行任务,在获取任务,在执行,所以这种机制被称为事件循环(event loop)
(8)location对象
1,URL:统一资源定位符,是互联网上标准资源地址
1.1,语法格式:protocol://host[ :port ]/path/[?query]#fragment
1.2,说明:http://www.itcast.cn/index.html?name=andy&age=18#link
protocol:通信协议,常用的有http,ftp,maito等
host:主机(域名),www.baidu.com
port:端口号:可选,省略时使用方案的默认端口,如http的默认端口是80
path:路径:有零个或多个’/'符号隔开的字符串,一般用来表示主机上一个目录或文件地址
query:参数:可选,以键值对的形式通过&符号分割开来
fragment:片段:#后面的内容,常用于链接锚点
2,location对象属性
location.href:获取或者设置整个URL
location.host:返回域名
location.port:返回端口号,没写则返回空字符串
location.pathname:返回路径
location.search:返回参数
location.hash:返回片段,#后面 内容,常用于链接锚点
例子:点击或等待几秒后跳转到其他页面
<body>
<button>点击</button>
<div></div>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.addEventListener('click', function() {
location.href = 'http://www.baidu.com';
})
var time1 = 3;
setInterval(function() {
if (time1 == 0) {
location.href = 'http://www.baidu.com';
} else {
div.innerHTML = '您将在' + time1 + '秒后到达百度';
time1--;
}
}, 1000)
</script>
</body>
3,location对象方法
3.1,location.assign():跟href一样,可以跳转页面,记录历史,可以后退页面;
3.2,location.replace():替换当前页面,不记录历史,不能后退页面;
3.3,location.reload():重新加载页面,相当于刷新按钮 参数为true则是强制刷新ctrl+f5;
(9) navigator对象
1,包含有关浏览器的信息,有很多属性;最常用的是userAgent,改属性可以返回由客户机发送服务器的user-agent头部的值;
(10)history对象
1,与浏览器历史记录进行交互,该对象包含用户访问过得URL
2,back():后退功能
3,forword():前进功能
4,go(参数):前进后退功能,参数为1,前进一个页面;参数为-1,后退一个页面;
5,history对象比较少用,但是会在一些OA办公系统中见到