js教程(10)

一、日期对象

        用来表示时间的对象,可以得到当前系统时间。

1.实例化

        在代码中发现了new关键字时,一般将这个操作称为实例化,我们可以用new来创建一个时间对象并获取其值。

//创建当前时间对象
const dateNow = new Date();
//创建指定时间对象
const dateBefore = new Date('2004-5-3');
console.log("现在的时间是"+dateNow);
console,log("我的生日是"+dateBefore);

2.日期对象的常用方法

  • getFullYear()——获取四位数年份;

  • getMonth()——获取月份(0~11);

  • getDate()——获取月份中的当前天数(1~31);

  • getDay()——获取星期(0~6,0是星期天);

  • getHours()——获取一天中的小时数(0~23);

  • getMinutes()——获取一小时的分钟数(0~59);

  • getSeconds()——获取一分组的秒数(0~59);

3.时间戳

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

应用

        如果想做一个倒计时,用前面的方法不能直接进行计算,处理起来非常麻烦,这时候就可以用时间戳进行计算,将所有的数据都转换为毫秒进行计算。

获取时间戳的方法

(1)使用getTime()方法;

(2)用+new Date()来获取时间戳;

(3)使用Date.now()来获取时间戳;

注意:前两种方法可以获取指定时间的时间戳,但第三种只能获取当前时间戳。

二、节点操作

1.DOM节点

        DOM树里每一个内容都被称为DOM节点,节点又根据类型分为四大类:

(1)元素节点:所有的标签,比如body、div,如:html是根节点;

(2)属性节点:所有的属性,比如:href;

(3)文本节点:所有的文本;

(4)其他。

我们要重点记住元素节点,这样可以更好的让我们理清标签元素之间的关系。

2.查找节点

(1)查找父节点

子元素.parentNode

parentNode是一个属性,其作用是返回最近一级的父节点,找不到返回为null

(2)子节点查找

父元素.childNodes——获得所有子节点、包括文本节点(空格、换行)、注释节点等

父元素.children——仅获得所有元素的节点,返回的是一个伪数组 

(3)兄弟节点查找

 nextElementSibling属性——下一个兄弟节点

previousElementSibling属性——上一个兄弟节点

3. 增加节点

        在很多情况下,我们需要在页面中增加元素,如发布新的消息等,为了解决这种问题,我们会先创建一个新的节点,让后把创建的新的节点放入到指定的元素内部。

(1)创建节点

document.createElement('标签名');

(2)追加节点

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

 父元素.appendChild(要插入的元素);

插入到某个子元素前面:

父元素.insertBefore(要插入的元素,在哪个元素前面); 

(3)克隆节点

元素.cloneNode(boolean); 

        cloneNode会克隆出一个跟原标签一样的元素,括号内传入布尔值,默认为false,若为true,则代表克隆时会包含后代节点一起克隆,若为false,则代表克隆时不包含后代节点。

4.删除节点

        若一个节点在页面中已不需要时,可以删除它,在JavaScript原生DOM操作中,要删除元素必须通过父元素删除。

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

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

三、M端事件

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

  • 触屏事件touch(也称触摸事件),Android和IOS都有;
  • touch对象代表一个触摸点,触摸点可以是手指,也可以是一根触摸笔。触屏事件可响应用户手指对屏幕或者触控板操作;
  • 常见的触屏事件如下:
    触屏touch事件 说明
    touchstart 手指触摸到一个DOM元素时触发
    touchmove 手指在一个DOM元素上滑动时触发
    touchend 手指从一个DOM元素上移开时触发

相关推荐

  1. js教程10

    2024-03-30 23:54:05       44 阅读
  2. Ubuntu18.04安装Node.js教程

    2024-03-30 23:54:05       34 阅读
  3. Node.js 教程

    2024-03-30 23:54:05       30 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-30 23:54:05       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-30 23:54:05       100 阅读
  3. 在Django里面运行非项目文件

    2024-03-30 23:54:05       82 阅读
  4. Python语言-面向对象

    2024-03-30 23:54:05       91 阅读

热门阅读

  1. 【阅读笔记】《你的第一本博弈论》

    2024-03-30 23:54:05       42 阅读
  2. 防范非法集资,小米消金在行动

    2024-03-30 23:54:05       36 阅读
  3. ASTM C568/C568-22 石灰石检测

    2024-03-30 23:54:05       39 阅读
  4. IDM工具v6.42.3 便携绿色

    2024-03-30 23:54:05       45 阅读
  5. 简单的聊聊Rust元组

    2024-03-30 23:54:05       38 阅读
  6. 10个点介绍SpringBoot3工作流程与核心组件源码解析

    2024-03-30 23:54:05       38 阅读
  7. 动态内存管理

    2024-03-30 23:54:05       48 阅读
  8. Spring Cache 快速入门

    2024-03-30 23:54:05       43 阅读