自学内容网 自学内容网
自学内容网 > 正文

6.4 JavaScript Apis - 日期对象、DOM节点

🕗 发布于 2024-12-14 01:24 javascript  开发语言  ecmascript  

JavaScript Apis - 日期对象、DOM节点

文章目录

一、日期对象

目的是正确的在网页显示信息

日期对象：用来表示时间的对象

作用：可以得到当前系统时间

1.1 实例化

在代码中发现了new关键字的时候，一般称这个操作位实例化

创建一个时间对象并获取时间

  • 获取当前时间
cosnt date = new Date()

image-20240729144811138

  • 获得指定时间
const date = new Date('2008-8-8')

image-20240729144848057

1.2 时间对象方法

能工使用日期对象中的方法写出常见日期

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

image-20240729155915476

  console.log(date.toLocaleString())
  console.log(date.toLocaleDateString())
  console.log(date.toLocaleTimeString())

image-20240729162104217

需求：将当前时间以YYYY-MM-DD HH:mm形式显示在页面 2008-08-08 08:08

分析

  • 调用日期对象进行转换
  • 补零
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
    div {
        width: 300px;
        height: 40px;
        border: 1px solid pink;
        line-height: 40px;
    }
</style>
<body>
<div>

</div>
<script>
  const div = document.querySelector('div')

  function getMyDate() {
    //获得日期对象
    const date = new Date()
    let h = date.getHours()
    let m = date.getMinutes()
    h = h < 10 ? '0' + h : h
    m = m < 10 ? '0' + m : m
    return `今天是${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${h}:${m}`
  }

  div.innerHTML = getMyDate()
</script>
</body>
</html>

1.3 时间戳

时间戳：是指1970年01月01日00时00分00秒起至现在的毫秒数，是一种特殊的计量时间的方式

场景：如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成

算法

  • 将来的时间戳-现在的时间戳=剩余时间毫秒数
  • 剩余时间毫秒数转换为剩余时间的年月日时分秒就是倒计时时间
  • 比如 将来时间戳2000ms-现在时间戳1000ms=1000ms
  • 1000ms转换为就是0小时0分1秒

获取时间戳的三种方式

  • 使用getTime()方法

  • 简写+new Date()

  • 使用Date.now()

const date = new Date()
console.log(date.getTime())
console.log(+new Date())
console.log(Date.now())

image-20240729164247712

前两种方法可以返回指定时间的时间戳，最后面这一种只能得到当前的时间戳

console.log(+new Date('2022-4-1 18:30:30'))

时间戳转换为正常时间

image-20240729164743328

二、节点操作

2.1 DOM节点

DOM节点：DOM树里每一个内容都称为节点

元素节点：所有的标签，比如body、div，其中html是根节点

最重要的就是元素节点，增删改查其实就是对这部分的增删改查

属性节点：所有属性，比如href

文本节点：所有的文本

image-20240729165417682

2.2 查找DOM节点

查找节点是站在关系的角度查找，比如head和html是父子级关系，head和body是兄弟关系

如下图所示，关闭二维码的案例，点击关闭按钮，关闭的是二维码的盒子，还要获取erweima盒子

image-20240805110342258

关闭按钮和erweima是父子关系，所以我们完全可以点击关闭按钮，直接关闭它的父级，就无需获取erweima元素了

image-20240805110323670

节点关系：针对的找亲戚返回的都是对象

  • 父节点
  • 子节点
  • 兄弟节点

2.2.1 父节点查找

parentNode属性，返回最近一级的父节点，找不到返回值为null

子元素.parentNode

<body>
<div>
  <div class="body">
    <div class="baby">x</div>
  </div>

</div>
<script>
  const baby = document.querySelector('.baby')
  console.log(baby) //返回的dom节点
  console.log(baby.parentNode) //返回的父级dom节点
</script>
</body>

image-20240805111713172

2.2.2 子节点查找

childNodes：获得所有子节点，包括文本节点（空格、换行）、注释节点等

childNodes属性不经常使用，因为获取的节点有一部分是我所不需要的

children属性：仅获得所有元素节点，返回的还是一个伪数组

父元素.children

<ul>
  <li>
    <p>第一个li</p>
  </li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<script>
  const ul = document.querySelector('ul')
  console.log(ul.children)//得到伪数组，选择的是亲儿子
  console.log(ul.childNodes)
</script>

image-20240805163258027

2.2.3 兄弟节点查找

previousElementSibling属性：上一个兄弟节点

nextElementSibling属性：下一个兄弟节点

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

<script>
  const li2 = document.querySelector('ul li:nth-child(2)')
  console.log(li2.previousElementSibling) //上一个兄弟节点
  console.log(li2.nextSibling) //下一个兄弟节点
</script>

image-20240805163227514

2.3 增加节点

页面中没有这个节点，但是可以通过JS的方式进行增加节点

使用场景：点击发布按钮，可以新增一条信息

一般情况下，新增节点可以按照如下操作：

  1. 创建一个新的节点

创建节点的方法：

document.createElement('标签名')
  1. 把创建的新的节点放入到指定的元素内部

创建节点，即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点

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

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

插入到父元素中某个子元素的前面

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

<body>
<ul>
  <li>123456</li>
</ul>
<script>
  const ul = document.querySelector('ul')
  const li1 = document.createElement('li')
  li1.innerHTML = '我是li11111'
  ul.insertBefore(li1,ul.children[0])//将新元素放在最前面

  const li2 = document.createElement('li')
  li2.innerHTML = '我是li222222'
  ul.appendChild(li2)
</script>
</body>

2.4 克隆节点

特殊情况下，我们新增节点需要按照如下的操作：

  1. 复制一个原有的节点
  2. 把复制的节点放入到指定的元素内部

true：深克隆，孩子孙子都克隆

false：浅克隆，仅仅克隆一个标签而已，其他的都不管

元素.cloneNode(布尔值)

<body>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>
<script>
  const ul = document.querySelector('ul')
  //1.克隆第一个节点
  const li1 = ul.children[0].cloneNode(true)
  //2.追加
  ul.appendChild(li1)
</script>
</body>

效果图

image-20240805172552116

2.5 删除节点

若一个节点在页面中不需要的时候，可以删除它

在JavaScript原生DOM操作中，要删除元素必须通过父元素删除

语法

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

注

如不存在父子关系，则删除不成功

删除节点和隐藏节点（display:none）有区别：隐藏节点还是存在的，但是删除，则从html中删除节点

三、M端事件

也就是移动端事件

移动端有自己独特的地方，比如触屏事件touch（也称为触摸事件）

touch对象代表一个触摸点，触摸点可能是一根手指，也可能是一根触摸笔

触屏事件可响应用户手指（或触控笔）对屏幕或者触控板的操作

常见的触屏事件如下：

image-20240808173211545

四、JS 插件 swiper

官网：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

在线演示：Swiper演示 - Swiper中文网

查看基本使用流程：https://www.swiper.com.cn/api/index.html

注意：多个swiper同时使用的时候，类名需要注意区分

查看API文档，去配置自己的插件：https://www.swiper.com.cn/api/index.html

使用文档：Swiper使用方法 - Swiper中文网

注意！多个swiper同时使用的时候，类名需要区分

点击这个下载即可

image-20240812173031167

之后选择对应的下载即可

image-20240812173058822

也可通过npm的方式引入

image-20240812173650634

下载完成后如下所示

swiper.css是未压缩版的css文件

swiper.min.css是压缩版d的css文件

image-20240812173534479

如下所示的JS文件也是同理

image-20240812173736493

具体使用的话，参照下面这个链接进行使用即可：Swiper使用方法 - Swiper中文网

下面做一个移动端的轮播图

编号是030

image-20240812174240650

我们可以直接在我们下载的代码中进行查找

image-20240812174327420

如果不是下载的代码的方式，我们直接点击右上角“在新窗口打开”即可，然后点击右键，“查看网页源代码”

image-20240812174505347

剩下的操作复制粘贴即可

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <!--引入css文件-->
  <link rel="stylesheet" href="../css/swiper-bundle.min.css"/>
  <style>
      .box {
          width: 800px;
          height: 300px;
          background-color: pink;
          /*自动居中*/
          margin: 100px auto;
      }

      html,
      body {
          position: relative;
          height: 100%;
      }

      body {
          background: #eee;
          font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
          font-size: 14px;
          color: #000;
          margin: 0;
          padding: 0;
      }

      .swiper {
          width: 100%;
          height: 100%;
      }

      .swiper-slide {
          text-align: center;
          font-size: 18px;
          background: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
      }

      .swiper-slide img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
      }
  </style>

</head>

<body>
<div class="box">

  <!-- Swiper -->
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

</div>

<!--引入JS文件-->
<script src="../js/swiper-bundle.min.js"></script>

<!-- 初始化 Swiper -->
<script>
  var swiper = new Swiper(".mySwiper", {
    //分液器 小圆点
    pagination: {
      el: ".swiper-pagination",
    },
  });
</script>
</body>
</html>

最终效果图

image-20240812175536062

除此之外，官网还有许多其他的操作


原文地址：https://blog.csdn.net/weixin_51351637/article/details/144431713

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024