日期对象与节点操作

1.日期对象

1.1实例化

在这里插入图片描述

// 实例化const date = new Date()console.log(date);// 返回指定时间const date1 = new Date('2022-5-1 08:30:00')console.log(date1);

1.2日期对象方法

在这里插入图片描述

1.3时间戳

在这里插入图片描述
三种获取时间戳的方法

在这里插入图片描述

const date = new Date()console.log(date.getTime());console.log(+new Date());console.log(Date.now());

2.结点操作

2.1DOM结点

在这里插入图片描述

2.2查找节点

在这里插入图片描述
父节点查找
在这里插入图片描述

const baby = document.querySelector('.baby')console.log(baby);console.log(baby.parentNode);console.log(baby.parentNode.parentNode);

子节点查找
在这里插入图片描述

 const ul = document.querySelector('ul')console.log(ul.children);

兄弟关系查找
在这里插入图片描述

const li2 = document.querySelector('ul li:nth-child(2)')console.log(li2.previousElementSibling);console.log(li2.nextElementSibling);

3.增加节点(重点)

3.1创建节点

在这里插入图片描述

3.2追加节点

在这里插入图片描述

const ul = document.querySelector('ul')const li = document.createElement('li')li.innerHTML = '我是你你你爹'ul.appendChild(li)//插入到最后面ul.insertBefore(li, ul.children[0])//插入到最前面

3.3克隆节点

在这里插入图片描述

3.4删除节点

在这里插入图片描述

	const ul = document.querySelector('ul')// 删除节点ul.removeChild(ul.children[0])

4.M端事件

在这里插入图片描述

<div></div><script>const div = document.querySelector('div')div.addEventListener('touchstart', function () {console.log('摸我了');})div.addEventListener('touchend', function () {console.log('不摸了');})div.addEventListener('touchmove', function () {console.log("一直模");})

5.JS插件

在这里插入图片描述

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

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

相关文章

vue el-table表格中每行上传文件(上传简历)操作

1、HTML中 <el-table :data"formInfo.userListDto" border stripe max-height"400"><el-table-column type"index" label"序号" width"50"> </el-table-column><el-table-column prop"realName&q…

接手了一个外包开发的项目,我感觉我的头快要裂开了~

嗨&#xff0c;大家好&#xff0c;我是飘渺。 最近&#xff0c;我和小伙伴一起接手了一个由外包团队开发的微服务项目&#xff0c;这个项目采用了当前流行的Spring Cloud Alibaba微服务架构&#xff0c;并且是基于一个“大名鼎鼎”的微服务开源脚手架&#xff08;附带着模块代…

elment Loading 加载组件动态变更 text 值bug记录

先上效果图: 倒计时4分钟组件方法 // 倒计时 4分钟getSencond() {this.countDown 4分00秒this.interval setInterval(() > {this.maxTime--;let minutes Math.floor(this.maxTime / 60);let seconds Math.floor(this.maxTime % 60);minutes minutes < 10 ? 0 minu…

智慧公厕为高速服务区公厕做出的贡献

在现代社会&#xff0c;科技的飞速发展改变了人们的生活方式&#xff0c;也深刻影响着城市的基础设施和公共服务。而在这个数字化时代的背景下&#xff0c;智慧公厕作为城市智能化管理的一部分&#xff0c;为高速服务区公厕带来了一系列的创新和贡献&#xff0c;为旅客的出行提…

Corel产品注册机Corel Products KeyGen 2023 – XFORCE解决会声会影2023试用30天

CorelDRAW注册机2023支持全系列产品_Corel Products KeyGen 2023 X-FORCE v8 CorelDRAW注册机2023支持全系列产品_Corel Products KeyGen 2023 X-FORCE v8&#xff0c;Corel产品注册机&#xff08;Corel Products KeyGen 2023 – XFORCE&#xff09;&#xff0c;支持Corel旗下所…

点云凹凸缺陷检测 最高层点云 点云聚类

文章目录 0. 数据说明1. 凹凸缺陷基本内容2. 详细检测思路结果: 0. 数据说明 如上图所示,需要检测的内容为红色框内标出的缺陷部分。简单示例如下红色线条。 但是,由于噪声的影响,点云的平面度并不好,且横梁边缘处存在连接,如下: 基于上述问题,首先需要获取有效点云(最…

js实现鼠标拖拽

目录 css代码 html代码 js代码 完整代码 效果图&#xff1a; 需求&#xff1a; 鼠标在图片内按下时 图片可以跟随盒子动 鼠标弹起图片停下来 如果图片在box的盒子里面时鼠标弹起了 就把图片展示在box里面 并且让图片回到起始位置 css代码 .div {width: 100px;height: 10…

西南科技大学模拟电子技术实验二(二极管特性测试及其应用电路)预习报告

目录 一、计算/设计过程 二、画出并填写实验指导书上的预表 三、画出并填写实验指导书上的虚表 四、粘贴原理仿真、工程仿真截图 一、计算/设计过程 说明:本实验是验证性实验,计算预测验证结果。是设计性实验一定要从系统指标计算出元件参数过程,越详细越好。用公式输入…

视觉测量基础

1. 相机模型 1.1 坐标系转换原理 世界坐标系(world Coords):点在真实世界中的位置&#xff0c;描述相机位置。 相机坐标系(Cameras Coords):以相机光学系统中心&#xff08;镜头中心&#xff09;为原点&#xff0c;建立相机坐标系。 图像物理坐标系(Film Coords):经过小孔成…

漏洞扫描-德迅云安全漏洞扫描服务

漏洞扫描是指基于漏洞数据库&#xff0c;通过扫描等手段对指定的远程或者本地计算机系统的安全脆弱性进行检测&#xff0c;发现可利用漏洞的一种安全检测的行为。 漏洞扫描的主要目的是发现系统、网络或应用程序中可能存在的安全漏洞和缺陷&#xff0c;以便及时修复这些漏洞和缺…

浅谈安科瑞网络电力仪表在斯里兰卡某项目的应用

摘要&#xff1a;安科瑞APM系列网络仪表适用于高低压柜&#xff0c;进线以及出线处的全电量测量及监测。 Absrtact: APM series of network power meter are suitable for full power measurement and monitoring of high and low voltage cabinets, incoming and outgoing li…

1.2 C语言之变量与算数运算表达式概述

1.2 C语言之变量与算数运算表达式概述 一、华氏温度与摄氏温度对照二、代码概述三、练习 一、华氏温度与摄氏温度对照 #include <stdio.h>/*当华氏温度为 0,20,40,...300时&#xff0c;打印出华氏温度与摄氏温度对照表华氏温度与摄氏温度 C(5/9)(̧F-32) 其中C表示摄氏温…