零基础学JS之APIS

   💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨
 

前言

本栏目是根据黑马程序员的网课来整理的笔记，也会结合我的一些个人见解，来记录自己学习web APIS的过程，俗话说，好记性不如烂笔头，小郑喜欢在学习的过程中记笔记，记下自己在学习过程中难以理解的知识点，反复练习，加深印象，希望广大网友一起监督学习，互相进步!

滚动事件和加载事件

滚动事件

当页面进行滚动时触发的事件

为什么要学？

很多网页需要检测用户把页面滚动到某个区域后做一些处理， 比如固定导航栏，比如返回顶部

事件名：scroll

监听整个页面滚动：

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

给 window 或 document 添加 scroll 事件

监听某个元素的内部滚动直接给某个元素加即可

加载事件

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

为什么要学？

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

老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到

事件名：load

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

给 window 添加 load 事件

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

注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表,图像等完全加载

事件名：DOMContentLoaded

监听页面DOM加载完毕：

给 document 添加 DOMContentLoaded 事件

document.addEventListener('DOMContentLoaded',function {
})

元素大小和位置

scroll家族

使用场景：

我们想要页面滚动一段距离，比如100px，就让某些元素

显示隐藏，那我们怎么知道，页面滚动了100像素呢？

就可以使用scroll 来检测页面滚动的距离~~~

获取宽高：

获取元素的 内容 总宽高（不包含滚动条） 返回值不带单位

scrollWidth和scrollHeight

获取位置:

获取元素内容往左、往上滚出去看不到的距离  scrollLeft和scrollTop

这两个属性是可以 修改

div.addEventListener('scroll',function() {
            console.log(this.scrollTop)
        })

开发中，我们经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素

注意:

document.documentElement HTML 文档返回对象为HTML元素

offset家族

获取宽高：

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

offsetWidth和offsetHeight

获取位置：

获取元素距离自己 定位父级 元素的左、上距离

offsetLeft和offsetTop 注意是只读属性

client家族

获取宽高：

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

clientWidth和clientHeight

获取位置：

获取左边框和上边框宽度

clientLeft和clientTop 注意是只读属性

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

resize

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

检测屏幕宽度

window.addEventListener('resize',function(){

let w = document.documentElement.clientWidth
console.log(w)
})

clientWidth

offsetWidth

❤️❤️❤️小郑是普通学生水平，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄

💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍