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>

示例代码

时间： 2024-10-03 17:22:22