web APIS
一、资源加载事件
1.load：加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
①监听页面所有资源加载完毕：给 window 添加 load 事件
②语法
window.addEventListener('load',function(){
})
2.DOMContentLoaded：当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载
①监听页面DOM加载完毕：给 document 添加 DOMContentLoaded 事件
②语法
document.addEventListener('DOMContentLoaded',function(){
})
二、元素位置和大小
1.scroll家族
①scollWidth 获取容器的宽度（包含滚动的区域）
②scrollLeft 获取左侧滚动的距离
<script>
const scrollDOM = document.querySelector(".scroll-DOM");
scrollDOM.addEventListener("scroll", function () {
// console.log(scrollDOM.scrollTop);
// console.log(scrollDOM.scrollLeft);
// console.log(scrollDOM.scrollWidth); 可视区域宽度 固定的
// console.log(scrollDOM.scrollHeight); 可视区域宽度 固定的
});
</script>
2.offset家族
①offsetWidth 获取可视区域的宽度（包含滚动条）
②offsetLeft 获取和已经定位了的父级元素的左距离
<script>
const offsetDom = document.querySelector(".offset");
// 获取宽度和高度 包含这滚动条的大小
console.log(offsetDom.offsetWidth); // 300
console.log(offsetDom.offsetHeight); // 300
// console.log(offsetDom.scrollWidth); // 283
// console.log(offsetDom.scrollHeight);// 283
// 获取当前元素距离 定位了的父元素的大小(找不到定位了的父元素，相对于页面来计算)
console.log(offsetDom.offsetLeft);
console.log(offsetDom.offsetTop);
/*
总结 offset家族
1 offsetWidth 获取元素的宽度 包含这滚动条
2 offsetHeight 获取元素的高度 包含这滚动条
3 offsetLeft 获取定位了的父元素的 水平距离 左
4 offsetTop 获取定位了的父元素的 垂直距离 上
*/
</script>
3.client家族
①clientWidth 获取可视区域的宽度（不包含滚动条）
②clientLeft 获取左边框的大小
<script>
const clientDom = document.querySelector(".client");
// 宽度和高度
console.log(clientDom.clientWidth); // 不包含 滚动条（类似 scrollWidth）
console.log(clientDom.clientHeight); // 不包含 滚动条（类似 scrollHeight）
// 获取边框的大小
console.log(clientDom.clientLeft); // 左边框
console.log(clientDom.clientRight); // 有没有？
console.log(clientDom.clientTop); // 上边框
// scollWidth 获取容器的宽度（包含滚动的区域）
// offsetWidth 获取可视区域的宽度（包含滚动条）
// clientWidth 获取可视区域的宽度（不包含滚动条）
// scrollLeft 获取左侧滚动的距离
// offsetLeft 获取和已经定位了的父级元素的左距离
// clientLeft 获取左边框的大小
</script>
三、屏幕大小事件resize（window）
1.关键代码
// 页面大小发生变化了就会触发的事件 resize window来绑定
window.addEventListener("resize", function (event) {
})
// 获取当前页面的宽度
console.log(document.body.offsetWidth);
// 设置页面html标签的字体大小为屏幕的十分之一
document.documentElement.style.fontSize =document.body.offsetWidth / 10 + "px";
if (width > 1200) {
// 获取html标题title
document.querySelector("title").innerText = `大屏幕 ${width}`;
} else if (width > 992) {
document.querySelector("title").innerText = `中等屏幕 ${width}`;
} else if (width > 768) {
document.querySelector("title").innerText = `小屏幕 ${width}`;
} else {
document.querySelector("title").innerText = `极小屏幕 ${width}`;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>09-屏幕大小改变事件.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 1rem;
height: 1rem;
background-color: aqua;
font-size: 1rem;
}
</style>
</head>
<body>
<div>div</div>
<script>
// 页面大小发生变化了就会触发的事件 resize window来绑定
window.addEventListener("resize", function (event) {
console.log("页面大小发生变化了");
// 移动端屏幕适配 rem 淘宝js库，flexible.js 作用 设置html的字体大小 为当前页面的宽度的十分之一
// 获取当前页面的宽度
console.log(document.body.offsetWidth);
// 设置页面html标签的字体大小为屏幕的十分之一
document.documentElement.style.fontSize =
document.body.offsetWidth / 10 + "px";
// 响应式布局的时候 发一个js文件 方便根据当前页面的宽度 告诉我们屏幕的种类和宽度
const width = document.body.offsetWidth;
if (width > 1200) {
document.querySelector("title").innerText = `大屏幕 ${width}`;
} else if (width > 992) {
document.querySelector("title").innerText = `中等屏幕 ${width}`;
} else if (width > 768) {
document.querySelector("title").innerText = `小屏幕 ${width}`;
} else {
document.querySelector("title").innerText = `极小屏幕 ${width}`;
}
});
</script>
</body>
</html>
四、swiper插件（轮播图)
1.网址：www.swiper.com.cn/usage/index…
2.如何选择插件版本: 点击导航栏获取wiper--->下载swiper--->目前swiper7--->选择对应目前版本（swiper-7.4.1）
1 下载swiper对应的文件 - css + js
2 分布引入他们
3 拷贝别人的固定结构
4 拷贝写好的swiper 初始化js代码
3.自己写轮播图思路
思路：通过移除和添加类名实现相关轮播图效果，实际中轮播图不需要自己写，但要会写
关键代码
// 移除含有active类名的标签 的 类，先找到相关标签
document.querySelector(".slides li.active")
// 删除类名代码 元素.classList.remove
document.querySelector(".slides li.active").classList.remove("active");
document.querySelector(".indicator li.active").classList.remove("active");
// 对点击对象 添加相关类
// 给当前点击的li标签对应下标的 小图 添加 active类
this.classList.add("active");
// console.log(this);// 希望 this是li标签
// 给当前点击的li标签对应下标的 大图 添加 active类
slidesLis[index].classList.add("active");
// 设置标题文字
document.querySelector("h3").innerText = `第${index + 1}张图的描述信息`;
js部分
// 获取小图片的li标签
const lis = document.querySelectorAll(".indicator li");
// 获取大图对应的li标签
const slidesLis = document.querySelectorAll(".slides li");
// 遍历来绑定点击事件
for (let index = 0; index < lis.length; index++) {
lis[index].addEventListener("click", function (event) {
// 把大图的 active 类 移除掉
document.querySelector(".slides li.active").classList.remove("active");
// 把小图的 active 移除掉
document.querySelector(".indicator li.active").classList.remove("active");
// 给当前点击的li标签对应下标的 小图 添加 active类
this.classList.add("active");
// console.log(this);// 希望 this是li标签
// 给当前点击的li标签对应下标的 大图 添加 active类
slidesLis[index].classList.add("active");
// 设置标题文字
document.querySelector("h3").innerText = `第${index + 1}张图的描述信息`;
});
}
框架部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>QQ音乐轮播图</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
.main {
width: 700px;
margin: auto;
background: #000;
}
.slides {
height: 320px;
position: relative;
}
.slides ul li {
/* display: none; */
position: absolute;
top: 0;
left: 0;
opacity: 0;
/* 这里实现淡入淡出的关键 */
transition: all 0.3s;
}
.slides li.active {
/* display: block; */
opacity: 1;
}
.slides .extra {
width: 700px;
height: 53px;
line-height: 53px;
position: absolute;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.8);
z-index: 10;
}
.slides .extra h3 {
width: 82%;
margin: 0;
margin-right: 20px;
padding-left: 20px;
color: #98e404;
font-size: 28px;
float: left;
font-weight: 500;
font-family: "Microsoft Yahei", Tahoma, Geneva;
}
.slides .extra a {
width: 30px;
height: 29px;
display: block;
float: left;
margin-top: 12px;
margin-right: 3px;
background-image: url(./assets/icon_focus_switch.png);
}
.slides .extra .prev {
background-position: 0 0;
}
.slides .extra .prev:hover {
background-position: -30px 0;
}
.slides .extra .next {
background-position: -60px 0;
}
.slides .extra .next:hover {
background-position: -90px 0;
}
.indicator {
padding: 10px 0;
}
.indicator ul {
list-style-type: none;
margin: 0 0 0 4px;
padding: 0;
overflow: hidden;
}
.indicator ul li {
position: relative;
float: left;
width: 60px;
margin: 0 4px 0 5px;
text-align: center;
cursor: pointer;
}
.indicator li img {
display: block;
border: 0;
text-align: center;
width: 60px;
}
.indicator li .mask {
width: 60px;
height: 60px;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
}
.indicator li .border {
display: none;
width: 54px;
position: absolute;
bottom: 0;
left: 0;
z-index: 20;
border: 3px solid #98e404;
}
/* li里面的mask 和 border 刚开始都是显示的 */
/* 我们写一个样式css */
.indicator .active .mask {
display: none;
}
.indicator .active .border {
display: block;
}
</style>
</head>
<body>
<div class="main">
<div class="slides">
<ul>
<li class="active">
<a href="#"
><img src="./assets/b_01.jpg" alt="第1张图的描述信息"
/></a>
</li>
<li>
<a href="#"
><img src="./assets/b_02.jpg" alt="第2张图的描述信息"
/></a>
</li>
<li>
<a href="#"
><img src="./assets/b_03.jpg" alt="第3张图的描述信息"
/></a>
</li>
<li>
<a href="#"
><img src="./assets/b_04.jpg" alt="第4张图的描述信息"
/></a>
</li>
<li>
<a href="#"
><img src="./assets/b_05.jpg" alt="第5张图的描述信息"
/></a>
</li>
<li>
<a href="#"
><img src="./assets/b_06.jpg" alt="第6张图的描述信息"
/></a>
</li>
<li>
<a href="#"
><img src="./assets/b_07.jpg" alt="第7张图的描述信息"
/></a>
</li>
<li>
<a href="#"
><img src="./assets/b_08.jpg" alt="第8张图的描述信息"
/></a>
</li>
<li>
<a href="#"
><img src="./assets/b_09.jpg" alt="第9张图的描述信息"
/></a>
</li>
<li>
<a href="#"
><img src="./assets/b_10.jpg" alt="第9张图的描述信息"
/></a>
</li>
</ul>
<div class="extra">
<h3>第1张图的描述信息</h3>
<a class="prev" href="javascript:;"></a>
<a class="next" href="javascript:;"></a>
</div>
</div>
<div class="indicator">
<ul>
<li class="active">
<img src="assets/s_01.jpg" />
<span class="mask"></span>
<span class="border"></span>
</li>
<li>
<img src="assets/s_02.jpg" />
<span class="mask"></span>
<span class="border"></span>
</li>
<li>
<img src="assets/s_03.jpg" />
<span class="mask"></span>
<span class="border"></span>
</li>
<li>
<img src="assets/s_04.jpg" />
<span class="mask"></span>
<span class="border"></span>
</li>
<li>
<img src="assets/s_05.jpg" />
<span class="mask"></span>
<span class="border"></span>
</li>
<li>
<img src="assets/s_06.jpg" />
<span class="mask"></span>
<span class="border"></span>
</li>
<li>
<img src="assets/s_07.jpg" />
<span class="mask"></span>
<span class="border"></span>
</li>
<li>
<img src="assets/s_08.jpg" />
<span class="mask"></span>
<span class="border"></span>
</li>
<li>
<img src="assets/s_09.jpg" />
<span class="mask"></span>
<span class="border"></span>
</li>
<li>
<img src="assets/s_10.jpg" />
<span class="mask"></span>
<span class="border"></span>
</li>
</ul>
</div>
</div>
<!-- <script src="./10-焦点轮播图.js"></script> -->
<script>
const indicatorLi = document.querySelectorAll(".indicator li");
const slidesLi = document.querySelectorAll(".slides li");
for (let index = 0; index < indicatorLi.length; index++) {
indicatorLi[index].addEventListener("click", function (event) {
//
document
.querySelector(".indicator li.active")
.classList.remove("active");
//
document
.querySelector(".slides li.active")
.classList.remove("active");
//
this.classList.add("active");
//
slidesLi[index].classList.add("active");
//
document.querySelector("h3").innerText = `第${index + 1}的描述信息`;
});
}
</script>
</body>
</html>
五、延时器
1.定时器-延时函数：JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout
2.语法
setTimeout(回调函数，等待的毫秒数)
setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window
清除延时函数
let timeID=setTimeout(回调函数，等待的毫秒数)
clearTimeout(timeID)
3.案例---延时广告
①原理：添加延时器，到达一定时间，广告消失
②关键代码
<script>
// 设置延时器 5秒后 display：none
setTimeout(function () {
document.querySelector(".box").style.display = "none";
document.querySelector("span").style.display = "none";
}, 5000);
let span = document.querySelector("span");
index = 5;
// 5秒 倒计时
setInterval(function () {
index--;
span.innerText = index;
}, 1000);
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>14-延时器-广告.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 300px;
height: 300px;
background-color: paleturquoise;
border-radius: 5px;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
span {
display: block;
width: 50px;
height: 50px;
background-color: red;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div class="box">男人秃头 怎么办 请。。。</div>
<span>5</span>
<script>
setTimeout(function () {
document.querySelector(".box").style.display = "none";
document.querySelector("span").style.display = "none";
}, 5000);
let span = document.querySelector("span");
index = 5;
setInterval(function () {
index--;
span.innerText = index;
}, 1000);
</script>
</body>
</html>
六、递归
1.什么是递归：一个函数调用自己
2.使用场景
①有一个函数，可以打印出 一个dom元素的所有祖先元素 ，不可能提前知道 这个a标签有多少个父元素 ，这个函数接收一个参数，= dom，如果这个dom元素有父元素，就继续调用自己函数。
②假设你现在得了肺炎 警察叔叔
先找你 -> 找你的邻居（得了肺炎） -> 找你的邻居的邻居（得了肺炎）->找你的邻居的邻居（得了肺炎）...
直到找到一个邻居 没事 警察叔叔 不找结束了
3.案例---通过延时器完成定时器效果
①原理：递归
②关键代码
<script>
// 定时器 不主动清除，定时器永远执行下去
// 延时器 只会执行一次
// 延时器实现定时器的功能
// 在延时器 又开启一个延时器，
// 递归 自己调用自己 函数自己调用自己
let index = 0;
function func() {
console.log(index++);
setTimeout(func, 1000);
}
func();
let index1 = 100;
function func1() {
console.log(index1--);
setTimeout(func1, 1000);
}
func1();
</script>
七、BOM
1.浏览器对象模型
2.location
①href属性，跳转页面
②search 获取url ？ 后面的字符串
③hash 获取url# 后面的字符串
④reload（）刷新和强制刷新reload（true）
<body>
<button>跳转到百度</button>
<script>
// 1 使用a标签 href 属性 可以实现页面跳转
// 2 在js中，也可以直接跳转 location.href 来跳转
// 3 location.href 也可以实现刷新 location.href = location.href;
// 4 location.reload(true)
// 5 search 后一个阶段就会用到它 获取 url 上 ？ 后面的串字符 /17-location.html？a=1&b=2
// 6 hash 学习到 vue 阶段 会用 获取#后面的一串字符 /17-location.html#/index #/index
const button = document.querySelector("button");
button.addEventListener("click", function () {
// location.href = "http://www.baidu.com";
// console.log(location.href);// http://127.0.0.1:5500/17-location.html
// 刷新功能
// location.href = location.href; // 刷新功能
// reload实现刷新
// location.reload(true) true 强制刷新
console.log(location.hash);
});
setTimeout(function () {
location.href = "http://www.baidu.com";
}, 5000);
</script>
</body>
3.navigator
①navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息
②通过 userAgent 检测浏览器的版本及平台
navigator.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';
}
console.log(android);
console.log(iphone);
})();
4.history
①history 的数据类型是对象，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等
②back()退回功能、forward（）前进功能、go(参数)前进/或后退【1 前进 ；-1 后退】
③关键代码
<body>
<a href="http://www.baidu.com">百度</a>
<button class="forward">前进</button>
<button class="back">后退</button>
<script>
const forward = document.querySelector(".forward");
forward.addEventListener("click", function () {
// history.forward();
history.go(1); // 前进一个记录
});
const back = document.querySelector(".back");
back.addEventListener("click", function () {
// history.back();
history.go(-1); // 后退一个记录
});
</script>
</body>
