当前位置： 首页 > news >正文

Javascript的API基本内容（三）

news 文章来源：https://blog.csdn.net/qq_55928824/article/details/129230410 2024/11/26 15:49:26

一、事件流

  • 假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段
  • 简单来说：捕获阶段是 从父到子 冒泡阶段是从子到父
  • 实际工作都是使用事件冒泡为主

二、页面加载事件

 加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件

有些时候需要等页面资源全部处理完了做一些事情

事件名：load

监听页面所有资源加载完毕：

window.addEventListener('load', function() {// xxxxx
})

三、元素滚动事件

滚动条在滚动的时候持续触发的事件

window.addEventListener('scroll', function() {// xxxxx
})

四、页面尺寸事件

会在窗口尺寸改变的时候触发事件：

window.addEventListener('resize', function() {// xxxxx
})

元素尺寸与位置

获取元素的自身宽高、包含元素自身设置的宽高、padding、border

offsetWidth和offsetHeight

获取出来的是数值,方便计算

注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0

五、offsetWidth和offsetHeight

offsetLeft和offsetTop 注意是只读属性，获取元素距离自己定位父级元素的左、上距离

 案例：当指定模块距离父元素的距离小于滚动的距离，显示菜单栏，反之隐藏

<body><div class="header">我是顶部导航栏</div><div class="content"><div class="sk">秒杀模块</div></div><div class="backtop"><img src="./images/close2.png" alt="" /><a href="javascript:;"></a></div><script>const header = document.querySelector(".header");const sk = document.querySelector(".sk");window.addEventListener("scroll", function () {let n = document.documentElement.scrollTop;console.log(n);console.log(sk.offsetTop);if (n >= sk.offsetTop) {header.style.top = 0;} else {header.style.top = "-80px";}});</script></body>

六、总结

七、综合案例

 需求：点击不同的模块，页面可以自动跳转不同的位置

   // 第一大模块，页面滑动可以显示和隐藏(function () {const list = document.querySelector(".xtx-elevator");window.addEventListener("scroll", function () {let n = document.documentElement.scrollTop;if (n >= 100) {list.style.opacity = 1;} else {list.style.opacity = 0;}});// 点击顶部返回const backTop = document.querySelector("#backTop");backTop.addEventListener("click", function () {document.documentElement.scrollTop = 0;});})();// 第二大模块，点击导航栏跳转对应位置(function () {const list = document.querySelector(".xtx-elevator-list");list.addEventListener("click", function (e) {const old = document.querySelector(".xtx-elevator-list .active");console.log(e.target.dataset.name);if (old && e.target.dataset.name) {old.classList.remove("active");} else {e.target.classList.add("active");}// 大盒子距离顶部的距离const bigbox = document.querySelector(`.xtx_goods_${e.target.dataset.name}`).offsetTop;document.documentElement.scrollTop = bigbox;console.log(bigbox);});})();// 页面滚动到对应位置，导航对应模块也自动发生变化window.addEventListener("scroll", function () {//  3.1  先移除类// 先获取这个active的对象const old = document.querySelector(".xtx-elevator-list .active");// console.log(old)// 判断 如果原来有active类的对象，就移除类，如果开始就没有对象，就不删除，所以不报错if (old) old.classList.remove("active");// 3.2 判断页面当前滑动的位置，选择小盒子const news = document.querySelector(".xtx_goods_new");const popular = document.querySelector(".xtx_goods_popular");const brand = document.querySelector(".xtx_goods_brand");const topic = document.querySelector(".xtx_goods_topic");let n = document.documentElement.scrollTop;if (n >= news.offsetTop && n < popular.offsetTop) {document.querySelector("[data-name=new]").classList.add("active");} else if (n >= popular.offsetTop && n < brand.offsetTop) {document.querySelector("[data-name=popular]").classList.add("active");} else if (n >= brand.offsetTop && n < topic.offsetTop) {document.querySelector("[data-name=brand]").classList.add("active");} else if (n >= topic.offsetTop) {document.querySelector("[data-name=topic]").classList.add("active");}});

相关文章：

Javascript的API基本内容（三）

一、事件流 假设页面里有个div&#xff0c;当触发事件时&#xff0c;会经历两个阶段&#xff0c;分别是捕获阶段、冒泡阶段简单来说&#xff1a;捕获阶段是 从父到子 冒泡阶段是从子到父实际工作都是使用事件冒泡为主 二、页面加载事件 加载外部资源&#xff08;如图片、外联CS…...

编程日记 2023/2/28 6:14:29

【Python入门第十九天】Python 函数

函数是一种仅在调用时运行的代码块。 可以将数据&#xff08;称为参数&#xff09;传递到函数中。 函数可以把数据作为结果返回。 创建函数 在 Python 中&#xff0c;使用 def 关键字定义函数&#xff1a; 实例 def my_function():print("Hello from a function&quo…...

编程日记 2023/2/28 6:13:23

web前端性能优化

3.性能检测 当面对具体的项目实践时&#xff0c;该如何快速提升性能体验呢&#xff1f;或者说如何能够准确地定位到性能瓶颈呢&#xff1f;难道要比对着优化知识点清单&#xff0c;一项一项手动排查或完全凭借经验去处理吗&#xff1f;不&#xff0c;我们需要有一整套清晰科学…...

编程日记 2023/2/28 6:12:16

Telnet 基础实验2： SSH 实验

Telnet 基础实验2&#xff1a; SSH 实验 本实验只能使用 eNSP中 AR 系统的路由器做 拓扑图 SSH &#xff1a; Secure Shell 是一个网络安全协议&#xff0c;基本于 TCP 协议 22 端口传输数据&#xff0c;通过对网络数据的加密&#xff0c;使其能够在一个不安全的网络环境中&a…...

编程日记 2023/2/28 6:11:12

Panda Farm：首个部署在 Arbitrum 上的轻量化 GameFi 游戏

在2月16日&#xff0c;Bitget平台宣布 Launchpad 重新启动&#xff0c;并推出了重启后的首个项目 Panda Farm&#xff08;BBO&#xff09;&#xff0c;该 Launchpad 启动后得到了较高的关注。 Panda Farm 是部署在 Arbitrum 上的 GameFi应用&#xff0c;这可能首先意味着 Bitge…...

编程日记 2023/2/28 6:10:00

Redis实现分布式锁

1、使用背景几乎每个互联网公司中都使用了分布式部署&#xff0c;分布式服务下&#xff0c;就会遇到对同一个资源的并发访问的技术难题&#xff0c;如秒杀、下单减库存等场景。这些场景有一个共同特点就是访问量激增&#xff0c;虽然在系统设计时会通过限流、异步、排队等方式优…...

编程日记 2023/2/28 6:08:56

刷题小抄1-2数之和

时间复杂度和空间复杂度 对于一个算法高效性的评估,分为时间复杂度与空间复杂度两种,在算法优化到极致的情况下,只能舍弃时间来换取空间,或者舍弃空间来换取时间,故而两者可以说是互斥关系 时间复杂度衡量的是算法运行的速度,而空间复杂度衡量的是算法运行所需要的额外内存空…...

编程日记 2023/2/28 6:07:48

axicom的测试文档

目录&#xff09;SQLpython开放性业务题&#xff08;二选一&#xff09;完整代码SQL 问题描述 SQL&#xff0c; 请根据前一周各产品的总GMV将其分成五类&#xff1a;GMV Top 20%、20%-40%&#xff0c;40%-60%&#xff0c;60%-80%以及Bottom 20%的产品组&#xff0c;请计算这五…...

编程日记 2023/2/28 6:06:41

基于vue3异步组件、动态组件、vite批量导入实现路由权限动态管理（非addRoute方案）

开发后台管理系统必备的需求&#xff1a;动态菜单权限管理、或者说路由权限动态管理 原理是通过addRoute实现路由权限控制&#xff0c;一般分为两种&#xff1a; 后端生成当前用户相应的路由后由前端&#xff08;用 Vue Router 提供的API&#xff09;addRoutes 动态加载路由前…...

编程日记 2023/2/28 6:05:38

带中转hub的卡车无人机车辆路径问题

本文介绍了两类无人机卡车协同配送问题： 第一类是旅行商问题，也即一辆卡车拉着一架无人机服务给定的节点集合第二类是车辆路径问题，这里强制要求了一架卡车只能搭配一架无人机无人机卡车旅行商问题 符号列表： N N N：表示所有节点集合，含起始和终止节点M M M...

编程日记 2023/2/28 6:04:12

前端食堂技术周刊第 72 期：Signals 是前端框架的未来、Chrome Headless、ts-reset、magic-regexp、Bun 新文档

美味值&#xff1a;&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f; 口味&#xff1a;草莓番茄 食堂技术周刊仓库地址&#xff1a;https://github.com/Geekhyt/weekly 本期摘要 Signals 是前端框架的未来Chrome Headless 进化成完全体Next.js 13.2Deno…...

编程日记 2023/2/28 6:03:08

mysql中用逗号隔开的字段作查询用(find_in_set的使用)

mysql中用逗号隔开的字段作查询用(find_in_set的使用) 场景说明 在工作中&#xff0c;经常会遇到一对多的关系。想要在mysql中保存这种关系&#xff0c;一般有两种方式&#xff0c;一种是建立一张中间表&#xff0c;这样一条id就会存在多条记录。或者采用第二种方式&#xff…...

编程日记 2023/2/28 6:01:55

Day902.Memory存储引擎 -MySQL实战

Memory存储引擎 Hi&#xff0c;我是阿昌&#xff0c;今天学习记录的是关于Memory存储引擎的内容。 两个 group by 语句都用了 order by null&#xff0c;为什么使用内存临时表得到的语句结果里&#xff0c;0 这个值在最后一行&#xff1b; 而使用磁盘临时表得到的结果里&…...

编程日记 2023/2/28 6:00:46

Linux(Centos)安装RabbitMQ+延时插件+开机自启动

安装目录1&#xff1a;前言1.1 系统环境1.2&#xff1a;安装版本1.3 简介2&#xff1a;安装2.1&#xff1a;安装前准备&#xff1a;2.2&#xff1a;安装Erlang2.3&#xff1a;安装RabbitMQ2.3&#xff1a;延迟依赖插件安装1&#xff1a;前言 1.1 系统环境 操作系统版本&#…...

编程日记 2023/2/28 5:59:40

最近是遇到了CKPT(BLOCKED）

半夜被电话吵醒&#xff0c;数据库不可用了&#xff0c;无法交易。 远程登录查看&#xff0c;这个时候就没有所谓的安全不安全了&#xff0c;都可以远程了。 onstat - 数据库处于CKPT(REQ) CKPT&#xff1a;BLOCKED状态 onstat -l 发现所有的逻辑日志都是U------状态&#xff…...

编程日记 2023/2/28 5:58:32

RabbitMQ死信队列

目录 一、概念 二、出现死信的原因 三、实战 &#xff08;一&#xff09;代码架构图 &#xff08;二&#xff09;消息被拒 &#xff08;三&#xff09;消息TTL过期 &#xff08;四&#xff09;队列达到最大长度 一、概念 先从概念解释上搞清楚这个定义&#xff0c;死信&…...

编程日记 2023/2/28 5:57:28

Word控件Spire.Doc 【书签】教程(1)：在C#/VB.NET：在 Word 中插入书签

Spire.Doc for .NET是一款专门对 Word 文档进行操作的 .NET 类库。在于帮助开发人员无需安装 Microsoft Word情况下&#xff0c;轻松快捷高效地创建、编辑、转换和打印 Microsoft Word 文档。拥有近10年专业开发经验Spire系列办公文档开发工具&#xff0c;专注于创建、编辑、转…...

编程日记 2023/2/28 5:56:22

微服务框架-学习笔记

1 微服务架构介绍 1.1 系统架构演变历史 单体架构垂直应用架构&#xff1a;按照业务线垂直划分分布式架构&#xff1a;抽出业务无关的公共模块SOA架构&#xff1a;面向服务微服务架构&#xff1a;彻底的服务化1.2 微服务架构概览 1.3 微服务架构核心要素 服务治理&#xff1…...

编程日记 2023/2/28 5:55:12

实验心理学笔记01：引论

原视频链接&#xff1a; https://www.bilibili.com/video/BV1Qt41137Kv 目录 一、实验心理学&#xff1a;定义、内容及简要历史回顾 二、实验心理学和普通心理学、认知心理学的区别 三、实验方法与非实验方法 四、实验范式 五、实验中的各种变量 六、The science of psy…...

编程日记 2023/2/28 5:54:02

预备3-如何学习编程

如何学习编程 我说说曾经学习编程踩得坑 纠结字面上的意思 如纠结一个关键词的名称如何来 为什么叫这个名称... 只是一个简单的名称,该名称代表某一想象/行为,就好比你为啥叫张三, 千万别去深究这些...做笔记的时间比敲代码的时间还多 做笔记的原因是,自己总结归纳所学的知识, …...

编程日记 2023/2/28 5:52:58

操作系统权限提升(十七)之绕过UAC提权-Windows令牌概述和令牌窃取攻击

系列文章 操作系统权限提升(十二)之绕过UAC提权-Windows UAC概述 操作系统权限提升(十三)之绕过UAC提权-MSF和CS绕过UAC提权 操作系统权限提升(十四)之绕过UAC提权-基于白名单AutoElevate绕过UAC提权 操作系统权限提升(十五)之绕过UAC提权-基于白名单DLL劫持绕过UAC提权 操作系…...

编程日记 2023/2/28 5:51:54

【时间之外】系统管人，能行？（冷眼旁观连载之二）

上次写了在用的工具系统和痛点&#xff0c;基本情况都交待清楚了&#xff0c;春节假期很快就过去了。这次继续按照之前观察计划&#xff0c;谈谈对这些工具使用情况的感受&#xff0c;学而时习之&#xff0c;算是抛砖引玉&#xff0c;也算是个人对这项工作的总结和体会。 目录…...

编程日记 2023/2/28 5:50:49

【数据结构必会基础】关于树，你所必须知道的亿些概念

目录 1.什么是树 1.1浅显的理解树 1.2 数据结构中树的概念 2.树的各种结构概念 2.1 节点的度 2.2 根节点/叶节点/分支节点 2.3 父节点/子节点 2.4祖先节点/子孙节点 2.5兄弟节点 2.6树的度 2.7节点的层次 2.8森林 3. 如何用代码表示一棵树 3.1链式结构 3.1.1 树节…...

编程日记 2023/2/28 5:49:39

设计模式的应用（已在大型项目中使用）

说明：开发语言：在本文中，使用的是C# 一、目录 •1 、单例模式 •2 、简单工厂模式 •3 、代理模式 •4 、观察者模式 •5 、外观模式 •6 、享元模式 •7 、命令模式 •8 、状态模式 •9 、发布订阅模式...

编程日记 2023/2/28 5:48:31

Git的相关用法

1.全局设置自己的git提交用户名和邮箱git config --global user.name 张三 git config --global user.email zsgmail.com即所有的提交都会用这个姓名和邮箱。如果不知道自己配置的是什么&#xff0c;可以查询下git config --global user.name git config --global user.email 或…...

编程日记 2023/2/28 5:47:25

Linux服务：Nginx反向代理与负载均衡

目录 一、Nginx反向代理 1、什么是代理 2、实现反向代理实验 ①实验拓扑 ②实验目的 ③实验过程 二、反向代理负载均衡 1、反向代理负载均衡调度算法 ①轮询算法 ②加权轮询算法 ③最小连接数算法 ④ip、url 哈希算法 ⑤响应时间fair算法 2、实现反向代理负载均…...

编程日记 2023/2/28 5:46:13

数据结构与算法——2.算法概述

这篇文章&#xff0c;我们来讲一下算法的概述&#xff0c;大致理解一下什么是算法。 目录 1.定义 2.生活实例 3.算法目标 4.实际案例 4.1案例一 4.2案例二 5.小结 1.定义 官方解释&#xff1a; 算法是指解题方案的准确而完整的描述&#xff0c;是一系列解决问题的清…...

编程日记 2023/2/28 5:45:05

BPMN2.0是什么，BPMN能解决企业流程管理中哪些问题？

一、前言&#xff1a; 在任何行业和企业中&#xff0c;一定存在着各式各样的流程&#xff0c;请假流程、报销流程、入职流程、离职流程、出差流程、合同审批流程、出入库流程等等…… 无论是管理者、技术人员还是业务人员&#xff0c;每天肯定也在使用各种流程&#xff0c;但…...

编程日记 2023/2/28 5:43:58

Java线程池的基本工作原理及案例

一、线程池的优点 线程池做的工作主要是控制运行的线程的数量，处理过程中将任务放入队列，然后在线程创建后启动这些任务，如果线程数量超过了最大数量超出数量的线程排队等候，等其它线程执行完毕，再从队列中取出任务来执行。 主要特点：线程复用；控制最大并发数；管理线程…...

编程日记 2023/2/28 5:42:50

Stacked hourglass networks for human pose estimation代码学习

Stacked hourglass networks for human pose estimation https://github.com/princeton-vl/pytorch_stacked_hourglass 这是一个用于人体姿态估计的模型&#xff0c;只能检测单个人 作者通过重复的bottom-up&#xff08;高分辨率->低分辨率&#xff09;和top-down&#xff0…...

编程日记 2023/2/28 5:40:33

常见的有利于seo的网站系统/互联网推广的好处

我们在用WPF开发的时候&#xff0c;常常会遇到在主窗口打开的情况下&#xff0c;去显示子窗口&#xff0c;而此时任务栏同时显示主窗口与子窗口。这样看起来很不美观。所以在弹出子窗口之前&#xff0c;设置它的几个相应属性&#xff0c;便不会出现这种问题了。 1 //获取主窗口…...

编程日记 2024/11/26 15:48:00

龙岩小程序报价/宁波seo在线优化公司

前面的话 HTML5不仅新增了语义型区块级元素及表单类元素&#xff0c;也新增了一些其他的功能性元素&#xff0c;这些元素由于浏览器支持等各种原因&#xff0c;并没有被广泛使用 文档描述 <details>主要用于描述文档或文档某个部分的细节&#xff0c;与<summary>配…...

编程日记 2024/11/26 15:47:00

网站后台字体安装/网站的seo

OC与swift相互调用 一、OC调用swift文件 二、swift调用OC文件 三、注意和总结 添加&#xff1a; 四、自定义桥接文件 一、OC调用swift文件 在OC项目中创建一个swift文件的时候&#xff0c;Xcode 会提示 需要创建一个桥接文件&#xff0c;点确定创建桥接文件&#xff0c;Xcode会…...

编程日记 2024/11/26 11:10:41

wordpress附件/站内优化主要从哪些方面进行

清除浮动之父级添加overflow 这样就能很好的解决这个问题了。 缺点&#xff1a;无法显示溢出的部分呀...

编程日记 2024/11/26 3:41:23

建设银行企业信息门户网站/北京培训seo哪个好

python通过代理访问网络的简单直接方法&#xff1a; 在程序开头插入以下代码 import socket import socks socks.set_default_proxy(socks.SOCKS5, "代理服务器IP", 代理服务器端口) socket.socket socks.socksocket 其原理是改重写了socket.socket这个类&#x…...

编程日记 2024/11/25 22:51:29

著名的电子商务网站/临沂seo优化

即使在这个网络发达的社会&#xff0c;仍有很多人喜欢带有纸感的明信片。当看到很多漂亮明信片&#xff0c;是不是很心动。其实利用PS就可轻松制作个明信片。那么用PS如何制作明信片&#xff1f;想学习的朋友和小编一起来DIY明信片吧&#xff01;PS制作明信片步骤&#xff1a;1…...

编程日记 2024/11/25 20:30:06