web api day4

最新推荐文章于 2022-02-22 14:21:35 发布

HLT-0604

最新推荐文章于 2022-02-22 14:21:35 发布

阅读量155

点赞数

本文链接：https://blog.csdn.net/hulitong/article/details/106962575

版权

常用键盘事件

三个事件的执行顺序是： keydown – keypress — keyup 在这里插入图片描述
onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写,keyCode属性能区分大小写，返回不同的ASCII值

案例模拟京东按键输入内容的搜索框

当我们按下 s 键，光标就定位到搜索框
在这里插入图片描述

案例模拟京东快递单号查询

在这里插入图片描述
① 快递单号输入内容时，上面的大号字体盒子（con）显示(这里面的文字字号更大）
② 同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容
③ 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子
④ 注意： keydown 和 keypress 在文本框里面的特点：他们两个事件触发的时候，文字还没有落入文本框中。按下已经触发了，但是文字还没有输入到框中，要弹起才会输入到框中
keypress不识别功能键，比如删除键backspace
⑤ keyup事件触发的时候，文字已经落入文本框里面了
⑥ 失去焦点，就隐藏这个con盒子
⑦ 获得焦点，并且文本框内容不为空，就显示这个con盒子
在这里插入图片描述

在这里插入图片描述

BOM

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。
BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
怎么去前进后退一个页面，怎么去刷新一个页面，滚动条滚动了，窗口大小发生变化了，都是BOM的管辖范围

窗口加载事件

window.onload 是窗口 (页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。
在这里插入图片描述

window.onload = function(){} 或者  
window.addEventListener("load",function(){}); 
`注意：`
1. 有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕， 再去执行处理函数。 
2. window.onload 传统注册事件方式 只能写一次，如果有多个，会以最后一个 window.onload 为准。 
3. 如果使用 addEventListener 则没有限制

在这里插入图片描述

document.addEventListener('DOMContentLoaded',function(){})

DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。
Ie9以上才支持
如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适。

调整窗口大小事件

只要窗口大小发生像素变化，就会触发这个事件。

 window.onresize = function(){} 
 
 window.addEventListener("resize",function(){});

我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度在这里插入图片描述

定时器

window 对象给我们提供了 2 个非常好用的方法-定时器。

setTimeout()
setInterval()

setTimeout() 定时器

setTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。只调用一次，就结束了这个定时器
在这里插入图片描述
setTimeout() 这个调用函数我们也称为回调函数 callback
普通函数是按照代码顺序直接调用。
而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数。
简单理解：回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。
以前我们讲的 element.onclick = function(){} 或者 element.addEventListener(“click”, fn); 里面的函数也是回调函数。并不是按照代码的顺序执行，而是当你点击了才回来调用这个函数

案例5s关闭广告

① 核心思路：5秒之后，就把这个广告隐藏起来display：none
② 用定时器setTimeout
在这里插入图片描述

停止 setTimeout() 定时器

 window.clearTimeout(timeoutID) 
clearTimeout()方法取消了先前通过调用 setTimeout() 建立的定时器。 
注意： 
1. window 可以省略。 
2. 里面的参数就是定时器的标识符 ,也就是那个用来区分定时器变量名。

在这里插入图片描述

setInterval() 定时器

setInterval() 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数

 window.setInterval(回调函数, [间隔的毫秒数]); 
 语法和注意都跟setTimeout一样，区别就是功能不一样

案例倒计时效果

在这里插入图片描述

停止 setInterval() 定时器

 window.clearInterval(intervalID);

在这里插入图片描述

案例发送短信

① 按钮点击之后，会禁用 disabled 为true
② 同时按钮里面的内容会变化，注意 button 里面的内容通过 innerHTML修改
③ 里面秒数是有变化的，因此需要用到定时器
④ 定义一个变量，在定时器里面，不断递减
⑤ 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态。
在这里插入图片描述

this指向问题

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this 的最终指向的是那个调用它的对象
现阶段，我们先了解一下几个this指向

全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
方法调用中谁调用this指向谁
3.构造函数中this指向构造函数的实例

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是：如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

同步和异步

为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程。于是，JS 中出现了同步和异步。

同步

同步：前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。
同步任务都在主线程上执行，形成一个执行栈。

异步

异步：你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情
JS 的异步是通过回调函数实现的。
一般而言，异步任务有以下三种类型:
1、普通事件，如 click、resize 等
2、资源加载，如 load、error 等
3、定时器，包括 setInterval、setTimeout 等
异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）。

JS的执行机制

console.log(1);    
setTimeout(function () { 
 
     console.log(3); 
 
 }, 0);   
  console.log(2); 
  //打印结果是123

1.将任务分为同步任务和异步任务，将同步任务放到执行栈中，异步任务放到任务队列中
2.先执行同步任务
3.一旦执行栈中的所有同步任务执行完毕，系统将异步任务按次序读取读取放入执行栈，开始执行
在这里插入图片描述

有一段代码，当有多个异步任务会如何执行
 console.log(1); 
 document.onclick = function() { 
   console.log('click'); 
 } 
 console.log(2); 
 setTimeout(function() { 
   console.log(3) 
 }, 3000)

在这里插入图片描述

location 对象

window 对象给我们提供了一个 location 属性，因为这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象。
location可以用来获取URL，域名，端口号等等
在这里插入图片描述

location 对象的属性

重点记住： href 和 search 在这里插入图片描述

案例： 5秒钟之后自动跳转页面

在这里插入图片描述

获取URL参数

实现数据在不同页面之间的传递效果
① 第一个登录页面，里面有提交表单， action 提交到 index.html页面
② 第二个页面，可以使用第一个页面的参数，这样实现了一个数据不同页面之间的传递效果
③ 第二个页面之所以可以使用第一个页面的数据，是利用了URL 里面的 location.search参数
④ 在第二个页面中，需要把这个参数提取。
⑤ 第一步去掉？利用 substr
⑥ 第二步利用=号分割键和值 split(‘=‘)
⑦ 第一个数组就是键第二个数组就是值
在这里插入图片描述

location 常见的方法（了解）

在这里插入图片描述

navigator 对象（了解）

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|
Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS
|Symbian|Windows Phone)/i))) { 
//写好H5和pc端的两个页面放在同一个文件夹，把路径分别放入下面相应的地方
    window.location.href = "";     //手机 
 } else { 
    window.location.href = "";     //电脑 
 }