Apls-day4
日期对象
实例化
1.日期对象
目标：掌握日期对象，可以让网页显示日期
- 日期对象：用来表示时间的对象
- 作用：可以显示系统时间
学习路径：
1.实例化
2.日期对象方法
3.时间戳
实例化
- 在代码中发现了new关键字时，一般将这个操作称作实例化
- 创建一个时间并获取时间
-
获得当前时间
const date = new Date（） -
获得指定的时间
const date = new Date('2008-8-8')console.log(date)
-
日期对象的方法
使用场景：因为日期对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式
综合案例
时间戳
目标：能够获得当前的时间戳
- 使用场景：如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成
- 什么是时间戳：是指某个时间起至现在的毫秒数，它是一种特殊的计量时间的方式
- 算法：
- 将来时间戳 - 现在的时间戳 = 剩余时间毫秒数
- 剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是倒计时时间
- 比如 将来时间戳 2000ms - 现在时间戳 1000ms = 1000ms
- 1000ms 转换为就是 0 小时0分1秒
三种方法获取时间戳
第三种方法只能得到当前的时间戳，而前面两种可以返回指定时间的时间戳
毕业倒计时效果
需求：计算到下课还有多少时间
分析：
1.用将来的时间减去现在时间就是剩余时间
2.核心：用将来的的时间戳减去现在的时间戳
3.把剩余的时间转换为 天 时 分 秒
节点操作
DOM节点
- DOM树里每一个内容称之为节点
- 节点类型
- 元素节点：所有的标签 比如body div ；html是根节点
- 属性节点：所有的节点比如href
- 文本节点：所有的文本
- 其他
查找节点
- 关闭二维码案例：
- 点击关闭按钮，关闭的是二维码的盒子，还要获取erweima盒子
- 思考：
- 关闭按钮 和 erweima是什么关系？
- 父子关系
- 点击关闭按钮，直接关闭它的爸爸，就无需获取erweima元素了
- 节点关系：针对的找亲戚返回的都是对象
- 父节点
- 子节点
- 兄弟节点
- 父节点查找：
-
parentNode 属性
-
返回最近一级的父节点 找不到返回null
子元素.parentNode
-
综合案例
关闭二维码
- 子节点查找
- childNodes
- 获得所有子节点、包含文本节点（空行、换行）、注释节点等
- childNodes
- children属性
-
仅获得所有元素节点
-
返回的还是一个伪数组
父元素.children
-
- 兄弟关系查找：
1.下一个兄弟节点：- nextElementSibling属性
2.上一个兄弟节点： - previousElementSibling属性
- nextElementSibling属性
增加节点
- 很多情况下，我们需要在页面中增加元素
- 比如，点击发布按钮，可以增加一条信息
- 一般情况下，我们新增节点，按照如下操作：
- 创建一个新的节点
- 把创建的新的节点放入到指定的元素内部
- 学习路线：
- 创建节点
- 追加节点
1.创建节点
-
即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
-
创建元素节点方法：
document.createElement('标签名')
2.追加节点
-
要想在界面看到，还得插入到某个父元素中
-
插入到父元素的最后一个子元素：
//插入到这个父元素的最后 父元素.appendChild（要插入的元素） -
插入到父元素中某个子元素的前面
//插入到某个子元素的前面父元素.insertBefore（要插入的元素，在哪个元素前面） -
特殊情况下，我们新增节点，按照如下操作：
- 复制一个原有节点
- 把复制的节点放入到指定的元素内部
-
克隆节点
元素.cloneNode（布尔值）
cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
- 若为true，则代表克隆时会包含后代节点一起克隆
- 若为false，则代表克隆时不包含后代节点
- 默认为false
学成在线案例渲染
需求：按照数据渲染页面
分析：
1.准备好空的ul结构
2.根据数据的个数，创建一个新的空li
3.li里面添加内容img标题等
4.追加给ul
删除节点
目标：能够具备删除节点的能力
-
若一个节点在页面中已不需要时，可以删除它
-
在javaScript原生DOM操作中，要删除元素必须通过父元素删除
-
语法：
父元素.removeChild（要删除的元素） -
注：
- 如不存在父子关系则删除不成功
- 删除节点和隐藏节点（display：none）有区别的：隐藏节点还是存在的，但是删除，则从html中删除节点
M端事件
JS插件
综合案例
学生信息表案例
<script>
//获取元素
const uname = document.querySelector('.uname')
const age = document.querySelector('.age')
const gender = document.querySelector('.gender')
const salary = document.querySelector('.salary')
const city = document.querySelector('.city')
const tbody = document.querySelector('tbody')
//获取所有带有name属性的元素
const items = document.querySelectorAll('[name]')
//声明一个空的数组
const arr = []
//1.点击模块
//1.1表单提交事件
const info = document.querySelector('.info')
info.addEventListener('submit',function(e){//阻止默认行为，不跳转e.preventDefault()// console.log(11);//这里进行表单验证，如果不通过，直接中断//先遍历循环for(let i =0 ; i< items.length ;i++){if(items[i].value === ''){return alert('输入内容不能为空')}}//创建新的对象const obj = {stuId: arr.length+1,uname:uname.value,age : age.value,gender : gender.value,salary : salary.value,city : city.value}//追加给数组里面arr.push(obj)//清空表单 重置this.reset()//调用渲染函数render()
})//2.渲染函数 因为增加和删除都需要渲染
function render(){//先清空tbody,把最新数组里的数据渲染完毕tbody.innerHTML = ``//遍历arr数组for(let i = 0 ;i < arr.length;i++ ){//生成trconst tr = document.createElement('tr')tr.innerHTML = `<td>${arr[i].stuId}</td><td>${arr[i].uname}</td><td>${arr[i].age}</td><td>${arr[i].gender}</td><td>${arr[i].salary}</td><td>${arr[i].city}</td><td><a href="javascript:" data-id=${i}>删除</a></td>`//追加元素 父元素.appendChild(子元素)tbody.appendChild(tr)}
}//删除操作
//3.1事件委托 tbody
tbody.addEventListener('click',function(e){if(e.target.tagName === 'A'){//得到当前元素的自定义属性//删除arr数组对应数据arr.splice(e.target.dataset.id,1) //选择的 删除的个数//重新渲染一次render()}
})