Web前端-JavaScript（BOM)

文章目录

    • 1.1 常用的键盘事件
      • 1.1.1 键盘事件
      • 1.1.2 键盘事件对象
      • 1.1.3 案例一
    • 1.2 BOM
      • 1.2.1 什么是BOM
      • 1.2.2 BOM的构成
      • 1.2.3 window
      • 1.2.4 window对象常见事件
        • 窗口/页面加载事件
          • **第1种**
          • **第2种**
        • 调整窗口大小事件
      • 1.2.5 定时器
        • setTimeout() 炸弹定时器
          • 停止定时器
          • **案例：**
        • setInterval() 闹钟定时器
          • 停止定时器
          • 定时器叠加问题
          • 案例
      • 1.2.6 this指向问题
      • 1.2.7 location对象
        • 什么是 location 对象
        • URL
        • location 对象的属性
        • 案例二
    • 1.3 JS执行机制
      • 1.3.1 JS 是单线程
      • 1.3.2 同步任务和异步任务
        • 同步
        • 异步
      • 1.3.3 JS执行机制（事件循环）

1.1 常用的键盘事件

1.1.1 键盘事件

键盘事件触发条件
onkeydown按键被按下时触发
onkeypress按键被按下时触发
onkeyup按键被松开时触发

注意：addEventListener事件不需要加on

<script>//1. keydown 按键按下的时候触发,按任意键都触发，也可以识别功能键 如ctrl,shift,左右箭头等document.addEventListener('keydown', function () {console.log('我按下了down');})//2. keypress 按键按下的时候触发, 按任意键都触发,但不识别功能键 如ctrl,shift,左右箭头等document.addEventListener('keypress', function () {console.log('我按下了press');})//3. keyup 按键弹起的时候触发,按任意键都触发，也可以识别功能键 如ctrl,shift,左右箭头等document.addEventListener('keyup', function () {console.log('我弹起了');})
</script>

1.1.2 键盘事件对象

使用keyCode属性判断用户按下哪个键

键盘事件对象<属性>说明
keyCode返回该键的ASCII值

注意：

  1. onkeydown和onkeyup 不区分字符大小写，onkeypress区分字符大小写
<script>document.addEventListener('keyup', function (e) {console.log(e.keyCode);//keyup和keydown事件不区分字母大小写  a 和 A 得到的ASCII值是65if (e.keyCode == 65) {console.log('用户按下了a/A键');}});document.addEventListener('keydown', function (e) {//keyup和keydown事件不区分字母大小写  a 和 A 得到的ASCII值是65if (e.keyCode == 65) {console.log('用户按下了a/A键');}});document.addEventListener('keypress', function (e) {//keypress事件区分字母大小写  （a 97和A 65）if (e.keyCode == 65) {console.log('用户按下了A键');}if (e.keyCode == 97) {console.log('用户按下了a键');}});
</script>

1.1.3 案例一

模拟京东按键输入内容

当我们按下s键， 光标就定位到搜索框(文本框获得焦点)

<body><input type="text" /><script>var text = document.querySelector('input');document.addEventListener('keyup', function (e) {if (e.keyCode === 83) {//获取焦点text.focus();}});</script>
</body>

1.2 BOM

1.2.1 什么是BOM

​ BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。

​ BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

​ BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C。

DOMBOM
文档对象模型浏览器对象模型
DOM把文档看作一个对象BOM把浏览器当作一个对象
DOM顶层对象是documentBOM顶层对象是window
DOM学习的是如何操作页面的元素BOM学习的是浏览器窗口交互的的对象
DOM是W3C标准规范BOM是浏览器厂商在各自浏览器上定义的，兼容性差

1.2.2 BOM的构成

BOM 比 DOM 更大，它包含 DOM。

image-20230301113414030

1.2.3 window

  1. window对象是浏览器的顶级对象
  2. 它是JS访问浏览器窗口的一个接口
  3. 它是一个全局对象，之前学过的alert()、prompt()、log();等都属于window
  <script>window.console.log("码上未来");window.alert('666');window.prompt("请输入");window.confirm('正确吗');var age = 23;console.log(window.age)</script>

1.2.4 window对象常见事件

窗口/页面加载事件
第1种

  1. window.onload 是窗口 (页面）的加载事件，当文档内容完全加载完成会触发该事件(包括图像、CSS、JS 文件等)就调用的处理函数。

    可以认为是同步的。

  2. 语法：

    1. window.onload = function( ){ }
    2. window.addEventListener(“load”,function( ){ });

  3. 注意：

    1. window.onload可以把JS代码写到页面元素的上方，因为onload是等页面所有内容加载完才回去执行处理函数
第2种
  1. DOMContentLoaded 事件触发时，仅当DOM元素结构加载完成执行，不包括CSS，JS，图像等等。
  2. 语法
    1. document.addEventListener(‘DOMContentLoaded’，function(){ });
  3. 注意：
    1. 如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，
    2. 此时用 DOMContentLoaded 事件比较合适，可以认为DOMContentLoaded是异步的
<head><meta charset="UTF-8"><script>window.onload = function () {var btn = document.querySelector('button');btn.onclick = function () {alert("button1");}}window.addEventListener('load', function () {var btn = document.querySelector('button');btn.onclick = function () {alert("button2");}})window.addEventListener('DOMContentLoaded', function () {var btn = document.querySelector('button');btn.onclick = function () {alert("button3");}})</script>
</head><body><button>按钮</button>
</body>
</html>
调整窗口大小事件
  1. window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。
  2. 语法：
    1. window.onresize = function(){}
    2. window.addEventListener(‘resize’, function() { } )
  3. 注意：
    1. 只要窗口大小发生像素变化，就会触发这个事件。
    2. 我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度
<body><div></div><script>var div = document.querySelector('div');window.addEventListener('resize', function () {console.log(window.innerWidth);if (window.innerWidth > 1000) {div.style.width = '800px';} else {div.style.width = '600px';}})</script>
</body>

1.2.5 定时器

  • setTimeout()

  • setInterval()

setTimeout() 炸弹定时器
  1. 开启定时器，时间到了就执行，只执行一次。
  2. 语法：
    1. window.setTimeout( function( ){ }，[延迟毫秒数])
  3. 注意：
    1. window可以省略
    2. 延迟毫秒数默认是0，如果写必须是毫秒
普通函数是按照代码顺序直接调用。
回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。
例如：定时器中的调用函数，事件处理函数，也是回调函数。

<script>// setTimeout 只是执行一次的定时器// 1. 执行函数是匿名函数,// window.setTimeout(function () {//   alert('💣爆炸了！');// }, 2000);// 2. 执行函数是命名函数// window.setTimeout(fn, 2000);// function fn() {//   alert('💣爆炸了！');// }//3.使用较少，平时不推荐，但是如果需要传参可以使用setTimeout('fn(2)', 2000);function fn(n) {alert(n + 's时间到了');}</script>
停止定时器
  1. clearTimeout()方法取消了先前通过setTimeout()建立的定时器
  2. 语法：
    1. window.clearTimeout(timeoutID)
  3. 注意：
    1. window可以省略
    2. 创建定时器时候用添加一个标识符
    3. timeoutID是定时器标识符
<body><button>点击停止定时器</button><script>var timeoutID = setTimeout(function () {alert('💣爆炸了！');}, 3000);var btn = document.querySelector('button');btn.onclick = function () {// 清除对应的定时器任务window.clearTimeout(timeoutID);};</script>
</body>
案例：

5秒后关闭广告

<body><img src="images/ad.jpg" alt="" class="ad" /><script>var img = document.querySelector('.ad');window.setTimeout(function () {img.style.display = 'none';}, 3000);</script>
</body>
setInterval() 闹钟定时器
  1. 该方法重复调用一个函数，每隔指定时间就工作一次。
  2. 语法：
    1. window.setInterval(function( ) { }, [间隔毫秒数] )
  3. 注意：
    1. window可以省略
    2. 默认间隔时间是0，如果写就必须是毫秒
<script>// 他与闹钟定时的唯一区别就是可以执行多次！window.setInterval(function () {console.log('我很帅！');}, 1000);</script>
停止定时器
  1. clearInteval()方法取消了先前通过clearInteval()建立的定时器
  2. 语法：
    1. window.clearInterval(intervalID);
  3. 注意：
    1. window可以省略
    2. intervalID就是定时器的标识符
<body><button class="begin">开启定时器</button><button class="stop">停止定时器</button><script>var timeId = null;var begin = document.querySelector('.begin');var stop = document.querySelector('.stop');begin.onclick = function () {timeId = setInterval(function () {console.log('开始工作');}, 1000);};stop.onclick = function () {clearInterval(timeId);};</script>
</body>
定时器叠加问题

如果一直点击定时器，会发现无法关闭定时器

<body><button class="begin">开启定时器</button><button class="stop">停止定时器</button><script>var timeId = null;var isExit = false;var begin = document.querySelector('.begin');var stop = document.querySelector('.stop');//  开关灯 布尔值来控制定时器叠加问题begin.onclick = function () {if (isExit == false) {isExit = true;timeId = setInterval(function () {console.log('开始工作');}, 1000);}};stop.onclick = function () {if (isExit == true) {isExit = falseclearInterval(timeId);}};</script>
</body>
案例

发送短信倒计时

点击按钮后，该按钮60秒之内不能再次点击，防止重复发送短信。

image-20230301113702199 
<body>手机号码： <input type="number" /><button>发送</button><script>// this指向问题？var btn = document.querySelector('button');var count = 3;btn.onclick = function () {this.disabled = true;// var that = this;var timerId = setInterval(function () {if (count == 0) {this.innerText = '发送';this.disabled = false;clearInterval(timerId);count = 3;} else {this.innerText = '剩余' + count + '秒';console.log(count);count--;}}, 1000);};</script>
</body>

1.2.6 this指向问题

  1. this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，
  2. 一般情况下this的最终指向的是那个调用它的对象。

现阶段，我们先了解一下几个this指向

  1. 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）

  2. 方法调用中谁调用this指向谁

  3. 构造函数中this指向构造函数的实例

<body><button>点击</button><script>// this 指向问题 一般情况下this的最终指向的是那个调用它的对象// 1. 全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window）// window.console.log(this);//这里this指向window// function fn() {//   console.log(this);//这里this指向window// }// window.fn();// 2. 方法调用中谁调用this指向谁// var o = {//   name: 'zs',//   sayHi: function () {//     console.log(this); // this指向的是 o 这个对象//   }// };// o.sayHi();// 3. 事件注册中this指向事件源// var btn = document.querySelector('button');// btn.onclick = function () {//   console.log(this); // this指向的是btn这个按钮对象// };//4. 构造函数中this指向构造函数的实例// function Fun(name) {//   this.name = name//   console.log(this); // this 指向的是fun 实例对象// }// var fun = new Fun("zs");// var fun1 = new Fun("lisi");//   5.在定时器中this指向window// window.setInterval(function () {//   console.log(this);// }, 1000);//  6.自调用函数中this指向？ window(function (n) {console.log(n);console.log(this);})(5)</script>
</body>

1.2.7 location对象

什么是 location 对象

window对象给我们提供了一个location属性，用于获取或设置窗体的URL，并可以解析URL

URL

  1. 统一资源定位符，是互联网上标准资源的地址，互联网上的每个文件都有一个唯一的URL

  2. 语法：127.0.0.1

    1. Request URL: 协议：//主机：端口/路径？参数1=值1 & 参数2 =值2

    2. http://localhost:19002/v2/goodstype/listByPage?page=1&rows=10

      组成说明
      protocolhttp协议http
      host主机，域名localhost
      port端口19002
      path接口路径，由多个/组成v2/goodstype/listByPage
      params参数，用&分隔page=1&rows=10
location 对象的属性
location对象属性返回值
location.href获取整个URL
location.search返回参数
location.pathname返回路径
location.host返回主机
location.port返回端口号

重点掌握href和search

location.href = "http://www.baidu.com"
案例二

5秒钟自动跳转页面

image-20230301113759753

<body><button>立即跳转</button><div>5秒以后返回首页</div><script>var btn = document.querySelector('button');btn.onclick = function () {location.href = 'http://www.baidu.com';};setTimeout(function () {location.href = 'http://www.baidu.com';}, 5000);</script>
</body>

1.3 JS执行机制

以下代码执行的结果是什么？

<script>// 第一个问题// console.log(1);// setTimeout(function () {//   console.log(3);// }, 2000);// console.log(2);// 2. 第二个问题// console.log(1);// setTimeout(function () {//   console.log(3);// }, 0);// for (var i = 0; i < 20000; i++) {//   console.log(2);// }</script>

1.3.1 JS 是单线程

image-20230301114224179

	单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。这样所导致的问题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

1.3.2 同步任务和异步任务

同步

​ 前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。

异步

​ 你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。

JS中所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；
异步任务指的是：不进入主线程、而进入”任务队列”的任务，当主线程中的任务运行完了，才会从”任务队列”取出异步任务放入主线程执行。
image-20230301114352656

1.3.3 JS执行机制（事件循环）

image-20230301114752124

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/604136.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

解决ImportError: Failed to import test module: sys.__init__

解决ImportError: Failed to import test module: sys.__init__

解决ImportError: Failed to import test module: sys.init 背景 学习通过文件夹执行测试脚本时&#xff0c;出现了错误&#xff1a;ImportError: Failed to import test module: sys.__init__ 解决过程 根据报错信息&#xff1a;sys is not a package大胆猜测可能是文件名…
阅读更多...
VMware linux虚拟机卸载不干净导致二次安装之后虚拟机ping不通主机

VMware linux虚拟机卸载不干净导致二次安装之后虚拟机ping不通主机

问题就是主机能ping通虚拟机&#xff0c;虚拟机不能ping通主机&#xff0c;我看网上又说虚拟机和主机没在同一网段的&#xff0c; 有些确实是这个情况但是首先你要打开控制面板–》网络–》网络和共享中心-》更改适配器设置&#xff0c;然后 会弹出下面的界面 如果你的没有上面…
阅读更多...
【UE Niagara学习笔记】01 - 浮动的蒲公英

【UE Niagara学习笔记】01 - 浮动的蒲公英

目录 效果 步骤 一、创建材质 二、创建Niagara粒子 2.1 创建Niagara模板 2.2 通过用户参数设置粒子大小 2.3 设置数量、风速、透明度变化 效果 步骤 一、创建材质 1. 在虚幻商城中把“Realistic Starter VFX Pack Vol 2”添加到项目中&#xff0c;该资产中所包含的…
阅读更多...
ubuntu开机卡在[OK],,,,,的界面无法正常开机后进入桌面

ubuntu开机卡在[OK],,,,,的界面无法正常开机后进入桌面

0.现象 ubuntu开机&#xff0c;进入一片代码行&#xff0c;会卡在某一行&#xff0c;一直没有新的进展 1.原因 有很多原因可能导致这个现象&#xff0c;内核升级与固件不匹配、磁盘出了问题等等如果没有做过什么特别的事情&#xff0c;也可能是存储空间满了&#xff0c;也会…
阅读更多...
探索2024年软件测试的几大主导趋势

探索2024年软件测试的几大主导趋势

进入2024年&#xff0c;考虑影响测试环境的问题至关重要。这种思考将成为团队了解主要瓶颈和实现当今不断提高的期望的首要因素。 01 了解关键测试瓶颈 毋庸置疑&#xff0c;现代团队需要不断创新、适应和拥抱最新趋势&#xff0c;以保持竞争力并提供以客户为中心的解决方案。尽…
阅读更多...
微信小程序 引导地址授权 获取位置信息 uniapp

微信小程序 引导地址授权 获取位置信息 uniapp

概述 获取位置信息&#xff0c;需要保证是否授权位置信息&#xff0c;有几个条件是导致无法授权的原因 &#xff08;1&#xff09;微信应用未授权定位设置 &#xff08;2&#xff09;首次进入小程序未授权位置信息 &#xff08;3&#xff09;小程序之前阻止过授权位置信息 &…
阅读更多...
力扣383.赎金信 -- 哈希表

力扣383.赎金信 -- 哈希表

思路&#xff1a;记录magazine每个字符个数&#xff0c;然后记录ransomNote每个字符&#xff08;每有一个减1&#xff09;&#xff0c;假如出现<0的情况说明ransomnode有字符的个数超过了magazine则无法构成&#xff0c;否则可以构成 代码&#xff1a; class Solution { pu…
阅读更多...
SpringBoot实用开发（十二）-- MongoDB语句的简单使用

SpringBoot实用开发（十二）-- MongoDB语句的简单使用

目录 1.新增文档 2.删除文档 3.修改文档 4.查询文档 4.1 基础查询 4.2 条件
阅读更多...
asp实现ACCESS中日期时间的比较

asp实现ACCESS中日期时间的比较

今天程序中要实现时间作为查询条件的功能&#xff01;使用的是ASPACCESS。 在ACCESS数据库中&#xff0c;日期时间的比较操作符主要有> 、<、三个&#xff01;但不能直接把比较时间用这些操作符相连&#xff01;为了区分时间类型和其它类型&#xff0c;ACCESS中在时…
阅读更多...
Qt/QML编程学习之心得：QProcess进程创建（27）

Qt/QML编程学习之心得：QProcess进程创建（27）

Qt除了线程Thread，进程也有支持类，那就是QProcess。 可以看出，这个类很大，支持的内容也很多。最简单的使用如： myParam << QString("-param hello") ; bool bRes = QProcess::startDetached("/usr/bin/myApplication", myParam);要启动进程，主…
阅读更多...
Cache伪共享

Cache伪共享

伪共享 什么是伪共享 为了解决计算机系统中主内存与CPU之间运行速度差问题&#xff0c;会在CPU与主内存之间添加一级或者多级高速缓冲存储器(Cache)。 这个Cache一般是被集成到CPU内部的&#xff0c;所以也叫CPU Cache。 在Cache内部是按行存储的&#xff0c;其中每一行称为…
阅读更多...
基于冒泡排序思想的qsort函数的模拟实现

基于冒泡排序思想的qsort函数的模拟实现

&#x1d649;&#x1d65e;&#x1d658;&#x1d65a;!!&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦ &#x1f44f;&#x1f3fb;‧✧̣̥̇:Solitary-walk ⸝⋆ ━━━┓ - 个性标签 - &#xff1a;来于“云”的“羽球人”。…
阅读更多...
kafka 偏移量的类型与提交方式

kafka 偏移量的类型与提交方式

kafka checkpoint 在流处理中，“checkpoint” 通常指的是将应用程序的状态保存到可靠的存储系统中，以便在发生故障或应用程序需要重启时能够从先前的状态中恢复。这包括保存处理过的事件、中间结果以及任何其他状态信息。“Checkpointing” 可以确保系统的一致性，并提供容错…
阅读更多...
如何计算ThreadLocal对象的hash值？【ThreadLocal技术】（含AtomicInteger的介绍）

如何计算ThreadLocal对象的hash值？【ThreadLocal技术】（含AtomicInteger的介绍）

如何计算ThreadLocal对象的hash值&#xff1f; 一、前置知识二、问题三、剖析源码&#xff1a;如何计算ThreadLocal对象的hash值&#xff1f;1、源码1.1 咱先得知道nextHashCode的起始值1.1.1 那就要先了解AtomicInteger创建AtomicInteger原子的增减操作原子的加法操作原子的获…
阅读更多...
ROS - tf

ROS - tf

系列文章目录 前言 PR2 你想看看 tf 能做什么&#xff1f;看看 tf 介绍演示。 一个机器人系统通常有许多随时间变化的三维坐标系&#xff0c;如世界坐标系、基础坐标系、抓手坐标系、头部坐标系等&#xff1a; 5 秒钟前&#xff0c;头部坐标系相对于世界坐标系的位置在哪里&am…
阅读更多...
图神经网络｜7.1-GCN基本模型概述

图神经网络｜7.1-GCN基本模型概述

图卷积和卷积的差别 图神经网络常见的情况 半监督 实际情况下并不是所有节点都有打上标签。 比如在交通网络中&#xff0c;点对应城市中各个区域的传感器&#xff0c;由于配置的先后问题和经济考虑&#xff0c;有些偏远地区并没有来得及配得上&#xff0c;会缺乏相关数据的支持…
阅读更多...
QT常用控件使用及布局

QT常用控件使用及布局

QT常用控件使用及布局 文章目录 QT常用控件使用及布局1、创建带Ui的工程2、ui界面介绍1、界面设计区2、对象监视区3、对象监属性编辑区4、信号与槽5、布局器6、控件1、Layouts1、布局管理器2、布局的dome 2、Spacers3、Buttons4、项目视图组(Item Views)5、项目控件组(Item Wid…
阅读更多...
R语言绘制基线资料表

R语言绘制基线资料表

#转换数据类型mydata <- data %>% # 创建新数据集新变量#note#Age=Age, #连续变量#Gender = factor(Gender, levels = c(1, 2),labels = c("Male","Female")) #分类变量transmute(Groups= factor(data$Groups)…
阅读更多...
ARM 链接器优化功能介绍

ARM 链接器优化功能介绍

消除公共部分组 链接器可以检测节组的多个副本&#xff0c;并丢弃其他副本。 Arm Compiler for Embedded 生成用于链接的完整对象。因此&#xff1a; 如果 C 和 C 源代码中存在内联函数&#xff0c;则每个对象都包含该对象所需的内联函数的外联副本。如果在 C 源代码中使用…
阅读更多...
idea 热更新 JRebel 插件激活使用

idea 热更新 JRebel 插件激活使用

下载 在 jetbrains 插件网站点击 show more 加载更多版本找到 2022.4.1 版本https://plugins.jetbrains.com/plugin/4441-jrebel-and-xrebel/versions (opens new window) 安装 请勿直接在idea 中搜索安装, 使用从本地安装, 选择刚刚下载的插件, 激活 在设置中找到 JRebel…
阅读更多...
最新文章

Copyright @ 2022~2023