this指向以及this应用——JS学习笔记2015-5-24（第37天）
this: 是指调用当前 方法（函数）的那个对象；
function fn1(){
this
}
fn1(); this =>window
// oDiv.onclick = fn1; this=>div
// oDiv.onclick = function(){
fn1(); // this=>window
}
this 就是找到当前需要找的元素，在使用的时候；
三种情况：
情况一：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>this</title> 5 <meta charset="utf-8"> 6 <style> 7 li { width: 100px; height: 150px; float: left; margin-right: 30px; background: #f1f1f1; position: relative;} 8 div { width: 80px; height: 100px; background: red; position: absolute; top:15px; left: 10px; display: none; } 9 </style> 10 <script> 11 window.onload = function(){ 12 var aBtn = document.getElementsByTagName('input'); 13 for (var i = 0; i<aBtn.length; i++) { 14 aBtn[i].onclick = fn1; 15 } 16 function fn1(){ 17 // this => 这时候就是按钮了，而不是window； 18 this.style.background = 'yellow'; 19 } 20 21 } 22 23 </script> 24 </head> 25 26 <body> 27 28 <input type="button" id="btn01" value="按钮一"> 29 <input type="button" id="btn02" value="按钮二"> 30 <input type="button" id="btn03" value="按钮三"> 31 32 </body> 33 </html>
情况二：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>this</title> 5 <meta charset="utf-8"> 6 <style> 7 li { width: 100px; height: 150px; float: left; margin-right: 30px; background: #f1f1f1; position: relative;} 8 div { width: 80px; height: 100px; background: red; position: absolute; top:15px; left: 10px; display: none; } 9 </style> 10 <script> 11 window.onload = function(){ 12 var aBtn = document.getElementsByTagName('input'); 13 var that = null; 14 for (var i = 0; i<aBtn.length; i++) { 15 aBtn[i].onclick = function (){ 16 that = this; // 先存一下再拿出去使用 17 fn1(); 18 } 19 } 20 function fn1(){ 21 //this =>window 如果没有使用变量that存的话，这里的this肯定是不能用的 22 //this.style.background = 'green'; 无效，按钮没有变绿，因为这时候的this是window对象 23 that.style.background = 'green'; // 有效 24 } 25 26 } 27 28 </script> 29 </head> 30 31 <body> 32 33 <input type="button" id="btn01" value="按钮一"> 34 <input type="button" id="btn02" value="按钮二"> 35 <input type="button" id="btn03" value="按钮三"> 36 37 </body> 38 </html>
情况三：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>this</title> 5 <meta charset="utf-8"> 6 <style> 7 li { width: 100px; height: 150px; float: left; margin-right: 30px; background: #f1f1f1; position: relative;} 8 div { width: 80px; height: 100px; background: red; position: absolute; top:15px; left: 10px; display: none; } 9 </style> 10 <script> 11 window.onload = function(){ 12 var aBtn = document.getElementsByTagName('input'); 13 for (var i = 0; i<aBtn.length; i++) { 14 aBtn[i].onclick = fn1; 15 } 16 function fn1(){ 17 // this => 这时候就是按钮了，而不是window； 18 this.style.background = 'yellow'; 19 } 20 21 } 22 23 </script> 24 </head> 25 26 <body> 27 28 <input type="button" id="btn01" value="按钮一"> 29 <input type="button" id="btn02" value="按钮二"> 30 <input type="button" id="btn03" value="按钮三"> 31 32 </body> 33 </html>
这三种情况有助于帮助理解this的含义和一些使用情况。 下面是一个小实例（鼠标移入后会弹出一个层，显示额外的内容）：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>this</title> 5 <meta charset="utf-8"> 6 <style> 7 h2 { padding-bottom: 100px;} 8 li { width: 113px; height: 139px; float: left; margin-right: 30px; position: relative; list-style: none;} 9 li.t01 { background: url(img/t01.jpg) 0 0 no-repeat;} 10 li.t02 { background: url(img/t02.jpg) 0 0 no-repeat;} 11 li.t03 { background: url(img/t03.jpg) 0 0 no-repeat;} 12 li.t04 { background: url(img/t04.jpg) 0 0 no-repeat;} 13 div { display: none; width: 93px; height: 149px; padding: 5px 10px; position: absolute; top:-160px; left: 10px; color: #fff; text-align: center; background: rgba(23,120,229,0.95); } 14 div a { display: block; margin-bottom: 16px; text-decoration: none; font-size: 12px; color: #fff;} 15 div a:hover { text-decoration: underline; } 16 div span { display: block; font-size: 12px;} 17 div i { position: absolute; width: 0;height: 0; left: 40%; bottom: -7px; border-color:rgba(23,120,229,0.95) transparent transparent ; border-width: 10px 10px 0; border-style: solid dashed dashed; } 18 19 .ios_app_down { padding: 5px; border: 3px solid #fff; } 20 21 22 /**/ 23 </style> 24 <script> 25 window.onload = function(){ 26 var aLi = document.getElementsByTagName('li'); 27 28 for (var i = 0; i<aLi.length; i++) { 29 aLi[i].onmouseover = function(){ 30 31 this.getElementsByTagName('div')[0].style.display = 'block'; 32 33 }; 34 aLi[i].onmouseout = function(){ 35 36 this.getElementsByTagName('div')[0].style.display = 'none'; 37 }; 38 39 }; 40 } 41 42 </script> 43 </head> 44 45 <body> 46 <h2>最新应用</h2> 47 <ul id="list"> 48 <li class="t01"> 49 <div> 50 <p> 51 <a href="#">京东是中国最大的综合网购平台</a> 52 <span>版本：4.2.0</span> 53 <span>大小：36.96M</span> 54 </p> 55 <a href="#" class="ios_app_down">下载</a> 56 <i></i> 57 </div> 58 </li> 59 <li class="t02"> 60 <div> 61 <p> 62 <a href="#">京东是中国最大的综合网购平台</a> 63 <span>版本：4.2.0</span> 64 <span>大小：36.96M</span> 65 </p> 66 <a href="#" class="ios_app_down">下载</a> 67 <i></i> 68 </div> 69 </li> 70 <li class="t03"> 71 <div> 72 <p> 73 <a href="#">京东是中国最大的综合网购平台</a> 74 <span>版本：4.2.0</span> 75 <span>大小：36.96M</span> 76 </p> 77 <a href="#" class="ios_app_down">下载</a> 78 <i></i> 79 </div> 80 </li> 81 <li class="t04"> 82 <div> 83 <p> 84 <a href="#">京东是中国最大的综合网购平台</a> 85 <span>版本：4.2.0</span> 86 <span>大小：36.96M</span> 87 </p> 88 <a href="#" class="ios_app_down">下载</a> 89 <i></i> 90 </div> 91 </li> 92 93 </ul> 94 95 </body> 96 </html>
