Web APIs

前端-公瑾

已于 2022-06-05 20:32:37 修改

阅读量446

点赞数 2

文章标签： javascript

于 2022-04-11 15:14:39 首次发布

本文链接：https://blog.csdn.net/qq_49029709/article/details/124098122

版权

文章目录

前言
一、日期对象
二、节点操作
三、M端事件
四、JS插件
五、综合案例
总结

前言

一、日期对象

目标：掌握日期对象，可以让网页显示日期

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

1.实例化

在代码中发现了 new 关键字时，一般将这个操作称为实例化
创建一个时间对象并获取时间

获得当前时间
在这里插入图片描述
获得指定时间

2.时间对象方法

**使用场景：**因为日期对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式
在这里插入图片描述

3.时间戳

使用场景： 如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成
什么是时间戳:
是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式
算法：
将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
剩余时间毫秒数转换为剩余时间的年月日时分秒就是倒计时时间
比如将来时间戳 2000ms - 现在时间戳 1000ms = 1000ms
1000ms 转换为就是 0小时0分1秒

三种方式获取时间戳：

使用 getTime() 方法
简写 +new Date()
使用 Date.now()
无需实例化
但是只能得到当前的时间戳，而前面两种可以返回指定时间的时间戳
在这里插入图片描述

二、节点操作

1.DOM 节点

目标：能说出DOM节点的类型

DOM节点

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

节点类型

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

属性节点

所有的属性比如 href

文本节点

所有的文本

其他

在这里插入图片描述

2.查找节点

目标：能够具备根据节点关系查找目标节点的能力

关闭二维码案例：
点击关闭按钮，关闭的是二维码的盒子，还要获取erweima盒子

思考：
 关闭按钮和 erweima 是什么关系呢？
 父子关系
 所以，我们完全可以这样做：
 点击关闭按钮，直接关闭它的爸爸，就无需获取erweima元素了

节点关系：针对的找亲戚返回的都是对象
 父节点
 子节点
 兄弟节点

父节点查找：
 parentNode 属性
 返回最近一级的父节点找不到返回为null
在这里插入图片描述
子节点查找：
 childNodes
 获得所有子节点、包括文本节点（空格、换行）、注释节点等

children 属性（重点）
 仅获得所有元素节点
 返回的还是一个伪数组
在这里插入图片描述
兄弟关系查找：

下一个兄弟节点
nextElementSibling 属性
上一个兄弟节点
previousElementSibling 属性

3.增加节点

目标：能够具备根据需求新增节点的能力
很多情况下，我们需要在页面中增加元素

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

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

创建一个新的节点
把创建的新的节点放入到指定的元素内部

学习路线：

创建节点
追加节点

1.创建节点

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

2.追加节点

要想在界面看到，还得插入到某个父元素中
插入到父元素的最后一个子元素:
插入到父元素中某个子元素的前面

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

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

克隆节点
在这里插入图片描述
cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值

若为true，则代表克隆时会包含后代节点一起克隆
若为false，则代表克隆时不包含后代节点
默认为false

4.删除节点

目标：能够具备根据需求删除节点的能力

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

注：
如不存在父子关系则删除不成功
删除节点和隐藏节点（display:none）有区别的：隐藏节点还是存在的，但是删除，则从html中删除节点

三、M端事件

目标：了解M端常见的事件

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

触屏事件 touch（也称触摸事件），Android 和 IOS 都有。
touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。
常见的触屏事件如下：

四、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同时使用的时候, 类名需要注意区分

五、综合案例

学生信息表案例
业务模块：
①：点击录入按钮可以录入数据
②：点击删除可以删除当前的数据
说明：
本次案例，我们尽量减少dom操作，采取操作数据的形式
增加和删除都是针对于数组的操作，然后根据数组数据渲染页面
核心思路：
①：声明一个空的数组
②：点击录入，根据相关数据，生成对象，追加到数组里面
③：根据数组数据渲染页面-表格的行
④：点击删除按钮，删除的是对应数组里面的数据
⑤：再次根据数组的数据，渲染页面

核心思路：
①：声明一个空的数组
②：点击录入模块
(1). 首先取消表单默认提交事件
(2). 创建新的对象，里面存储表单获取过来的数据，格式如右图
(3). 追加给数组
(4). 渲染数据。遍历数组，动态生成tr，里面填写对应td数据，并追加给 tbody
(5). 重置表单
(6). 注意防止多次生成多条数据，先清空 tbody
核心思路：
③：点击删除模块
(1). 采用事件委托形式，给 tbody 注册点击事件
(2). 点击链接，要删除的是对应数组里面的这个数据，而不是删除dom节点，如何找到这个数据？
(3). 前面渲染数据的时候，动态给a链接添加自定义属性 data-id=“0”,这样点击当前对象就知道索引号了
(4). 根据索引号，利用 splice 删除这条数据
(5). 重新渲染
核心思路：
④：点击新增需要验证表单
(1). 获取所有需要填写的表单，他们共同特点都有 name属性
(2). 遍历这些表单，如果有一个值为空，则return 返回提示输入为空中断程序
(3). 注意书写的位置，应该放到新增数据的前面，阻止默认行为的后面

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>学生信息管理</title>
  <link rel="stylesheet" href="css/index.css" />
</head>

<body>
  <h1>新增学员</h1>
  <form class="info" autocomplete="off">
    姓名：<input type="text" class="uname" name="uname" />
    年龄：<input type="text" class="age" name="age" />
    性别:
    <select name="gender" class="gender">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    薪资：<input type="text" class="salary" name="salary" />
    就业城市：<select name="city" class="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="曹县">曹县</option>
    </select>
    <button class="add">录入</button>
  </form>

  <h1>就业榜</h1>
  <table>
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>薪资</th>
        <th>就业城市</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>

      <!-- <tr>
        <td>1001</td>
        <td>欧阳霸天</td>
        <td>19</td>
        <td>男</td>
        <td>15000</td>
        <td>上海</td>
        <td>
          <a href="javascript:">删除</a>
        </td>
      </tr> -->

    </tbody>
  </table>

  <script>
    // 定义数组 用于保存用户的数据
    const arr = []

    // 1. 获取到 表单标签 给表单注册 submit 事件
    const info = document.querySelector('.info')
    info.addEventListener('submit', function (e) {
      // 2. 阻止表单的默认行为
      e.preventDefault()
      // 获取对应的表单元素里面的value值
      // console.log(document.querySelector('.uname'))
      const uname = document.querySelector('.uname').value.trim() // 用户名
      const age = document.querySelector('.age').value.trim() // 年龄
      const gender = document.querySelector('.gender').value // 性别
      const salary = document.querySelector('.salary').value.trim() // 工资
      const city = document.querySelector('.city').value // 就业城市
      // console.log(uname, age, gender, salary, city);
      // 如果用户没有输入数据 则提示用户 并且代码在这里停止往下走
      if (uname.length === 0 || age.length === 0 || salary.length === 0) {
        return alert('请输入数据')
      }
      // 代表用户输入了数据？
      // 创建一个对象 保存一个用户的数据  
      // es6 对象有一个高级语法 属性名和属性值一样时 只需要写一个
      const obj = {
        id: arr.length + 1,
        uname,
        age,
        gender,
        salary,
        city
      }
      // console.log(obj)
      arr.push(obj)
      // 渲染数据
      render()
      // 将表格重置 reset()
      this.reset()

    })

    // 根据数组 去渲染数据显示到表格中

    function render() {
      // 将 tbody 里面的内容清空
      document.querySelector('tbody').innerHTML = ''
      // 遍历数组 
      for (let i = 0; i < arr.length; i++) {
        // 创建tr标签
        const tr = document.createElement('tr')
        // 往 tr 里面写入对于的 td 
        tr.innerHTML = `
          <td>${arr[i].id}</td>
          <td>${arr[i].uname}</td>
          <td>${arr[i].age}</td>
          <td>${arr[i].gender}</td>
          <td>${arr[i].salary}</td>
          <td>${arr[i].city}</td>
          <td>
            <a href="javascript:;" data-id="${i}">删除</a>
          </td>
        `
        document.querySelector('tbody').appendChild(tr)
      }
    }


    // 获取tr标签 新增的元素想要绑定事件只能用事件委托 tbody
    document.querySelector('tbody').addEventListener('click', function (e) {
      if (e.target.tagName === 'A') {
        // 将 数组里面对应的元素删除 
        if (window.confirm("你真的要将我删除吗？")) {
          const id = e.target.dataset.id
          arr.splice(id, 1)
          render()
        }

        // 调用 render() 方法即可
      }
    })


  </script>

</body>

</html>

css代码：

* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color:#721c24;
}
h1 {
  text-align: center;
  color:#333;
  margin: 20px 0;
 
}
table {
  margin:0 auto;
  width: 800px;
  border-collapse: collapse;
  color:#004085;
}
th {
  padding: 10px;
  background: #cfe5ff;
  
  font-size: 20px;
  font-weight: 400;
}
td,th {
  border:1px solid #b8daff;
}
td {
  padding:10px;
  color:#666;
  text-align: center;
  font-size: 16px;
}
tbody tr {
  background: #fff;
}
tbody tr:hover {
  background: #e1ecf8;
}
.info {
  width: 900px;
  margin: 50px auto;
  text-align: center;
}
.info  input, .info select {
  width: 80px;
  height: 27px;
  outline: none;
  border-radius: 5px;
  border:1px solid #b8daff;
  padding-left: 5px;
  box-sizing: border-box;
  margin-right: 15px;
}
.info button {
  width: 60px;
  height: 27px;
  background-color: #004085;
  outline: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  border-radius: 5px;
}
.info .age {
  width: 50px;
}

总结

在这里插入图片描述

前端-公瑾

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web APIs

文章目录前言一、日期对象1.实例化2.时间对象方法3.时间戳二、节点操作1.DOM 节点2.查找节点3.增加节点4.删除节点三、M端事件四、JS插件五、综合案例总结前言一、日期对象目标：掌握日期对象，可以让网页显示日期日期对象：用来表示时间的对象作用：可以得到当前系统时间1.实例化在代码中发现了 new 关键字时，一般将这个操作称为实例化创建一个时间对象并获取时间获得当前时间获得指定时间2.时间对象方法**使用场景：**因为日期对象返回的数据我们不能直接使用，所以需要转换为实际
复制链接

扫一扫