web学习笔记(二十五)BOM

目录

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.rhkb.cn/news/269819.html

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

相关文章

【计算机】本科考研还是就业?

其实现在很多计算机专业的学生考研&#xff0c;也是无奈的选择 技术发展日新月异&#xff0c;而在本科阶段&#xff0c;大家学着落后的技术&#xff0c;出来找工作自然会碰壁。而且现在用人单位的门槛越来越高&#xff0c;学历默认研究生起步&#xff0c;面试一般都是三轮起步…

前端知识点、技巧、webpack、性能优化(持续更新~)

1、 请求太多 页面加载慢 &#xff08;webpack性能优化&#xff09; 可以把 图片转换成 base64 放在src里面 减少服务器请求 但是图片会稍微大一点点 以上的方法不需要一个一个自己转化 可以在webpack 进行 性能优化 &#xff08;官网有详细描述&#xff09;

第九篇:– 过程发现(Process Discovery)是如何赋能数字化市场营销全过程?- 我为什么要翻译介绍美国人工智能科技巨头IAB公司

IAB平台&#xff0c;使命和功能 IAB成立于1996年&#xff0c;总部位于纽约市。 作为美国的人工智能科技巨头社会媒体和营销专业平台公司&#xff0c;互动广告局&#xff08;IAB- the Interactive Advertising Bureau&#xff09;自1996年成立以来&#xff0c;先后为700多家媒体…

【学习心得】爬虫JS逆向通解思路

我希望能总结一个涵盖大部分爬虫逆向问题的固定思路&#xff0c;在这个思路框架下可以很高效的进行逆向爬虫开发。目前我仍在总结中&#xff0c;下面的通解思路尚不完善&#xff0c;还望各位读者见谅。 一、第一步&#xff1a;明确反爬手段 反爬手段可以分为几个大类 &#…

word转PDF的方法 简介快速

在现代办公环境中&#xff0c;文档格式转换已成为一项常见且重要的任务。其中&#xff0c;将Word文档转换为PDF格式的需求尤为突出&#xff0c;将Word文档转换为PDF格式具有多方面的优势和应用场景。无论是为了提高文档的可读性和稳定性、保障文档的安全性和保护机制、还是为了…

PCM会重塑汽车OTA格局吗(2)

目录 1.概述 2. PCM技术视角下的OTA 3.小结 1.概述 上一篇文章&#xff0c;我们着重讲解了OTA的概述内容&#xff0c;和意法半导体推出的跨域融合MCU的四大特征&#xff0c;其中就包含了OTA技术。 他们针对OTA做了比较创新的设计&#xff0c;在总的可用memory容量不变情况…

day04-Maven

一、初识 Maven Maven 是 Apache 旗下的一个开源项目&#xff0c;是一款用于管理和构建 java 项目的工具。 官网&#xff1a;https://maven.apache.org/ Maven的作用 依赖管理&#xff08;方便快捷的管理项目依赖的资源(jar包)&#xff0c;避免版本冲突问题&#xff09;统一项目…

mq基础类设计

消息队列就是把阻塞队列这样的数据结构单独提取成一个程序独立进行部署。——>实现生产者消费者模型。 但是阻塞队列是在一个进程内部进行的&#xff1b; 消息队列是在进程与进程之间进行实现的&#xff0c; 解耦合&#xff1a;就是在分布式系统中&#xff0c;A服务器调用B…

浅谈马尔科夫链蒙特卡罗方法(MCMC)算法的理解

1.解决的问题 计算机怎么在任意给定的概率分布P上采样&#xff1f;首先可以想到把它拆成两步&#xff1a; &#xff08;1&#xff09;首先等概率的从采样区间里取一个待定样本x&#xff0c;并得到它的概率为p(x) &#xff08;2&#xff09;然后在均匀分布U[0,1]上取一个值&a…

汽车级瞬态抑制TVS二极管优势特性及型号大全

汽车级瞬态抑制TVS二极管是一种高性能的防浪涌过电压电路保护元器件&#xff0c;能够在瞬态电压过高的情况下提供可靠的保护。它能够迅速响应并吸收过电压&#xff0c;将其导向地线&#xff0c;从而保护车辆的电子设备免受损坏。东沃汽车级TVS二极管具有以下几个关键优势&#…

Java包装类

包装类 每种基本数据类型都有一个对应的包装类。这些包装类主要用于包装基本数据类型的值&#xff0c;使其可以作为对象处理。 包装类主要有两个用途&#xff1a; 当需要一个对象而不是一个原始类型时。例如&#xff0c;许多集合类如 ArrayList 只能存储对象&#xff0c;不能存…

网络信息安全:11个常见漏洞类型汇总

一、SQL注入漏洞 SQL注入攻击&#xff08;SQL Injection&#xff09;&#xff0c;简称注入攻击、SQL注入&#xff0c;被广泛用于非法获取网站控制权&#xff0c;是发生在应用程序的数据库层上的安全漏洞。 在设计程序&#xff0c;忽略了对输入字符串中夹带的SQL指令的检查&…

Java项目:38 springboot005学生心理咨询评估系统

作者主页&#xff1a;舒克日记 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 学生心理咨询评估系统有管理员和用户 【主要功能】 用户管理、试题管理、试卷管理、考试管理 【技术组成】 SpringBoot MyBatis Vue Bootstrap j…

CSS字体样式的使用,前端开发手册

零基础学web前端开发要怎么去学? 首先要学习的就是基础知识&#xff1a;html、css和JavaScript。HTML是内容&#xff0c;CSS是表现&#xff0c;JavaScript是行为。前端开发的门槛其实非常低&#xff0c;与服务器端语言先慢后快的学习曲线相比&#xff0c;前端开发的学习曲线是…

程序员如何选择职业赛道?

程序员如何选择职业赛道&#xff0c;参与话题 程序员的职业赛道就像是一座迷宫&#xff0c;有前端的美丽花园&#xff0c;后端的黑暗洞穴&#xff0c;还有数据科学的神秘密室。你准备好探索这个充满挑战和机遇的迷宫了吗&#xff1f;快来了解如何选择职业赛道吧&#xff01; 方…

读算法的陷阱:超级平台、算法垄断与场景欺骗笔记02_大数据

1. 大数据分析 1.1. 随着“大数据军备竞赛”与定价算法的广泛应用&#xff0c;线上购物平台与实体商铺的界限也变得越来越模糊 1.2. 在沃尔玛疯狂扩张的时代&#xff0c;它给地区性商业带来的伤害不亚于一场地震 1.2.1. 当地的小型商铺往往…

Yolov8有效涨点,添加多种注意力机制,修改损失函数提高目标检测准确率

目录 简介 CBAM注意力机制原理及代码实现 原理 代码实现 GAM注意力机制 原理 代码实现 修改损失函数 YAML文件 完整代码 &#x1f680;&#x1f680;&#x1f680;订阅专栏&#xff0c;更新及时查看不迷路&#x1f680;&#x1f680;&#x1f680; http://t.csdnimg.c…

微信小程序开发系列(十七)·事件传参·mark-自定义数据

目录 步骤一&#xff1a;按钮的创建 步骤二&#xff1a;按钮属性配置 步骤三&#xff1a;添加点击事件 步骤四&#xff1a;参数传递 步骤五&#xff1a;打印数据 步骤六&#xff1a;获取数据 步骤七&#xff1a;父进程验证 总结&#xff1a;data-*自定义数据和mark-自定…

什么是物联网?物联网如何工作?

物联网到底是什么&#xff1f; 物联网(Internet of Things&#xff0c;IoT)的概念最早于1999年被提出&#xff0c;官方解释为“万物相连的互联网”&#xff0c;是在互联网基础上延伸和扩展&#xff0c;将各种信息传感设备与网络结合起来而形成的一个巨大网络&#xff0c;可以实…

抖音视频评论批量采集软件|视频下载工具

《轻松搞定&#xff01;视频评论批量采集软件&#xff0c;助您高效工作》 在短视频这个充满活力和创意的平台上&#xff0c;了解用户评论是了解市场和观众心声的重要途径之一。为了帮助您快速获取大量视频评论数据&#xff0c;我们推出了一款操作便捷、功能强大的软件&#xff…