一.什么是环境对象函数内部特殊的变量this每个函数里边都有this它代表着当前函数运行时所处的环境body script function fn(){ console.log(this); // this指的是window对象 } window.fn(); /script /bodybody button点击/button script const btn document.querySelector(button); btn.addEventListener(click,function(){ console.log(this); // this指的是button元素(调用者) }) /script /body1.函数的调用方式不同this指代的对象也不同2.谁调用this就是谁是判断this指向的粗略规则3.直接调用函数其实相当于是window.函数所以this指代windowbody button点击/button script const btn document.querySelector(button); btn.addEventListener(click,function(){ this.style.backgroundColor red; }) /script /body二.什么是回调函数如果将函数A做为参数传递给函数B时我们称函数A为回调函数body script // 函数A function fn(){ console.log(我是回调函数); } // 函数B setInterval(fn,1000); //fn传递给setInterval函数fn就是回调函数 /script /bodybody button点击/button script const btn document.querySelector(button); btn.addEventListener(click,function(){ console.log(我也是回调函数); // 每点击一次回调一次 }) /script /body1.回调函数本质还是函数只不过把它当成参数使用2.使用匿名函数做为回调函数比较常见三.tab切换鼠标经过不同的选项卡底部可以显示不同的内容style .box{ width: 500px; height: 450px; } .tab{ height: 50px; line-height: 50px; text-align: center; background-color: #a7d8b8; display: flex; justify-content: center; align-items: center; } .tab ul{ list-style: none; margin-left: 10px; } .tab ul li{ width: 80px; float: left; margin-right: 20px; border-radius: 20px; } .tab ul li.active1{ background-color: #3bc4a6; color: #fff; } .content{ height: 400px; } .item{ height: 400px; display: none; } .item.active2{ display: block; background-color: #ccc; } .item img{ width: 100%; height: 100%; } /style body div classbox div classtab h4tab选项卡/h4 ul li classactive1选项卡1/li li选项卡2/li li选项卡3/li /ul /div div classcontent div classitem active2 img src../images/1.jpeg alt /div div classitem img src../images/2.jpeg alt /div div classitem img src../images/3.jpeg alt /div /div /div script const ls document.querySelectorAll(.tab ul li); const items document.querySelectorAll(.content .item); console.log(ls); //拿到所有li元素 for(let i0;ils.length;i){ ls[i].addEventListener(mouseenter,function(){ document.querySelector(.active1).classList.remove(active1); // 移除所有active1类名 this.classList.add(active1); // 给当前鼠标经过的li添加active1类名 document.querySelector(.active2).classList.remove(active2); // 移除内容区的active2类名 items[i].classList.add(active2); // 显示与当前选项卡对应的内容 }) } /script /body初始化默认效果鼠标移动效果
一.什么是环境对象函数内部特殊的变量this每个函数里边都有this它代表着当前函数运行时所处的环境body script function fn(){ console.log(this); // this指的是window对象 } window.fn(); /script /bodybody button点击/button script const btn document.querySelector(button); btn.addEventListener(click,function(){ console.log(this); // this指的是button元素(调用者) }) /script /body1.函数的调用方式不同this指代的对象也不同2.谁调用this就是谁是判断this指向的粗略规则3.直接调用函数其实相当于是window.函数所以this指代windowbody button点击/button script const btn document.querySelector(button); btn.addEventListener(click,function(){ this.style.backgroundColor red; }) /script /body二.什么是回调函数如果将函数A做为参数传递给函数B时我们称函数A为回调函数body script // 函数A function fn(){ console.log(我是回调函数); } // 函数B setInterval(fn,1000); //fn传递给setInterval函数fn就是回调函数 /script /bodybody button点击/button script const btn document.querySelector(button); btn.addEventListener(click,function(){ console.log(我也是回调函数); // 每点击一次回调一次 }) /script /body1.回调函数本质还是函数只不过把它当成参数使用2.使用匿名函数做为回调函数比较常见三.tab切换鼠标经过不同的选项卡底部可以显示不同的内容style .box{ width: 500px; height: 450px; } .tab{ height: 50px; line-height: 50px; text-align: center; background-color: #a7d8b8; display: flex; justify-content: center; align-items: center; } .tab ul{ list-style: none; margin-left: 10px; } .tab ul li{ width: 80px; float: left; margin-right: 20px; border-radius: 20px; } .tab ul li.active1{ background-color: #3bc4a6; color: #fff; } .content{ height: 400px; } .item{ height: 400px; display: none; } .item.active2{ display: block; background-color: #ccc; } .item img{ width: 100%; height: 100%; } /style body div classbox div classtab h4tab选项卡/h4 ul li classactive1选项卡1/li li选项卡2/li li选项卡3/li /ul /div div classcontent div classitem active2 img src../images/1.jpeg alt /div div classitem img src../images/2.jpeg alt /div div classitem img src../images/3.jpeg alt /div /div /div script const ls document.querySelectorAll(.tab ul li); const items document.querySelectorAll(.content .item); console.log(ls); //拿到所有li元素 for(let i0;ils.length;i){ ls[i].addEventListener(mouseenter,function(){ document.querySelector(.active1).classList.remove(active1); // 移除所有active1类名 this.classList.add(active1); // 给当前鼠标经过的li添加active1类名 document.querySelector(.active2).classList.remove(active2); // 移除内容区的active2类名 items[i].classList.add(active2); // 显示与当前选项卡对应的内容 }) } /script /body初始化默认效果鼠标移动效果
