停车小案例知识点-优快云博客

本文链接：https://blog.youkuaiyun.com/hcyhcyhcy_/article/details/123578305

本文详细介绍了前端滚动加载的实现，包括滚动事件触发、手机端滑动处理、元素显示隐藏、DOM操作和数组判断。同时讲解了如何使用CSS实现滚动条、选项卡制作、图片处理以及在元素中插入多个元素的方法。内容涵盖JavaScript核心概念和前端开发常见技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写自定义目录标题

滚动
元素显示与隐藏
元素即使display:none了，也能获取到
ul li a
图片处理
数组为空
获取元素querySelector className
class写到一起
给多个div循环添加点击事件
函数
上拉条
选项卡
一个元素中插入很多元素的方法

滚动

scrollTop：滚动视窗的高度距离window顶部的距离，它会随着往上滚动而不断增加，初始值是0，它是一个变化的值；
clientHeight:它是一个定值，表示屏幕可视区域的高度；
scrollHeight：页面不能滚动时是不存在的，body长度超过window时才会出现，所表示body所有元素的长度

let clientHeight  = document.documentElement.clientHeight; //可见区域的高度
let scrollHeight = document.body.scrollHeight; 所表示body所有元素的长度
let scrollTop = document.documentElement.scrollTop; 顶部的距离

滚动加载事件触发

表示文档已经拉到底部了，触发事件向后台请求数据。

window.onscroll = function() {
    if(getScrollTop() + getClientHeight() == getScrollHeight()) {
     }
 }

滚动条overflow-y: auto;

test{width:300px;height:100px;overflow:auto;}

手机端手指滑动上拉

touchstart //当手指接触屏幕时触发
touchmove //当已经接触屏幕的手指开始移动后触发
touchend //当手指离开屏幕时触发
获取当前事件对象我们习惯性的使用 event = event.touches[0]
手指滑动时的坐标位置e.touches[0].clientY

元素显示与隐藏

利用来JS控制页面控件显示和隐藏有两种方法，两种方法分别利用HTML的style中的两个属性，两种方法的不同之处在于控件隐藏后是否还在页面上占空位。

方法一：
document.getElementById("EleId").style.visibility="hidden";
document.getElementById("EleId").style.visibility="visible";
利用上述方法实现隐藏后，页面的位置还被控件占用，显示空白。

方法二：
<!-- style="display:none" -->
document.getElementById("EleId").style.display="none";
document.getElementById("EleId").style.display="inline";
document.getElementById("EleId").style.display="block";
利用上述方法实现隐藏后，页面的位置不被占用。

元素即使display:none了，也能获取到

#app {
  display: none;
}
<div id="app">111</div>
var app=document.getElementById("app")
console.log(app); 这里有输出

ul li a

选项卡也用ul li做

* {
	margin: 0;
	padding: 0;
	list-style: none; 圆点
}

			.nav {
				width: 100%;
				height: 50px;
				background-color: red;
			}

			li {
				list-style-type: none;
				float: left;
			}
			li是一行 小圆点。同一行显示 float：left

			ul {
				margin: 0;
				padding: 0;
			}
			ul造成撑起来空白

			a {
				width: 100px;
				height: 50px;
		   	    display: block;
				text-align: center;
				line-height: 50px;
				text-decoration: none;
				color: #000000;
			}
			a:hover {
              	color: #BA2636
            }
            a是方块 超链接 刚好文字的大小。
            display:block后 可以直接在这设置超链接的宽高 
            text-align:center文字居中，line-height文字垂直居中

		<div class="nav">
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">首页</a></li>
				<li><a href="#">首页</a></li>
				<li><a href="#">首页</a></li>
			</ul>
		</div>

图片处理

img {
	border: 0;
	vertical-align: middle
}

数组为空

方式一：通过data == false 来判断数组为空

若返回结果为data，则为空；若返回结果为false，则不为空。

data = [];
if(data == false){
   //data为空数组时，要执行的代码
}

方式二：使用length以数组的长度来判断数组是否为空

let arr = [];
if (arr.length == 0){
   console.log("数组为空")
}else {
   console.log("数组不为空")
}

获取元素querySelector className

document.querySelector：获取首个（单个）符合条件元素
document.querySelector('.name'); //获取页面上首个class属性中包含name的元素

document.querySelectorAll：获取全部符合条件元素
document.querySelectorAll('.name'); //获取页面上全部class属性中包含name的元素

document.getElementsByClassName("app");//获取到的是一个类数组

class写到一起

<div class=" includes hotelClass">写到一起要不没效果

给多个div循环添加点击事件

window.onload = function(){  
    var aDiv = document.getElementByTagName("div");    
    for(var i=0;i<aDiv.length;i++){    
         aDiv[i].index = i;  
         aDiv[i].onclick = function(){       
               ...       
         }   
    }
}

函数

let drive = function(lng, lat,destinationName) {}
套一层，这样挺好用，需要调用的地方，需要传东西的地方调用就行了

上拉条

#pullUp {
				width: 40px;
				height: 5px;
				margin: 8px auto;
				background-color: RGB(221, 221, 221);
				border-radius: 5px;
}

选项卡

思路：选项卡就是点击按钮切换到相应内容，其实就是点击按钮把内容通过display(block none)来实现切换的。

1、首先获取元素。

2、for循环历遍按钮元素添加onclick 或者 onmousemove事件。

3、因为点击当前按钮时会以高亮状态显示，所以要再通过for循环历遍把所有的按钮样式设置为空和把所有DIV的display设置为none。(初始状态先清空之前的上一个点击的高亮状态)

先循环给li加上onclick事件，onlink事件点击的时候，再循环让所有选项卡的act样式去掉，所有的内容隐藏。然后让所点击的选项及对应内容显示。

4、把当前按钮添加样式，把当前DIV显示出来，display设置为block。

注：给多个元素添加多个事件要用for循环历遍。如选项卡是点击切换，当前按钮高度，点击和按钮高亮就是2个事件，所以要用2个for循环历遍。

 for(i=0; i<len; i++){
  tab_t_li[i].index = i;
  tab_t_li[i].onclick = function(){
   for(i=0; i<len; i++){
    tab_t_li[i].className = '';
    tab_c_li[i].className = 'hide';
   }
   tab_t_li[this.index].className = 'act';
   tab_c_li[this.index].className = '';
  }
 }

一个元素中插入很多元素的方法

参考https://blog.youkuaiyun.com/zlzbt/article/details/89956396

项目实例
for (let i = 0; i < parkingPosition.length; i++) {
				// console.log(parkingPosition[i]);
               panel1.insertAdjacentHTML('beforeEnd', `
					<div class=" includes parkingClass">
					    <div class="bottom">
					    </div>
					 </div>`)

案例
ul.insertAdjacentHTML('beforeEnd', `
					<li>${input.value}</li>`)

div.insertAdjacentElement("beforeBegin", document.createElement("p")); //在div之前添加p元素
 
div.insertAdjacentElement("afterBegin", document.createElement("p")); //div所有子元素之前
 
div.insertAdjacentElement("beforeEnd", document.createElement("p")); //div所有子元素之后
 
div.insertAdjacentElement("afterEnd", document.createElement("p")); //div之后
 
div.insertAdjacentHTML("beforeBegin", "<p>3</p><p>4</p>");  //添加内容
 
div.insertAdjacentHTML("afterBegin", "<p>3</p><p>4</p>"); 
 
div.insertAdjacentHTML("beforeEnd", "<p>3</p><p>4</p>"); 
 
div.insertAdjacentHTML("afterEnd", "<p>3</p><p>4</p>"); 
 
div.insertAdjacentText("beforeBegin", "the sky is mine"); 
 
div.insertAdjacentText("afterBegin", "the sky is mine");
 
div.insertAdjacentText("beforeEnd", "the sky is mine"); 
 
div.insertAdjacentText("afterEnd", "the sky is mine"); 
 
div.innerHTML = "<p>3</p><p>4</p>";
 
div.innerText = "<p>3</p><p>4</p>";//注意这两个效果不一样 这就是 text 和 html 的区别
 
div.appendChild(document.createElement("p")); //这个就等于上面第三个
 
div.insertBefore(document.createElement("p"),document.getElementsByTagName("p")[1]);//没什么卵用