js中关于this的理解和应用（选项卡）

最新推荐文章于 2022-10-02 16:10:29 发布

IT届小白

最新推荐文章于 2022-10-02 16:10:29 发布

阅读量399

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_41427294/article/details/81751051

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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>

初学，有错误请指出，勿喷

IT届小白

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js中关于this的理解和应用（选项卡）

this的定义：在JavaScript中this表示函数运行的时候自动生成的一个内部对象，只能在函数内部使用。简单例子 &lt;script type="text/javascript"&gt; alert(this); //window&lt;/script&gt;它指向的是window对象随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那...
复制链接

扫一扫