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

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

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

相关文章

Mybatis-plus动态条件查询QueryWrapper的使用

Mybatis-plus动态条件查询QueryWrapper的使用 一:queryWrapper介绍 queryWrapper是mybatis plus中实现查询的对象封装操作类,可以封装sql对象,包括where条件,order by排序,select哪些字段等等,他的层级关…

CentOS7连接网络

1.下载centos7镜像文件 2.安装centos7 3.修改网卡,ens33. 注意: 这里使用的是dhcp,设置IPADDR192.168.31.64一方面是为了后面使用crt或者MobaXterm连接,另一方面它和windows电脑的网卡要一致.这样才可以连接到网络.win r,输入cmd,打开命令窗口输入ipconfig.可以看到IPv4: 102…

phpstorm配置ftp同步文件到服务器

这里的默认快捷键 不是 CtrlS ;需要设置快捷键,这里原来是save all操作时上传文件到服务器; ** 设置好快捷键后按 CtrlS就会同步文件(添加删除文件后保存,服务器也会同步) ** 搜索出save all 后&#xf…

NPM与外部服务的集成(上)

目录 1、关于访问令牌 1.1 关于传统令牌 1.2 关于粒度访问令牌 2、创建和查看访问令牌 2.1 创建访问令牌 在网站上创建传统令牌 在网站上创建粒度访问令牌 使用CLI创建令牌 CIDR限制令牌错误 查看访问令牌 在网站上查看令牌 在CLI上查看令牌 令牌属性 1、关于访问令…

报错注入(主键重复)攻击原理

基本原理 利用数据表中主键不能重复的特点,通过构造重复的主键,使得数据库报错,并将报错结果返回到前端。 SQL说明函数 以pet数据表为例进行说明 rond(): 返回[0,1)区间内的任意浮点数。 count(): 返回每个组的列行数。 如&#xff0…

SWIG使用方法

安装 下载 swigwin软件包,解压到合适的位置,然后将路径添加到环境变量即可。 编写C代码 //vector.hpp class Vector { private:int x;int y; public:Vector(int,int);double abs();void display(); };//vector.cpp #include "vector.hpp" …

CI/CD—K8S 基本理解与部署

1 K8S 是什么 Kubernetes 是一款容器的编排调度工具,来源于 Google 开源的 Brog 系统。Kubernetes简称K8S,是用8代替8个字符 “ubernete” 而成的缩写,用于管理云平台中多个主机上的容器化的应用,Kubernetes 的目标是让部署容器化…

解决createRoot is not a function

报错: 出现的原因:在于把react18使用的vite构建,在开发中因react版本太高与其他库不兼容,而在降级的时候,出现以上dom渲染出现报错。 解决:将 src/index.j文件改成如下 import React from react; import…

【数据结构与算法】十大经典排序算法-冒泡排序

🌟个人博客:www.hellocode.top 🏰Java知识导航:Java-Navigate 🔥CSDN:HelloCode. 🌴掘金:HelloCode 🌞知乎:HelloCode ⚡如有问题,欢迎指正&#…

锐捷设备密码管理、密码恢复、恢复出厂设置

目录 配置登录用户名密码以及Enable密码 只需要密码登录 需要用户名和密码登录(无AAA) 需要用户名和密码登录(有AAA) 密码恢复 Web密码忘记 Telnet/SSH密码忘记 Console密码忘记 所有密码都忘记,通过Console进…

服务器数据恢复-RAID5上层Hyper-V虚拟机数据恢复案例

服务器数据恢复环境: 一台Windows Server服务器,部署Hyper-V虚拟化环境,虚拟机的硬盘文件和配置文件存放在一台DELL存储中。该存储中有一组由4块硬盘组建的RAID5阵列,用来存放虚拟机的数据文件,另外还有一块大容量硬盘…

【TypeScript】进阶之路语法细节,类型和函数

进阶之路 类型别名(type)的使用接口(interface)的声明的使用二者区别: 联合类型和交叉类型联合类型交叉类型 类型断言获取DOM元素 非空类型断言字面量类型的使用类型缩小(类型收窄)TypeScript 函数类型函数类型表达式内部规则检测函数的调用签…

keil下载程序具体过程:概述

一、前言 keil下载程序具体过程将由一系列的博客组成,将深入探讨keil这种IDE下载镜像文件时具体做了哪些事情。我们平常下载镜像的时候,只是点击了一下Download按钮,剩下的都由keil替代我们完成了。本系列博客将揭示这一过程,keil…

【云原生】kubernetes控制器deployment的使用

目录 ​编辑 1 Controller 控制器 1.1 什么是 Controller 1.2 常见的 Controller 控制器 1.3 Controller 如何管理 Pod 2 Deployment 2.1 创建 deployment 2.2 查看 deployment 2.3 扩缩 deployment 2.4 回滚 deployment 2.5 删除 deployment 1 Controller 控制器 …

markdown命令模板

markdown快速入门(typora) 1、代码块 //代码块语 public static void main(String[] args){}//linux下spring项目的启动命令 # java -jar blog start ## 2、标题:java # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题3、字体 …

Webpack 的 sass-loader 在生产模式下最小化 CSS 问题

学习webpack时候我发现一个问题: 将mode 改为production模式后,生成的css会被压缩了,但是我并没有引入CssMinimizerPlugin插件,然后我试着将optimization.minimize 设置为false,测试是否为webpack自带的压缩&#xff0…

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

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

Postman 的简单使用

什么是Postman 在程序开发中用于调试网络程序或者跟踪网页请求。可以对网页进行简单的基本信息调试。Postman最早是作用chrome浏览器插件存在的,但是2018年初Chrome停止对Chrome应用程序的支持。所以现在Postman提供了独立的安装包,不再依赖于Chrome浏览…

flutter 初识(开发体验,优缺点)

前言 最近有个跨平台桌面应用的需求,需要支持 windows/linux/mac 系统,要做个更新应用的小界面,主要功能就是下载更新文件并在本地进行替换,很简单的小功能。 花了几分钟构建没做 UI 优化的示例界面: 由于我们的客…

腾讯云香港服务器租用_2核2G20M_2核4G30M

腾讯云香港服务器租用费用表,目前中国香港地域轻量应用服务器可选配置2核2G20M、2核2G30M、2核4G30M,操作系统可选Windows和Linux,不只是香港云服务器,新加坡、硅谷、法兰克福和东京服务器均有活动,腾讯云服务器网分享…