Web APIs - 0基础第四天

Web APIs - 第四天

目标: 了解DOM节点的增删改查,掌握利用数据操作页面,完成移动端通讯录案例

  • 日期对象
  • 节点操作
  • M端事件
  • JS插件
  • 综合案例

日期对象

日期对象:用来表示日期和时间的对象

作用:可以得到当前系统日期和时间

Date是JavaScript内置对象

日期对象使用必须先实例化:创建一个日期对象并获取时间

在代码中发现了 new 关键字时,一般将这个操作称为实例化

实例化

<body>
  <script>
    // 1. 实例化日期对象
    // 1.1 得到当前的日期和时间
    const date = new Date()
    console.log(date)

    // 1.2 得到指定的日期和时间
    const date1 = new Date('2099-12-12 08:08:08')
    console.log(date1)
  </script>
</body>

格式化日期对象

方法 作用 说明
getFullYear() 获得年份 获取四位年份
getMonth() 获得月份 取值为 0 ~ 11
getDate() 获取月份中的每一天 不同月份取值也不相同
getDay() 获取星期 取值为 0 ~ 6
getHours() 获取小时 取值为 0 ~ 23
getMinutes() 获取分钟 取值为 0 ~ 59
getSeconds() 获取秒 取值为 0 ~ 59
<body>
 <script>
   // 2. 格式化日期对象-转换成开发中常见的日期和时间格式
   const myDate = new Date()
   console.log(myDate.getFullYear()) // 得到年份 数字型的 2023
   console.log(myDate.getMonth() + 1) // 得到月份 数字型的 0 需要加1
   console.log(myDate.getDate()) // 得到几号 数字型的 27 
   console.log(myDate.getDay()) // 得到星期  数字型 5 
   console.log(myDate.getHours()) // 得到小时
   console.log(myDate.getMinutes()) // 得到分钟
   console.log(myDate.getSeconds()) // 得到秒数
   console.log(`现在的日期是:${myDate.getFullYear()}${myDate.getMonth() + 1}${myDate.getDate()}`)

 </script>
</body>

格式化日期对象另外方法

方法 作用 说明
toLocaleString() 返回该日期对象的字符串(包含日期和时间) 2099/9/20 18:30:43
toLocaleDateString() 返回日期对象日期部分的字符串 2099/9/20
toLocaleTimeString() 返回日期对象时间部分的字符串 18:30:43
<body>
  <div class="box">div>
  <script>

    const date = new Date()
    console.log(date.toLocaleString())  // 2023/1/27 23:19:20
    console.log(date.toLocaleDateString())  // 2023/1/27 
    console.log(date.toLocaleTimeString())  // 23:19:20

    // 1. 封装一个 getDateTime函数,里面格式化时间对象
    function getDateTime() {
      const date = new Date()

      return date.toLocaleString()
    }
    // 注意: 先写上这句话,防止盒子有1秒的空白期
    document.querySelector('.box').innerText = getDateTime()
    // 3. 显示到box盒子里面,并且添加定时器
    setInterval(function () {
      document.querySelector('.box').innerText = getDateTime()
    }, 1000)
  script>
body>

时间戳

什么是时间戳:

  • 是指1970年01月01日00时00分00秒起至现在的总毫秒数(数字型),它是一种特殊的计量时间的方式

使用场景: 计算倒计时效果,需要借助于时间戳完成

算法:

  • 将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
  • 剩余时间毫秒数转换为年月日时分秒就是倒计时时间
    // 1. 实例化
  const date = new Date()
  // 2. 获取时间戳
  console.log(date.getTime())
// 还有一种获取时间戳的方法
  console.log(+new Date())
  // 还有一种获取时间戳的方法
  console.log(Date.now())

获取时间戳的方法,分别为 getTime 和 Date.now 和 +new Date()

DOM 节点

**DOM树:**DOM 将 HTML文档以树状结构直观的表现出来,我们称之为 DOM 树 或者 节点树

**节点(Node)**是DOM树(节点树)中的单个点。包括文档本身、元素、文本以及注释都属于是节点。

  • 元素节点(重点)
    • 所有的标签 比如 body、 div
    • html 是根节点
  • 属性节点
    • 所有的属性 比如 href
  • 文本节点
    • 所有的文本
      Web APIs - 0基础第四天_第1张图片

查找节点

利用节点关系查找节点,返回的都是对象

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

有了查找节点可以使我们选择元素更加方便

父节点

语法:

元素.parentNode
<body>
  <div class="pop">
    <a href="javascript:;" class="close">a>
  div>
  <script>
    // 点击关闭按钮可以关闭父盒子
    const closeBtn = document.querySelector('.close')
    // 利用孩子选取父节点,返回的也是一个元素对象
    console.log(closeBtn.parentNode)
    closeBtn.addEventListener('click', function () {
      this.parentNode.style.display = 'none'
    })
  script>
body>

子节点

语法:

父元素.children
<body>
  <ul>
    <li>我是第1个孩子li>
    <li>我是第2个孩子li>
    <li>我是第3个孩子li>
    <li>我是第4个孩子li>
  ul>
  <script>
    // 1. 查询子节点
    const ul = document.querySelector('ul')
    console.log(ul.children)

    // 2. 查询兄弟节点
    const li2 = document.querySelector('ul li:nth-child(2)')
    // console.log(li2)
    console.log(li2.previousElementSibling) // 上一个兄弟
    console.log(li2.nextElementSibling)  // 下一个兄弟
    console.log(ul.children[0]) // 第一个孩子
    console.log(ul.children[2]) // 第三个孩子
  script>
body>

兄弟节点

<body>
  <ul>
    <li>我是第1个孩子li>
    <li>我是第2个孩子li>
    <li>我是第3个孩子li>
    <li>我是第4个孩子li>
  ul>
  <script>
    // 2. 查询兄弟节点
    const li2 = document.querySelector('ul li:nth-child(2)')
    // console.log(li2)
    console.log(li2.previousElementSibling) // 上一个兄弟
    console.log(li2.nextElementSibling)  // 下一个兄弟
    console.log(ul.children[0]) // 第一个孩子
    console.log(ul.children[2]) // 第三个孩子
  script>
body>

增加节点

很多情况下,我们需要在页面中增加元素

  • 比如,点击发布按钮,可以新增一条信息

一般情况下,我们新增节点,按照如下操作:

  • 创建一个新的节点
  • 把创建的新的节点放入到指定的元素内部
  1. 父元素最后一个子节点之后,插入节点元素

    element.append()
    
  2. 父元素第一个子元素的之前,插入节点元素

    element.prepend()
    

如下代码演示:

<body>
  <ul>
    <li>我是小lili>
  ul>
  <script>
    // 1. 创建节点
    const li = document.createElement('li')
    li.innerHTML = '我是放到后面的'
    console.log(li)

    // 2. 追加给父元素
    const ul = document.querySelector('ul')
    // 2.1 append 放到ul 的最后面 类似css的 after伪元素
    ul.append(li)
    // 2.2 prepend放到 ul 的最前面 类似css的 before伪元素
    const firstli = document.createElement('li')
    firstli.innerHTML = '我是放到前面的'
    ul.prepend(firstli)
  script>
body>

删除节点

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

语法:

element.remove()
  1. 把对象从它所属的 DOM 树中删除
  2. 删除节点和隐藏节点(display:none) 有区别的: 隐藏节点还是存在的,但是删除,则从DOM树中删除
  <body>
    <div class="remove">我要删除div>
    <div class="none">我要隐藏div>
    <script>
      // 1. 删除节点, remove 会从dom树中删除这个元素
      const remove = document.querySelector('.remove')
      remove.remove()

      // 2. display:none 隐藏元素,页面看不见,但是dom树中还存在这个标签
      const none = document.querySelector('.none')
      none.style.display = 'none'
    script>
  body>

html>

M端事件

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

touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。

常见的触屏事件如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-euVXU4Hq-1680759310393)(assets/1676040472631.png)]

<body>
  <div class="box"></div>
  <script>
    // 触摸事件
    const box = document.querySelector('.box')
    // 1. 手指触屏开始事件 touchstart
    box.addEventListener('touchstart', function () {
      console.log('我开始摸了')
    })
    // 2. 手指触屏滑动事件 touchmove
    box.addEventListener('touchmove', function () {
      console.log('我一直摸')
    })

    // 3. 手指触屏结束事件  touchend
    box.addEventListener('touchend', function () {
      console.log('我摸完了')
    })
  </script>
</body>

JS插件

插件: 就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果

学习插件的思路:

1.看官网。了解这个插件可以完成什么需求 https://www.swiper.com.cn/

2.查看基本使用流程 。 https://www.swiper.com.cn/usage/index.html

3.写个小demo。看在线演示,找到符合自己需求的demo https://www.swiper.com.cn/demo/index.html

4.应用的开发中。

AlloyFinger

AlloyFinger 是腾讯 AlloyTeam 团队开源的超轻量级 Web 手势插件,为元素注册各种手势事件

github地址:https://github.com/AlloyTeam/AlloyFinger

使用步骤:

  1. 下载js库:http://alloyteam.github.io/AlloyFinger/alloy_finger.js
  2. 将AlloyFinger库引入当前文件:

​ 或者使用在线地址:

  1. 配置

    new AlloyFinger(element, {  // element 是给哪个元素做滑动事件
      swipe: function (e) {
        // 滑动的时候要做的事情 e.direction 可以判断上下左右滑动 Left  Right 等
      }
    })
    

综合案例

遍历数组forEach

arr.forEach(function (element, index) { /* … */ })
  • element是数组元素
  • index是数组元素的索引号

字符串截取

字符串.substring(起始索引号, [结束索引号])

思想转变(相当重要)

本次案例,我们尽量减少dom操作,采取操作数据的形式,为了后期Vue做铺垫

增加和删除都是针对于数组的操作,然后根据数组数据渲染页面(数据驱动视图)

事件委托的两个重要作用:

  1. 减少了注册次数
  2. 给新增元素注册事件

你可能感兴趣的:(JS,前端,javascript,开发语言)