学习目标：
- 掌握回调函数
学习内容：
- 回调函数
- 小结
- 综合案例
回调函数：
如果将函数A做为参数传递给函数B时，我们称函数A为回调函数。
简单理解：当一个函数当作参数来传递给另外一个函数的时候，这个函数就是回调函数。
function fn(){console.log('我是回调函数')}//fn传递给了setInterval，fn就是回调函数setInterval(fn,1000)
<title>回调函数</title>
</head>
<body><button>点击</button><script>// function fn(){// console.log('我是回调函数')// }// //fn传递给了setInterval，fn就是回调函数// setInterval(fn,1000)const btn = document.querySelector('button')btn.addEventListener('click',function(){console.log('我也是回调函数')})</script></body>
小结：
- 把函数当作另外一个函数的参数传递，这个函数就叫
回调函数。 - 回调函数本质还是函数，只不过把它当成参数使用。
- 使用匿名函数做为回调函数比较常见。
综合案例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>tab栏切换</title><style>* {margin: 0;padding: 0;}.tab {width: 590px;height: 340px;margin: 20px;border: 1px solid #e4e4e4;}.tab-nav {width: 100%;height: 60px;line-height: 60px;display: flex;justify-content: space-between;}.tab-nav h3 {font-size: 24px;font-weight: normal;margin-left: 20px;}.tab-nav ul {list-style: none;display: flex;justify-content: flex-end;}.tab-nav ul li {margin: 0 20px;font-size: 14px;}.tab-nav ul li a {text-decoration: none;border-bottom: 2px solid transparent;color: #333;}.tab-nav ul li a.active {border-color: #e1251b;color: #e1251b;}.tab-content {padding: 0 16px;}.tab-content .item {display: none;}.tab-content .item.active {display: block;}</style>
</head><body><div class="tab"><div class="tab-nav"><h3>每日特价</h3><ul><li><a class="active" href="javascript:;">精选</a></li><li><a href="javascript:;">美食</a></li><li><a href="javascript:;">百货</a></li><li><a href="javascript:;">个护</a></li><li><a href="javascript:;">预告</a></li></ul></div><div class="tab-content"><div class="item active"><img src="./images/tab00.png" alt="" /></div><div class="item"><img src="./images/tab01.png" alt="" /></div><div class="item"><img src="./images/tab02.png" alt="" /></div><div class="item"><img src="./images/tab03.png" alt="" /></div><div class="item"><img src="./images/tab04.png" alt="" /></div></div></div><script>//1. a模块制作 要给5个链接绑定鼠标经过事件//1.1 获取a元素const as = document.querySelectorAll('.tab-nav a')// console.log(as)for (let i = 0; i < as.length; i++) {// console.log(as[i])as[i].addEventListener('mouseenter', function () {// console.log('鼠标经过')//排他思想//干掉别人 移除类activedocument.querySelector('.tab-nav .active').classList.remove('active')//我登基 添加类active this 当前的那个athis.classList.add('active')//下面5个大盒子一一对应 .item//干掉别人document.querySelector('.tab-content .active').classList.remove('active')//对应序号的那个item 显示添加active类document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')})}</script></body></html>
)
】)
