码迷,mamicode.com
首页 > 其他好文 > 详细

this的用法

时间:2016-10-30 19:32:39      阅读:211      评论:0      收藏:0      [点我收藏+]

标签:rip   tag   alt   地方   oct   win   lis   ges   css   

 

因为循环是非常快的,我们手动点击的时候,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;
background-color: gold;
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的用法

标签:rip   tag   alt   地方   oct   win   lis   ges   css   

原文地址:http://www.cnblogs.com/cswzl/p/6013527.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!