this的应用以及原生js解决鼠标移入出现弹层移除消失
今天来说一下this的应用，其实js中的this是指调用当前方法或者函数的那个对象，牢牢记得这个就很好理解了，通过一个鼠标移入出现浮层，移除浮层消失这个小小的案例来进一步说明这个this的应用。
先来看看简单的布局代码，以及显示的效果：
1 <style> 2 ul,li{list-style: none;} 3 ul{overflow: hidden;} 4 li{width:200px;height:200px;background-color:#f1f1f1;margin:100px 15px;position:relative;float:left;} 5 li div{width:100px;height:100px;background-color:#ff0;position:absolute;left:50px;top:-80px;display:none;} 6 </style> 7 <body> 8 <ul id="list"> 9 <li> 10 <div></div> 11 </li> 12 <li> 13 <div></div> 14 </li> 15 <li> 16 <div></div> 17 </li> 18 </ul> 19 </body>
先让这三个黄色的浮层消失，然后鼠标移入， 给它写上“我是浮层”，并且让其出现，鼠标移除，让其消失，这样就用到了for循环，话不多说来看代码：
1 <script> 2 window.onload= function(){ 3 var List=document.getElementById("list");//先获取到最外面的ul 4 var aLi=List.getElementsByTagName("li");//然后获取li 5 for(var i= 0;i<aLi.length;i++){//因为li有多个，所以要循环 6 aLi[i].onmouseover=function(){//鼠标移入 7 var oDiv= this.getElementsByTagName("div");//移入鼠标我们要找到当前的li里的浮层div所以这里的this就是指aLi[i] 8 oDiv[0].innerHTML="我是浮层";//接下来就是写入该有的样式即可 9 oDiv[0].style.display="block"; 10 }; 11 aLi[i].onmouseout=function(){//鼠标移出 12 var oDiv= this.getElementsByTagName("div"); 13 oDiv[0].style.display="none"; 14 } 15 } 16 }; 17 </script>
最后的效果就是当移入第二个li的时候，它相对应的弹层出现，如图所示：
好了，其实this也简单，还是那句话，就是指调用当前方法或者函数的那个对象，就是这样，希望对大家有帮助，好了，今天就到这里，明天继续加油！
