假期里JS入门小结
无聊的假期结束了,浑浑噩噩的度过了寒假。假期里学习了一丢丢JS ,也遇到了一些坑,总结一下。
1、let 和 var
背景描述: 我定义了三个li,想利用for循环来完成每个li标签对应的鼠标事件。
理想结果:当鼠标移动到某一个li时,执行当前li标签的鼠标事件函数。
var oLi=document.getElementsByTagName('li');
for(var s=0;s<oLi.length;s++){
oLi[s].onmouseover= function(){
alert(s);
var btn = oLi[s].getElementsByTagName('button');
btn[0].style.display="inline";
}
oLi[s].onmouseout= function(){
var btn = oLi[s].getElementsByTagName('button');
btn[0].style.display="none";
}
}
事实结果:并没有执行鼠标移动事件,检查代码,并没有错误,万不得已alert(s);结果发现 alert结果始终是3,不管鼠标在哪个li上面。
怎么解决的: let
var oLi=document.getElementsByTagName('li');
for(let s=0;s<oLi.length;s++){ //这里的var改成let
oLi[s].onmouseover= function(){
alert(s);
var btn = oLi[s].getElementsByTagName('button');
btn[0].style.display="inline";
}
oLi[s].onmouseout= function(){
var btn = oLi[s].getElementsByTagName('button');
btn[0].style.display="none";
}
}
结果如我所愿。
可以实现,当鼠标移动到第一个li时,alert结果为0,当鼠标移动到第二个li时,alert结果为1,当鼠标移动到第三个li时,alert结果为2。功能实现。
重点内容:let 和var 的区别是什么呢? 为什么let可以而var就可以呢?
简单的来说,let定义的是块级变量,而var 定义的是全局或者整个函数内的变量。也就是说两者定义的变量作用范围不同。
function varTest() {
var x = 1;
if (true) {
var x = 2; // 同样的变量!
console.log(x); // 2
}
console.log(x); // 2
}
function letTest() {
let x = 1;
if (true) {
let x = 2; // 不同的变量
console.log(x); // 2
}
console.log(x); // 1
}
在不使用let的情况下,使用var可以吗?
当然可以,代码如下:
function btnshow(){
var itemLists=document.getElementsByTagName('li');
for(var s=0;s<itemLists.length;s++){
itemLists[s].index=s;//使用index属性获取当前li的index,将id名(建议定义class名)设置为b加上当前li的index值,便可实现功能。
itemLists[s].onmouseover=function(){
var str= document.getElementById(str).style.display="inline";
}
}