高阶函数
概念
函数的高级应用,把函数当值对待
值:JS中的数据如:数值,字符串,布尔,对象
例子
函数表达式
<script>
let fn=function(){}
</script>
回调函数
回调函数
如果将函数A作为参数传递给函数B,称A为回调函数
<script>
function fn(){
console.log('回调函数')
}
setInterval(fn,1000)
</script>
//fn就是回调函数
环境对象/环境变量
概念
函数内部特殊的变量this,它代表当前函数运行时所处的环境
目标
清楚this的指向
环境对象this:就是个对象
谁调用,this就是谁
排他思想
当前元素为A状态,其他元素为B状态
使用:1使用for循环关闭其他元素,2通过this或者下标找到自己元素
写法1
<style>
.yellow {
background-color: yellowgreen;
}
</style>
</head>
<body>
<button>111</button>
<button>222</button>
<button>333</button>
<button>444</button>
<button>555</button>
<script>
let btns = document.querySelectorAll("button")
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function () {
//for循环关闭所有
for (let j = 0; j < btns.length; j++) {
btns[j].classList.remove("yellow")
}
//this打开自己
this.classList.add("yellow")
})
}
</script>
写法2
<style>
.yellow {
background-color: yellowgreen;
}
</style>
</head>
<body>
<button class="yellow">111</button>
<button>222</button>
<button>333</button>
<button>444</button>
<button>555</button>
<script>
let btns = document.querySelectorAll("button")
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function () {
//默认选中第一个
document.querySelector(".yellow").classList.remove("yellow")
//this打开自己
this.classList.add("yellow")
})
}
</script>
</body>
TAB栏切换 点击上面,下面跟到换
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrapper {
width: 1000px;
height: 475px;
margin: 0 auto;
margin-top: 100px;
}
.tab {
border: 1px solid #ddd;
border-bottom: 0;
height: 36px;
width: 320px;
}
.tab li {
position: relative;
float: left;
width: 80px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top: 4px solid #fff;
}
.tab span {
position: absolute;
right: 0;
top: 10px;
background: #ddd;
width: 1px;
height: 14px;
overflow: hidden;
}
.products {
width: 1002px;
border: 1px solid #ddd;
height: 476px;
}
.products .main {
float: left;
display: none;
}
.products .main.active {
display: block;
}
.tab li.active {
border-color: yellowgreen;
border-bottom: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">国际大牌<span>◆</span></li>
<li class="tab-item">国妆名牌<span>◆</span></li>
<li class="tab-item">清洁用品<span>◆</span></li>
<li class="tab-item">男士精品</li>
</ul>
<div class="products">
<div class="main active">
<a href="###"><img src="imgs/guojidapai.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="imgs/guozhuangmingpin.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="imgs/qingjieyongpin.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="imgs/nanshijingpin.jpg" alt="" /></a>
</div>
</div>
</div>
<script>
//0.获取元素
let lis = document.querySelectorAll(".tab-item")
let divs = document.querySelectorAll(".products .main")
//1.tab切换
//给4个小Li加事件
for (let i = 0; i < lis.length; i++) {
lis[i].addEventListener("click", function () {
//找到以前的active,然后移除
document.querySelector(".tab .active").classList.remove("active")
//当前元素添加active
this.classList.add("active")
//2.底部显示隐藏模块,写在点击事件里面
document.querySelector(".products .active").classList.remove("active")
//divs对应序号i加上active
divs[i].classList.add("active")
})
}
</script>
</body>