js中關於this的理解和應用（選項卡）
this的定義：在JavaScript中this表示函式執行的時候自動生成的一個內部物件，只能在函式內部使用。
簡單例子
-
<script type="text/javascript"> -
alert(this); //window -
</script>
它指向的是window物件
隨著函式使用場合的不同，this的值會發生變化。但是有一個總的原則，那就是this指的是，呼叫函式的那個物件。
情況一：函式呼叫
-
var a = 'out'; -
function test(){ -
alert(this.a); -
} -
test(); //out -
var t = new test(); -
alert(t.a);// undefined undefined
情況二：作為建構函式呼叫
-
var a = 'out'; -
function test(){ -
this.a = a; -
alert(this.a); -
} -
test(); //out -
var t = new test(); -
alert(t.a);// out out
情況三：作為物件方法呼叫
-
function test(){ -
alert(this.x); -
} -
var o = {}; -
o.x=1; -
o.m=test; -
o.m(); //1 -
//o.m=test(); //undefined
情況四：作為元素節點
-
window.onload=function(){ -
var a=document.getElementById("a"); -
var aul=a.getElementsByTagName("ul"); -
var ali=a.getElementsByTagName("li"); -
var adiv=a.getElementsByTagName("div"); -
for(var i=0;i<ali.length;i++){ -
ali[i].index=i; -
ali[i].onclick=function(){ -
for(var t=0;t<adiv.length;t++){ -
adiv[t].className=""; -
ali[t].className="" -
} -
this.className="on"; -
adiv[this.index].className = "div1"; -
} -
} -
}
它指向的是HTMLElement,也就是點選元素節點，如果將元素節點進行編號（ali[i].index=i），那麼會自動尋找點選按鈕相對應的板塊（adiv[this.index]）
下面是HTML程式碼：
-
<div id="a"> -
<ul> -
<li class="on" >1</li> -
<li >2</li> -
<li >3</li> -
</ul> -
</div>
在這種添加了元素和事件的情況下，this不再指向window物件，而是指向元素節點（li）
另外附一個簡單的用法：
效果圖
相應程式碼
-
<!DOCTYPE html> -
<html> -
<head lang="en"> -
<meta charset="UTF-8"> -
<title>實踐題 - 選項卡</title> -
<style type="text/css"> -
/* CSS樣式製作 */ -
body{ -
margin: 0; -
padding: 0; -
} -
ul{ -
list-style:none; display:block; height:30px; line-height:30px; -
} -
ul li { -
width: 50px; -
height: 25px; -
line-height: 25px; -
border: 1px double #ccc; -
cursor: pointer; -
border-bottom:none; -
text-align: center; -
list-style: none; -
float:left; -
margin: 32px 0 0 0 ; -
} -
ul li.on{border-top:2px solid #8B4513;border-bottom:2px solid #FFFFFF;} -
#a div{ -
width: 300px; -
height: 250px; -
border: 1px solid royalblue; -
border-top-color:brown ; -
margin: 30px 10px; -
display: none; -
} -
#a .div1{ -
display: block; -
} -
</style> -
<script type="text/javascript"> -
// JS實現選項卡切換 -
window.onload=function(){ -
var a=document.getElementById("a"); -
var aul=a.getElementsByTagName("ul"); -
var ali=a.getElementsByTagName("li"); -
var adiv=a.getElementsByTagName("div"); -
for(var i=0;i<ali.length;i++){ -
ali[i].index=i; -
ali[i].onclick=function(){ -
for(var t=0;t<adiv.length;t++){ -
adiv[t].className=""; -
ali[t].className="" -
} -
this.className="on"; -
adiv[this.index].className = "div1"; -
} -
} -
} -
</script> -
</head> -
<body> -
<!-- HTML頁面佈局 --> -
<div id="a"> -
<ul> -
<li class="on" >1</li> -
<li >2</li> -
<li >3</li> -
</ul> -
<div class="div1"><br><br>275萬購昌平鄰鐵三居 總價20萬買一居 -
200萬內購五環三居 140萬安家東三環 -
北京首現零首付樓盤 53萬購東5環50平 -
京樓盤直降5000 中信府 公園樓王現房</div> -
<div id="div2"> 40平出租屋大改造 美少女的混搭小窩 -
經典清新簡歐愛家 90平老房煥發新生 -
新中式的酷色溫情 66平撞色活潑家居 -
瓷磚就像選好老婆 衛生間煙道的設計</div> -
<div id="div3"> 通州豪華3居260萬 二環稀缺2居250w甩 -
西3環通透2居290萬 130萬2居限量搶購 -
黃城根小學學區僅260萬 121平70萬拋! -
獨家別墅280萬 蘇州橋2居優惠價248萬</div> -
</div> -
</body> -
</html>