【js基础】日期对象的使用，查找、增加、克隆、删除DOM节点，M端事件

news2024/11/19 4:49:27

文章目录

  • 前言
  • 一、日期对象
    • 日期对象的作用
    • 1.1 实例化
    • 1.2 日期对象的方法
    • 1.3 时间的格式化
    • 1.4 时间戳的使用
      • 时间戳是什么
      • js的时间戳
  • 二、DOM的增删改查
    • 什么叫做DOM节点
    • 2.1 DOM的查找
    • 2.2 增加节点
    • 2.3 克隆节点和删除节点
  • 三、M端事件
    • 3.1 M端是什么？
  • 总结

前言

在 JavaScript 中，日期对象的处理、DOM 节点的查找、增加、克隆和删除，以及移动端事件处理都是常见的任务。掌握这些基础操作对于开发者来说是至关重要的。本文将深入探讨这些主题，帮助你更好地理解和运用这些基础知识。

一、日期对象

日期对象的作用

日期对象:用来表示时间的对象
作用:可以得到当前系统时间

1.1 实例化

在代码中发现了 new 关键字时，一般将这个操作称为实例化
创建一个时间对象并获取时间：
下面可以获取当前时间：

const date = new Date()
console.log(date)

在这里插入图片描述
获取指定时间：

const date1 = new Date('2024-1-20')
console.log(date1)
const date2 = new Date('2024-1-20 08:30:00')

在这里插入图片描述

1.2 日期对象的方法

1.getFullYear()

名称： 获取年份
作用： 返回一个四位数的年份（例如：2024）。
说明： 该方法用于从 Date 对象中提取年份部分。

2.getMonth()

名称： 获取月份
作用： 返回一个 0 到 11 之间的整数，代表月份。
说明： 返回的月份从 0 开始，即 0 表示一月，1 表示二月，依次类推，11 表示十二月。

3.getDate()

名称： 获取月份中的每一天
作用： 返回一个月中的某一天，范围从 1 到 31。
说明： 返回指定日期对象（Date object）的月份中的日期。

4.getDay()

名称： 获取星期
作用： 返回一个 0 到 6 之间的整数，代表星期几。
说明： 返回的数字从 0 开始，0 表示星期日，1 表示星期一，依次类推，6 表示星期六。

5.getHours()

名称： 获取小时
作用： 返回一个 0 到 23 之间的整数，代表一天中的小时数。
说明： 返回的小时数是以 24 小时制表示的。

6.getMinutes()

名称： 获取分钟
作用： 返回一个 0 到 59 之间的整数，代表一小时中的分钟数。
说明： 返回的分钟数是指指定小时中的分钟部分。

7.getSeconds()

名称： 获取秒
作用： 返回一个 0 到 59 之间的整数，代表一分钟中的秒数。
说明： 返回的秒数是指指定分钟中的秒部分。
这些方法允许 JavaScript 开发者从 Date 对象中提取特定的时间信息，以便对日期和时间进行处理和展示。

示例代码：

// 创建一个 Date 对象
let currentDate = new Date();

// 使用不同的方法获取日期和时间的部分
let year = currentDate.getFullYear();
let month = currentDate.getMonth();  // 返回值范围：0~11
let dayOfMonth = currentDate.getDate();
let dayOfWeek = currentDate.getDay();  // 返回值范围：0~6
let hours = currentDate.getHours();  // 返回值范围：0~23
let minutes = currentDate.getMinutes();  // 返回值范围：0~59
let seconds = currentDate.getSeconds();  // 返回值范围：0~59

// 打印获取到的值
console.log("年份:", year);
console.log("月份:", month + 1);  // 月份范围是0~11，因此需要加1
console.log("日期:", dayOfMonth);
console.log("星期:", dayOfWeek);
console.log("小时:", hours);
console.log("分钟:", minutes);
console.log("秒:", seconds);

1.3 时间的格式化

在 JavaScript 中，toLocalString()、toLocaleDateString() 和 toLocaleTimeString() 方法用于将日期和时间格式化为本地化的字符串。以下是它们的名称、作用和说明，以及一个示例代码：

1.toLocalString()

名称： 本地化日期时间字符串
作用： 返回一个表示本地日期和时间的字符串，格式根据用户的本地化设置而定。
说明： 这个方法会根据用户的本地化偏好，将日期和时间以可读的字符串形式显示。

2.toLocaleDateString()

名称： 本地化日期字符串
作用： 返回一个表示本地日期的字符串，格式根据用户的本地化设置而定。
说明： 这个方法仅显示日期部分，格式会根据用户的本地化设置而改变。

3.toLocaleTimeString()

名称： 本地化时间字符串
作用： 返回一个表示本地时间的字符串，格式根据用户的本地化设置而定。
说明： 这个方法仅显示时间部分，格式会根据用户的本地化设置而改变。
示例代码：

// 创建一个 Date 对象
let currentDate = new Date();

// 使用 toLocalString() 格式化成本地化日期时间字符串
let localDateTimeString = currentDate.toLocaleString();

// 使用 toLocaleDateString() 格式化成本地化日期字符串
let localDateString = currentDate.toLocaleDateString();

// 使用 toLocaleTimeString() 格式化成本地化时间字符串
let localTimeString = currentDate.toLocaleTimeString();

// 打印格式化后的字符串
console.log("本地化日期时间字符串:", localDateTimeString);
console.log("本地化日期字符串:", localDateString);
console.log("本地化时间字符串:", localTimeString);

这个示例代码创建了一个 Date 对象，然后使用三个不同的方法将其格式化为本地化的日期时间字符串、日期字符串和时间字符串，并通过 console.log() 打印出来。请注意，具体的格式会根据用户的本地化设置而有所不同。

1.4 时间戳的使用

时间戳是什么

时间戳就像是时间的独特身份证号码。它是一个数字，表示从某个特定的参考点（通常是1970年1月1日，也称为UNIX纪元）开始，到现在的经过的秒数。所以，时间戳告诉我们在过去或未来的某一刻，距离那个特定的起点有多少秒。
比如说，如果一个时间戳是 1612345678，那就意味着从1970年1月1日到"1612345678秒之后"的时间点。通过使用时间戳，我们可以更方便地比较、计算和记录时间，因为它提供了一个统一的时间度量标准。在计算机科学和编程中，时间戳经常被用来表示事件发生的时间，进行时间的计算和排序等操作。

js的时间戳

我们可以使用+new Date()来获取时间戳
算法:
将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是倒计时时间
比如 将来时间戳 2000ms- 现在时间戳1000ms = 1000ms
1000ms 转换为就是 0小时0分1秒

二、DOM的增删改查

什么叫做DOM节点

DOM节点
DOM树里每一个内容都称之为节点

节点类型
元素节点:所有的标签 比如 body、 div
html是根节点
属性节点：所有的属性比如 href
文本节点：所有的文本
其他

2.1 DOM的查找

获取父节点：

我们可以使用parentNode来获取

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
</body>

<div class="parent">
    父节点
    <div class="son">子节点</div>
</div>

<script>
    
    const son = document.querySelector('.son')
    const parent = son.parentNode

</script>

</html>

在这里插入图片描述
查找子节点使用children查找兄弟节点nextElementSibling 和 previousElementSibling

2.2 增加节点

创建节点：document.createElement('标签名')
增加节点：
插入到父元素的最后一个子元素：父元素.appendChild(要插入的元素)
插入到父元素某个子类前面：父元素.insertBefore(要插入的元素，哪个元素前面)
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 操作示例</title>
</head>
<body>

<!-- 一个包含子元素的父元素 -->
<div id="parentElement">
    <p>已存在的子元素 1</p>
    <p>已存在的子元素 2</p>
</div>

<script>
    // 创建一个新的 p 元素
    let newParagraph = document.createElement('p');
    
    // 设置新元素的文本内容
    newParagraph.textContent = '新创建的子元素';

    // 获取父元素
    let parentElement = document.getElementById('parentElement');

    // 将新元素追加到父元素的最后一个子元素后面
    parentElement.appendChild(newParagraph);

    // 创建另一个新的 p 元素
    let anotherNewParagraph = document.createElement('p');
    
    // 设置另一个新元素的文本内容
    anotherNewParagraph.textContent = '插入到已存在子元素前面的新元素';

    // 获取要插入到前面的子元素（这里选择第一个子元素）
    let existingChild = parentElement.firstChild;

    // 将新元素插入到已存在子元素前面
    parentElement.insertBefore(anotherNewParagraph, existingChild);
</script>

</body>
</html>

2.3 克隆节点和删除节点

克隆节点:document.cloneNode(bool)
cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
若为true，则代表克隆时会包含后代节点一起克隆
若为false，则代表克隆时不包含后代节点
默认为false

删除节点：
在JavaScript 原生DOM操作中，要删除元素必须通过父元素删除，写法:父元素.removeChild(要删除的元素)
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>克隆节点与删除节点示例</title>
</head>
<body>

<div id="original">
    <!-- 原始节点 -->
    <p>原始节点的文本内容</p>
    <ul>
        <li>子节点1</li>
        <li>子节点2</li>
        <li>子节点3</li>
    </ul>
</div>

<button onclick="cloneNodeWithChildren()">克隆节点（包含子节点）</button>
<button onclick="cloneNodeWithoutChildren()">克隆节点（不包含子节点）</button>
<button onclick="removeOriginal()">删除原始节点</button>

<script>
    // 获取原始节点
    var originalNode = document.getElementById('original');

    // 克隆节点（包含后代节点）
    function cloneNodeWithChildren() {
        var clonedNode = originalNode.cloneNode(true); // true 表示包含后代节点
        document.body.appendChild(clonedNode); // 在文档中插入克隆节点
    }

    // 克隆节点（不包含后代节点）
    function cloneNodeWithoutChildren() {
        var clonedNode = originalNode.cloneNode(false); // false 表示不包含后代节点
        document.body.appendChild(clonedNode); // 在文档中插入克隆节点
    }

    // 删除原始节点
    function removeOriginal() {
        var parent = originalNode.parentNode; // 获取原始节点的父节点
        parent.removeChild(originalNode); // 从父节点中移除原始节点
    }
</script>

</body>
</html>

三、M端事件

3.1 M端是什么？

“M端"通常指的是移动端，其中的"M"代表"Mobile”，表示在移动设备上（例如智能手机、平板电脑）访问和使用的端口或应用。在互联网和软件开发领域，移动端是指专门为移动设备设计和优化的用户界面和应用程序。
具体来说，M端通常包括移动网页、移动应用程序以及其他在移动设备上运行的软件。这些移动端产品和服务通常经过精心设计，以适应小屏幕、触摸输入和移动网络等移动设备特有的特征。开发者会针对不同的移动平台（如iOS和Android）创建相应的应用程序，以提供更好的用户体验和性能。
总的来说，M端是指为了在移动设备上提供便捷、高效、用户友好的体验而专门设计的软件和界面。

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

总结

本文深入介绍了 JavaScript 中日期对象的使用、DOM 节点的查找、增加、克隆和删除，以及移动端触摸事件的处理。这些基础知识是前端开发不可或缺的一部分，通过不断练习和实践，你将更加熟练地运用它们，为你的项目提供稳健的基础。希望这篇文章对你有所帮助！

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

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

相关文章

你的MiniFilter安全吗?

你的MiniFilter安全吗?

简介 筛选器管理器 (FltMgr.sys)是Windows系统提供的内核模式驱动程序, 用于实现和公开文件系统筛选器驱动程序中通常所需的功能; 第三方文件系统筛选器开发人员可以使用FltMgr的功能可以更加简单的编写文件过滤驱动, 这种驱动我们通常称为MiniFilter, 下面是MiniFilter的基本…
阅读更多...
STM32CubeMX教程31 USB_DEVICE - HID外设_模拟键盘或鼠标

STM32CubeMX教程31 USB_DEVICE - HID外设_模拟键盘或鼠标

目录 1、准备材料 2、实验目标 3、模拟鼠标实验流程 3.0、前提知识 3.1、CubeMX相关配置 3.1.0、工程基本配置 3.1.1、时钟树配置 3.1.2、外设参数配置 3.1.3、外设中断配置 3.2、生成代码 3.2.0、配置Project Manager页面 3.2.1、设初始化调用流程 3.2.2、外设中…
阅读更多...
优选6款前端动画特效分享（附在线演示）

优选6款前端动画特效分享（附在线演示）

优选6款前端动画特效 其中有CSS动画、canvas动画、js小游戏等等 下方效果图可能不是特别的生动 那么你可以点击在线预览进行查看相应的动画特效 同时也是可以下载该资源的 翻页时钟特效 基于react实现的一款翻页时钟特效 切换时间特效跟比赛切换分数牌相似 以下效果图只能体现…
阅读更多...
Gitlab7.14 中文版安装教程

Gitlab7.14 中文版安装教程

Gitlab7.14 中文版安装教程 注&#xff1a; 本教程由羞涩梦整理同步发布&#xff0c;本人技术分享站点&#xff1a;blog.hukanfa.com转发本文请备注原文链接&#xff0c;本文内容整理日期&#xff1a;2024-01-28csdn 博客名称&#xff1a;五维空间-影子&#xff0c;欢迎关注 …
阅读更多...
T05垃圾收集算法与垃圾收集器ParNew CMS

T05垃圾收集算法与垃圾收集器ParNew CMS

垃圾收集算法与垃圾收集器ParNew & CMS 垃圾收集算法 #### f 分代收集理论 当前虚拟机的垃圾收集都采用分代收集算法。根据对象存活周期不同将内存分为几块&#xff0c;一般将java堆分为新生代和老年代&#xff0c;然后根据各个年代的特点选择不同的垃圾收集算法。 在新…
阅读更多...
MySQL-窗口函数 简单易懂

MySQL-窗口函数 简单易懂

窗口函数 考查知识点&#xff1a; • 如何用窗口函数解决排名问题、Top N问题、前百分之N问题、累计问题、每组内比较问题、连续问题。 什么是窗口函数 窗口函数也叫作OLAP&#xff08;Online Analytical Processing&#xff0c;联机分析处理&#xff09;函数&#xff0c;可…
阅读更多...
ESP8266 控制之 : 使用 RingBuffer USART1 和 USART3互传

ESP8266 控制之 : 使用 RingBuffer USART1 和 USART3互传

简介 使用Buffer来避免数据的丢失, 或许你自己在使用串口进行收发时会丢失数据, 现在我们就来简单使用一下RingBuffer创建Rx、Tx的Buffer来避免发送接收丢包或数据丢失问题。 扩展知识 RingBuffer的介绍, 看完大概也就知道了&#xff0c;实在不知道就看看下面的代码 线路连接…
阅读更多...
微信小程序开发学习笔记《14》上拉触底事件案例

微信小程序开发学习笔记《14》上拉触底事件案例

微信小程序开发学习笔记《14》上拉触底事件案例 博主正在学习微信小程序开发&#xff0c;希望记录自己学习过程同时与广大网友共同学习讨论。建议仔细阅读对应官方文档 一、最终实现效果 实现在加载完这一页之后&#xff0c;刷新之后展示 “数据加载中”&#xff0c;加载完后…
阅读更多...
超温报警器电路设计方案汇总

超温报警器电路设计方案汇总

超温报警器电路设计方案&#xff08;一&#xff09; 该超温报警电路由温度采集电路、继电器控制电路、延时电路、秒脉冲信号发生器、计数译码电路、数显电路、报警电路共同构成。下面来详细介绍一下各部分电路的功能。 温度采集电路 温度采集电路由负温度系数的热敏电阻RW、R…
阅读更多...
STM32 自学笔记 学习笔记 一

STM32 自学笔记 学习笔记 一

起源&#xff0c;A7,A9,M3&#xff0c;原来弄了A9的TQ2440&#xff0c;结果还得来重新熟悉下32函数JLINK使用SW方式&#xff0c;本来可以下载&#xff0c;但是一根线掉了重新上去&#xff0c;就出各种跟线无关问题&#xff0c;干脆把32断了重新接&#xff0c;结果就成功了&…
阅读更多...
服务攻防-开发组件安全JacksonFastJson各版本XStreamCVE环境复现

服务攻防-开发组件安全JacksonFastJson各版本XStreamCVE环境复现

知识点 1、J2EE-组件Jackson-本地demo&CVE&#xff08;数据处理&#xff09; 2、J2EE-组件FastJson-本地demo&CVE&#xff08;数据处理&#xff09; 3、J2EE-组件XStream-本地demo&CVE&#xff08;数据处理&#xff09; 章节点&#xff1a; 1、目标判断-端口扫描…
阅读更多...
【机器学习入门】18种常见的机器学习算法数学公式及解析

【机器学习入门】18种常见的机器学习算法数学公式及解析

机器学习算法基础原理&#xff1a; https://codeknight.blog.csdn.net/article/details/135632808https://codeknight.blog.csdn.net/article/details/135632808 https://codeknight.blog.csdn.net/article/details/135639843https://codeknight.blog.csdn.net/article/detai…
阅读更多...
Android 性能优化总结：包体积优化

Android 性能优化总结：包体积优化

前言 随着开发不断迭代&#xff0c;App体积越来越大&#xff0c;包大小的增大也会给我们应用带来其他的影响 比如 下载率影响 过大的包体积会影响下载转化率&#xff0c;根据Google Play Store包体积和转化率分析报告显示&#xff0c;平均每增加1M&#xff0c;转化率下降0.2%左…
阅读更多...
【MATLAB第95期】#源码分享 | 基于MATLAB的卷积神经网络CNN图像分类源代码分享（含两个案例）

【MATLAB第95期】#源码分享 | 基于MATLAB的卷积神经网络CNN图像分类源代码分享（含两个案例）

【MATLAB第95期】#源码分享 | 基于MATLAB的卷积神经网络CNN图像分类源代码分享&#xff08;含两个案例&#xff09; 一、案例一 1、背景介绍 目的&#xff1a;训练和测试卷积神经网络&#xff0c;以检测钻头三种类型。 深度学习&#xff08;DL&#xff09;是机器学习的一个子…
阅读更多...
Element table组件内容\n换行

Element table组件内容\n换行

漂亮的页面总是让人心旷神怡&#xff0c;层次清晰的页面让用户操作起来也是易于上手及展示。 如下的页面展示就是非常low的&#xff1a;用户根本阅读其中的数据。 在这个页面&#xff0c;根据用户填写过程生成多次填写记录&#xff0c;如果不进行层次性的展示&#xff0c;数据…
阅读更多...
【C语言】学生管理系统

【C语言】学生管理系统

学生管理系统是一个用于管理学生信息、成绩、课程等数据的软件系统。在本文中&#xff0c;我们将使用C语言来实现一个简易的学生管理系统&#xff0c;包括学生信息的录入、显示、查询等功能。我们将使用文件来存储学生信息&#xff0c;以便实现持久化存储。 该学生管理…
阅读更多...
JAVA 学习 面试（十一）常见设计模式

JAVA 学习 面试（十一）常见设计模式

设计模式 ## 1、创建型模式 对象实例化的模式&#xff0c;创建型模式用于解耦对象的实例化过程。 单例模式&#xff1a;某个类智能有一个实例&#xff0c;提供一个全局的访问点。 工厂模式&#xff1a;一个工厂类根据传入的参量决定创建出哪一种产品类的实例。 抽象工厂模式&a…
阅读更多...
Android学习之路(25) Theme和Style

Android学习之路(25) Theme和Style

1、官方详细解读 样式和主题背景 | Android 开发者 | Android Developers 2、应用场景 类似web设计中css样式。将应用设计的细节与界面的结构和行为分开。 样式style &#xff1a;应用于 单个 View 的外观。样式可以指定字体颜色、字号、背景颜色等属性 主题theme&…
阅读更多...
OpenHarmony—不支持解构赋值

OpenHarmony—不支持解构赋值

规则&#xff1a;arkts-no-destruct-assignment 级别&#xff1a;错误 ArkTS不支持解构赋值。可使用其他替代方法&#xff0c;例如&#xff0c;使用临时变量。 TypeScript let [one, two] [1, 2]; // 此处需要分号 [one, two] [two, one];let head, tail [head, ...tail]…
阅读更多...
WordPress如何使用SQL实现一键关闭/开启评论功能（已有评论）

WordPress如何使用SQL实现一键关闭/开启评论功能（已有评论）

WordPress本人就自带评论功能&#xff0c;不过由于种种原因&#xff0c;有些站长不想开启评论功能&#xff0c;那么应该怎么实现一键关闭评论功能或开启评论功能呢&#xff1f;或者针对已有评论功能的文章进行一键关闭或开启评论功能应该怎么操作&#xff1f; 如果你使用的Wor…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023