本文介绍了移动端开发中如何利用classList API高效管理元素的类名，包括length属性、item方法、add/remove/toggle方法的应用实例，以及如何在不同场景下切换类名和判断类的存在。
移动端开发可以不考虑IE版本，放心使用classList（极为方便！！）
->length
->item（）（也可以用方括号语法）：取得每个元素
->add（）：将给定的字符串值添加到列表中。如果值已经存在，就不添加。
->contains（）：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。
->remove（）：从列表中删除给定的字符串。
->toggle（）：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。
var a = document.getElementBy("DIV");
1.a.classList.length
//使用classList返回所选元素的类名，是一个数组，一个类名占一个长度
2.a.classList.add("classname1") ;
//添加一个类名
3.a.classList.remove("classname2") ;
//去掉一个类名
4.a.classLis.toggle("classname3");
//引号中的类名，有就删除，没有就添加。比较智能的结合了1,2点，用于切换十分方便
5.a.contains("classname4");
//判断一个类型是不是存在，返回true和false
<!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>
.bg{
background-color: black;
}
</style>
</head>
<body>
<div class="one two"></div>
<button>开关灯</button>
<script>
//classList 返回元素的类名
var div = document.querySelector('div');
//console.log(div.classList[0]);//拿到类名 one
//1.添加类名 是在后面追加类名不会覆盖以前的类名，注意前面不用添加小点 className 会覆盖掉之前的类
div.classList.add('three');
//2.删除类名
div.classList.remove('one');
//3.切换类
var btn = document.querySelector('button');
btn.addEventListener('click', function(){
document.body.classList.toggle('bg');//如果不存在bg类，就添加一个；如果判断已经存在，就移除bg
});
console.log(div.classList);
console.log(btn.classList);
</script>
</body>
</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>
<!-- 引入手机轮播图css样式 -->
<link rel="stylesheet" href="./phone_lunbotu.css">
<!-- 引入手机轮播图js文件 -->
<script src="./phone_lunbotu.js"></script>
</head>
<body>
<!-- 手机轮播图大盒子 -->
<div class="focus">
<!-- 手机轮播图图片区域 -->
<ul>
<li><img src="../JavaScript study/images/3.jpg" alt=""></li> <!-- 第一张不算索引号 --> <!-- 最后一张克隆到最前面 -->
<li><img src="../JavaScript study/images/1.jpg" alt=""></li> <!-- index == 0 -->
<li><img src="../JavaScript study/images/2.jpg" alt=""></li> <!-- index == 1 -->
<li><img src="../JavaScript study/images/3.jpg" alt=""></li> <!-- index == 2 -->
<li><img src="../JavaScript study/images/1.jpg" alt=""></li> <!-- index == 3 --> <!-- 第一张克隆到最后面 -->
</ul>
<!-- 手机轮播图小圆点 -->
<ol>
<li class="current"></li>
<li></li>
<li></li>
</ol>
</div>
</body>
</html>
/* 全局初始化工作 */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
/* focus */
.focus {
/* border: 1px solid red; */
/* width: 30%; */
margin: auto;
position: relative;
padding-top: 44px;
overflow: hidden;
/* 用于隐藏超出部分 */
}
.focus img {
width: 100%;
}
.focus ul {
/* border: 10px solid rebeccapurple; */
overflow: hidden;/* 这一步用于清除浮动 */
/* overflow这个属性本来是隐藏超出父块之外的子块。在隐藏的时候，需要计算全部高度，这个时候会把float元素的高度算上。顺带达成了清理浮动的效果。 */
/* ！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！ */
width: 500%;/* 让ul变宽不然li左浮动会放不开 */
margin-left: -100%;/* 以第二张图为起点，及其重要的一段话！！！！！！！！！！！ */
}
.focus ul li {
/* border: 1px solid blue; */
float: left;
width: 20%;
}
.focus ol {
position: absolute;
bottom: 5px;
right: 5px;
margin: 0;
}
.focus ol li {
display: inline-block;
width: 5px;
height: 5px;
background-color: #fff;
list-style: none;
border-radius: 2px;
transition: all .3s;
}
.focus ol li.current {
width: 15px;
}
window.addEventListener('load',function(){
//this.alert('1');
//1.获取元素
var focus = this.document.querySelector('.focus');
var ul = focus.children[0];
//获取图片每次移动的距离（focus的宽度）
var w = focus.offsetWidth;
var ol = this.document.querySelector('ol');
//2.利用定时器自动轮播图片
var index = 0;
var timer = this.setInterval(time ,2000);//开启定时器
function time(){
index++;
var translatex = -index * w;
ul.style.transition ='all .3s';/* 过渡效果 */
ul.style.transform = 'translateX(' + translatex + 'px)';
}
// 等我们过渡完成之后 再去判断 监听过渡完成的事件 transitionend
ul.addEventListener('transitionend', function(){
//3.无缝滚动效果
if(index >= 3){
index = 0;
// console.log(index);(测试语句)
ul.style.transition ='none';/* 去掉过渡效果，快速跳回来 跳到目标位置 */
var translatex = -index * w;/* 跳回最前面那张之后，继续滚动，但是是按照最新的index */
ul.style.transform = 'translateX(' + translatex +'px)';
}else if(index < 0){//判断图片如果倒着走
index = 2;
ul.style.transition = 'none';
var translatex = -index * w;
ul.style.transform = 'translateX(' + translatex +'px)';
}
//4.小圆点跟随变化效果 （排他思想）
// 把ol里面li带有current类名的选出来, 去掉类名 remove
ol.querySelector('.current').classList.remove('current');/* 去掉所有人 */
// 让当前索引号 的小li 加上 current add
ol.children[index].classList.add('current');/* 留下我自己 */
});
//5.手指滑动轮播图
// 触摸元素 touchstart: 获取手指初始坐标
var startX = 0; //手指初始位置
var moveX = 0; //手指移动位置
var flag = false; // 用于判断手指有没有进行拖动效果
/* 手指点击到页面上关闭定时器 */
ul.addEventListener('touchstart', function(e){
startX = e.targetTouches[0].pageX;//获取第一个点击屏幕手指的初始X坐标
clearInterval(timer);//当手指按下的时候停止定时器，防止在拉动的时候还在轮播进行中
});
/* 手指离开的时候就重启定时器 */
// ul.addEventListener('touchend', function(e){
// timer = setInterval(time ,2000);
// });
// 移动手指 touchmove: 计算手指的滑动距离，并且移动盒子
ul.addEventListener('touchmove', function(e){
moveX = e.targetTouches[0].pageX - startX;//获取手指在屏幕上移动的距离
//移动我们的盒子 盒子原来的位置 + 盒子移动的距离!!!!!!!!!!!
var translatex = -index * w + moveX;
//手指拖动的时候，不需要动画效果，所以要取消过渡效果
ul.style.transition = 'none';//先去掉过渡效果
ul.style.transform = 'translateX(' + translatex +'px)';//然后再移动
flag = true;// 此处flag等于true说明已经移动过了，说明手指移动过了，不用进行判断效果
e.preventDefault(); //阻止滚动屏幕的行为
});
//手指离开 根据移动距离去判断是回弹还是播放上一张下一张
ul.addEventListener('touchend',function(e){
if(flag){ // 当flag == true 说明确实移动过了，再手指离开的时候再开始进行判断
//(1)如果移动距离大于50像素我们就播放上一张或者下一张
if(Math.abs(moveX) > 50){ // 由于手指可能像左滑或者右滑，所以moveX,可能是正值或者负值，所以取决对着，不论左右只要移动超过50px就进行判断
//如果是右滑 播放上一张 moveX 是正值
if(moveX > 0){
index--;
} else {
//如果是左滑 播放下一张 moveX 是负值
index++;
}
var translatex = -index * w;
ul.style.transition = 'all .3s';//滑动过程中添加一个过渡效果
ul.style.transform = 'translateX(' + translatex +'px)';//然后运动效果
} else {
//(2)如果移动距离小于50像素我们就回弹 回原来的位置
var translatex = -index * w;
ul.style.transition = 'all .3s';//滑动过程中添加一个过渡效果
ul.style.transform = 'translateX(' + translatex +'px)';//然后运动效果
}
}
//重新开启定时器，防止手指松开轮播图就不动了
clearInterval(timer); //开启定时器之前先清除定时器，保证页面中只有一个定时器在运行
timer = setInterval(time ,2000);
});
});
<!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>返回顶部</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.all-box {
margin: auto;
border: 1px solid red;
width: 60%;
height: 2000px;
background-color: palegreen;
position: relative;
}
.box1 {
width: 100%;
height: 500px;
border: 1px solid black;
}
/* 返回顶部 */
.goTop {
width: 50px;
height: 100px;
background-color: blueviolet;
font-size: 20px;
color: white;
text-align: center;
/* padding-top: 50px; */
position: absolute;
right: 0px;
top: 650px;
display: none;
/* 一开始不显示就隐藏起来 */
}
</style>
</head>
<body>
<div class="all-box">
<div class="goTop">返回<br />顶部</div>
<div class="box1">1</div>
<div class="box1">2</div>
<div class="box1">3</div>
<div class="box1">4</div>
</div>
<!-- js部分 -->
<script>
/* 页面加载完成再执行js */
window.addEventListener('load', function () {
//1.获取元素
var goTop = document.querySelector('.goTop');/* 返回顶部按钮 */
var box2 = goTop.nextElementSibling.nextElementSibling;
//console.log(box2.offsetTop);
//返回顶部模块制作
window.addEventListener('scroll', function () {
if (window.pageYOffset >= box2.offsetTop) {
goTop.style.display = 'block'; //滚到某个位置就显示出来
} else {
goTop.style.display = 'none'; //没滚到 或者滚回去了就再隐藏
}
});
// 点击返回顶部之后立马返回顶部
goTop.addEventListener('click', function () {
window.scroll(0, 0);
});
});
</script>
</body>
</html>
先引入再使用，现在已经是解决了click延时问题，也是最常用的方法
好用，牛皮！！！！！！！！！！
swiper.css和swiper.min.css，是一样的，但是min.css是经过压缩过的，两个文件的区别就是大小不一样
<!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>swiper轮播图学习使用</title>
<!-- 引入swiper的css文件 -->
<link rel="stylesheet" href="./css/swiper-bundle.min.css">
<!-- 先引入swiper的js文件 -->
<script src="./js/swiper-bundle.min.js"></script>
<!-- 再引入我们自己的js文件(必须写在swiper下面因为我们的js需要用到swiper的js) -->
<script src="./js/index.js"></script>
<style>
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 20px;
color: white;
margin: 0;
padding: 0;
}
.swiper {
margin-top: 100px;
width: 50%;
/* height: 100%; */
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="../JavaScript study/images/1.jpg" alt=""></div>
<div class="swiper-slide"><img src="../JavaScript study/images/2.jpg" alt=""></div>
<div class="swiper-slide"><img src="../JavaScript study/images/3.jpg" alt=""></div>
<div class="swiper-slide"><img src="../JavaScript study/images/4.jpg" alt=""></div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</body>
</html>
swiper分三步：1.复制结构 2.复制css样式 3.调用swiper的js
把不带自动滚动效果的swiper轮播图，的js调用直接换成，带无缝滚动的swiper轮播图的js，可以直接实现滚动效果，牛皮，好用！！！
1.这里删掉原先不能自动无缝滚动的js调用
2.这里把带自动无缝滚动的swiper的js调用给替换上了，就能实现这个功能
3.记得把搜索框层级拉高，防止swiper把最顶上的搜索框盖住，不然会影响原来的结构
小知识：样式可以添加 !important 添加权重！！！！！！！！
<!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>
.focus {
width: 800px;
height: 300px;
background-color: pink;
margin: 100px auto;
}
.carousel,
.carousel img {
height: 300px !important;
width: 100%;
}
</style>
<!-- 引入Bootstrap的css样式 -->
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
<!-- Bootstrap依赖于jQuery，所以jQuery文件必须在所有插件之前引入页面 -->
<script src="./jquery.min.js"></script>
<!-- 引入Bootstrap的js文件 -->
<script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 轮播图部分（从Bootstrap复制源码粘贴到自己的轮播图位置里面） -->
<div class="focus">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators 小圆点-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides 轮播图片-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../JavaScript study/images/1.jpg" alt="...">
<div class="carousel-caption">
第一张图片
</div>
</div>
<div class="item">
<img src="../JavaScript study/images/2.jpg" alt="...">
<div class="carousel-caption">
第二张图片
</div>
</div>
<div class="item">
<img src="../JavaScript study/images/3.jpg" alt="...">
<div class="carousel-caption">
第三张图片
</div>
</div>
<div class="item">
<img src="../JavaScript study/images/4.jpg" alt="...">
<div class="carousel-caption">
第四张图片
</div>
</div>
</div>
<!-- Controls 左右箭头-->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script>
/* 修改播放时间的方法 */
$('.carousel').carousel({
interval: 1500
})
</script>
</body>
</html>
jquery.min.js不在Bootstrap里面，是额外下载的文件
在这里能查看存储的值（注意！生命周期为关闭浏览器窗口！！）
<!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>
</head>
<body>
<input type="text" name="" value="">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空所有数据</button>
<script>
var ipt = document.querySelector('input');
var set = ipt.nextElementSibling;
var get = set.nextElementSibling;
var remove = get.nextElementSibling;
var del = remove.nextElementSibling;
// console.log(ipt, set, get, remove, del);
/* 当我点击了“存储数据”就把数据存入浏览器（改数据就再点击一次存储按钮，相当于把数据覆盖） */
set.addEventListener('click', function () {
var val = ipt.value;
window.sessionStorage.setItem('uname', val);
});
/* 当我点击了“获取数据”就获取数据（如果没有数据获取的就是NULL） */
get.addEventListener('click', function () {
var val = window.sessionStorage.getItem('uname');
console.log('获取到了：' + val);
});
/* 当我点击了“删除数据”就删除指定数据 */
remove.addEventListener('click', function () {
window.sessionStorage.removeItem('uname');
});
/* 当我点击了“清空所有数据”就把数据全部清空（谨慎使用！！！！！！！！！） */
del.addEventListener('click', function () {
var val = window.sessionStorage.clear();
});
</script>
</body>
</html>
window.localStorage跟window.sessionStorage方法完全一致（注意！生命周期永久生效！！！！！！！！！！！关闭页面也会存在，可以多窗口共享！！！）
<!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>
</head>
<body>
<input type="text" name="" value="">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空所有数据</button>
<script>
var ipt = document.querySelector('input');
var set = ipt.nextElementSibling;
var get = set.nextElementSibling;
var remove = get.nextElementSibling;
var del = remove.nextElementSibling;
// console.log(ipt, set, get, remove, del);
/* 当我点击了“存储数据”就把数据存入浏览器（改数据就再点击一次存储按钮，相当于把数据覆盖） */
set.addEventListener('click', function () {
var val = ipt.value;
window.localStorage.setItem('uname', val);
});
/* 当我点击了“获取数据”就获取数据（如果没有数据获取的就是NULL） */
get.addEventListener('click', function () {
var val = window.localStorage.getItem('uname');
console.log('获取到了：' + val);
});
/* 当我点击了“删除数据”就删除指定数据 */
remove.addEventListener('click', function () {
window.localStorage.removeItem('uname');
});
/* 当我点击了“清空所有数据”就把数据全部清空（谨慎使用！！！！！！！！！） */
del.addEventListener('click', function () {
var val = window.localStorage.clear();
});
</script>
</body>
</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>记住用户名案例</title>
</head>
<body>
<input type="text" class="ipt">
<input type="checkbox" name="" value="" class="chk">记住用户名
<script>
var ipt = document.querySelector('.ipt');
var chk = document.querySelector('.chk');
window.addEventListener('load', function () {
if (window.localStorage.getItem('uname')) {//如果存储空间里存在数据
ipt.value = window.localStorage.getItem('uname');//在文本框显示数据
chk.checked = true;//并且把复选框给勾选上
}
// if (ipt.value == '') {
// // console.log(1);
// chk.disabled = true;
// } else {
// chk.disabled = false;
chk.addEventListener('change', function () {
if (this.checked) {//如果是勾选上的状态
window.localStorage.setItem('uname', ipt.value);
} else {//如果不是勾选状态
window.localStorage.removeItem('uname');
ipt.value = '';
}
});
// }
});
</script>
</body>
</html>
283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
