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

news2024/11/26 3:54:18

一.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.coloradmin.cn/o/867803.html

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

相关文章

简单易用且高效的跨平台开发工具:Xojo 2023 for Mac

Xojo for Mac是Mac平台上一个跨平台的针对桌面、Web、移动和Raspberry Pi的快速应用程序开发软件。与其他多平台开发工具相比,Xojo for Mac为开发人员提供了显着的生产率提高。 Xojo for Mac具有拖放功能,使您能够快速创建用户界面设计,然后…

构造函数——初始化列表

初始化列表的引入。 #include<iostream> using namespace std;//栈类 typedef int DataType; class Stack { public://默认构造&#xff1a;Stack(size_t capacity ){cout << "Stack()" << endl;_array (DataType*)malloc(sizeof(DataType) * ca…

MSDN镜像和版本的区别

重装系统 前言 装系统本质上就是运行U盘内放好的windows安装包&#xff0c;目前U盘有三种格式化方式&#xff0c;分别是FAT32 exFAT NTFS ,后面两个方式很挑主板&#xff0c;老旧主板胡总和老旧电脑无法识别&#xff0c;选用FAT32种方式进行格式化&#xff0c;几乎所有的设备都…

连锁酒店(民宿)多商户全开源版 (多店模块版),支持创建多个小程序

手边酒店多商户小程序支持创建多个小程序&#xff0c;更合适平台型或者连锁酒店使用。后台支持一键入住&#xff0c;一键退款、退押金、钟点房支持微信支付、模板消息。客服实时收到新的订单信息&#xff0c;可以在手机端处理订单。支持按日期维护房价和房间数量&#xff0c;支…

分布式 - 消息队列Kafka:Kafka消费者和消费者组

文章目录 1. Kafka 消费者是什么&#xff1f;2. Kafka 消费者组的概念&#xff1f;3. Kafka 消费者和消费者组有什么关系&#xff1f;4. Kafka 多个消费者如何同时消费一个分区&#xff1f; 1. Kafka 消费者是什么&#xff1f; 消费者负责订阅Kafka中的主题&#xff0c;并且从…

最新版本的Anaconda环境配置、Cuda、cuDNN以及pytorch环境一键式配置流程

本教程是最新的深度学习入门环境配置教程&#xff0c;跟着本教程可以帮你解决入门深度学习之前的环境配置问题。同时&#xff0c;本教程拒绝琐碎&#xff0c;大部分以图例形式进行教程。这里我们安装的都是最新版本~ 文章目录 一、Anaconda的安装1.1 下载1.2 安装1.3 环境配置…

STM32CubeMX之freeRTOS互斥量

这是大哥保护小弟的故事 高中低等级的任务 互斥量就是谁要敢插我小弟的队&#xff0c;我就要打他&#xff0c;不能让其他人插我小弟的队 互斥量的使用是默认开启的不用手动开启&#xff01; 最高优先级任务&#xff1a;延时&#xff08;10ms&#xff09;再上厕所 中间&#x…

2023年录屏软件哪个好用,Camtasia Studio2023安装激活教程最新激活密钥

2023年录屏软件哪个好用&#xff0c;电脑Windows10系统自带录屏不是挺香吗&#xff0c;干嘛还需要安装录屏软件&#xff01;系统自带的录屏功能有一定局限限&#xff0c;想要录制其他文件、软件内容根本不好用&#xff1b;与其费时费力研究系统自带&#xff0c;不如选择好用的录…

matlab解微分方程:方向场

在微分方程中&#xff0c;常见的形式是&#xff1a; x ′ f ( x , t ) xf(x,t) x′f(x,t) 方向场的每一个矢量可以形象地刻画一阶微分方程的解。在方向场中的每个点处&#xff0c;都会出现一条其斜率等于通过该点的微分方程解的矢量。给定一个初值&#xff0c;微分方程对应一条…

MyBatis源码解析手写持久层框架

1. 手写持久层框架 1.1 JDBC操作数据库_问题分析 JDBC API 允许应用程序访问任何形式的表格数据&#xff0c;特别是存储在关系数据库中的数据 代码示例&#xff1a; public static void main(String[] args) { Connection connection null;PreparedStatement preparedState…

axios请求

参考&#xff1a;https://www.axios-http.cn/docs/instance

Visual Studio 2022 如何关闭左侧绿色条的点击事件,避免误触?

如图&#xff0c;文本编辑器左侧的绿条&#xff0c;很容易误触&#xff0c;真是神烦&#xff01;点一下就会弹出这个差异框。 我也不知道这个绿色的条叫什么&#xff0c;烦了好久都没有找到怎么关闭它&#xff01; 是叫 git 状态条&#xff1f;git 差异条&#xff1f;git 更改…

三平面映射的技术

大家好&#xff0c;我是阿赵。   之前在做护盾的时候&#xff0c;使用过一种叫做三平面映射的技术&#xff0c;这里来详细的说一下。 一、效果说明 在做场景的时候&#xff0c;很多美工都会遇到一个问题&#xff0c;想把一个通用的材质贴图赋予给一个经过拉伸的模型&#xf…

无涯教程-Perl - my函数

描述 此函数声明LIST中的变量在包围式块内按词法范围。如果指定了多个变量,则所有变量都必须用括号括起来。 语法 以下是此函数的简单语法- my LIST返回值 此函数不返回任何值。 例 以下是显示其基本用法的示例代码- #!/usr/bin/perl -wmy $string "We are the w…

【算法学习】高级班九

这种互为旋变串&#xff1a; 给定两个字符串&#xff0c;判断是否互为旋变串 代码&#xff1a; 打表法&#xff1a; 每一层内的数字不互相依赖&#xff0c;只依赖它下面的层但实际上size会约束L1和L2的值&#xff0c;即L1和L2<N-size 思路&#xff1a;设置一个窗口…

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

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

多线程与高并发--------阻塞队列

四、阻塞队列 一、基础概念 1.1 生产者消费者概念 生产者消费者是设计模式的一种。让生产者和消费者基于一个容器来解决强耦合问题。 生产者 消费者彼此之间不会直接通讯的&#xff0c;而是通过一个容器&#xff08;队列&#xff09;进行通讯。 所以生产者生产完数据后扔到…

【Realtek sdk-3.4.14b】RTL8197F+RTL8812F欧洲屏蔽5G天气雷达信道DFS信道120、124、128方法

需求描述 对于欧洲国家来说,默认支持DFS信道,但是有三个信道比较特殊,是天气雷达信道,如下图所示120、124、128,天气雷达信道有个特点就是在信号可以发射之前需要检测静默15min,如果信道自动选择到了天气雷达信道,就会有15min的时间无法连接到WiFi热点,严重影响用户体验…

(MySQL经验)之MySQL单表行数最好低于2000w

作为在后端开发&#xff0c;是不是经常听到过&#xff0c;mysql 单表最好不要超过 2000w,单表超过 2000w 就要考虑数据迁移了&#xff0c;表数据都要到 2000w &#xff0c;查询速度变得贼慢。 1、建表操作 建一张表 CREATE TABLE person( id int NOT NULL AUTO_INCREMENT PRI…

DNSPod十问王强:小厂做大模型,套壳赚快钱?

本期嘉宾 王强 ZelinAI、考考创始人 王强&#xff0c;ZelinAI、考考创始人兼CEO。ZelinAI成立于2023年&#xff0c;零代码构建AI应用&#xff0c;大模型落地最后一公里&#xff0c;累计获得1万开发者、4万智能体、4000AI应用&#xff0c;服务建发集团、京港地铁、58同城等知名…