JavaScript（Web API第三节）

最新推荐文章于 2024-09-13 21:00:00 发布

qwerty....

最新推荐文章于 2024-09-13 21:00:00 发布

阅读量737

点赞数 23

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/2301_80409048/article/details/137207448

版权

一、回调函数

当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数

二、事件流

当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段

实际工作都是使用事件冒泡为主

2.1事件捕获

从DOM的根元素开始去执行对应的事件 (从外到里)

2.2事件冒泡

当一个元素触发事件后，会依次向上调用所有父级元素的同名事件

//阻止冒泡
ev.stopPropagation()

鼠标经过事件：

mouseover 和 mouseout 会有冒泡效果

mouseenter 和 mouseleave 没有冒泡效果 (推荐)

2.3事件委托

利用事件流的特征，可以对上述的代码进行优化，事件的的冒泡模式总是会将事件流向其父元素的，如果父元素监听了相同的事件类型，那么父元素的事件就会被触发并执行

2.4 页面加载事件

加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件

有些时候需要等页面资源全部处理完了做一些事情

事件名：load

监听页面所有资源加载完毕：

window.addEventListener('load', function() {
    // xxxxx
})

2.5元素滚动事件

window.addEventListener('scroll', function() {
    // xxxxx
})

2.6页面尺寸事件

window.addEventListener('resize', function() {
    // xxxxx
})

2.7元素尺寸与位置

获取元素的自身宽高、包含元素自身设置的宽高、padding、border

offsetWidth和offsetHeight

获取出来的是数值,方便计算

注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0

三、日期对象

// 1. 实例化
 const date = new Date();
 // 2. 调用时间对象方法
 // 通过方法分别获取年、月、日，时、分、秒
 const year = date.getFullYear(); // 四位年份

getFullYear 获取四位年份

getMonth 获取月份，取值为 0 ~ 11

getDate 获取月份中的每一天，不同月份取值也不相同

getDay 获取星期，取值为 0 ~ 6

getHours 获取小时，取值为 0 ~ 23

getMinutes 获取分钟，取值为 0 ~ 59

getSeconds 获取秒，取值为 0 ~ 59

四、时间戳

 // 1. 实例化
  const date = new Date()
  // 2. 获取时间戳
  console.log(date.getTime())
// 还有一种获取时间戳的方法
  console.log(+new Date())
  // 还有一种获取时间戳的方法
  console.log(Date.now())

五、DOM节点

createElement 动态创建任意 DOM 节点
cloneNode 复制现有的 DOM 节点，传入参数 true 会复制所有子节点
appendChild 在末尾（结束标签前）插入节点
cloneNode 复制现有的 DOM 节点，传入参数 true 会复制所有子节点
insertBefore 在父节点中任意子节点之前插入新节点
removeChild 删除节点时一定是由父子关系。
childNodes 获取全部的子节点，回车换行会被认为是空白文本节点
children 只获取元素类型节点
parentNode 获取父节点，以相对位置查找节点，实际应用中非常灵活。
previousSibling 获取前一个节点，以相对位置查找节点，实际应用中非常灵活。
nextSibling 获取后一个节点，以相对位置查找节点，实际应用中非常灵活。

六、定时器-延迟函数

JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout

setTimeout(回调函数, 延迟时间)
清除延时函数：
clearTimeout(timerId)

七、本地存储

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

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

 // 本地存储 - localstorage 存储的是字符串 
    // 1. 存储
    localStorage.setItem('age', 18)

    // 2. 获取
    console.log(typeof localStorage.getItem('age'))

    // 3. 删除
    localStorage.removeItem('age')