<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>let与for循环</title>
<style>
li{
background: red;
color: #ffffff;
font-size: 20px;
margin: 10px;
}
</style>
</head>
<body>
<ul>
<li>red</li>
<li>blue</li>
<li>green</li>
<li>yellow</li>
</ul>
</body>
</html>
<script>
// 1.块级作用域
function Fun() {
let a=14
console.log(a)//14
}
Fun()
//当出了函数之后就不能访问了
console.log(a)//Uncaught ReferenceError: a is not defined
// 2.var与for循环
var list=document.querySelectorAll('li')
for(var i=0;i<list.length;i++){
list[i].onclick=function () {
console.log(i)//4 当渲染完成之后的i是四
}
}
// 3.let与for循环
var list=document.querySelectorAll('li')
for(let i=0;i<list.length;i++){
list[i].onclick=function () {
console.log(i)//0\1\2\3
}
}
</script>
