一.错误代码示例
<!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样式,其它清除样式
