Web API第八天学习总结
加载事件
加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件
为什么要学
- 有些时候需要等页面资源全部处理完了做一些事情
- 老代码喜欢把script代码写在head中，这时候找dom元素的时候找不到
load
等全部资源全部加载完以后（包括标签、样式全部加载完、外网资源、图像视频）才执行代码。
不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件
语法
给window添加load事件
window.addEventListener('load',function(){})
DOMContentLoaded
当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载
语法
给 document 添加 DOMContentLoaded 事件
document.addEventListener("DOMContentLoaded",function() {})
document.addEventListener("DOMContentLoaded",function() {
const h1 = document.querySelector("h1");
console.log(h1);
h1.innerText = '我们修改的';
});
load和DOMContentLoaded的区别
DOMContentLoaded 在 HTML 文档本解析之后触发，而 load 是在 HTML 所有相关资源被加载完成后触发。
scroll家族
- 获取的宽高**（不包含滚动条）**
- 返回的值是元素内容往左、往下滚的看不到的距离
- 整个元素实际内容的宽高
- 距离可以修改
<style>
div{
width: 300px;
height: 300px;
background-color: aqua;
overflow-x: scroll;
/* 文字不换行 */
white-space: nowrap;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis
similique rerum ea dicta assumenda? Quam error eaque accusamus. Ipsa,
dicta aspernatur! Consequatur odit eos, dignissimos rem iure excepturi
commodi dicta. Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Cum, possimus ab incidunt ipsum animi reprehenderit quia deserunt odit?
Laborum natus asperiores amet adipisci laudantium tempore nesciunt
blanditiis quis voluptas excepturi! Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Eaque error quae, minima facilis recusandae
cumque qui sed saepe excepturi accusamus neque, illum eius perspiciatis
aliquid dicta ullam est et maiores!
</div>
<script>
//获取元素内容的宽高 不包括滚动条
const div = document.querySelector("div");
console.log(div.scrollWidth);
console.log(div.scrollHeight);
//获取当前滚动条滚动的距离
div.addEventListener('scroll',function() {
// document.documentElement.scrollLeft 文档返回对象为scrollLeft元素
console.log(this.scrollLeft);
});
/* 小细节 PC端的滚动条大小 17px
小细节 移动端的滚动条 不占大小
scrollWidth 整个可以滚动的区间的宽度
scrollHeight 整个可以滚动的区域的高度 */
</script>
</body>
offset家族
- 获取到宽高--容器的可视区域(包含滚动条)
- 宽高相当于你设置的盒子宽高
- 获取的距离是按照有定位的父元素的左、上距离来当作参照物
- 如果父元素没有定位那就参照相对页面来计算
- 距离不能更改
<style>
.parent{
position: relative;
width: 500px;
height: 500px;
background-color: pink;
margin: 100px auto;
}
.offset{
position: absolute;
width: 300px;
height: 300px;
background-color: skyblue;
overflow: scroll;
top: 100px;
left: 50px;
}
</style>
</head>
<body>
<div class="parent">
<h1>标题</h1>
<div class="offset"></div>
</div>
<script>
const offSet = document.querySelector(".offset");
//获取宽高 包含滚动条
console.log(offSet.offsetWidth);
console.log(offSet.offsetHeight);
// 获取定位了父元素的距离 找不到定位元素，相对于页面来计算
//两个属性不能修改
console.log(offSet.offsetTop);
console.log(offSet.offsetLeft);
</script>
</body>
client家族
- 获取到宽高--容器的可视区域(不包含滚动条)
- 获取的位置是左边框和上边框的宽度
- 获取的位置是只读属性
<style>
div{
width: 300px;
height: 300px;
background-color: aqua;
overflow: scroll;
/* 文字不换行 */
white-space: nowrap;
border-left: 1px solid black;
border-top: 5px solid red;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis
similique rerum ea dicta assumenda? Quam error eaque accusamus. Ipsa,
dicta aspernatur! Consequatur odit eos, dignissimos rem iure excepturi
commodi dicta. Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Cum, possimus ab incidunt ipsum animi reprehenderit quia deserunt odit?
Laborum natus asperiores amet adipisci laudantium tempore nesciunt
blanditiis quis voluptas excepturi! Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Eaque error quae, minima facilis recusandae
cumque qui sed saepe excepturi accusamus neque, illum eius perspiciatis
aliquid dicta ullam est et maiores!
</div>
<script>
//获取可视内容的宽高 不包括滚动条
const div = document.querySelector("div");
console.log(div.clientWidth);
console.log(div.clientHeight);
// 获取边框的大小
//没有右边框
console.log(div.clientLeft);
console.log(div.clientTop);
</script>
</body>
屏幕大小改变事件resize
窗口尺寸改变的时候触发事件
语法
window.addEventListener("resize", function () {})
检测屏幕宽度
<body>
<div>标题咯</div>
<script>
// 页面大小放生改变就会触发的事件
window.addEventListener("resize", function (event) {
//获取当前页面的宽度
console.log(document.body.offsetWidth);
// 设置字体大小为页面大小的十分之一
document.documentElement.style.fontSize = document.body.offsetWidth / 10 + 'px';
// 当屏幕发生变化时我们标题应该改变
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>
swiper插件
使用方法
- 下载swiper对应的文件 js + css
- 分别引入他们
- 拷贝别人的固定结构
- 拷贝写好的swiper初始化js代码
官网：[ Swiper中文网-轮播图幻灯片js插件,H5页面前端开发 ]()
注意
- 多个swiper同时使用的时候, 类名需要注意区分
- 会根据文档或者教程来使用它即可
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./焦点轮播图案例/assets/b_01(1).jpg"></div>
<div class="swiper-slide"><img src="./焦点轮播图案例/assets/b_02(1).jpg"></div>
<div class="swiper-slide"><img src="./焦点轮播图案例/assets/b_03(1).jpg"></div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
<script src="./swiper/swiper-bundle.min.js"></script>
<script>
var mySwiper = new Swiper('.swiper', {
// direction: 'vertical', // 垂直切换选项 默认是水平模式 所以不用切换
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
autoplay: true,//等同于以下设置
autoplay: {
delay: 1000,
stopOnLastSlide: false,
disableOnInteraction: true,
},
})
</script>
</body>
BOM
BOM(Browser Object Model ) 是浏览器对象模型
- window 是浏览器内置中的全局对象
- window 对象下包含了 navigator、location、document、history、screen 5个属性
- document 是实现 DOM 的基础，它其实是依附于 window 的属性。
延时器
延时函数只会执行一次
语法
setTimeout(function(){},等待的毫秒数)
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box{
width: 300px;
height: 300px;
background-color: pink;
display: flex;
justify-content: center;
align-items: center;
font-size: 25px;
font-weight: 700;
color: #fff;
}
</style>
</head>
<body>
<div class="box">
治疗秃头，就到黑马！！！
</div>
<script>
setTimeout(function() {
document.querySelector('.box').style.display = 'none';
},5000);
</script>
</body>
清除延时函数
语法
clearTimeout(延时函数)
<body>
<div class="box">
治疗秃头，就到黑马！！！
</div>
<script>
let timer = setTimeout(function() {
document.querySelector('.box').style.display = 'none';
},5000);
clearTimeout(timer);
</script>
</body>
递归
自己调用自己的函数
用延时器做定时器的效果
<body>
<!-- 定时器只要不主动清除就一直执行下去 -->
<!-- 延时器 只执行一次 -->
<!-- 延迟器实现定时器功能 -->
<!-- 延时器里面再开启一个延时器 -->
<script>
// 递归 自己调用自己 函数自己调用自己
let index = 0;
function func() {
console.log(++index);
setTimeout(func,1000);
};
func();
</script>
使用场景
- 有一个函数，可以打印出 一个dom元素的所有祖先元素，不可能提前知道 这个a标签有多少个父元素，这个函数接收一个参数，= dom，如果这个dom元素有父元素，就继续调用自己函数。
- 假设你现在得了肺炎 警察叔叔 先找你 -> 找你的邻居（得了肺炎） -> 找你的邻居的邻居（得了肺炎）->找你的邻居的邻居（得了肺炎）... 直到找到一个邻居 没事 警察叔叔 不找结束了
<body>
<div>
<p>
<span
><a href=""> <button></button> </a
></span>
</p>
</div>
<script>
const button = document.querySelector('button');
getParent(button);
function getParent(dom) {
console.log(dom);
if (dom.parentNode) {
// 如果有父元素
getParent(dom.parentNode);
} else {
console.log('结束啦');
}
}
</script>
</body>
location对象
常用的属性方法
1.herf属性
获取完整的 URL 地址，对其赋值时用于地址的跳转
<body>
<button>点击我</button>
<script>
/* 有两种页面跳转的方式
1.a标签的href属性
2.js中的location中的href属性
3.location还有刷新页面的功能
*/
const btn = document.querySelector('button');
btn.addEventListener("click",function() {
// location.href = 'http://www.baidu.com';
//刷新页面
location.href = location.href;
});
//配合延时器实现广告效果
setTimeout(function() {
location.href = 'http://www.baidu.com';
},5000);
</script>
</body>
2.search属性
获取地址中携带的参数，符号 ？后面部分
3.hash属性
获取地址中的啥希值，符号 # 后面部分
4.reload属性
用来刷新当前页面，传入参数 true 时表示强制刷新
<body>
<button>点击我</button>
<script>
// reload方法用来刷新当前页面,当参数传入true时为强制刷新
// search 属性获取地址中携带的参数，符号 ？后面部分 /17-location.html?a=1&b=2
// hash 属性获取地址中的哈希值，符号 # 后面部分 #/index
const btn = document.querySelector("button");
btn.addEventListener("click",function() {
// 来实现刷新
// location.reload(true);
// console.log(location.search);// /17-location.html?a=1&b=2
console.log(location.hash);///17-location.html#/index #/index
})
</script>
</body>
navigator对象
通过 userAgent 检测浏览器的版本及平台
- 知道当前用户的系统版本和浏览器版本
- 根据不同的用户设备来响应不同的服务
- 如果是安卓手机会给你下载apk手机软件地址
- 如果是苹果用户给你提示回到自己的app store
- 如果是pc端响应pc页面
- 如果是移动端响应移动端页面
history对象
常用属性方法
1.back()可以后退的功能
2.forward()可以前进的功能
3.go(参数)前进后退功能参数如果是1前进1个页面如果是-1后退1个页面
<body>
<a href="./12-前进后退.html">12-前进后退.html</a>
<button class="forward">前进</button>
<button class="back">后退</button>
<script>
// back()后退功能
// forward()前进功能
// go(参数)前进后退功能 参数是1就前进一个页面 -1就后退
const btn1 = document.querySelector(".forward");
btn1.addEventListener("click",function() {
history.forward();
});
const btn2 = document.querySelector(".back");
btn2.addEventListener("click",function() {
history.back();
});
</script>
</body>
