<!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>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div id='ad'></div>
<script>
//箭头函数适合与 this无关的回调：定时器，数组的方法回调
//箭头函数不适合：事件回调，对象的方法
//需求1，点击div 2s后颜色变成粉色
//实现方法1：
// 1.获取元素
var ad = document.querySelector('#ad');
// 2.绑定监听事件
ad.addEventListener('click',function(){
that = this;
setTimeout(function(){
that.style.backgroundColor = 'pink';
},2000)
})
// 实现方法2
var add = document.querySelector('#ad');
//addEventListener不能使用箭头函数，不然会改变this的指向
add.addEventListener('click',function(){
setTimeout(() => {
//创建定时器时使用箭头函数，定时器内部的this，指向函数声明时所在作用域下面的this的值
//this指向的是外部的add对象
this.style.backgroundColor ='pink';
},2000)
})
//需求2 从数组中返回偶数的元素
const arr = [2,4,5,6,9,8];
const newarr=arr.filter((value,index,array) => {
if(value %2 ===0){
return true;
}
else{
return false;
}
})
console.log(newarr);
</script>
</body>
</html><!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>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div id='ad'></div>
<script>
//箭头函数适合与 this无关的回调：定时器，数组的方法回调
//箭头函数不适合：事件回调，对象的方法
//需求1，点击div 2s后颜色变成粉色
//实现方法1：
// 1.获取元素
var ad = document.querySelector('#ad');
// 2.绑定监听事件
ad.addEventListener('click',function(){
that = this;
setTimeout(function(){
that.style.backgroundColor = 'pink';
},2000)
})
// 实现方法2
var add = document.querySelector('#ad');
//addEventListener不能使用箭头函数，不然会改变this的指向
add.addEventListener('click',function(){
setTimeout(() => {
//创建定时器时使用箭头函数，定时器内部的this，指向函数声明时所在作用域下面的this的值
//this指向的是外部的add对象
this.style.backgroundColor ='pink';
},2000)
})
//需求2 从数组中返回偶数的元素
const arr = [2,4,5,6,9,8];
const newarr=arr.filter((value,index,array) => {
if(value %2 ===0){
return true;
}
else{
return false;
}
})
console.log(newarr);
</script>
</body>
</html>
