日期对象 :
日期对象:用来表示时间的对象
作用:可以得到当前系统时间
实例化 :在代码中发现了 new 关键字时,一般将这个操作称为实例化
创建一个时间对象并获取时间 new后面跟的字母都是大写
获得当前时间 :const date = new Date()
获得指定时间 :const date = new Date(‘2002-8-8’) console.log(date) 时间对象方法 :
使用场景:因为日期对象返回的数据我们不能直接使用,所以需要转换为实际开发中常用的格式
方法 | 作用 | 说明 |
|
getFullYear() | 获得年份 | 获取四位年份 |
|
getMonth() | 获得月份 | 取值为 0 ~ 11 | 月后面要➕1 |
getDate() | 获取月份中的每一天 | 不同月份取值也不相同 |
|
getDay() | 获取星期 | 取值为 0 ~ 6 | 0表示星期天 |
getHours() | 获取小时 | 取值为 0 ~ 23 |
|
getMinutes() | 获取分钟 | 取值为 0 ~ 59 |
|
getSeconds() | 获取秒 | 取值为 0 ~ 59 |
|
时间戳 :
使用场景: 如果计算倒计时效果,前面方法无法直接计算,需要借助于时间戳完成
什么是时间戳: 是指1970年01月01日00时00分00秒起至现在的毫秒数,它是一种特殊的计量时间的方式
算法:
将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是 倒计时时间
比如 将来时间戳 2000ms - 现在时间戳 1000ms = 1000ms,1000ms 转换为就是 0小时0分1秒
三种方式获取时间戳:
- 使用 getTime() 方法
2.简写 +new Date() 常用:因为可以返回当前时间戳或者指定的时 间戳
3.使用 Date.now() ,无需实例化 , 但是只能得到当前的时间戳,而前面两种可以返回指定时间的时间戳
节点操作:
DOM 节点 :DOM树里每一个内容都称之为节点
节点类型 三种
1:元素节点 : 比如 div标签 (重点)
所有的标签 比如 body、 div
html 是根节点
2:属性节点:比如 class属性
所有的属性 比如 href
3:文本节点 : 比如标签里面的文字
所有的文本
查找节点 :父节点,子节点,兄弟节点。
节点关系:针对的找亲戚返回的都是对象
父节点 :parentNode 属性 返回最近一级的父节点找不到返回为null
子节点 :children 属性 (重点) 仅获得所有元素节点 ,返回的还是一个伪数组
childNodes 获得所有子节点、包括文本节点(空格、换行)、注释节点等
兄弟节点 :
下一个兄弟节点 nextElementSibling 属性
上一个兄弟节点 previousElementSibling 属性
增加节点 (重点)
创建节点 :document.createElement('标签')
即创造出一个新的网页元素,再添加到网页内,一般先创建节点,然后插入节点
追加节点 :
要想在界面看到,还得插入到某个父元素中,
插入到父元素的最后一个子元素: 父元素.appendChild(要追加到标签)
插入到父元素中某个子元素的前面 :父元素.insertBefore(要插入的元素,在那个元素前面)
克隆节点 :元素.cloneNode(布尔值)![watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5qKm6L-q4oCUMA==,size_20,color_FFFFFF,t_70,g_se,x_16](https://img-blog.csdnimg.cn/0ef1a208a92645d29934db60b33e37a4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5qKm6L-q4oCUMA==,size_20,color_FFFFFF,t_70,g_se,x_16)
cloneNode会克隆出一个跟原标签一样的元素,括号内传入布尔值
若为true,则代表克隆时会包含后代节点一起克隆
若为false,则代表克隆时不包含后代节点,默认为false
删除节点:
若一个节点在页面中已不需要时,可以删除它
1.语法:父元素.removeChild(要删除的元素)
注意:如不存在父子关系则删除不成功
2.语法:要删除的子元素.remove() 自己可以将自己删除(自杀)
删除节点和隐藏节点(display:none) 有区别的: 隐藏节点还是存在的,但是删除,则从html中删除节点
M端事件:
移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件),Android 和 IOS 都有。
触屏事件 touch(也称触摸事件),Android 和 IOS 都有。
touch对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔 )对屏幕或者触控板操作。
常见的触屏事件如下:
触摸touch事件 | 说明 |
touchstart | 手指触摸到一个Dom元素时触发 |
touchmove | 手指在一个Dom元素上滑动时触发 |
touchend | 手指从一个Dom元素上移出时触发 |
JS插件:
插件: 就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果
学习插件的基本过程
熟悉官网,了解这个插件可以完成什么需求 https://www.swiper.com.cn/
看在线演示,找到符合自己需求的demo https://www.swiper.com.cn/demo/index.html
查看基本使用流程 https://www.swiper.com.cn/usage/index.html
查看APi文档,去配置自己的插件 https://www.swiper.com.cn/api/index.html
注意: 多个swiper同时使用的时候, 类名需要注意区分
本地文件:
面试题:重绘和回流
浏览器是如何进行界面渲染的
解析(Parser)HTML,生成DOM树(DOM Tree)
同时解析(Parser) CSS,生成样式规则 (Style Rules)
根据DOM树和样式规则,生成渲染树(Render Tree)
进行布局Layout(回流/重排):根据生成的渲染树,得到节点的几何信息(位置,大小)
进行绘制Painting(重绘):根据计算和获取的信息进行整个页面的绘制
Display:展示在页面上
回流(重排):当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时,浏览器就会重新渲染部分或全部文档的过程称为 回流。
重绘 :由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如:color、background-color、 outline等), 称为重绘。
重绘不一定引起回流,而回流一定会引起重绘
会导致回流(重排)的操作:
页面的首次刷新
浏览器的窗口大小发生改变
元素的大小或位置发生改变
改变字体的大小
内容的变化(如:input框的输入,图片的大小)
激活css伪类 (如::hover)
脚本操作DOM(添加或者删除可见的DOM元素)
简单理解影响到布局了,就会有回流