前端(API)学习笔记(CLASS 4):进阶

1、日期对象

日期对象:用来表示事件的对象

作用:可以得到当前系统时间

1、实例化

在代码中发现了new关键字,一般将这个操作称为实例化

创建一个时间对象并获取时间

        获得当前时间

const date=new Date()

使用日志查看,得到的结果为:

        获得指定时间

const date=new Date('2008-8-8')
console.log(date)
2、日期对象的方法

使用场景:因为日期对象返回的数据我们不能直接使用,所以需要转换为实际开发中常用的格式

方法作用说明
getFullYear()获得年份获取四位年份
getMonth()获得月份取值为0~11
getDate()获取月份中的每一天不同月份取值也不相同
getDay()获取星期取值为0~6(星期天为0)
getHours()获取小时取值为0~23
getMinutes()获取分钟取值为0~59
getSeconds()获取秒取值为0~59

例如:

        let date=new Date()
        console.log(date.getFullYear())
        console.log(date.getMonth()+1)
        console.log(date.getDate())
        console.log(date.getDay())
        console.log(date.getHours()+1)
        console.log(date.getMinutes()+1)
        console.log(date.getSeconds()+1)

运行结果为:

3、时间戳

使用场景:如果计算倒计时效果,前面方法无法直接计算,需要借助于时间戳完成

时间戳:是指1970年01月01日00时00分00秒起至现在的毫秒数,它是一种特殊的计算时间的方式

算法:

将来的时间戳-现在的时间戳=剩余时间毫秒数

剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是 倒计时时间

比如 将来的时间戳 2000ms-现在的时间戳 1000ms=1000ms

1000ms转换为就是 0小时0分1秒

三种方式获取时间戳:

1、使用getTime()方法

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

2、简写 +new Date()

无需实例化

console.log(+new Date())

3、使用Date.now()

无需实例化

但是只能得到当前的时间戳,而前面两种可以返回指定时间的时间戳

console.log(Date.now())

2、节点操作

1、DOM节点

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

节点类型:

        元素节点

                所有的标签 比如 body、div

                html是根节点

        属性节点

                所有的属性 比如href

        文本节点

                所有的文本

        其他

2、查找节点

节点关系:针对的找亲戚返回的都是对象

父节点

子节点

兄弟节点

1、父节点查找:

        parentNode属性,最近一级的父节点

        返回最近一级的父节点 找不到返回为null

子元素.parentNode

例如:

        const son=document.querySelector('.son')
        son.addEventListener('click',function() {
            console.log('11')
            son.parentNode.style.display='none'
        })

当点击子元素的时候,就可以操控父元素进行操作,无需再次获取父元素的DOM对象

2、子节点查找

childNodes属性:获取所有的子节点,包括文本节点(空格、换行)、注释节点等

children属性(重点):仅获得所有元素节点、返回的还是一个伪数组,最近一级的子节点

父元素.children
3、兄弟关系查找

下一个兄弟节点:nextElementSibling属性

上一个兄弟节点:previousElementSibling属性

3、增加节点

很多情况下,我们需要在页面中增加元素

比如,点击发布按钮,可以新增一条信息

一般情况下,我们新增节点,按照如下操作:

        创建一个新的节点

        把创建的新的节点放入到指定的元素内部

1、创建节点

创造出一个新的网页元素,再添加到网页内,一般先创建节点,然后插入节点

创建元素节点方法:

//创造一个新的元素节点
document.createElement('标签名')
2、追加节点

要想在界面看到,还得插入到某个父元素中

插入到父元素的最后一个子元素:

//插入到这个父元素的最后
父元素.appendChild(要插入的元素)

插入到父元素中某个子元素的前面

//插入到某个子元素的前面
父元素.insertBefore(要插入的元素,在哪个元素前面)

特殊情况下,我们新增节点,按照如下操作:

        复制一个原有的节点

        把复制的节点放入到指定的元素内部

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

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

        若为true,则代表克隆时会包含后代节点一起克隆

        若为false,则代表克隆时不包含后代节点

        默认为false

4、删除节点

若一个节点在页面中已不需要时,可以删除它

在JavaScript原生DOM操作中,要删除元素必须通过父元素删除

语法:

父元素.removeChild(要删除的元素)

注:

        如不存在父子关系则删除不成功

        删除节点和隐藏节点有区别的:隐藏节点还是存在的,但是删除,则从html中删除节点

3、M端事件

移动端也有自己独特的地方。比如触屏事件touch,Android和IOS都有

触摸事件touch(也称触摸事件)

touch对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作

常见的触摸事件如下:

触屏touch事件说明
touchstart手指触摸到一个DOM元素时触发
touchmove手指在一个DOM元素上滑动时触发
touchend手指从一个DOM元素上移开时触发

4、swiper插件

插件:就是别人写好的一些代码,我们只需要复制对应的代码,就可以实现对应的效果

主要找到package文件夹

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode:98.验证二叉搜索树

跟着carl学算法,本系列博客仅做个人记录,建议大家都去看carl本人的博客,写的真的很好的! 代码随想录 LeetCode:98.验证二叉搜索树 给你一个二叉树的根节点 root ,判断其是否是一个有效的二叉搜索树。 有效 …

k8s基础(1)—Kubernetes-Pod

一、Pod简介 Pod是Kubernetes(k8s)系统中可以创建和管理的最小单元,是资源对象模型中由用户创建或部署的最小资源对象模型‌。Pod是由一个或多个容器组成的,这些容器共享存储和网络资源,可以看作是一个逻辑的主机‌。…

vue 项目集成 electron 和 electron 打包及环境配置

vue electron 开发桌面端应用 安装 electron npm i electron -D记得加上-D,electron 需添加到devDependencies,如果添加到dependencies后面运行可能会报错 根目录创建electron文件夹,在electron文件夹创建main.js(或者backgrou…

Rabbitmq追问1

如果消费端代码异常,未手动确认,那么这个消息去哪里 2024-12-31 21:19:12 如果消费端代码发生异常,未手动确认(ACK)的情况下,消息的处理行为取决于消息队列的实现和配置,以下是基于 RabbitMQ …

第二十八周机器学习笔记:PINN求正反解求PDE文献阅读——反问题、动手深度学习

第二十七周周报 一、文献阅读题目信息摘要Abstract网络架构实验——Data-driven discovery of partial differential equations(偏微分方程的数据驱动发现)1. Continuous time models(连续时间模型)例子:(Navier–Stok…

02-1堆的概念

2-1 堆的概念 开启实验步骤: 有两种创建工程的方式, 直接使用老师的文档, 然后进行调试 老师的工程 或者跳转我的步骤进行调试从零创建(ctrl 加鼠标左键,快速跳转) 视频观看地址: 韦东山freeRTOS快速入门视频教程 开始实验 (1) 我们定义一个空闲的数组heap_buf[1024], 它就…

【HarmonyOS之旅】ArkTS语法(四) -> 使用限制与扩展

目录 1 -> 在生成器函数中的使用限制 2 -> 变量的双向绑定 3 -> 自定义组件成员变量初始化的方式与约束 1 -> 在生成器函数中的使用限制 ArkTS语言的使用在生成器函数中存在一定的限制: 表达式仅允许在字符串(${expression})、if条件、ForEach的参…

大麦抢票科技狠活

仅供学习参考,切勿再令您所爱的人耗费高昂的价格去购置黄牛票 ⚠️核心内容参考: 据悉,于购票环节,大麦凭借恶意流量清洗技术,于网络层实时甄别并阻拦凭借自动化手段发起下单请求的流量,强化对刷票脚本、刷票软件以及…

【C++】B2106 矩阵转置

博客主页: [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 💯前言💯题目解析💯第一种实现方式:我的初始做法实现思路优缺点分析 💯第二种实现方式:我的优化做法实现思路优缺点分析 &#x1f4a…

五月天TV 1.1.0 | 频道丰富的娱乐向电视直播应用

五月天IPTV是一款提供多种频道的电视直播应用,包括体育、动漫、音乐等。虽然频道种类繁多,但正经频道较少,更适合追求娱乐和轻松内容的用户群体。软件在测试中发现存在一些小问题,频道质量参差不齐。 大小:15M 下载地…

高等数学 8.2 数量积 向量积 *混合积

文章目录 一、数量积二、向量积三、*混合积 一、数量积 对两个向量做运算 a \boldsymbol{a} a 和 b \boldsymbol{b} b ,运算结果是一个数,它等于 ∣ a ∣ |\boldsymbol{a}| ∣a∣ , ∣ b ∣ |\boldsymbol{b}| ∣b∣ 及它们的夹角 θ \th…

Crosslink-NX应用连载(12):如何复用特殊功能管脚

作者:Hello,Panda 大家早上好。 昨天有朋友私信我,如何复用Crosslink-NX的特殊功能引脚如PROGRAMN、DONE、INITN诸如这些。熊猫君在这里简单介绍下: 以LIFCL-33U-8CTG104C为例,我们建立一个简单的指示灯LED周期闪烁的工程&…

Spring MVC和servlet

1.Spring MVC是Spring框架的一个扩展 2.Spring MVC工作流程 1、用户发送请求至前端控制器DispatcherServlet。 2、DispatcherServlet收到请求调用HandlerMapping处理器映射器。 3、处理器映射器找到具体的处理器(可以根据xml配置、注解进行查找),生成处理器对象及…

TI毫米波雷达原始数据解析之Lane数据交换

TI毫米波雷达原始数据解析之Lane数据交换 背景Lane 定义Lane 确认确认LVDS Lane 数量的Matlab 代码数据格式参考 背景 解析使用mmWave Studio 抓取的ADC Data Lane 定义 芯片与DCA100之间的数据使用LVDS接口传输,使用mmWave Studio 配置过程中有一个选项是LVDS L…

VisionPro软件Image Stitch拼接算法

2D图像拼接的3种情景 1.一只相机取像位置固定,或者多只相机固定位置拍图,硬拷贝拼图,采用CopyRegion工具实现 2.一只或多只相机在多个位置拍照,相机视野互相重叠,基于Patmax特征定位后,无缝 拼图&#xff…

const修饰指针总结

作者简介: 一个平凡而乐于分享的小比特,中南民族大学通信工程专业研究生在读,研究方向无线联邦学习 擅长领域:驱动开发,嵌入式软件开发,BSP开发 作者主页:一个平凡而乐于分享的小比特的个人主页…

回归预测 | MATLAB实ELM-Adaboost多输入单输出回归预测

回归预测 | MATLAB实ELM-Adaboost多输入单输出回归预测 目录 回归预测 | MATLAB实ELM-Adaboost多输入单输出回归预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 一、极限学习机(ELM) 极限学习机是一种单层前馈神经网络,具有训练速…

centos,789使用mamba快速安装R及语言包devtools

如何进入R语言运行环境请参考:Centos7_miniconda_devtools安装_R语言入门之R包的安装_r语言devtools包怎么安装-CSDN博客 在R里面使用安装devtools经常遇到依赖问题,排除过程过于费时,使用conda安装包等待时间长等。下面演示centos,789都是一…

Pytest钩子函数,测试框架动态切换测试环境

在软件测试中,测试环境的切换是个令人头疼的问题。不同环境的配置不同,如何高效切换测试环境成为许多测试开发人员关注的重点。你是否希望在运行测试用例时,能够动态选择测试环境,而不是繁琐地手动修改配置? Pytest 测…

node.js内置模块之---stream 模块

stream 模块的作用 在 Node.js 中,stream 模块是一个用于处理流(stream)的核心模块。流是一种处理数据的抽象方式,允许程序处理大量数据时不会一次性将所有数据加载到内存中,从而提高性能和内存效率。通过流&#xff0…