小编整理的js刚入门时一些比较重要的案列
1.tab切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>input</title>
<style>
span{ padding: 5px; border:1px solid gray;}
span.active{
border-color:red;
color:red;
}
.tabs .content{
display: none;
width: 300px;
height: 300px;
border:1px solid gray;
margin-top: 6px;
}
.tabs .on{display: block;}
</style>
</head>
<body >
<div class="tabs on">
<span class="active title">title1</span>
<span class="title">title2</span>
<span class="title">title3</span>
<div class="content on">content内容1</div>
<div class="content">content内容2</div>
<div class="content">content内容3</div>
</div>
<script>
// 单击span 要知道是第几个span
// 让之前用on的content 去掉class on
// 让第几个content 添加on
var titles = document.querySelectorAll(".tabs .title");
var contents = document.querySelectorAll(".tabs .content");
// for 初始条件0 结束 titles.length
// 操作 让之前用on的content 去掉class on
// 让第i个content 添加on
for(let i=0;i<titles.length;i++){
titles[i].onclick =function(){
console.log(i);
var old = document.querySelector(".tabs .content.on");
// 找到之前有on的content
old.classList.remove("on");
// 去掉on
contents[i].classList.add("on");
// 给和当前点击title下标一样的content 添加 on
var oldt = document.querySelector(".tabs .title.active");
oldt.classList.remove("active");
titles[i].classList.add("active");
}
}
</script>
</body>
</html>
2.步进器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="cart">
<p class="step">
<button onclick="minus(this)">-</button>
<input type="text">
<button onclick="add(this)">+</button>
</p>
<p class="step">
<button onclick="minus(this)">-</button>
<input type="text">
<button onclick="add(this)">+</button>
</p>
</div>
<script>
//当单击+的时候让+前面那个input标签值加1
//当单机-的是很好让-后面那个input标签的值减1
//previous 上一个 element 元素 sibling 兄弟
function add(el){
var inp = el.previousElementSibling;
//获取inp 为当前点击按钮的上一个兄弟元素节点
var val =inp.value*1+1;
// 值为 inp原来的值转换为整数+1
if(val>=999){val=999}
// 如果值超过999 值为999
inp.value = val;
// 设置inp的值为 为val
}
function minus(el){
var inp = el.nextElementSibling;
// 获取减号后面的 兄弟元素节点（input）
var val = inp.value*1-1;
// 值为 原来input的值-1
if(val<=0){val=0}
// 如果值小于0则等于0
inp.value = val;
// 设置inp的值为 为val
}
</script>
</body>
</html>
3.创建与添加dom节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button onclick="add()">添加</button>
<script>
function add(){
var div = document.createElement("h1");
// 创建一个div标签
div.innerText = "我是小可爱";
// 设置div的文本内容
document.body.append(div);
//在body标签里面插入div
}
</script>
</body>
</html>
