JS学习-8.11日-CSDN博客

本文链接：https://blog.csdn.net/weixin_43538709/article/details/107935866

JS学习-8.11日学习内容

classList类

classList属性是HTML 5新增的一个属性,返回元素的类名。但是ie 10以上版本支持。
该属性用于在元素中添加,移除及切换CSS类。

// classList 返回元素的类名
var div = document.querySelector( ' div');
// 1.添加类名，是在后面追加类名不会覆盖以前的类名注意前面不需要加.
div .classList.add('three');
// 2.删除类名
div .classList.remove('one');
// 3.切换类，当该元素有某个类的时候删除该类，当没有的时候添加该类。
var btn = document.querySelector('button');
btn.addEventL istener( 'click', function() {
document . body .clagsList. toggle('bg' );
})

click延时解决方案

移动端click事件会有300ms的延时,原因是移动端屏幕双击会缩放(double tap to zoom)页面。
解决方案:
1.禁用缩放。浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟。
<meta name="viewport" content="user-scalable-no">
2.利用touch事件自己封装这个事件解决300ms延迟。
原理就是:
①.当我们手指触摸屏幕,记录当前触摸时间
②当我们手指离开屏幕,用离开的时间减去触摸的时间
③.如果时间小于150ms ,并且没有滑动过屏幕,那么我们就定义为点击

//封装tap,解决click 300ms延时
function tap (obj， cal1back) {
	var isMove = false;
	var startTime = 0; //记录触摸时候的时间变量
	obj. addEventLi stener (' touchstart', function (e) {
	startTime = Date.nowl); //记录触摸时间
}) ;
	obj. addEventListener (' touchmove', function (e) {
	isMove = true; // 看看是否有滑动，有滑动算拖拽，不算点击
}) ;
	obj . addEventLi stener (' touchend', function (e) {
	if (!isMove && (Date. now() - startTime) < 150) { // 如果手指触摸和离开时间小于150ms算点击
	callback && callback(); //执行回调函数
}
	isMove = false; //取反重置
	startTime = 0; 
}) ;
//调用
	tap(div, function(){ // 执行代码
});

本地存储

本地存储特点

1.数据存储在用户浏览器中
2.设置、读取方便、甚至页面刷新不丢失数据
3.容量较大, sessionStorage约5M. localStorage约20M
4.只能存储字符串,可以将对象JSON.stringify0编码后存储

window.sessionStorage

存储数据：sessionStorage.setItem(key,value);
获取数据：sessionStorage.getItem(key);
删除数据：sessionStorage.removeItem(key);
删除所有数据：sessionStorage.clear();

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" />
		<button class="set">存储数据</button>
		<button class="get">获取数据</button>
		<button class="remove">删除数据</button>
		<button class="del">清空所有数据</button>
		<script>
			var input=document.querySelector('input');
			var set=document.querySelector('.set');
			var get=document.querySelector('.get');
			var remove=document.querySelector('.remove');
			var del=document.querySelector('.del');
			set.addEventListener('click',function(){
				var val=input.value;
				sessionStorage.setItem('uname',val);
			})
			get.addEventListener('click',function(){
				var val=sessionStorage.getItem('uname');
				console.log(val);
			})
			remove.addEventListener('click',function(){
				sessionStorage.removeItem('uname');
			})
			del.addEventListener('click',function(){
				sessionStorage.clear();
			})
		</script>
	</body>
</html>

3. window.localStorage

1.生命周期永久生效,除非手动删除否则关闭页面也会存在
2.可以多窗口(页面)共享(同浏览器可以共享)
3.以键值对的形式存储使用
存储数据:localstorage.setltem(key, value);
获取数据:localStorage. getItem(key);
删除数据:localStorage.removeltem(key);
删除所有数据:localStorage.clear();