JavaScript之this

一.错误代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>this</title>
</head>
<body>
    <ul>
        <li>燃烧我的卡路里</li>
        <li>拿走拿走别客气</li>
        <li>拜拜甜甜圈</li>
    </ul>
</body>
</html>
<script type="text/javascript">
    //获取元素
    var li=document.getElementsByTagName('li');
    for(var i=0;i<li.length;i++){
        li[i].onclick=function(){
            // 这种方法之所以会错误,是因为for循环是在script标签中,
               而不在函数中,这意味着:没有点击即函数没有执行的时候,
               for循环已经执行完;而采用this(谁调用我我就代表谁),
               即使for循环已经执行完,但是当我们点击第一个li,就代表了要获取第一个li元素
             alert(li[i].innerHTML);
        }
    }
</script>

二.this正确使用代码示例

1.事件调用时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>this</title>
</head>
<body>
    <ul>
        <li>燃烧我的卡路里</li>
        <li>拿走拿走别客气</li>
        <li>拜拜甜甜圈</li>
    </ul>
</body>
</html>
<script type="text/javascript">
    //获取元素
    var li=document.getElementsByTagName('li');
    for(var i=0;i<li.length;i++){
        li[i].onclick=function(){
            // 事件调用,this指的是时间前面的对象,例:本例中为li[i]
            alert(this.innerHTML);
        }
    }
</script>

点击第二个li元素效果:

2.直接调用时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>this</title>
</head>
<body>
    <ul>
        <li>燃烧我的卡路里</li>
        <li>拿走拿走别客气</li>
        <li>拜拜甜甜圈</li>
    </ul>
</body>
</html>
<script type="text/javascript">
    //获取元素
    var li=document.getElementsByTagName('li');
        // 直接调用,这里点击生效是因为直接调用函数的特殊性:格式正确即可执行
        for(var j=0;j<li.length;j++){
        li[j].onclick=function(){
            onclickMe();
        }
        function onclickMe(){
            alert(this);
        }
    }
</script>

attention:直接调用时this代表的永远是window,因为完整的代码其实是

window.onclickMe();
顺便一提alert完整代码前面也是省略了window,window是最高级别

三.this小例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>this的小例子</title>
    <style type="text/css">
    li{
        width: 50px;
        height: 50px;
        background:red;
        text-align: center;
        font: 30px/50px "simhei";
        float: left;
        margin-right: 5px;
        color: purple;
        border-radius: 50%;
        list-style: none;
        position: relative;
        left: 0;
        top: 0;
        transition: 0.5s;
    }
    ul{
        width: 285px;
        margin:10px auto;
    }
    .active{
        background:#fff;
        color: #000;
        border:1px solid red;
        position: relative;
        top: 100px;
    }
    </style>
    <script type="text/javascript">
    window.onload=function(){
       var li=document.getElementsByTagName('li');

       for(var i=0;i<li.length;i++){
        li[i].onclick=function(){
            // 这段代码之所以放着是因为,内层循环由于在函数中i会从0自加到最大值,故而前面点击后添加的样式会清除(所有下标都找到,都会被执行清除样式操作),如果把它放在事件操作之前则会失效
            for(var j=0;j<li.length;j++){
                li[j].className='';
            }
           this.className='active';
          };
       }
    };
</script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>

点击相应元素添加.active样式,其它清除样式