一、学习过程
一、查找最近的元素方法
partent()、partents()、closeset()区别
closest()从自身开始向上遍历所有祖先元素,直到找到一个适合的节点,返回的jQuery对象包含0个或者1个对象;
parents()从自身的父节点开始向上遍历,返回所有祖先节点,然后根据选择器对这些节点进行筛选,最终返回的jQuery对象可partent()选择DOM元素或者DOM元素集的父节点,只向上搜索一层,只可以逐级往上查找父级,最先找到的是直接父级
二、js对于字符串操作
js对于字符串操作substring(),slice(),substr(ECMAscript 没有对该方法进行标准化,因此反对使用它。)
substring(start, stop) ; 返回下标start 到 stop -1 之间的字符串;原字符串不会改变
string.slice(start,end);slice() 方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。;原字符串会改变
三、 解决display:none与height:auto动画冲突问题
因为display:none使得盒子高度不确定,所以transition无法确定长度如何变化,是的动画效果失效。
一般有以下几种解决方案:
1.使用max-height
.div {
max-height: 120px;
overflow: hidden;
transition: max-height .3s;
}
.div.a{
max-height: 30px;
}
优点:使用简单
缺点:需要了解最大的高度值,这个值即要满足最大高度,又不能设置太大。对于一些动态渲染的部分,无法感知具体的高度,具体值,效果会偏差较大
2.使用js解决
四、js无限滚动实现懒加载
使用IntersectionObserver对象
js文件
const pngs = [
//图片自定
]
async function lazyLoaderDom(end, total) {
let start_teep = 0
return function start() {
for (let st = start_teep; st < start_teep + end; st++) {
if (st + 1 > total) {
break
}
resolvePngs(pngs[st])
}
start_teep = start_teep + end
}
}
async function resolvePngs(href) {
const container = document.querySelector('.container')
container.insertAdjacentHTML('beforeend', `
<div class="role-item">
<img src="${href}">
<div>
<span>AI娃娃</span>
</div>
</div>
`)
}
const callback = lazyLoaderDom(18, pngs.length)
const observer = new IntersectionObserver(async (entries) => {
const intersection = entries[0]
if (intersection.isIntersecting) {
(await callback)()
}
})
observer.observe(document.querySelector('.footer-loading'))
html
<!DOCTYPE html>
<html lang="en">
<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>
<style>
* { margin: 0; padding: 0 }
body { background: rgb(253, 253, 253) }
.container {
padding: 1vw;
display: flex;
flex-wrap: wrap;
gap: 1rem
}
.footer {
height: 20vh;
background: #ffffff;
box-shadow: 3rem -.7rem .5rem #e7e7e7;
display: flex
}
.footer-loading {
margin: auto;
color: rgb(98, 98, 98)
}
.role-item {
width: 15vw;
height: 37vh;
border: .05rem solid #ccc
}
.role-item > img {
height: 30vh
}
.role-item > div {
padding: 1rem
}
.role-item > div > span {
font-size: 1rem;
color: rgb(98, 98, 98)
}
</style>
</head>
<body>
<div id="app">
<!-- 加载容器 -->
<div class="container">
<!-- 渲染区 -->
</div>
<div class="footer">
<div class="footer-loading">
<span>到底了,哥哥~</span>
</div>
</div>
</div>
<script src="./lazyloader.js"></script>
</body>
</html>
五、async 函数
async 函数是一种声明异步函数的方式。当函数被声明为 async 时,它将始终返回一个 Promise 对象。
在 async 函数内部,可以使用 await 关键字等待一个 Promise 对象的解决。
async function myAsyncFunction() {
return 'Hello, async!';
}
// 调用 async 函数
myAsyncFunction().then(result => {
console.log(result); // 输出: Hello, async!
});
await关键字
await 只能在 async 函数内部使用。它暂停异步函数的执行,等待 Promise 对象解决,然后继续执行下面的代码
在 await 后面可以放置任何返回 Promise 对象的表达式,包括调用 async 函数。
function resolveAfter2Seconds() {
return new Promise(resolve => {
setTimeout(() => {
resolve('Resolved after 2 seconds');
}, 2000);
});
}
async function asyncExample() {
console.log('Start');
const result = await resolveAfter2Seconds();
console.log(result);
console.log('End');
}
// 调用 async 函数
asyncExample();
// 输出:
// Start
// Resolved after 2 seconds
// End