JavaScript之BOM+window对象+定时器+location,navigator,history对象

一.BOM概述

BOM即浏览器对象模型,它提供了独立于内容而与窗口进行交互的对象

BOM的顶级对象是window

二.window对象的常见事件

1.窗口加载事件window.onload

window.onload = function(){}
或者
window.addEventListener("onload" , function(){});

window.onload传统方式只能写一次,有多个以最后一个为准


  •  load等页面内容全部加载完毕,包含页面dom元素 图片 flash css等等
  • DOMContextLoaded是DOM加载完毕,不包括图片 flash css等就可以执行 加载速度比load更快一些

2.调整窗口大小事件

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

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

经常利用这个事件完成响应式布局 window.innerWidth当前屏幕的宽度


三.JavaScript定时器

  • setTimeout()
window.setTimeout(调用函数 , [延迟的毫秒数] );
  1. window在调用的时候可以省略 
  2. 延时时间单位是毫秒,但是可以省略,如果省略默认的是0
  3. 调用函数可以直接写函数,也可以写函数名,还可以写成  '函数名()'
  4. 定时器可以设置很多个
  • 清除定时器clearTimeout
window.clearTimeout(timeoutID)

 括号里就是定时器的名字


  • setInterval()
window.setInterval(调用函数 , [间隔的毫秒数] );
  1. 跟setInterval的特点相同,但是它可以重复调用函数.
  2. 每隔间隔时间就会去调用,会调用很多次,一直开着
  • 清除定时器clearInterval

四.JavaScript执行队列

同步任务:同步任务都在主线程上执行,形成一个执行栈

异步任务:JS的异步是通过回调函数实现的.有以下三种类型:

  1. 普通事件,如click , resize等
  2. 资源加载,如load , error等
  3. 定时器,包括setInterval , setTimeout等

异步任务相关回调函数添加到任务队列中(任务队列也称为消息队列)


五.location对象

location属性用于获取或设置窗体的URL,并且用于解析URL

 重点记住:herf和search

可用于5秒之后跳转页面


location方法:


六.navigator对象

navigator对象包含有关浏览器的信息,它有很多属性,最常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值

可以用于判断用户那个终端打开页面,实现跳转


七.history对象

window对象给我们提供了一个history对象,与浏览器历史记录进行交互.

该对象包含用户(在浏览器窗口中)访问过的URL

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

websocket知识点

http协议 http协议特点: 无状态协议每个请求是独立的单双工通信,且服务器无法主动给客户端发信息http协议受浏览器同源策略影响 http实现双向通信方法: 轮询长轮询iframe流sse EventSource websocket协议 websocket协议: 全双工协议支持跨域支持多…

近地面无人机植被定量遥感与生理参数反演技术

遥感(RS-Remote Sensing)——不接触物体本身,用传感器收集目标物的电磁波信息,经处理、分析后,识别目标物,揭示其几何、物理性质和相互关系及其变化规律的现代科学技术。 换言之,即是“遥远的感…

【Ubuntu】简化反向代理和个性化标签页体验

本文将介绍如何使用Docker部署Nginx Proxy Manager和OneNav,两个功能强大且易用的工具。Nginx Proxy Manager用于简化和管理Nginx反向代理服务器的配置,而OneNav则提供个性化的新标签页体验和导航功能。通过本文的指导,您将学习如何安装和配置…

SQL-每日一题【1517. 查找拥有有效邮箱的用户】

题目 表: Users 编写一个解决方案,以查找具有有效电子邮件的用户。 一个有效的电子邮件具有前缀名称和域,其中: 前缀 名称是一个字符串,可以包含字母(大写或小写),数字,下划线 _ &…

[保研/考研机试] KY163 素数判定 哈尔滨工业大学复试上机题 C++实现

题目链接: 素数判定https://www.nowcoder.com/share/jump/437195121691718831561 描述 给定一个数n,要求判断其是否为素数(0,1,负数都是非素数)。 输入描述: 测试数据有多组,每组输入一个数…

Vue3入门

1. 为什么要学 Vue3 ? Vue3 的优势: Vue2 选项式 API vs Vue3 组合式API 2. create-vue搭建Vue3项目 2.1 认识 create-vue create-vue是Vue官方新的脚手架工具,底层切换到了 vite(下一代构建工具),为开发…

【Vue3】keep-alive 缓存组件

当在 Vue.js 中使用 <keep-alive> 组件时&#xff0c;它将会缓存动态组件&#xff0c;而不是每次渲染都销毁和重新创建它们。这对于需要在组件间快速切换并且保持组件状态的情况非常有用。 <keep-alive> 只能包含&#xff08;或者说只能渲染&#xff09;一个子组件…

SQL-每日一题【1484. 按日期分组销售产品】

题目 表 Activities&#xff1a; 编写解决方案找出每个日期、销售的不同产品的数量及其名称。 每个日期的销售产品名称应按词典序排列。 返回按 sell_date 排序的结果表。 结果表结果格式如下例所示。 示例 1: 解题思路 前置知识 group_concat函数的功能   将group by产生的…

Linux 基础篇(六)sudo和添加信任用户

一、sudo 1.是什么&#xff1f; 给被信任的普通用户授权&#xff0c;让被信任的普通用户能执行root用户才能执行的命令的一个命令。 2.为什么&#xff1f; 很多时候我们要在被信任的普通用户下执行一些root用户才能执行的命令&#xff0c;如 yum… 所以需要有一个命令能给普通用…

C字符串与C++ string 类:用法万字详解(上)

目录 引言 一、C语言字符串 1.1 创建 C 字符串 1.2 字符串长度 1.3 字符串拼接 1.4 比较字符串 1.5 复制字符串 二、C字符串string类 2.1 解释 2.2 string构造函数 2.2.1 string() 默认构造函数 2.2.2 string(const char* s) 从 C 风格字符串构造 2.2.3 string(co…

【计算机网络】——数据链路层

二、组帧 1、字符计数法 帧头部使用一个字符来表示帧的大小(包括第一个计数字符) &#xff08;此处一字符一个字节&#xff09; 2、字符填充收尾定界法 特定字符来定界帧的首和尾。若帧中数据段出现等同于特定字符的字符内容&#xff0c;前置一个转义字符。(类似于正则表达…

块、行内块水平垂直居中

1.定位实现水平垂直居中 <div class"outer"><div class"test inner1">定位实现水平垂直居中</div></div><style>.outer {width: 300px;height: 300px;border: 1px solid gray;margin: 100px auto 0;position: relative;}.te…

特征选择 | 变量重要性衡量

特征选择 | 变量重要性衡量 目录 特征选择 | 变量重要性衡量写在前面常规方法存在问题解决策略参考资料 写在前面 特征选择是预测模型构建的关键步骤&#xff0c;旨在1&#xff09;降低数据维度&#xff0c;减少计算量&#xff1b;2&#xff09;剔除一些无关或冗余变量&#xf…

科大讯飞分类算法挑战赛2023的一些经验总结

引言: ResNet是he kaiming大佬的早年神作&#xff0c;当年直接刷榜各大图像分类任务。ResNet是一种残差网络&#xff0c;咱们可以把它理解为一个子网络&#xff0c;这个子网络经过堆叠可以构成一个很深的网络&#xff0c;而ResNext在其基础上&#xff0c;进行了一定修改完善&am…

七、解析应用程序——枚举内容与功能

文章目录 1、web抓取2、发现隐藏内容2.1 蛮力技巧2.2 通过公布的内容进行推测2.3 利用公共信息 3、应用程序页面和功能路径4、发现隐藏参数 攻击应用程序的第一步是收集和分析与其有关的一些关键信息&#xff0c;以清楚了解攻击目标。解析过程首先是枚举应用程序的内容与功能&a…

QT学习笔记-QT安装oracle oci驱动

QT学习笔记-QT安装oracle oci驱动 0、背景1、环境以及条件说明2、编译驱动2.1 下载oracle instant client2.2 编译qt oci驱动2.2.1 修改oci.pro2.2.2 MinGW64构建套件编译2.2.3 MSVC2019_64构建套件编译 3、访问数据库运行成功 0、背景 在使用QT开发应用的过程中&#xff0c;往…

分布式搜索ElasticSearch-ES(一)

一、ElasticSearch介绍 ES是一款非常强大的开源搜索引擎&#xff0c;可以帮我们从海量的数据中快速找到我们需要的内容。 ElasticSearch结合kibana、Logstash、Beats&#xff0c;也就是elastic stack(ELK)&#xff0c;被广泛运用在日志数据分析&#xff0c;实时监控等领域。 …

国产航顺HK32F030M: 内部参考电压

HK32F030MF4P6 用户手册 内部参考电压 adc.c #include "bsp_adc.h"/*** brief ADC GPIO 初始化* param 无* retval 无*/ static void ADCx_GPIO_Config(void) {GPIO_InitTypeDef GPIO_InitStructure;// 打开 ADC IO端口时钟ADC_GPIO_AHBxClock_FUN ( ADC_GPIO_C…

MySQL~事务的四大特性和隔离级别

事务的四大特性 1.原子性&#xff1a;一个事务&#xff08;transaction&#xff09;中的所有操作&#xff0c;要么全部完成&#xff0c;要么全部不完成。事务在执行过程中发生错误&#xff0c;会被回滚&#xff08;Rollback&#xff09;到事务开始前的状态&#xff0c;就像这个…

Linux 终端命令之文件浏览(2) more

Linux 文件浏览命令 cat, more, less, head, tail&#xff0c;此五个文件浏览类的命令皆为外部命令。 hannHannYang:~$ which cat /usr/bin/cat hannHannYang:~$ which more /usr/bin/more hannHannYang:~$ which less /usr/bin/less hannHannYang:~$ which head /usr/bin/he…