web APIs总结（2）-EW帮帮网

1. 页面滚动事件

很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏、返回顶部
事件名：scroll
监听某个元素的内部滚动直接给某个元素加即可

获取位置
scrollLeft和scrollTop （属性）
（注：获取html元素写法：document.documentElement）

获取被卷去的大小
获取元素内容往左、往上滚出去看不到的距离
这两个值是可读写的
检测页面滚动的头部距离（被卷去的头部）用那个属性？
document.documentElement.scrollTop
window.scrollTo

2. 页面加载事件有哪两个？如何添加？

load 事件：监听整个页面资源给 window 加
DOMContentLoaded：给 document 加；无需等待样式表、图像等完全加载

3. 页面尺寸事件

会在窗口尺寸改变的时候触发事件：

window.addEventListener('resize', function () {
	//执行的代码
})

检测屏幕宽度：

window.addEventListener('resize', function () {
	let w = document.documentElement.clientWidth
	console.log(w)
})

获取宽高clientWidth和clientHeight：获取元素的可见部分宽高（不包含边框，margin，滚动条等）

4. 元素尺寸于位置

通过js的方式，得到元素在页面中的位置

offsetWidth和offsetHeight是得到元素什么的宽高？（只读属性）
内容 + padding + bord
offsetTop和offsetLeft 得到位置以谁为准？
带有定位的父级；如果都没有则以 文档左上角 为准
注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0
element.getBoundingClientRect():方法返回元素的大小及其相对于视口的位置

5. 总结

在这里插入图片描述

6. 小tips

/* 页面滑动 */
html {
  /* 让滚动条丝滑的滚动 */
  scroll-behavior: smooth;
}

属性选择器：[data-name=new]

7. 日期对象方法

在这里插入图片描述

显示格式化的时间：（输出：今天是: 2024年4月9号 23:23:48）

<div></div>
  <script>
    const div = document.querySelector('div')
    function getMyDate() {
      const date = new Date()
      let h = date.getHours()
      let m = date.getMinutes()
      let s = date.getSeconds()
	  //数字要补0
      h = h < 10 ? '0' + h : h
      m = m < 10 ? '0' + m : m
      s = s < 10 ? '0' + s : s
      return `今天是: ${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}号 ${h}:${m}:${s}`
    }
    div.innerHTML = getMyDate()
	//回调函数
    setInterval(function () {
      div.innerHTML = getMyDate()
    }, 1000)
  </script>

时间的另外一个写法：(输出：2024/4/9 23:29:03)

<div></div>
  <script>
    const div = document.querySelector('div')
    // 得到日期对象
    const date = new Date()
    div.innerHTML = date.toLocaleString()  // 2022/4/1 09:41:21
    setInterval(function () {
      const date = new Date()
      div.innerHTML = date.toLocaleString()  // 2022/4/1 09:41:21
    }, 1000)
    // div.innerHTML = date.toLocaleDateString()  // 2022/4/1
    // div.innerHTML = date.toLocaleTimeString()  // 09:41:21
  </script>

8. 时间戳

定义：是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式
使用场景：果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成
日期对象方法里面月份和星期有什么注意的？月份是0~11, 星期是 0~6
获取时间戳有哪三种方式？重点记住那个？
date.getTime()；+new Date()；Date.now（）
重点记住 +new Date() 因为可以返回当前时间戳或者指定的时间戳

9. 查找DOM节点

父节点查找：parentNode 属性；返回最近一级的父节点 找不到返回为null`（子元素.parentNode）
子节点查找：children 属性（重点）；仅获得所有元素节点；返回的还是一个伪数组
（父元素.children）
查找兄弟节点用那个属性？nextElementSibling；previousElementSibling

10. 增加DOM节点（重要）

1. 创建节点

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

//创造一个新的元素节点
document.createElement('标签名')

2. 追加节点

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

//插入到这个父元素的最后
父元素.appendChild(要插入的元素)

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

//插入到某个子元素的前面
父元素.insertBefore(插入的元素, 放到哪个元素的前面)

3. 克隆节点
cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值

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

//克隆一个已有的元素节点
元素.cloneNode(布尔值)

11. 删除DOM节点

若一个节点在页面中已不需要时，可以删除它
在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除
注：
如不存在父子关系则删除不成功。
删除节点和隐藏节点（display:none）有区别的：隐藏节点还是存在的，但是删除，则从html中删除节点

12. 移动端事件

常见的触屏事件如下：
在这里插入图片描述

13. Swiper轮播图

swiper官网地址：https://www.swiper.com.cn/
导入最新版本的swiper的js、css文件即使手动滑动了轮播图，过一会儿也还会自动播放
以下为额外增加的js代码

<script>
        var swiper = new Swiper(".mySwiper", {
          //小圆点
            pagination: {
              el: ".swiper-pagination",
            },
            //自动播放
            autoplay: {
            delay: 1000,//1秒切换一次
          },
          //键盘点击轮播图
          keyboard: {
            enabled: true,
            onlyInViewport: true,
          }
          });
  </script>

web APIs总结（2）