1. 页面滚动事件
- 很多网页需要检测用户把页面滚动到某个区域后做一些处理, 比如
固定导航栏、返回顶部
- 事件名:scroll
- 监听某个元素的内部滚动直接给某个元素加即可
获取位置
scrollLeft和scrollTop (属性)
(注:获取html元素写法:document.documentElement)
- 获取被卷去的大小
- 获取元素内容往左、往上滚出去看不到的距离
- 这两个值是可读写的
- 检测页面滚动的头部距离(被卷去的头部)用那个属性?
document.documentElement.scrollTop
window.scrollTo
2. 页面加载事件有哪两个?如何添加?
load 事件:监听整个页面资源给 window 加
DOMContentLoaded:给 document 加;无需等待样式表、图像等完全加载
3. 页面尺寸事件
会在窗口尺寸改变的时候触发事件:
window.addEventListener('resize', function () {
//执行的代码
})
检测屏幕宽度:
window.addEventListener('resize', function () {
let w = document.documentElement.clientWidth
console.log(w)
})
获取宽高clientWidth和clientHeight
:获取元素的可见部分宽高(不包含边框,margin,滚动条等)
4. 元素尺寸于位置
通过js的方式,得到元素在页面中的位置
- offsetWidth和offsetHeight是得到元素什么的宽高?(只读属性)
内容 + padding + bord - offsetTop和offsetLeft 得到位置以谁为准?
带有定位的父级;如果都没有则以 文档左上角 为准
注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0 - element.getBoundingClientRect():方法返回元素的大小及其相对于视口的位置
5. 总结
6. 小tips
/* 页面滑动 */
html {
/* 让滚动条丝滑的滚动 */
scroll-behavior: smooth;
}
属性选择器:[data-name=new]
7. 日期对象方法
显示格式化的时间:(输出:今天是: 2024年4月9号 23:23:48)
<div></div>
<script>
const div = document.querySelector('div')
function getMyDate() {
const date = new Date()
let h = date.getHours()
let m = date.getMinutes()
let s = date.getSeconds()
//数字要补0
h = h < 10 ? '0' + h : h
m = m < 10 ? '0' + m : m
s = s < 10 ? '0' + s : s
return `今天是: ${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}号 ${h}:${m}:${s}`
}
div.innerHTML = getMyDate()
//回调函数
setInterval(function () {
div.innerHTML = getMyDate()
}, 1000)
</script>
时间的另外一个写法:(输出:2024/4/9 23:29:03)
<div></div>
<script>
const div = document.querySelector('div')
// 得到日期对象
const date = new Date()
div.innerHTML = date.toLocaleString() // 2022/4/1 09:41:21
setInterval(function () {
const date = new Date()
div.innerHTML = date.toLocaleString() // 2022/4/1 09:41:21
}, 1000)
// div.innerHTML = date.toLocaleDateString() // 2022/4/1
// div.innerHTML = date.toLocaleTimeString() // 09:41:21
</script>
8. 时间戳
- 定义:是指1970年01月01日00时00分00秒起至现在的毫秒数,它是一种特殊的计量时间的方式
- 使用场景:果计算倒计时效果,前面方法无法直接计算,需要借助于时间戳完成
- 日期对象方法里面月份和星期有什么注意的?月份是0~11, 星期是 0~6
- 获取时间戳有哪三种方式?重点记住那个?
date.getTime();+new Date();Date.now()
重点记住 +new Date() 因为可以返回当前时间戳或者指定的时间戳
9. 查找DOM节点
- 父节点查找:parentNode 属性;返回最近一级的父节点 找不到返回为null`(子元素.parentNode)
- 子节点查找:children 属性 (重点);仅获得所有元素节点;返回的还是一个伪数组
(父元素.children)
- 查找兄弟节点用那个属性?
nextElementSibling;previousElementSibling
10. 增加DOM节点(重要)
1. 创建节点
- 即创造出一个新的网页元素,再添加到网页内,一般先创建节点,然后插入节点
- 创建元素节点方法:
//创造一个新的元素节点
document.createElement('标签名')
2. 追加节点
- 要想在界面看到,还得插入到某个父元素中
- 插入到父元素的最后一个子元素:
//插入到这个父元素的最后
父元素.appendChild(要插入的元素)
- 插入到父元素中某个子元素的前面:
//插入到某个子元素的前面
父元素.insertBefore(插入的元素, 放到哪个元素的前面)
3. 克隆节点
cloneNode会克隆出一个跟原标签一样的元素,括号内传入布尔值
- 若为true,则代表克隆时会包含后代节点(文字)一起克隆
- 若为false,则代表克隆时不包含后代节点(文字)
- 默认为false
//克隆一个已有的元素节点
元素.cloneNode(布尔值)
11. 删除DOM节点
- 若一个节点在页面中已不需要时,可以删除它
- 在 JavaScript 原生DOM操作中,要删除元素必须通过父元素删除
- 注:
如不存在父子关系则删除不成功。
删除节点和隐藏节点(display:none) 有区别的: 隐藏节点还是存在的,但是删除,则从html中删除节点
12. 移动端事件
常见的触屏事件如下:
13. Swiper轮播图
swiper官网地址:https://www.swiper.com.cn/
导入最新版本的swiper的js、css文件即使手动滑动了轮播图,过一会儿也还会自动播放
以下为额外增加的js代码
<script>
var swiper = new Swiper(".mySwiper", {
//小圆点
pagination: {
el: ".swiper-pagination",
},
//自动播放
autoplay: {
delay: 1000,//1秒切换一次
},
//键盘点击轮播图
keyboard: {
enabled: true,
onlyInViewport: true,
}
});
</script>