JavaScript Web APIs(四)

JavaScript Web APIs(四)

一、日期对象

日期对象:用来表示时间的对象。
作用:可以得到当前系统时间。

1.1 实例化

在代码中发现了 new 关键字时,一般将这个操作称为 实例化
创建一个时间对象并获取时间:
       (1) 获得当前时间:
        (2) 获得指定时间:

2.2 日期对象方法

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

2.3 时间戳

使用场景: 如果计算倒计时效果,前面方法无法直接计算,需要借助于时间戳完成。
什么是时间戳: 是指1970年01月01日00时00分00秒起至现在的 毫秒数 ,它是一种特殊的计量时间的方式。
算法:
        (1)将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数.
        (2)剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是 倒计时时间。
        (3)比如 将来时间戳 2000ms - 现在时间戳 1000ms = 1000ms
        (4) 1000ms 转换为就是 0小时0分1秒
三种方式获取时间戳:
1.使用 getTime() 方法:
2. 简写 +new Date():
3. 使用 Date.now():
无需实例化, 但是只能得到当前的时间戳, 而前面两种可以返回指定时间的时间戳。

二、节点操作

2.1 DOM节点

DOM节点:DOM树里每一个内容都称之为节点。
节点类型:
        (1) 元素节点: 所有的标签 比如 body、 div。html 是根节点。
        (2) 属性节点:所有的属性 比如 href。
        (3)文本节点:所有的文本。

2.2 查找节点

关闭二维码案例:
        点击关闭按钮, 关闭的是二维码的盒子, 还要获取erweima盒子。
思考:
        关闭按钮 和 erweima 是什么关系呢?
        父子关系
        所以,我们完全可以这样做:
        点击关闭按钮, 直接关闭它的爸爸,就无需获取erweima元素了
节点关系:针对的找亲戚返回的都是对象
        父节点
        子节点
        兄弟节点
父节点查找:
        parentNode 属性
        返回最近一级的父节点 找不到返回为null
子节点查找:
        childNodes
                获得所有子节点、包括文本节点(空格、换行)、注释节点等
children 属性 (重点)
         仅获得所有元素节点
        返回的还是一个伪数组
兄弟关系查找:
        1. 下一个兄弟节点
                nextElementSibling 属性
        2.上一个兄弟节点
                previousElementSibling 属性
问题:
1. 查找父节点用那个属性?
        parentNode
2.查找所有子节点用那个属性?
        children
3. 查找兄弟节点用那个属性?
        nextElementSibling、previousElementSibling

2.3 增加节点

1.创建节点
        即创造出一个新的网页元素,再添加到网页内,一般先创建节点,然后插入节点
        创建元素节点方法:
2.追加节点
        
        要想在界面看到,还得插入到某个父元素中
        
        插入到父元素的最后一个子元素:
        
         插入到父元素中某个子元素的前面:
        
特殊情况下,我们新增节点,按照如下操作:
        复制一个原有的节点
        把复制的节点放入到指定的元素内部
克隆节点
cloneNode会克隆出一个跟原标签一样的元素,括号内传入布尔值
        若为true,则代表克隆时会包含后代节点一起克隆
        若为false,则代表克隆时不包含后代节点
        默认为false

2.4 删除节点

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

在 JavaScript 原生DOM操作中,要删除元素必须通过 父元素删除
语法:
注意:
1.  如不存在父子关系则删除不成功。
2. 删除节点和隐藏节点(display:none) 有区别的: 隐藏节点还是存在的,但是删除,则从html中删除节点

三、M端事件

移动端也有自己独特的地方。比如 触屏事件 touch (也称触摸事件),Android 和 IOS 都有。
         触屏事件 touch (也称触摸事件),Android 和 IOS 都有。
        touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。
常见的触屏事件如下:

四、JS插件

插件: 就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果
学习插件的基本过程
熟悉官网,了解这个插件可以完成什么需求 https://www.swiper.***.***/
看在线演示,找到符合自己需求的 demo https://www.swiper.***.***/demo/index.html
查看基本使用流程 https://www.swiper.***.***/usage/index.html
查看APi文档,去配置自己的插件 https://www.swiper.***.***/api/index.html
注意: 多个swiper同时使用的时候, 类名需要注意区分
1. 本地文件

五、拓展

重绘和回流:
1. 浏览器是如何进行界面渲染的?
解析(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元素)
简单理解影响到布局了,就会有回流。
转载请说明出处内容投诉
CSS教程_站长资源网 » JavaScript Web APIs(四)

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买