web APIs总结(2)

1. 页面滚动事件

  • 很多网页需要检测用户把页面滚动到某个区域后做一些处理, 比如固定导航栏、返回顶部
  • 事件名:scroll
  • 监听某个元素的内部滚动直接给某个元素加即可

获取位置
scrollLeft和scrollTop (属性)
(注:获取html元素写法:document.documentElement)

  • 获取被卷去的大小
  • 获取元素内容往左、往上滚出去看不到的距离
  • 这两个值是可读写
  • 检测页面滚动的头部距离(被卷去的头部)用那个属性?
    document.documentElement.scrollTop
    window.scrollTo
    在这里插入图片描述

2. 页面加载事件有哪两个?如何添加?

load 事件:监听整个页面资源给 window
DOMContentLoaded:给 document 加;无需等待样式表、图像等完全加载

3. 页面尺寸事件

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

window.addEventListener('resize', function () {//执行的代码
})

检测屏幕宽度:

window.addEventListener('resize', function () {let w = document.documentElement.clientWidthconsole.log(w)
})

获取宽高clientWidth和clientHeight:获取元素的可见部分宽高(不包含边框,margin,滚动条等)

4. 元素尺寸于位置

通过js的方式,得到元素在页面中的位置

  • offsetWidth和offsetHeight是得到元素什么的宽高?(只读属性
    内容 + padding + bord
  • offsetTop和offsetLeft 得到位置以谁为准?
    有定位的父级;如果都没有则以 文档左上角 为准
    注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0
  • element.getBoundingClientRect():方法返回元素的大小及其相对于视口的位置

5. 总结

在这里插入图片描述

6. 小tips

/* 页面滑动 */
html {/* 让滚动条丝滑的滚动 */scroll-behavior: smooth;
}

属性选择器:[data-name=new]

7. 日期对象方法

pic

显示格式化的时间:(输出:今天是: 2024年4月9号 23:23:48)

<div></div><script>const div = document.querySelector('div')function getMyDate() {const date = new Date()let h = date.getHours()let m = date.getMinutes()let s = date.getSeconds()//数字要补0h = h < 10 ? '0' + h : hm = m < 10 ? '0' + m : ms = s < 10 ? '0' + s : sreturn `今天是: ${date.getFullYear()}${date.getMonth() + 1}${date.getDate()}${h}:${m}:${s}`}div.innerHTML = getMyDate()//回调函数setInterval(function () {div.innerHTML = getMyDate()}, 1000)</script>

时间的另外一个写法:(输出:2024/4/9 23:29:03)

<div></div><script>const div = document.querySelector('div')// 得到日期对象const date = new Date()div.innerHTML = date.toLocaleString()  // 2022/4/1 09:41:21setInterval(function () {const date = new Date()div.innerHTML = date.toLocaleString()  // 2022/4/1 09:41:21}, 1000)// div.innerHTML = date.toLocaleDateString()  // 2022/4/1// div.innerHTML = date.toLocaleTimeString()  // 09:41:21</script>

8. 时间戳

  • 定义:是指1970年01月01日00时00分00秒起至现在的毫秒数,它是一种特殊的计量时间的方式
  • 使用场景:果计算倒计时效果,前面方法无法直接计算,需要借助于时间戳完成
  • 日期对象方法里面月份和星期有什么注意的?月份是0~11, 星期是 0~6
  • 获取时间戳有哪三种方式?重点记住那个?
    date.getTime();+new Date();Date.now()
    重点记住 +new Date() 因为可以返回当前时间戳或者指定的时间戳

9. 查找DOM节点

  • 父节点查找:parentNode 属性;返回最近一级的父节点 找不到返回为null`(子元素.parentNode)
  • 子节点查找:children 属性 (重点);仅获得所有元素节点;返回的还是一个伪数组
    (父元素.children)
  • 查找兄弟节点用那个属性?nextElementSibling;previousElementSibling

10. 增加DOM节点(重要)

1. 创建节点

  • 即创造出一个新的网页元素,再添加到网页内,一般先创建节点,然后插入节点
  • 创建元素节点方法:
//创造一个新的元素节点
document.createElement('标签名')

2. 追加节点

  • 要想在界面看到,还得插入到某个父元素中
  • 插入到父元素的最后一个子元素:
//插入到这个父元素的最后
父元素.appendChild(要插入的元素)
  • 插入到父元素中某个子元素的前面:
//插入到某个子元素的前面
父元素.insertBefore(插入的元素, 放到哪个元素的前面)

3. 克隆节点

//克隆一个已有的元素节点
元素.cloneNode(布尔值)

cloneNode会克隆出一个跟原标签一样的元素,括号内传入布尔值

  • 若为true,则代表克隆时会包含后代节点(文字)一起克隆
  • 若为false,则代表克隆时不包含后代节点(文字)
  • 默认为false

11. 删除DOM节点

父元素.removeChild(要删除的元素)
  • 若一个节点在页面中已不需要时,可以删除它
  • 在 JavaScript 原生DOM操作中,要删除元素必须通过父元素删除
  • 注:
    不存在父子关系则删除不成功
    删除节点和隐藏节点(display:none) 有区别的: 隐藏节点还是存在的,但是删除,则从html中删除节点

12. 移动端事件

常见的触屏事件如下:
在这里插入图片描述

13. Swiper轮播图

swiper官网地址:https://www.swiper.com.cn/
导入最新版本的swiper的js、css文件即使手动滑动了轮播图,过一会儿也还会自动播放
以下为额外增加的js代码

<script>var swiper = new Swiper(".mySwiper", {//小圆点pagination: {el: ".swiper-pagination",},//自动播放autoplay: {delay: 1000,//1秒切换一次},//键盘点击轮播图keyboard: {enabled: true,onlyInViewport: true,}});</script>

14. 定时器-延迟函数

语法:
setTimeout(回调函数,等待的毫秒数)
setTimeout 仅仅只执行一次,所以可以理解为就是把一段代码延迟执行, 平时省略window
清除延时函数:

let timer = setTimeout(回调函数,等待的毫秒数)
clearTimeout(timer)

注意点:

  • 延时器需要等待,所以后面的代码先执行
  • 每一次调用延时器都会产生一个新的延时器

15. 两种定时器对比:执行的次数

  • 延时函数(setTimeout): 执行一次
  • 间歇函数(setInterval):每隔一段时间就执行一次,除非手动清除

16. JS 执行机制

同步任务和异步任务的本质区别

同步任务:同步任务都在主线程上执行,形成一个执行栈。(前一个任务结束后再执行后一个任务)
异步任务:JS 的异步是通过回调函数实现的。(在做这件事的同时,你还可以去处理其他事情。)
一般而言,异步任务有以下三种类型:
1、普通事件,如 click、resize 等
2、资源加载,如 load、error 等
3、定时器,包括 setInterval、setTimeout 等
异步任务相关添加到任务队列中(任务队列也称为消息队列)。

1. 先执行执行栈中的同步任务。
2. 异步任务放入任务队列中。
3. 一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行
什么叫事件循环?(面试)

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环event loop
同步任务放在执行栈里 异步任务放在浏览器里 异步任务执行完放在任务队列里 执行栈执行完了 回到任务队列里取。

17. location对象

常用属性和方法:

  • href 属性获取完整的 URL 地址,对其赋值时用于地址的跳转重点
console.log(location.href)
// 1. href 经常用href 利用js的方法去跳转页面
location.href = 'http://www.baidu.com'
  • search 属性获取地址中携带的参数,符号 ?后面部分
    console.log(location.search)
  • hash 属性获取地址中的啥希值,符号 # 后面部分
    后期vue路由的铺垫,经常用于不刷新页面,显示不同页面,比如 网易云音乐
    console.log(location.hash)
  • reload 方法用来刷新当前页面,传入参数 true 时表示强制刷新
<button class="reload">刷新</button>
<script>const reload = document.querySelector('.reload')reload.addEventListener('click', function () {// f5 刷新页面// location.reload()// 强制刷新  ctrl+f5location.reload(true)})
</script>

18. navigator对象(了解)

navigator的数据类型是对象,该对象下记录了浏览器自身的相关信息
通过 userAgent 检测浏览器的版本及平台:

// 检测 userAgent(浏览器信息)
!(function () {
const userAgent = navigator.userAgent
// 验证是否为Android或iPhone
const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
// 如果是Android或iPhone,则跳转至移动站点
if (android || iphone) {
location.href = 'http://m.itcast.cn' }
})()

19. history对象

history 的数据类型是对象,主要管理历史记录。该对象与浏览器地址栏的操作相对应,如前进、后退、历史记录等
history

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

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

相关文章

手机银行客户端框架之TMF框架介绍

腾讯移动开发平台&#xff08;Tencent Mobile Framework&#xff09;整合了腾讯在移动产品中开发、测试、发布和运营的技术能力&#xff0c;为企业提供一站式、覆盖全生命周期的移动端技术平台。核心服务包括移动客户端开发组件、H5容器、灰度发布、热更新、离线包、网关服务、…

ChatGPT 会被 OpenAI 的版权诉讼摧毁吗?|TodayAI

未来人工智能是否能与人类融合成为一个引人关注的问题&#xff0c;但目前&#xff0c;ChatGPT等人工智能技术可能首先需要面对一个更紧迫的挑战&#xff1a;大规模的版权侵权诉讼。近期&#xff0c;ChatGPT因涉嫌在未经授权的情况下使用大量作者的作品进行训练&#xff0c;而被…

我的新书,在西西弗书店上架了!

大家好&#xff0c;我是程序员小灰。今天告诉大家一个好消息&#xff0c;我的新书在西西弗书店上架了&#xff01; 熟悉小灰的朋友都知道&#xff0c;我以前是京东的一名程序员&#xff0c;现在全职投入到IT领域的自媒体创作。在2019年&#xff0c;我出版了人生中的第一本书《漫…

五子棋:不会下五子棋也没关系,会用Java写五子棋就行

关注公号“微澜网络”获取完整源代码&#xff01; 效果展示&#xff1a; 目录 效果展示&#xff1a; 导语&#xff1a; 游戏介绍&#xff1a; 程序设计&#xff1a; 1.游戏规则和功能&#xff1a; 2.用户界面设计&#xff1a; 3.程序架构设计&#xff1a; 4.可扩展性和灵…

C# 操作PDF表单 - 创建、填写、删除PDF表单域

通常情况下&#xff0c;PDF文件是不可编辑的&#xff0c;但PDF表单提供了一些可编辑区域&#xff0c;允许用户填写和提交信息。PDF表单通常用于收集信息、反馈或进行在线申请&#xff0c;是许多行业中数据收集和交换的重要工具。 PDF表单可以包含各种类型的输入控件&#xff0…

一些Github上开源的RAG 应用

我也是做RAG相关工作的。周末抽了一些时间&#xff0c;来看看开源的RAG技术能够做到什么程度。 其实我重点关注的是以下几点&#xff08;以下几个点是RAG提升的关键点&#xff09;&#xff1a; 这些开源技术他们是怎么做文档解析的&#xff08;有哪些我们可以借鉴的&#xff0c…

【漏洞复现】WordPress LayerSlider插件SQL注入漏洞复现

声明&#xff1a;亲爱的读者&#xff0c;我们诚挚地提醒您&#xff0c;Aniya网络安全的技术文章仅供个人研究学习参考。任何因传播或利用本实验室提供的信息而造成的直接或间接后果及损失&#xff0c;均由使用者自行承担责任。Aniya网络安全及作者对此概不负责。如有侵权&#…

标注平台工作流:如何提高训练数据质量与管理效率

世界发展日益依托数据的驱动&#xff0c;企业发现&#xff0c;管理不断增长的数据集却愈发困难。数据标注是诸多行业的一个关键过程&#xff0c;其中包括机器学习、计算机视觉和自然语言处理。对于大型语言模型&#xff08;LLM&#xff09;来说尤是如此&#xff0c;大型语言模型…

前端css笔记(pink老师)

css css书写顺序 自适应屏幕 html { width: 100%; height: 100%; display: table; } body { display: table-cell; } 用了这个方法以后&#xff0c;如果希望页面内的盒子也适应屏幕大小&#xff0c;则使用以下方法&#xff0c;会根据父亲的宽高计算出该盒子的宽高 width:xx%; …

JavaScript入门--变量

JavaScript入门--变量 一、JS变量二、变量命名三、常量四、局部变量 一、JS变量 定义变量a, b, c&#xff0c;并输出到控制台。 var a 1; var b 13.14; var c hello Js;console.log(a, b, c) //console.log()语句用于输出结果到控制台&#xff0c;类似python的print语句…

分布式存储系统Megastore

文章目录 说明设计目标及方案选择数据的分区和复制 数据模型照片共享服务数据模型实例Megastore索引Bigtable中存储情况 事务及并发控制Megastore提供的三种读Megastore的写操作完整的事务周期 Megastore基本架构快速读与快速写 核心技术之复制复制的日志数据读取数据写入协调者…

分布式系统架构中的相关概念

1.1、衡量网站的性能指标 响应时间&#xff1a;指执行一个请求从开始到最后收到响应数据所花费的总体时间。并发数&#xff1a;指系统同时能处理的请求数量。 并发连接数&#xff1a;指的是客户端向服务器发起请求&#xff0c;并建立了TCP连接。每秒钟服务器连接的总TCP数量请…

一款免费、开源、可批量识别的离线OCR软件,适用于 Windows7 x64及以上平台

免费&#xff1a;本项目所有代码开源&#xff0c;完全免费。方便&#xff1a;解压即用&#xff0c;离线运行&#xff0c;无需网络。高效&#xff1a;自带高效率的离线OCR引擎&#xff0c;内置多种语言识别库。灵活&#xff1a;支持命令行、HTTP接口等外部调用方式。功能&#x…

超越常规:用PHP抓取招聘信息

在人力资源管理方面&#xff0c;有效的数据采集可以为公司提供宝贵的人才洞察。通过分析招聘网站上的职位信息&#xff0c;人力资源专员可以了解市场上的人才供给情况&#xff0c;以及不同行业和职位的竞争状况。这样的数据分析有助于企业制定更加精准的招聘策略&#xff0c;从…

记录一个Kafka客户端Offset Explore连不上的问题

我昨天把集群重装了一下&#xff0c;再连这个工具就连不上了&#xff08;你先把zk和kafka在集群启起来&#xff09;&#xff0c;报错截图如下&#xff1a; 英文翻译过来大概就是说遍历zk指定路径不存在&#xff0c;我还以为zk的问题&#xff0c;回去又把zk的文档翻了一遍&#…

【AI基本模型】简化生成对抗网络 (GAN)

目录 一、说明 二、GAN的工作 三、如何手动计算生成对抗网络&#xff08;GAN&#xff09;&#xff1f;✍️ 四、GAN的应用 一、说明 生成对抗网络 &#xff08;GAN&#xff09; 是一种机器学习算法&#xff0c;可以生成与现实世界数据几乎无法区分的合成数据。它们的工作原理是…

【JSON2WEB】14 基于Amis的CRUD开发30分钟速成

【JSON2WEB】系列目录 【JSON2WEB】01 WEB管理信息系统架构设计 【JSON2WEB】02 JSON2WEB初步UI设计 【JSON2WEB】03 go的模板包html/template的使用 【JSON2WEB】04 amis低代码前端框架介绍 【JSON2WEB】05 前端开发三件套 HTML CSS JavaScript 速成 【JSON2WEB】06 JSO…

【Java探索之旅】方法重载 递归

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; Java编程秘籍 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1;前言一、方法重载1.1 为什么要有方法重载1.2 方法重载的概念与使用1.3 方法签名 二、递归2…

Go语言中如何正确使用 errgroup

不管是哪种编程语言,重新发明轮子都不是一个好主意。代码库重新实现如何启动多个goroutine并汇总错误也很常见。但是Go生态系统中的一个包旨在支持这种常见的用例。让我们来看看这个包并了解为什么它应该成为Go开发人员工具集的一部分。 golang.org/x是一个为标准库提供扩展的…

Disk Drill Enterprise for Mac v5.5.1515数据恢复软件中文版

Disk Drill 是 Mac 操作系统固有的Mac数据恢复软件&#xff1a;使用 Recovery Vault 轻松保护文件免遭意外删除&#xff0c;并从 Mac 磁盘恢复丢失的数据。支持大多数存储设备&#xff0c;文件类型和文件系统。 软件下载&#xff1a;Disk Drill Enterprise for Mac v5.5.1515激…