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();