web前端开发第二阶段——this

最新推荐文章于 2024-05-06 10:05:56 发布

资本理念

最新推荐文章于 2024-05-06 10:05:56 发布

阅读量114

点赞数

分类专栏： web前端笔记总结文章标签： this

本文链接：https://blog.csdn.net/qq_43151638/article/details/102630204

版权

web前端笔记总结专栏收录该内容

78 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<div>wwwwq</div>
	<ul>
		<li>1111</li>
		<li>222</li>
		<li>333</li>
		<li>444</li>
	</ul>
	<script type="text/javascript">
		/*
			this : 指的是某一个元素
				
				1. 在事件里面，this指的是事件前面的元素
				
			
		*/
	   
	   var box = document.querySelector('div');
	   var lis = document.querySelectorAll('li');
	   
	    for(var i=0;i<lis.length;i++){
		   
		   lis[i].onclick = function(){
			   
			  //console.log(i,lis[i],this)
			  lis[i].style.color = 'red';
		   }
	    }
		
		console.log('循环已经结束',i);
	   /*解析：
			第一次循环 ：i=0
				lis[0].onclick = function(){
					console.log(i)
					lis[i].style.color = 'red';
				}
			第二次循环 ： i=1
				lis[1].onclick = function(){
					console.log(i)
					lis[i].style.color = 'red';
				}
			第三次循环 ：i=2
				lis[2].onclick = function(){
					console.log(i)
					lis[i].style.color = 'red';
				}
			第四次循环 ： i=3
				lis[3].onclick = function(){
					console.log(i)
					lis[i].style.color = 'red';
				}
	   */
	   
	   
	   box.onclick = function(){
		   
		   console.log(this)
	   }
	   
	</script>
</body>
</html>

资本理念

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
web前端开发第二阶段——this

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title></head><body> <div>wwwwq</div> <ul> <li>1111</li&...
复制链接

扫一扫