自学JavaScript第六天基础完结

105 阅读1分钟

自学JavaScript第六天

节流阀

阻止轮播图点击造成过快 进来就关 执行完就放下一个人进来

使用开关思想 来进行操作

1.移动端的事件

touchstart // 手机触摸到一个DOM元素时触发 ('点击')
touchmove // 手指在一个DOM元素上滑动触发 ('点击移动')
touchend  // 手指从一个DOM元素上移开触发 ('点击松开')

//拖动事件
touchstart
touchmove
touchend

//等全部执行完 再去判断 监听事件
transitionent

	// console.1og(e);
        //touches正在触摸屏幕的所有手指的列表
        // targetTouches 正在触摸当前DOM元素的手指列表
        // 如果侦听的是一 个DOM元素,他们两个是一样的
        // changedTouches 手指状态发生了改变的列表从无到有			或者从有到无

触摸元素三步奏

//触摸元素touchstart :获取手指初始坐标,同时获得好原来的位置
//移动手指touchmove :计算手指的滑动距离, 并且移动盒子
//离开手指touchend:

2.fastclick插件

能够清除所有点击事件延迟

3.swiper插件 国服最强轮播图

www.swiper.com.cn/usage/index…

4.superslide

www.superslide2.com/howToUse.ht…

5.iscroll 自定义滚动库

6.zy.media.js移动端视频插件

7.sessionStorage 与localStorage本地存储

//关闭浏览器就自动清除

sessionStorage.setItem(key,value) //存储数据

sessionStorage.getItem(key)//获取数据

sessionStorage.removeItem(key)//删除数据

sessionStorage.clear()//清除全部

//永久生效 除非手动删除

localStorage.setItem(key,value) //存储数据

localStorage.getItem(key)//获取数据

localStorage.removeItem(key)//删除数据

localStorage.clear()//清除全部

增加删除切换类名

pc端的是 className 移动端是classList

classList.add()//添加

classList.remove()//删除

classList.toggle()//切换