js基础-数组-事件对象-日期-本地存储

一、大纲

一、获取元素位置

在JavaScript中,获取一个元素在页面上的位置可以通过多种方法实现。以下是一些常见的方法:

  1. getBoundingClientRect()

    getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。它提供了元素的lefttoprightbottom属性,这些属性表示元素在视口中的位置。

     

    var rect = document.getElementById('myElement').getBoundingClientRect(); console.log(rect.left, rect.top); // 元素相对于视口左上角的坐标

  2. elementFromPoint(x, y)

    elementFromPoint(x, y) 方法返回位于页面上给定坐标(x, y)的元素。这个方法属于document对象,因此可以直接在document上调用。

     

    var element = document.elementFromPoint(x, y); console.log(element); // 返回位于(x, y)坐标的元素

  3. offsetTopoffsetLeft

    offsetTopoffsetLeft 属性返回元素的顶部和左侧边缘相对于其最近的定位的祖先元素的偏移。

     

    var element = document.getElementById('myElement'); console.log(element.offsetTop, element.offsetLeft); // 元素相对于其定位的祖先元素的偏移

  4. getComputedStyle()

    getComputedStyle() 方法返回一个对象,该对象包含元素的所有当前计算后的样式属性的值,包括positiontopleft等。

     

    var style = window.getComputedStyle(document.getElementById('myElement')); console.log(style.position, style.top, style.left); // 获取元素的计算后样式

  5. position 属性

    position 属性可以告诉你元素的定位方式(如staticrelativeabsolutefixedsticky),这有助于你了解元素的位置是如何确定的。

     复制 

    var element = document.getElementById('myElement'); console.log(element.style.position); // 获取元素的定位方式

二、日期

1.newDate()

2.显示格式

3.时间戳

推荐+

案例:

在编程和计算机科学中,时间戳是一个表示特定时刻的数字。在不同的上下文中,时间戳可以有不同的含义和格式,以下是一些常见的时间戳概念:

  1. Unix 时间戳:

    • 这是最常见的时间戳格式,表示从1970年1月1日UTC(协调世界时)开始的秒数(不包括闰秒)。在JavaScript中,可以通过Date.now()函数获取当前的Unix时间戳。
     

    var timestamp = Date.now(); // 获取当前的Unix时间戳(毫秒)

    如果需要秒为单位的Unix时间戳,可以使用Date对象的getTime()方法或Date.UTC()方法。

     

    var timestampInSeconds = Math.floor(Date.now() / 1000); var timestampInSeconds = new Date().getTime() / 1000; var timestampInSeconds = Date.UTC(year, month, day, hour, minute, second);

  2. ISO 8601 时间戳:

    • 这是一种使用日期和时间的国际标准表示法,格式通常为YYYY-MM-DDTHH:mm:ss.sssZ,其中T是一个分隔符,Z表示UTC时区(或用+hh:mm-hh:mm表示时区偏移)。
     

    var timestamp = new Date().toISOString(); // 转换为ISO格式的时间字符串

  3. 性能时间戳 (Performance Timestamp):

    • 在Web开发中,performance.now()可以提供比Date.now()更高精度的时间戳,通常用于测量性能。
     

    var performanceTimestamp = performance.now(); // 获取高精度时间戳

  4. 时间戳转换:

    • 可以将Unix时间戳转换为更易读的日期格式,反之亦然。
     

    var date = new Date(timestamp); // 将Unix时间戳转换为Date对象 var timestamp = date.getTime(); // 将Date对象转换为Unix时间戳

  5. 时间戳的用途:

    • 时间戳常用于记录事件发生的时间点,如服务器日志、数据库记录、用户操作时间等。
    • 在分布式系统中,时间戳用于同步事件顺序和解决冲突。
    • 在性能分析中,时间戳用于测量代码执行时间。
  6. 时间戳的存储:

    • 时间戳通常以整数或浮点数存储,取决于所需的时间精度。
  7. 时间戳的时区问题:

    • 时间戳通常表示为UTC时间,但在实际应用中,需要考虑时区转换。

在JavaScript中,处理时间戳时,需要注意时区和精度问题,以确保正确地表示和处理时间。

三、dom节点(dom树)

DOM(文档对象模型,Document Object Model)是HTML和XML文档的编程接口。它将网页结构化为一个由节点和对象(如元素、属性和文本)组成的树状结构,允许开发人员以编程方式访问和操作网页内容。

在DOM树中,每个节点(node)代表文档中的一个对象或结构,以下是一些常见的节点类型:

  1. 元素节点(Element node):

    • 代表HTML中的一个元素,如<div><p><a>等。
  2. 属性节点(Attribute node):

    • 代表元素的一个属性,如class="example"id="myId"
  3. 文本节点(Text node):

    • 包含元素或属性的文本内容,如<p>这是一个文本节点。</p>中的“这是一个文本节点。”
  4. 注释节点(Comment node):

    • 包含文档的注释,它们在浏览器中不显示,但可以在HTML源代码中看到。
  5. 文档类型节点(DocumentType node):

    • 代表文档类型声明,如<!DOCTYPE html>
  6. 文档节点(Document node):

    • 代表整个文档,是DOM树的根节点。
  7. 文档片段节点(DocumentFragment node):

    • 一个轻量级的DOM节点,用作DOM树的临时容器,常用于批量操作。
  8. CDATA节节点(CDATASection node):

    • 包含不应由XML解析器解析的文本。

在JavaScript中,可以使用DOM API来创建、修改、删除和查询DOM节点。以下是一些基本的DOM操作:

创建节点:var newNode = document.createElement('div');
添加节点:parentElement.appendChild(newNode);
删除节点:parentElement.removeChild(oldNode);
替换节点:parentElement.replaceChild(newNode, oldNode);
查询节点:var element = document.getElementById('myId');
修改内容:element.textContent = '新内容';
element.innerHTML = '<div>新HTML内容</div>';
获取属性:var attributeValue = element.getAttribute('class');
设置属性:element.setAttribute('class', 'newValue');
监听事件:element.addEventListener('click', function() {console.log('元素被点击了');
});

M端事件(移动端)

四、location当前浏览上下文的一些信息

在JavaScript中,location 对象是一个内置对象,它提供了当前浏览上下文的一些信息,以及一些用于导航到不同的文档的方法。location 对象是 Window 对象的一部分,因此通常在浏览器环境中可以直接使用它。

以下是一些常用的 location 对象属性和方法:

location.href:表示当前页面的URL。可以读取这个属性来获取当前页面的地址,也可以赋值一个新的URL来导航到另一个页面。
console.log(location.href); // 打印当前页面的URL
location.href = 'https://www.example.com'; // 重定向到新的URL
location.search:表示URL中的查询字符串部分,即?后面的部分。
console.log(location.search); // 打印查询字符串
location.pathname:表示URL中的路径部分。
console.log(location.pathname); // 打印URL路径
location.hash:表示URL中的哈希部分,即#后面的部分。
console.log(location.hash); // 打印URL哈希
location.assign():加载一个新的文档。
location.assign('https://www.example.com'); // 导航到指定的URL
location.replace():用另一个文档替换当前的资源。与 assign() 不同的是,使用 replace() 后,新页面不会添加到浏览器的历史记录中。
location.replace('https://www.example.com'); // 替换当前页面
location.reload():重新加载当前页面。默认情况下,它会从服务器重新加载页面,但也可以提供一个参数来控制是否要从缓存中加载。
location.reload(); // 从服务器重新加载当前页面
location.reload(true); // 强制从服务器加载
location.toString():返回整个URL的字符串表示。
console.log(location.toString()); // 打印完整的URL
location.ancestorOrigins:只读属性,返回一个包含当前页面所有祖先页面源点(origins)的数组。
console.log(location.ancestorOrigins); // 打印当前页面的祖先源点
通过使用 location 对象,你可以在JavaScript中实现页面跳转、获取当前页面的URL信息等操作。这些操作对于动态Web应用的开发非常重要。

1.跳转页面

2.路由基础(地址栏变化)

3.刷新界面 

五、navigator

navigator 是 Web 浏览器提供的 JavaScript 对象,它用于解决以下问题:

  1. 用户代理检测

    • 通过 navigator.userAgent 获取用户代理字符串,可以检测访问网页的浏览器类型、版本以及操作系统信息。
  2. 客户端能力检测

    • 了解客户端(浏览器)的能力,如是否支持 cookies(navigator.cookieEnabled)、是否处于在线状态(navigator.onLine)、支持的触摸点数(navigator.maxTouchPoints)等。
  3. 地理位置定位

    • 使用 navigator.geolocation 对象获取用户的地理位置信息,这在需要提供地理位置相关服务时非常有用,如地图服务、本地搜索等。
  4. 网络状态监测

    • 通过 navigator.onLine 属性监测用户的网络连接状态,这对于提供离线体验或网络状态提示很有帮助。
  5. 浏览器特性检测

    • 检测浏览器是否支持某些特定的特性或 API,如 WebRTC、Service Workers、WebGL 等。
  6. 国际化和本地化

    • 获取用户的语言偏好(navigator.language),以便提供本地化的网页内容。
  7. 跨源通信

    • 使用注册协议处理程序(navigator.registerProtocolHandler())实现跨源或跨应用的通信。
  8. 性能优化

    • 通过 navigator.sendBeacon() 方法在页面卸载时发送小体积的异步数据,减少对用户离开页面时的影响。
  9. 安全性和隐私

    • 了解浏览器的安全特性,如是否支持 HTTPS 或其他安全协议。
  10. 用户个性化体验

    • 根据用户代理数据(navigator.userAgentData)提供定制化的用户体验或提示用户升级浏览器。

navigator 对象为开发者提供了丰富的信息,使得开发者能够根据客户端的特性和能力来优化网页的功能和性能,提供更好的用户界面和交互体验。然而,使用 navigator 对象时也需要考虑隐私和安全问题,避免不当使用用户信息。

在实际开发中,一般会结合其他特性检测方法,如特性检测(feature detection)、能力检测(capability detection),以及避免过度依赖用户代理字符串,因为用户代理字符串可以被伪造,且仅依赖它进行检测可能导致误判。

在Web开发中,navigator 是 JavaScript 的一个全局对象,它提供了关于浏览器的信息,包括用户代理字符串(user agent string)、浏览器和操作系统的语言、以及浏览器插件等信息。navigator 对象是 Window 对象的一部分,因此可以直接在浏览器环境中访问。

以下是一些 navigator 对象的常用属性和方法:

以下是一些 navigator 对象的常用属性和方法:navigator.userAgent:返回一个包含浏览器名称和版本信息的字符串。
console.log(navigator.userAgent);
navigator.platform:返回用户的操作系统的字符串表示。
console.log(navigator.platform);
navigator.language 或 navigator.languages:返回用户偏好的语言代码。
console.log(navigator.language); // 例如: "en-US"
console.log(navigator.languages); // 返回一个包含用户偏好语言的数组
navigator.onLine:返回一个布尔值,指示客户端是否连接到互联网。
console.log(navigator.onLine); // true 或 false
navigator.cookieEnabled:返回一个布尔值,指示浏览器是否启用了 cookies。
console.log(navigator.cookieEnabled); // true 或 false
navigator.maxTouchPoints:返回一个整数,表示设备支持的最大触摸点数。
console.log(navigator.maxTouchPoints);
navigator.geolocation:提供了访问用户设备地理位置信息的接口。
navigator.geolocation.getCurrentPosition(function(position) {console.log(position.coords.latitude, position.coords.longitude);},function(error) {console.error(error);}
);
navigator.userAgentData:提供了访问用户代理的品牌、版本以及其它相关信息的接口。
console.log(navigator.userAgentData.brands); // 返回浏览器品牌的数组
console.log(navigator.userAgentData.mobile); // 检查是否为移动设备
navigator.serviceWorker:提供了与浏览器中的 Service Workers 交互的接口。
if ('serviceWorker' in navigator) {navigator.serviceWorker.register('/service-worker.js');
}
navigator.registerProtocolHandler():允许网站注册自定义协议处理程序。
navigator.sendBeacon():允许在页面卸载时异步传输小数据。

使用 navigator 对象时,需要注意隐私和安全问题,因为某些属性可能会泄露用户的敏感信息。例如,userAgent 字符串可以被用来识别用户使用的浏览器和操作系统,这可能会被用于不正当的跟踪或浏览器指纹识别。

此外,由于 navigator 对象包含很多属性和方法,不同的浏览器和操作系统可能会有不同的实现,因此在跨浏览器兼容性方面需要特别注意。

注意:立即执行函数写法!

六、histroy(前进后退)

七、本地存储

浏览器本地存储是Web应用程序中用于存储数据的一种机制,允许数据保留在用户的设备上,而不是在服务器上。这有助于提高性能、减少服务器负载,并可以改善用户在离线状态下的体验。以下是一些常见的浏览器本地存储技术:

  1. Cookie:

    • 最早的浏览器存储技术之一。Cookie 很小(一般不超过4KB),并且会在每次请求时被发送到服务器,适合存储会话信息或个人偏好设置。
  2. Web Storage (localStorage 和 sessionStorage):

    • 提供了超过Cookie的存储容量,localStorage 没有大小限制,但大多数浏览器限制在大约5MB左右。localStorage 用于长期存储整个网站的数据,而 sessionStorage 为单个会话提供数据存储,当用户关闭浏览器标签或窗口时,数据会被清除

  3. IndexedDB:是一种低等级的API用于客户端的存储,可以存储大量数据,包括字符串、文件、图片等。IndexedDB 提供了比 Web Storage 更复杂的数据存储能力,支持事务、键值对索引以及更复杂的查询。

localStorage 示例:localStorage.setItem('username', 'JohnDoe');
var username = localStorage.getItem('username');
localStorage.removeItem('username');
sessionStorage 示例:sessionStorage.setItem('viewState', 'someValue');
var viewState = sessionStorage.getItem('viewState');
sessionStorage.removeItem('viewState');

1.localStorage

注意:只能存字符串

复杂类型存储

转回来

// 存储对象
var obj = { name: "John", age: 30 };
localStorage.setItem('user', JSON.stringify(obj));// 读取对象
var userStr = localStorage.getItem('user');
var userObj = JSON.parse(userStr);

2.sessionStorage

八、数组函数(map和join)

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

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

相关文章

Vue的学习 —— <vue响应式基础>

目录 前言 正文 单文件组件 什么是单文件组件 单文件组件使用方法 数据绑定 什么是数据绑定 数据绑定的使用方法 响应式数据绑定 响应式数据绑定的使用方法 ref() 函数 reactive()函数 toRef()函数 toRefs()函数 案例练习 前言 Vue.js 以其高效的数据绑定和视图…

探索大语言模型代理(Agent):研究背景、通用框架与未来展望

引言 近年来&#xff0c;随着人工智能技术的飞速发展&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;在智能代理&#xff08;Agent&#xff09;领域中的应用已成为研究的热点。这些代理不仅能够模拟人类的认知过程&#xff0c;还能在复杂的社会环…

CNN/TCN/LSTM/BiGRU-Attention到底哪个模型效果最好?注意力机制全家桶来啦!

​ 声明&#xff1a;文章是从本人公众号中复制而来&#xff0c;因此&#xff0c;想最新最快了解各类智能优化算法及其改进的朋友&#xff0c;可关注我的公众号&#xff1a;强盛机器学习&#xff0c;不定期会有很多免费代码分享~ 目录 数据介绍 效果展示 原理简介 代…

数字人解决方案——AniTalker声音驱动肖像生成生动多样的头部说话视频算法解析

1.概述 AniTalker是一款先进的AI驱动的动画生成工具&#xff0c;它超越了简单的嘴唇同步技术&#xff0c;能够精准捕捉并再现人物的面部表情、头部动作以及其他非言语的微妙动态。这不仅意味着AniTalker能够生成嘴型精准同步的视频&#xff0c;更重要的是&#xff0c;它还能够…

使用Dockerfile配置Springboot应用服务发布Docker镜像-16

创建Docker镜像 springboot-docker模块 这个应用可以随便找一个即可&#xff0c;这里不做详细描述了。 pom.xml 依赖版本可参考 springbootSeries 模块中pom.xml文件中的版本定义 <dependencies><dependency><groupId>com.alibaba.cloud</groupId>…

[数据集][图像分类]杂草分类数据集17509张9类别

数据集格式&#xff1a;仅仅包含jpg图片&#xff0c;每个类别文件夹下面存放着对应图片 图片数量(jpg文件个数)&#xff1a;17509 分类类别数&#xff1a;9 类别名称:["chineseapple","lantana","negatives","parkinsonia","part…

48-Qt控件详解:Buttons Containers2

一 Group Box:组合框 #include "widget.h"#include<QGroupBox> #include<QRadioButton> #include<QPushButton> #include<QVBoxLayout>//可以在水平方向和垂直方向进行排列的控件&#xff0c;QHBoxLayout/QVBoxLayout #include <QGridLa…

解决宝塔Nginx和phpMyAdmin配置端口冲突问题

问题描述 在对基于宝塔面板的 Nginx 配置文件进行端口修改时&#xff0c;我注意到 phpMyAdmin 的端口配置似乎也随之发生了变化&#xff01; 解决方法 官方建议在处理 Nginx 配置时&#xff0c;应避免直接修改默认的配置文件&#xff0c;以确保系统的稳定性和简化后续的维护…

大数据可视化实验三——数据可视化工具使用

目录 一、实验目的... 1 二、实验环境... 1 三、实验内容... 1 1. 下载并安装Tableau软件.. 1 2. 使用HTML5绘制Canvas图形.. 2 3. 使用HTML5编写SVG 图形... 5 4. 使用R 语言编写可视化实例.. 7 四、总结与心得体会... 7 五、思考问题... 8 一、实验目的 1&#xff…

C++-Linux工程管理

1 Makefile和CMake实践 1.1 Makefile 参考 简介&#xff1a; Makefile是一种用于自动化构建和管理程序的工具。它通常用于编译源代码、链接对象文件以生成可执行文件或库文件。Makefile以文本文件的形式存在&#xff0c;其中包含了一系列规则和指令&#xff0c;用于描述程序的…

python数据分析——seaborn绘图1

参考资料&#xff1a;活用pandas库 matplotlib库是python的和兴绘图工具&#xff0c;而seaborn基于matplotlib创建&#xff0c;它为绘制统计图提供了更高级的接口&#xff0c;使得只用少量代码就能生成更美观、更复杂的可视化效果。 seaborn库和pandas以及其他pydata库&#xf…

OpenHarmony 实战开发——移植通信子系统

通信子系统目前涉及Wi-Fi和蓝牙适配&#xff0c;厂商应当根据芯片自身情况进行适配。 移植指导 Wi-Fi编译文件内容如下&#xff1a; 路径&#xff1a;“foundation/communication/wifi_lite/BUILD.gn” group("wifi") {deps [ "$ohos_board_adapter_dir/ha…

C++基础与深度解析 | 数组 | vector | string

文章目录 一、数组1.一维数组2.多维数组 二、vector三、string 一、数组 1.一维数组 在C中&#xff0c;数组用于存储具有相同类型和特定大小的元素集合。数组在内存中是连续存储的&#xff0c;并且支持通过索引快速访问元素。 数组的声明&#xff1a; 数组的声明指定了元素的…

【数据结构】数组循环队列的实现

队列&#xff08;Queue&#xff09;是一种特殊的线性数据结构&#xff0c;它遵循FIFO&#xff08;First In First Out&#xff0c;先入先出&#xff09;的原则。队列只允许在表的前端&#xff08;front&#xff09;进行删除操作&#xff0c;而在表的后端&#xff08;rear&#…

python下载及安装

1、python下载地址&#xff1a; Python Releases for Windows | Python.orgThe official home of the Python Programming Languagehttps://www.python.org/downloads/windows/ 2、python安装 &#xff08;1&#xff09; 直接点击下载后的可执行文件.exe &#xff08;2&…

Spring Boot项目怎么集成Gitee登录

一、背景 现在的越来越多的项目&#xff0c;需要集成第三方系统进行登录。今天我们以Spring Boot项目集成Gitee为例&#xff0c;演示一下怎么使用Oauth2协议&#xff0c;集成第三方系统登录。 不了解oauth2的&#xff0c;可以看我之前的文章。Ouath2是怎么实现在第三方应用认…

计算机毕业设计Python+Spark知识图谱课程推荐系统 课程预测系统 课程大数据 课程数据分析 课程大屏 mooc慕课推荐系统 大数据毕业设计

1 绪 论 1.1 课题研究背景 在线教育学习平台是学生用来进行校内或校外拓展课程学习的平台&#xff0c;平台需要具备在线视频观看&#xff0c;作业提交&#xff0c;形成性考核等功能。在学生学习的过程中&#xff0c;学校的管理者或负责教师需要了解学生的学习情况和学习状态&…

WWW服务器搭建(2)——Apache服务器配置与管理

一、Apache简介 1.1 关于Apache Apache HTTP Server&#xff08;简称Apache&#xff09;是Apache软件基金会的一个开放源码的Web服务器&#xff0c;可以在大多数计算机操作系统中运行&#xff0c;由于其跨平台和安全性被广泛使用&#xff0c;是最流行的Web服务器端软件之一。…

01-02-5

1、单链表中按位置查找 a.原理 通过传递的位置&#xff0c;返回该位置对应的地址&#xff0c;放到主函数定义的指针变量中。 我们认为位置从&#xff1a;有数据的节点开始计数 即如下结构&#xff1a; 查找位置&#xff0c;就是返回该位置对应的空间地址。 b.代码说明 Ⅰ…

H5嵌入原生----兼容安卓与ios

主要分UI展示&#xff0c;键盘&#xff0c;输入框等等。解决bug最苦恼的问题不是没有解决方案&#xff0c;而是你没有找到真正的原因。再就是现象难以重现&#xff0c;每次都要发布代码&#xff0c;然后到手机app中去测试&#xff0c;模拟。这些地方会耗费大量的精力。 一、UI…