晴海小常识分享

晴海小常识分享

当前位置：首页 > 编程笔记 > 正文
已解决

Web APIs——环境对象this以及回调函数

来自网友在路上 172872提问 提问时间：2023-10-25 21:44:26阅读次数： 72

最佳答案 问答题库728位专家为你答疑解惑

一、环境对象

环境对象：指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境

作用：弄清楚this的指向，可以使代码更简洁

  • 函数的调用方式不同，this指代的对象也不同
  • [谁调用，this就是谁] 是判断this指向的粗略规则
  • 直接调用函数，其实相当于是window.函数，所以thi指代window
<body><button>点击</button><script>// 每个函数里面都有this 环境对象 普通函数里面this指向的是window// function fn () {//     console.log()// }// window.fn()const btn = document.querySelector('button')btn.addEventListener('click',function (){// console.log(this) // btn 对象// btn.style.color = 'red'this.style.color = 'red'})</script>
</body>

 二、回调函数

如果将函数A作为参数传递给函数B时，称函数A为回调函数

当一个函数当做参数来传递另外一个函数的时候，这个函数就是回调函数

把函数当做另外一个函数的参数传递，这个函数就叫回调函数

回调函数本质函数函数，只不过把它当成参数使用

使用匿名函数做为回调函数比较常见

常见的使用场景：

    <script>function fn(){console.log('我是回调函数...')}// fn传递给了setInterval，fn就是回调函数setInterval(fn,1000)</script>
    <script>box.addEventListener('click', function () {console.log('我也是回调函数')})</script>

三、综合案例

Tab栏切换

需求：鼠标经过不同的选项卡，底部可以显示不同的内容

分析：

  1. 主要核心是类的切换，设定一个当前类，可以让当前元素高亮
  2. 鼠标经过当前选项卡，先移除其余元素身上的当前类，而只给当前元素添加类
  3. 注意，当前类只能有一个
<!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>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个大盒子一一对应 .itemdocument.querySelector('.tab-content .active').classList.remove('active')// 对应序号的那个item显示 添加active类document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')})}</script>
</body></html>

四、全选文本框案例1

需求：用户点击全选，则下面复选框全部选择，取消全选则全部取消

分析：

  1. 全选复选框点击，可以得到当前按钮的checked
  2. 把下面所有的小复选框状态checked，改为和全选复选框一致
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0;width: 500px;margin: 100px auto;text-align: center;}th {background-color: #09c;font: bold 16px "微软雅黑";color: #fff;height: 24px;}td {border: 1px solid #d0d0d0;color: #404060;padding: 10px;}.allCheck {width: 80px;}</style>
</head><body><table><tr><th class="allCheck"><input type="checkbox" name="" id="checkAll"> <span class="all">全选</span></th><th>商品</th><th>商家</th><th>价格</th></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米手机</td><td>小米</td><td>￥1999</td></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米净水器</td><td>小米</td><td>￥4999</td></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米电视</td><td>小米</td><td>￥5999</td></tr></table><script>// 1. 获取大复选框const checkAll= document.querySelector('#checkAll')// 2. 获取所有的小复选框const cks = document.querySelectorAll('.ck')// 3. 点击大复选框 注册事件checkAll.addEventListener('click',function () {// 得到当前大复选框的选中状态// console.log(this.checked) // 得到 是true 或是是false// 4. 遍历所有的小复选框 让小复选框的checked = 大复选框的checkedfor(let i = 0; i < cks.length; i++){// cks[i].checked = checkAll.checkedcks[i].checked = this.checked}})</script>
</body></html>

五、全选文本框案例2

需求：用户点击全选，则下面复选框全部选择，取消全选则全部取消，文字对应变化

分析：

  1. 遍历下面的所有的checkbox，添加点击事件
  2. 检查小复选框选中的个数，是不是等于小复选框总的个数
  3. 把结果给全选按钮
  4. 利用css复选框选择器 input:checked
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0;width: 500px;margin: 100px auto;text-align: center;}th {background-color: #09c;font: bold 16px "微软雅黑";color: #fff;height: 24px;}td {border: 1px solid #d0d0d0;color: #404060;padding: 10px;}.allCheck {width: 80px;}</style>
</head><body><table><tr><th class="allCheck"><input type="checkbox" name="" id="checkAll"> <span class="all">全选</span></th><th>商品</th><th>商家</th><th>价格</th></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米手机</td><td>小米</td><td>￥1999</td></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米净水器</td><td>小米</td><td>￥4999</td></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米电视</td><td>小米</td><td>￥5999</td></tr></table><script>// 1. 获取大复选框const checkAll= document.querySelector('#checkAll')// 2. 获取所有的小复选框const cks = document.querySelectorAll('.ck')// 3. 点击大复选框 注册事件checkAll.addEventListener('click',function () {// 得到当前大复选框的选中状态// console.log(this.checked) // 得到 是true 或是是false// 4. 遍历所有的小复选框 让小复选框的checked = 大复选框的checkedfor(let i = 0; i < cks.length; i++){// cks[i].checked = checkAll.checkedcks[i].checked = this.checked}})// 5. 小复选框控制大复选框for(let i = 0; i < cks.length; i++){// 5.1 给所有的小复选框添加点击事件cks[i].addEventListener('click',function () {// 判断选中的小复选框个数 是不是等于 总的小复选框个数// 一定要写到点击里面，因为每次要获得最新的个数// console.log(document.querySelectorAll('.ck:checked').length)// console.log(document.querySelectorAll('.ck:checked').length === cks.length)checkAll.checked = document.querySelectorAll('.ck:checked').length === cks.length  })}</script>
</body></html>

查看全文

99%的人还看了

相似问题

猜你感兴趣

版权申明

本文"Web APIs——环境对象this以及回调函数"：http://eshow365.cn/6-24476-0.html 内容来自互联网，请自行判断内容的正确性。如有侵权请联系我们，立即删除！

推荐回答

网站内容来自网络，如有侵权请联系我们，立即删除！粤ICP备2023082154号