JS-Web API -day04
一 、日期对象
1.1 实例化日期对象
实例化： new 关键字
获得当前时间
const data = new Date()
获得指定时间
const data1 = new Date('2024-5-1 08:30:00')
1.2 日期对象方法
常见的时期对象方法：getFullYear()、getMonth()、getDate()、getDay()、getHours()、getMinutes()、getSeconds()，返回的数字型数据。toLocaleString()、toLocaleTimeString()、toLocaleDateString()返回的是字符型数据
方法 作用 说明 getFullYear() 获得年份 获得四位年份 getMonth() 获得月份 取值为0~11 需要加1 getDate() 获得月份中的每一天 不同月份取值不同 getDay() 获得星期 取值为 0~6 0代表星期日 getHours() 获得小时 取值为0~23 getMinutes() 获得分钟 取值为0~59 getSeconds() 获取秒 取值为0~59 toLocaleString() 获取当前时间从年到秒 2025/1/20 11:23:14 toLocaleTimeString() 获取当前时间从小时到秒 11:23:14 toLocaleDateString() 获取当前时间从年到天 2025/1/20
1.3 时间戳
时间戳：是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式。
计算方法：
将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是 倒计时时间
1000ms就是1s
获取时间戳的三种方法
new Date().getTime()
+new Date() 重点
Date.now()
注：
第三种方法无需实例化，但是他只能得到当前的时间戳，前面两种可以返回指定时间的时间戳.（+new Date('2004-05-01 00:00:00')）
二、节点操作
2.1 DOM节点
DOM节点
DOM树里每一个内容都称之为节点
节点类型
元素节点
所有的标签 如body,div
html 是根节点
属性节点
所有的属性 如 href
文本节点
所有的文本
其他
2.2 查找节点
节点关系
父节点
子节点
兄弟节点
父节点查找
子元素.parentNode
parentNode 属性
返回最近一级的父节点 找不到返回为null
子节点查找
父元素.childNodes
获得所有子节点、包括文本节点（空格、换行）、注释节点等
父元素.children 属性
仅获得所有元素节点
返回的还是一个伪数组
兄弟节点查找
元素.nextElementSibling
下一个兄弟节点
元素.previousElementSibling
上一个兄弟节点
<body> <div class="yeye"> <div class="dad"> <div class="baby">x</div> </div> </div> <ul> <li> 1 .<p>第一个段落</p> </li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <script> // 查找父节点 元素节点 const baby = document.querySelector('.baby') //打印他的父节点 console.log(baby.parentNode) // 打印他的爷爷节点 console.log(baby.parentNode.parentNode) //查找子节点 const ul = document.querySelector('ul') // 得到伪数组 选择得是亲儿子 但是其余孩子得内容也会获得 如三代p里面得第一个段落 console.log(ul.children) //查找兄弟节点 const li2 =document.querySelector('ul li:nth-child(2)') console.log(li2.previousElementSibling) //上一个兄弟 console.log(li2.nextElementSibling) // 下一个兄弟 </script> </body>
2.3 增加节点
使用场景：
创建一个新的节点，把创建的新的节点放入到指定的元素内部
创捷节点：
document.createElement('标签名')
追加节点：（要想在界面看到，还得插入到某个父元素中）
1.插入到父元素的最后一个子元素
父元素.appendChild(要插入的元素)
2.插入到父元素中某个子元素的前面
父元素.insertBefore(要插入的元素,在哪个元素的前面)
插到最前面：父元素.insertBefore(要插入的元素,父元素.children[0])
克隆节点：cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
元素.cloneNode(布尔值) 克隆一个已有的元素节点
若为true，则代表克隆时会包含后代节点一起克隆
若为false，则代表克隆时不包含后代节点
默认为false
2.4 删除节点
删除节点：
在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除
父元素.removeChild(要删除的元素)
如 删除第一个元素，父元素.removeChild(父元素.children[0])
若不存在父子关系则删除不成功
删除节点和隐藏节点（display:none） 有区别的： 隐藏节点还是存在的，但是删除，则从html中删除节点
三、M端事件
移动端~触屏事件touch（也叫触摸事件）
touch 对象代表一个触摸点，触屏事件可响应用户手指（或触控笔 ）对屏幕或者触控板操作。
触屏touch事件 说明 touchstart 触摸到一个DOM元素时触发 touchmove 在一个DOM元素上滑动时触发 touchend 从一个DOM元素上移开时触发 <style> body { height: 2000px; } div { width: 300px; height: 300px; background-color: lightskyblue; } </style> <body> <div> </div> <script> //M端事件 也就是移动端事件 //触屏事件 touch const div = document.querySelector('div') // 1. 触摸 div.addEventListener('touchstart',function (){ console.log('开始摸我了') }) // 2.离开 div.addEventListener('touchend',function (){ console.log('停止了') }) // 一直滑动 div.addEventListener('touchmove',function (){ console.log('一直在摸') }) </script> </body>注：
记得浏览器换成模拟移动端的
四、JS插件
JS插件有Swipper,Lodash等，就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果。
Swipper地址：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发
Lodash 地址：Lodash 简介 | Lodash中文文档 | Lodash中文网