网页特效
一、滚动事件
当页面进行滚动时触发的事件 事件名：scroll 监听整个页面滚动：
<script>
window.addEventListener('scroll',function () {
console.log('我滚动了');
})
</script>
滚动距离
// 页面级别滚动
window.addEventListener('scroll',function () {
// 这个代码可以获取到当前页面的滚动距离
console.log(document.documentElement.scrollTop);
})
二、加载事件
1.事件名：load
加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
window.addEventListener('load', function () {
console.log('load 标签加载完毕-标签对应外部资源加载完毕');
});
2.事件名：DOMContentLoaded
当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载
document.addEventListener("DOMContentLoaded",function () {
console.log("DOMContentLoaded 标签加载完毕就触发了");
})
!!监听整个页面滚动给 window 或 document 加
三、元素大小和位置
1.scroll家族
//获取当前元素宽高不包含滚动条(-17)
console.log(scrollDom.scrollWidth);
console.log(scrollDom.scrollHeight);
//获取当前元素的滚动距离
scrollDom.addEventListener('scroll',function () {
console.log(this.scrollLeft);
console.log(this.scrollTop);
})
2.offset家族
//获取当前元素可视区宽高和padding、border
，包含滚动条
const offsetDom = document.querySelector('.offset')
console.log(offsetDom.offsetWidth);
console.log(offsetDom.offsetHeight);
//获取当前元素位置，相对于有定位的父元素再相对于页面
console.log(offsetDom.offsetLeft);
console.log(offsetDom.offsetTop);
3.client家族
//获取当前元素可视区宽高不包含边框、滚动条（-17）
const clientDom = document.querySelector('.client');
console.log(clientDom.clientWidth)
console.log(clientDom.clientHeight)
// 获取左上边框大小
console.log(clientDom.clientLeft);
console.log(clientDom.clientTop);
window对象
一、BOM(浏览器对象模型)
1.BOM(Browser Object Model ) 是浏览器对象模型
2.window 是浏览器内置中的全局对象，我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的 3.window 对象下包含了 navigator、location、document、history、screen 5个属性，即所谓的 BOM （浏览器对象模型）
二、定时器-延时函数
语法： setTimeout
<script>
// 延时器 - 只会执行一次而已
let timeid = setTimeout(function () {
console.log('猜猜我是谁');
}, 5000);
// 取消延时器
// clearTimeout(timeid);
</script>
三、递归
1.使用场景：一个函数，可以打印出 一个dom元素的所有祖先元素直到没有
<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>
2.递归函数可以使用 setTimeout 实现 setInterval 一样的功能
<script>
let index=0
function func() {
console.log(++index);
setTimeout(func,1000);
}
func()
</script>
四、location对象
1.location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分
常用属性和方法： ①href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转
<body>
<button>去百度看看</button>
<script>
const button=document.querySelector('button')
button.addEventListener('click',function () {
跳转到百度
location.href='http://www.baidu.com'
})
location.href=location.href （有刷新功能）
</script>
</body>
②search 属性获取地址中携带的参数，符号 ？后面部分
<body>
<button>去百度看看</button>
<script>
const button=document.querySelector('button')
button.addEventListener('click',function () {
console.log(location.search)
})
</script>
</body>
③hash 属性获取地址中的哈希值，符号 # 后面部分
<body>
<button>去百度看看</button>
<script>
const button=document.querySelector('button')
button.addEventListener('click',function () {
console.log(location.hash)
})
</script>
</body>
④reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新
<body>
<button>去百度看看</button>
<script>
const button=document.querySelector('button')
button.addEventListener('click',function () {
location.reload(true) 强制刷新
})
</script>
</body>
五、navigator对象
navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息 常用属性和方法： 通过 userAgent 检测浏览器的版本及平台
作用： 1.检测当前浏览器的版本和型号 2.可以识别出是安卓手机/iphone手机做出反应 3.可以识别出当前反问设备是pc端还是移动端，后台会根据设备类型来返回对应的平台页面
六、histroy对象
history 的数据类型是对象，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等 常用属性和方法：
<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>
swiper 插件使用：
1 下载swiper对应的文件 - css + js
2 分布引入他们
<link rel="stylesheet" href="./swiper/swiper-bundle.min.css" />
<script src="./swiper/swiper-bundle.min.js"></script>
