APIs-day3学习笔记-优快云博客

Web APIs - 第3天

日期对象

掌握 Date 日期对象的使用，动态获取当前计算机的时间。

实例化

const date = new Date(); 系统默认时间
const date = new Date('2020-05-01') 指定时间

方法

getFullYear 获取四位年份

示例：const year = date.getFullYear();
getMonth 获取月份，取值为 0 ~ 11
getDate 获取月份中的每一天，不同月份取值也不相同
getDay 获取星期，取值为 0 ~ 6
getHours 获取小时，取值为 0 ~ 23
getMinutes 获取分钟，取值为 0 ~ 59
getSeconds 获取秒，取值为 0 ~ 59

时间戳

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

注：ECMAScript 中时间戳是以毫秒计的。

获取时间戳

date.getTime() 需要实例化
+new Date() 不需实例化
Date.now() 不需实例化

DOM 节点

插入节点

在已有的 DOM 节点中插入新的 DOM 节点时，需要关注两个关键因素：首先要得到新的 DOM 节点，其次在哪个位置插入这个节点。

createElement 动态创建任意 DOM 节点

示例：const p = document.createElement('p')
cloneNode 复制现有的 DOM 节点，传入参数 true 会复制所有子节点，默认值为false

示例：const p2 = document.querySelector('p').cloneNode(true)
appendChild 在末尾（结束标签前）插入节点

示例：document.querySelector('.box').appendChild(p)
insertBefore(插入的元素, 放到哪个元素的前面) 在父节点中任意子节点之前插入新节点

示例：ul.insertBefore(li, ul.children[0])

删除节点

删除现有的 DOM 节点，也需要关注两个因素：首先由父节点删除子节点，其次是要删除哪个子节点。

removeChild 删除节点时一定是由父子关系。

示例：ul.removeChild(lis[0])

查找节点

DOM 树中的任意节点都不是孤立存在的，它们要么是父子关系，要么是兄弟关系，不仅如此，我们可以依据节点之间的关系查找节点。

父子关系

childNodes 获取全部的子节点，回车换行会被认为是空白文本节点

示例：ul.childNodes
children 只获取元素类型节点
parentNode 获取父节点，以相对位置查找节点，实际应用中非常灵活。

示例：this.parentNode.style.color = 'red'

兄弟关系

previousSibling 获取前一个节点，以相对位置查找节点，实际应用中非常灵活。
nextSibling 获取后一个节点，以相对位置查找节点，实际应用中非常灵活。

定时器-延迟函数

setTimeout(回调函数, 延迟时间) 让代码延迟执行，仅仅只执行一次，平时省略window

间歇函数 setInterval每隔一段时间就执行一次，平时省略window

清除延时函数：

clearTimeout(timerId)

注意

延时函数需要等待,所以后面的代码先执行
返回值是一个正整数，表示定时器的编号

location对象

location (地址) 它拆分并保存了 URL 地址的各个组成部分，它是一个对象

href 属性，获取完整的 URL 地址，赋值时用于地址的跳转

示例：location.href = ‘http://www.itcast.cn’

search 属性，获取地址中携带的参数，符号？后面部分
hash 属性，获取地址中的啥希值，符号 # 后面部分
reload() 方法，用来刷新当前页面，传入参数 true 时表示强制刷新

// 假设当前页面URL是：https://www.test.com/home?user=alice#welcome

  console.log("完整URL: ", location.href);
  console.log("参数: ", location.search); // 输出 ?user=alice
  console.log("哈希: ", location.hash);   // 输出 #welcome
  console.log("路径: ", location.pathname); // 输出 /home

// 刷新页面
  function forceRefresh() {
    location.reload(true); // 强制刷新
  }

navigator对象

navigator是对象，该对象下记录了浏览器自身的相关信息

常用属性和方法：

通过 userAgent 检测浏览器的版本及平台

// 检测 userAgent（浏览器信息）
(function () {
  const userAgent = navigator.userAgent
  // 验证是否为Android或iPhone
  const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
  const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
  // 如果是Android或iPhone，则跳转至移动站点
  if (android || iphone) {
    location.href = 'http://m.itcast.cn'
  }})();

histroy对象（很少用）

history (历史)是对象，主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进、后退等

back() 可以后退功能
forward() 前进功能
go(参数) 前进后退功能参数如果是1 前进1个页面如果是-1 后退1个页面

示例：history.go(1)

本地存储（重点）

本地存储：将数据存储在本地浏览器中

好处：

1、页面刷新或者关闭不丢失数据，实现数据持久化

2、容量较大，sessionStorage和 localStorage 约 5M 左右

localStorage（重点）

作用： 数据可以长期保留在本地浏览器中，刷新页面和关闭页面，数据也不会丢失

特性： 以键值对的形式存储，并且存储的是字符串，省略了window

localStorage.setltem('key', 'value') 存储数据

示例：localStorage.setItem(‘age’, 18)
localStorage.getltem('key') 读取数据
localStorage.removeltem('key') 删除数据

sessionStorage（了解）

和localStorage的区别：当页面浏览器被关闭时，存储在 sessionStorage 的数据会被清除

sessionStorage.setItem('key','value') 存储数据
sessionStorage.getItem('key') 读取数据
sessionStorage.removeItem('key') 删除数据

localStorage 存储复杂数据类型

JSON.stringify(复杂数据类型) 把对象转换为JSON字符串

示例：localStorage.setItem(‘goods’, JSON.stringify(goods)) 把最新 goods 数组存入本地存储
JSON.parse(JSON字符串) 把JSON字符串转换为对象

示例：JSON.parse(localStorage.getItem(‘goods’))

JSON字符串：

首先是1个字符串
属性名使用双引号引起来，不能单引号
属性值如果是字符串型也必须双引号

综合案例

数组map 方法

使用场景：

map 可以遍历数组处理数据，并且返回新的数组

语法：

<body>
  <script>
  const arr = ['red', 'blue', 'pink']
  // 1. 数组 map方法 处理数据并且 返回一个数组
  const newArr = arr.map(function (ele, index) {
    // console.log(ele)  // 数组元素
    // console.log(index) // 索引号
    return ele + '颜色'
  })
  console.log(newArr)
</script>
</body>

map 也称为映射。映射是个术语，指两个元素的集之间元素相互“对应”的关系。

map重点在于有返回值，forEach没有返回值（undefined）

数组join方法

作用： join() 方法用于把数组中的所有元素转换一个字符串

语法：

function render() {
      const trArr = arr.map(function (ele, index) {
        return `
        <tr>
          <td>${ele.stuId}</td>
          <td>${ele.uname}</td>
          <td>${ele.age}</td>
          <td>${ele.gender}</td>
          <td>${ele.salary}</td>
          <td>${ele.city}</td>
          <td>${ele.time}</td>
          <td>
            <a href="javascript:" data-id = ${index}>
              <i class="iconfont icon-shanchu"></i>
              删除
            </a>
          </td>
        </tr>
        `
      })
      tbody.innerHTML = trArr.join('')  // 小括号是空字符串，则元素之间没有分隔符
      document.querySelector('.title span').innerHTML = arr.length
    }