web学习笔记(二十五)BOM

news2024/11/18 13:41:06

目录

1.BOM概述

1.1什么是BOM

1.2BOM的构成

2.windom常用属性汇总

3.window常用方法汇总

4.window对象常见事件汇总

5.this总结: 


1.BOM概述

1.1什么是BOM

       BOM(Browser Object Model)就是浏览器对象模型(整个浏览器),他的核心对象是window,BOM缺乏标准,JavaScript语法的标准化组织是ECMA , DOM的标准化组织是W3C , BOM最初是Netscape浏览器标准的一部分。

       我们学习BOM主要是学习浏览器窗口交互的一些对象,BOM是浏览器厂商在各自浏览器上定义的,兼容性较差

1.2BOM的构成

window对象是浏览器的顶级 它具有双重角色。

  1. 它是JS访问浏览器窗口的一个接口。(可以对浏览器进行前进、后退、滚动,大小)
  2. 它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。

在调用的时候可以省略window,前面学习的对话框都属于window对象方法,如alert。、prompt。等。

2.windom常用属性汇总

可以在前面加上window.也可以省略。

innerHeight 和innerWidth

返回窗口可视区的高度和宽度

 document.documentElement.clientHeight和document.documentElement.clientWidth

返回窗口可视区的高度和宽度

 window.name

设置或返回窗口的名称。

 window.pageXOffset 和window.pageYOffset

设置或返回当前页面相对于窗口显示区左上角的X位置或者Y的位置。

   <script>
        console.log(innerHeight,innerWidth);
        console.log(document.documentElement.clientHeight,document.documentElement.clientWidth);
     </script>

3.window常用方法汇总

  (1)定时器

        setInterval(调用函数,时间)时间毫秒。周期调用时间到了后调用第一次,以后每隔这个时间就调用函数。

        setInterval(function(){},1000)

        setInterval(函数名,1000,[实参1],[实参2],...)

        setInterval('函数名(实参1,实参2)',1000)

  (2)清除定时器

        clearInterval('时间标识');

       时间标识就是将定时器用变量接一下,到时候清除定时器时直接在括号内写入这个变量名即可,这个时间标识一定要是全局变量。清除定时器只是让动画停止了,并没有真的将时间标识中的值移走

 (3)延迟调用

setTimeout(回调函数,时间,[实参1],[实参二]),时间到了,定时器调用回调函数,只调用一次。

clearTimeout用来清除延时调用,同样需要在括号写入时间标识。

  (4)声明变量和函数

我们之前学习的var a=10;声明变量和function show(){}声明函数都是window的属性和方法。之前默认把window.给省略掉了。

4.window对象常见事件汇总

(1) 窗口的加载事件window.onload

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


方法一:只能写一次  window.onload=function(){

        }

 方法二:利用监听器,可以编写多次 window.addEventListener('load',function(){

            })

(2)窗口加载事件二DOMContentLoaded

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

DOMContentLoaded事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等等。

Ie9以上才支持

如果页面的图片很多的话,从用户访问到onload触发可能需要较长的时间,交互效果就不能实现,必然影响用 户的体验,此时用DOMContentLoaded事件比较合适,比window.onload速度要快

(3)窗口调整尺寸事件window.onresize

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

window.onresize 是调整窗口大小加载事件,当触发时就调用的处理函数。

注意:

  • 只要窗口大小发生像素变化,就会触发这个事件。
  • 我们经常利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度。

5.this总结: 

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

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

  1. 全局作用域或者普通函数中this指向全局对象window (注意定时器里面的this指向window )
  2. 方法调用中谁调用this指向谁
  3. 构造函数中this指向构造函数的实例对象
  4. this是上下文执行程序时,系统直接传过来的一个隐式参数。
  5. 自执行函数中的this也指向window。

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

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

相关文章

探索 PostgreSQL 的高级数据类型 - 第 1 部分

数组和枚举 PostgreSQL 因其可扩展性和多功能性而备受欢迎&#xff0c;除了传统的整数和字符串之外&#xff0c;它还提供了多种数据类型。其中&#xff0c;包括数组和枚举&#xff0c;其为开发者提供了高级的数据建模能力。本文中&#xff0c;我们将深入研究这些复杂的数据类型…

CSS常用五类选择器,附面试题

学习路线 第一阶段&#xff1a;网页制作 HTML&#xff1a;常用标签&#xff0c;锚点&#xff0c;列表标签&#xff0c;表单标签&#xff0c;表格标签&#xff0c;标签分类&#xff0c;标签语义化&#xff0c;注释&#xff0c;字符实体 CSS&#xff1a;CSS介绍&#xff0c;全局…

mac报错:zsh: command not found: npm

1、问题概述&#xff1f; 在mac系统中使用npm命令的时候&#xff0c;mac os报错提示&#xff1a; zsh: command not found: npm 一般出现发这种情况的原因时没有安装npm,而npm这命令时集成在nodejs中的&#xff0c;所以安装nodejs就可以了。 2、解决办法 本质就是需要安装…

论文笔记:Code Llama: Open Foundation Models for Code

导语 Code Llama是开源模型Llama 2在代码领域的一个专有模型&#xff0c;作者通过在代码数据集上进行进一步训练得到了了适用于该领域的专有模型&#xff0c;并在测试基准中超过了同等参数规模的其他公开模型。 链接&#xff1a;https://arxiv.org/abs/2308.12950机构&#x…

HarmonyOS创建项目和应用—设置数据处理位置

项目和应用介绍 关于项目 项目是资源、应用的组织实体。资源包括服务器、数据库、存储&#xff0c;以及您的应用、终端用户的数据等。在您使用部分服务时&#xff0c;您是数据的控制者&#xff0c;数据将按照您设置的数据处理位置来存储在指定区域。 通常&#xff0c;您不需…

【C++】继续学习 string类 吧

开始使用 string类 吧 1 继续学习1.1 扩容机制1.2 string类对象的访问及遍历操作1.3 string类对象的修改操作1.4 其他一些成员函数 2 实践解决问题&#xff1a;Thanks♪(&#xff65;ω&#xff65;)&#xff89;谢谢阅读&#xff01;&#xff01;&#xff01;下一篇文章见&…

计算机网络(4)----局域网与广域网

目录 1.局域网 (1)局域网拓扑结构 (2)局域网的传输介质 (3)局域网介质访问控制方法 (4)局域网的分类 (5)IEEE 802标准 (6)MAC子层与LLC子层 (7)常用的局域网技术---以太网 (8)以太网传输介质与拓扑结构的发展 (9)常用的以太网---10BASE-T以太网 (10)适配器与MAC地址…

数据库 与 数据仓库

OLTP 与 OLAP OLTP(On Line Transaction Processing&#xff0c;联机事务处理) 系统主要针对具体业务在数据库联机下的日常操作&#xff0c;适合对少数记录进行查询、修改&#xff0c;例如财务管理系统、ERP系统、交易管理系统等。该类系统侧重于基本的、日常的事务处理&#…

Batch Normalization和Layer Normalization和Group normalization

文章目录 前言一、Group normalization二、批量规范化(Batch Normalization)三、层规范化&#xff08;Layer Normalization&#xff09; 前言 批量规范化和层规范化在神经网络中的每个批次或每个层上进行规范化&#xff0c;而GroupNorm将特征分成多个组&#xff0c;并在每个组内…

【AGI】大模型 深度学习入门学习路径

【AGI】大模型 深度学习入门学习路径 1. 深度学习入门学习路径可以从以下几个方面入手:2. 深度学习中的基本概念和算法有哪些?3. Python在深度学习中的应用和库有哪些?4. PyTorch的基本计算结构和应用教程推荐?5. 如何通过实战项目加深对深度学习模型训练的理解?6. 参考资…

Linux运维:在线/离线安装Telnet客户端和Telnet服务

Linux运维&#xff1a;在线/离线安装Telnet客户端和Telnet服务 前言1.1 在线安装Telnet1.2 离线安装Telnet1.3 Telnet服务有关的命令 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 前言 Telnet是一种用于远程登录到其他计算机的协议&…

springboot+jsp汽车配件管理系统idea maven 项目lw

springbootweb汽车配件销售业绩管理系统服务于汽车配件公司业务,实现了客户管理&#xff0c;主要负责对客户相关数据的增删改查方面、渠道管理&#xff0c;主要对渠道信息也就是设备的供应商渠道信息进行管理、项目管理&#xff0c;主要是一些项目信息的记录与整理、销售数据管…

深入探索Docker数据卷:实现容器持久化存储的完美方案(下)

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《Docker入门到精通》 《k8s入门到实战》&#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 四、Docker数据卷的高级管理 1、数据卷的生命周期管理 2、数据…

基于巨控GRM561/562/563Y西门子1200PLC发邮件

巨控GRM560,GRM600系列同比之前的GRM530&#xff0c;除短信&#xff0c;微信&#xff0c;电话语音播报增加了邮件发送功能&#xff0c;简单介绍一下PLC发邮件。 1在博途中建立好DB块 2.打开GRMDEV6&#xff0c;新建工程&#xff0c;做好数据采集&#xff0c;这里以DB4.D0&#…

【笔记】React-Native React DevTools

/** * 官网文档&#xff1a;https://reactnative.dev/docs/next/react-devtools */ 1、本想在Demo项目中添加依赖(npx react-devtools)&#xff0c;但其他项目就需要再操作一次&#xff0c;所以全局安装就好了 yarn global add react-devtools 或 npm install -g react-devto…

linux 将 api_key设置环境变量里

vi ~/.bashrc在最后添加api_key的环境变量 export GEMINI_API_KEYAIza**********WvpX7FwbdM刷新配置 source ~/.bashrc使用python 读取环境变量 import os gemini_api_key os.getenv(GEMINI_API_KEY) print(gemini_api_key)

实战解析:打造风控特征变量平台,赋能数据驱动决策

金融业务产品授信准入、交易营销等环节存在广泛的风控诉求&#xff0c;随着业务种类增多&#xff0c;传统的专家规则、评分卡模型难以应付日趋复杂的风控场景。 在传统风控以专家规则系统为主流应用的语境下&#xff0c;规则模型的入参习惯被称为“变量”。基于专家规则的风险…

每日好题3.5

前缀和 这个题目巨妙&#xff0c;打的时候没写出来&#xff0c;后面补题发现太牛了 思路&#xff1a;当前区间左端点 L L L &#xff0c;当我们向右移动一次&#xff0c;就相当于&#xff0c;原式 - f ( L ) f ( L 1 e 18 ) f(L) f(L 1e18) f(L)f(L1e18)&#xff0c;值就…

列车调度——典型的验证栈的出栈合不合法的问题,值得一看

题目描述 有n列火车按照1,2,3...n的顺序排列&#xff0c;现所有的火车需要掉头&#xff0c;所以需要火车先驶入一个调度站&#xff0c;再开出来。 由于只有一根铁轨&#xff0c;所以要么最前面的一辆火车进去调度站&#xff0c;要么调度栈内最上面一辆火车开出调度栈。 现给…

go并发模式之----工作池/协程池模式

常见模式之四&#xff1a;工作池/协程池模式 定义 顾名思义&#xff0c;就是有固定数量的工人&#xff08;协程&#xff09;&#xff0c;去执行批量的任务 使用场景 适用于需要限制并发执行任务数量的情况 创建一个固定大小的 goroutine 池&#xff0c;将任务分发给池中的 g…