zoukankan      html  css  js  c++  java
  • 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 { 100px; height:150px; float:left; margin-right:30px; background:#f1f1f1; position:relative; z-index:1; }
     8 div { 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>
    示例代码
  • 相关阅读:
    vue bus 中央事件总线
    0时间复杂度
    stack 数据结构
    es6 class
    directives 自定义指令
    node中间件
    数据结构博客清单
    TCP/IP 协议栈博客清单
    Java 面向对象:接口
    Java 面向对象:Object 类
  • 原文地址:https://www.cnblogs.com/123wyy123wyy/p/6926360.html
Copyright © 2011-2022 走看看