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>