this-应用
this : 这个
this： 指的是调用 当前 方法（函数）的那个对象
1.写一个无序列表，里面有三个<li></li>,三个<div></div>；
分别为它们设置宽度、高度、背景颜色等；
再把<div></div>隐藏起来
2.为<li></li>加入鼠标移入、移出事件；
当鼠标移入时，下面的<div></div>就会显现出来；
当鼠标移出时，下面的<div></div>就会隐藏出来；
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 li { width:100px; height:150px; float:left; margin-right:30px; background:#f1f1f1; position:relative; z-index:1; } 8 div { width:80px; height:200px; background:red; position:absolute; top:75px; left:10px; display:none; } 9 </style> 10 <script> 11 window.onload = function (){ 12 var aLi = document.getElementsByTagName('li'); 13 var that = null; 14 15 for( var i=0; i<aLi.length; i++ ){ 16 aLi[i].onmouseover = function (){ 17 that = this; 18 fn1(); 19 }; 20 aLi[i].onmouseout = function (){ 21 this.getElementsByTagName('div')[0].style.display = 'none'; 22 }; 23 } 24 25 function fn1(){ 26 that.getElementsByTagName('div')[0].style.display = 'block'; 27 } 28 }; 29 </script> 30 </head> 31 32 <body> 33 34 <ul> 35 <li> 36 <div></div> 37 </li> 38 <li> 39 <div></div> 40 </li> 41 <li> 42 <div></div> 43 </li> 44 </ul> 45 46 </body> 47 </html>
