因为循环是非常快的，我们手动点击的时候，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. PHP访问带密码的Redis

    1. 设置Redis密码,以提供远程登陆打开redis.conf配置文件,找到requirepass,然后修改如下: requirepass yourpassword yourpassword就是re ...

  2. iOS单个应用程序的最大可用内存是多少？

    iOS单个应用程序的最大可用内存是多少?   StackOverflow上有人做了一些简单的测试,有限设备下迄今为止测到的结果: iPad1: 127MB/256MB/49% (大致crash临界值 ...

  3. cocos2d学习记录

    视频 - http://www.manew.com/forum-105-3.html一个论坛帖 - http://www.zhihu.com/question/21114802官网 - http:// ...

  4. 使用TreeView 使用多选功能

    1.要用TreeView多选就要显示复选框,TreeView默认不显示复选框,显示复选框: TreeView2.ShowCheckBoxes = TreeNodeTypes.All; 初始化TreeV ...

  5. ubuntu安装libxml2--PC端

    莫名其妙的安装了libxml2,其实电脑本身就有的,不知道有木有影响 具体安装步骤:1.解压:$tar zxvf  libxml2-2.9.4.tar.gz  //解压在了/home/newday/下 ...

  6. weblogic10异常:org.hibernate.hql.ast.HqlToken

    转自:http://www.programgo.com/article/68682994452/ 在做查询的时候,报出  org.hibernate.QueryException: ClassNotF ...

  7. Android 屏幕适配

    前言 手机的屏幕适配一直是非常麻烦的,现在我就以做笔记的方式来简单梳理下 单位理解 首先让我们先来看看关于手机所用到的单位 真实物理尺寸单位: mm:表示毫米,是屏幕的物理尺寸. in:表示英寸,是屏 ...

  8. Hdu 1009 FatMouse' Trade

    FatMouse' Trade Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  9. 一个简单的c# 贪吃蛇程序

    一个简单的c#贪吃蛇程序 程序分为界面设计和程序设计:界面设计和程序设计均参考了一些游戏实例,但是所有代码内容是本人编写. 由于看到别人写的程序并没有署名,这里的署名全部都是csdn官网. 游戏界面设 ...

  10. python学习笔记系列----（八）python常用的标准库

    终于学到了python手册的最后一部分:常用标准库.这部分内容主要就是介绍了一些基础的常用的基础库,可以大概了解下,在以后真正使用的时候也能想起来再拿出来用. 8.1 操作系统接口模块:OS OS模块 ...