因为循环是非常快的，我们手动点击的时候，for循环已经循环完了。如果在循环里面添加点击事件，点击事件的i的值就是循环结果的那个值，而不是对应的循环的值，此时，我们就需要用到this   来实现  点击哪一个，this就指向哪一个

this：   指的是当前的对象，  是关键词，不能当做变量名，只能读，不能写，它的值只能用来用，而不能修改

通常，this有2种用法，第一种，在函数外部使用，此时，this的值指向的是Windows

第二种，在函数内部使用。又分为2种情况，1，直接调用函数，this同样指向的是Windows    2，被事件调用，并且是以赋值的形式出现的，此时this指向的是谁调用了函数，this就指向谁的。这就很好地方便了再循环里面使用this来实现，每一个的事件发生。

可以通过以下例子开具体了解:

首先，我们先来创建几个div   实现，点击任意一个div  这个被点击的div的背景颜色就相应的作出改变  改变成为红色

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>this批量改变元素的样式</title>
    <link rel="stylesheet" href="../css/this批量改变元素的样式.css">
</head>
<body>
<div id="content">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<script src="../js/this批量改变元素的样式.js"></script>
</body>
</html>

css
.box{
    width: 200px;
    height: 200px;
    margin-right: 20px;

    float: left;
}

此时，页面中就有5个颜色为金色的div

js代码：

var  bigDiv=document.getElementById('content');
var  listOfDiv=bigDiv.getElementsByTagName('div');
for(var i=0;i<listOfDiv.length;i++){
    listOfDiv[i].onclick=function(){
        this.style.backgroundColor='red';
    };
}

这样就可以实现，任意点击一个div  这个div的颜色就变为红色

this的用法的更多相关文章

  1. EditText 基本用法

    title: EditText 基本用法 tags: EditText,编辑框,输入框 --- EditText介绍: EditText 在开发中也是经常用到的控件,也是一个比较必要的组件,可以说它是 ...

  2. jquery插件的用法之cookie 插件

    一．使用cookie 插件 插件官方网站下载地址:http://plugins.jquery.com/cookie/ cookie 插件的用法比较简单,直接粘贴下面代码示例: //生成一个cookie ...

  3. Java中的Socket的用法

                                   Java中的Socket的用法 Java中的Socket分为普通的Socket和NioSocket. 普通Socket的用法 Java中的 ...

  4. [转载]C#中MessageBox.Show用法以及VB.NET中MsgBox用法

    一.C#中MessageBox.Show用法 MessageBox.Show (String) 显示具有指定文本的消息框. 由 .NET Compact Framework 支持. MessageBo ...

  5. python enumerate 用法

    A new built-in function, enumerate() , will make certain loops a bit clearer. enumerate(thing) , whe ...

  6. [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...

  7. 【JavaScript】innerHTML、innerText和outerHTML的用法区别

    用法: <div id="test">   <span style="color:red">test1</span> tes ...

  8. chattr用法

    [root@localhost tmp]# umask 0022 一.chattr用法 1.创建空文件attrtest,然后删除,提示无法删除,因为有隐藏文件 [root@localhost tmp] ...

  9. 萌新笔记——vim命令“=”、“d”、“y”的用法（结合光标移动命令，一些场合会非常方便）

    vim有许多命令,网上搜有一堆贴子.文章列举出各种功能的命令. 对于"="."d"."y",我在无意中发现了它们所具有的相同的一些用法,先举 ...

  10. [转]thinkphp 模板显示display和assign的用法

    thinkphp 模板显示display和assign的用法 $this->assign('name',$value); //在 Action 类里面使用 assign 方法对模板变量赋值,无论 ...

随机推荐

  1. Java反射使用技巧

    1. 通过setAccessible关闭安全检查,关闭的目的不是因为访问的field/method是私有的,而且因为关闭后访问公有方法也不会再有安全检查. SomeObject someObject ...

  2. Java语言程序设计(基础篇)第一章

    第一章 计算机.程序和Java概述 1.1 引言 什么是程序设计呢? 程序设计就是创建(或者开发)软件,软件也称为程序. 1.2 什么是计算机 计算机是存储和处理数据的电子设备,计算机包括硬件(har ...

  3. 更改android AVD模拟器创建路径位置的方法

    打开:计算机-->系统属性-->环境变量—>在“系统变量”那选择“新建”-->变量名为 "ANDROID_SDK_HOME” (注意,必须为这个名字!),然后把变量值 ...

  4. VR原理讲解及开发入门

    本文是作者obuil根据多年心得专门为想要入门的VR开发者所写,由52VR网站提供支持.   1. VR沉浸感和交互作用产生的原理:   在之前,我们观看一个虚拟的创造内容是通过平面显示器的,52VR ...

  5. 论文阅读（Lukas Neuman——【ICDAR2015】Efficient Scene Text Localization and Recognition with Local Character Refinement）

    Lukas Neuman--[ICDAR2015]Efficient Scene Text Localization and Recognition with Local Character Refi ...

  6. 论文阅读（Xiang Bai——【CVPR2016】Multi-Oriented Text Detection with Fully Convolutional Networks）

    Xiang Bai--[CVPR2016]Multi-Oriented Text Detection with Fully Convolutional Networks 目录 作者和相关链接 方法概括 ...

  7. android 流量 压缩

    引用:http://my.eoe.cn/blue_rain/archive/340.html 对于目前的状况来说,移动终端的网络状况没有PC网络状况那么理想.在一个Android应用中,如果需要接收来 ...

  8. [liusy.api-SMJ]-SMJ 介绍 学习阶段（二）

    我选择的是  Spring + Mybatis + Jesery 无状态架构方案. JAVA 比较常用的架构 SSH spring struts2 hibernate流行一阶段后, SSM   spr ...

  9. ES6里箭头函数的陷阱

    ECMAScript 6新增了箭头函数 原来的匿名函数 function(){},现在可以简化成()=>{} 看起来高大上,像C#什么的语法. 但是箭头函数的this对象,不能更改,总是指向函数 ...

  10. dd-wrt 定时重连 pppoe 更换ip地址

    因为做代理,IP时常被封的原因,所以,需要每天定时重启路由器,重启路由器影响太大,所以重新拨号是一个更好的选择. 在dd-wrt里面,杀掉pppoe服务进程就可以了,这个进程会自动重新启动,然后就相当 ...