×

原生JavaScript:this关键字指向的一些经验分享

作者:ceshi2021.10.11来源:Web前端之家浏览:181评论:0
关键词:js

原生JavaScript:this关键字指向的一些经验分享

this指向的是当前元素

全局函数中的this指向window对象。

代码中声明了一个全局函数,是属于浏览器窗口对象的,所以this表示的就是浏览器窗口对象window

function fn() {
	consolo.log(this);
}
fn()

标签事件属性中的this指向window对象

如果将一个全局函数在一个标签属性中调用,如下:


function fn() {
	console.log(this)
}


标签事件属性中的this指向window对象

如果将一个全局函数在一个标签属性中调用,如下:

<button onclick="fn()">点我试试</button>

function fn() {
    console.log(this)
}

事件属性函数中的this指向当前操作的标签

如果在标签对象的属性上声明了一个函数,此时这个函数属于标签属性,所以函数内部的this指向当前标签对象

<button id="btn">点我试试</button>

var btn = document.getElementById('btn');
btn.onclick = function() {
	console.log(this);
}

自定义属性

在前端网页的开发中,JavaScript语法操作的主要是标签对象,在一些特定的场合,需要通过设置自定义属性来对标签进行操作

基本语法:element.属性名 =属性值

var btn = document.getElementById('btn');
btn.index = 1;

综合案例

1:tab选项卡的实现

实现步骤

先完成静态页面的设计(html与css代码见附录)。

先获取页面元素:

 var uli = document.querySelector('ul').querySelectorAll('li');
 var oli = document.querySelector('ol').querySelectorAll('li');


通过for循环为元素添加点击事件

for (var i = 0; i < uli.length; i++) {          
            uli[i].addEventListener('click', function () {   
               } )
}

给元素添加自定义属性,给对应的选项卡添加索引号

uli[i].index = i;

给点击事件添加对应的样式(完整代码)

for (var i = 0; i < uli.length; i++) {
            uli[i].index = i;
            uli[i].addEventListener('click', function () {
                for (var j = 0; j < uli.length; j++) {
                    uli[j].className = '';
                    oli[j].className = '';
                }
                this.className = 'current';
                oli[this.index].className = 'current';
            })
}

注意:本案例是通过添加类名来实现对应选项卡的显示和隐藏,在给元素添加对应的类名之前需要将所有元素的类名清除。

<style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .box {
            height: 250px;
            width: 300px;
            border: 2px solid;
        }
        ul {
            display: flex;
            justify-content: space-between;
            background: red;
            border-bottom: 2px #ccc;
        }
        ul li {
            float: left;
            width: 100px;
            color: #fff;
            cursor: pointer;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        ul li.current {
            border-bottom: 5px green solid;
        }
        ol li {
            margin: 30px;
            display: none;
        }
        ol li.current {
            display: block;
        }
    </style>
    <div class="box">
        <ul>
            <li class="current">第一页</li>
            <li>第二页</li>
            <li>第三页</li>
        </ul>
        <ol>
            <li class="current">我是第一页</li>
            <li>我是第二页</li>
            <li>我是第三页</li>
        </ol>
    </div>

温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/js20211011a1.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • Web前端之家

    GoogleAdSense可以的,可以加群主,帮你搞定这事情~~...

  • s121

    GoogleAdSense好弄吗,想弄一个账号。...

  • s121

    不错,正好用到,收藏了!...

  • 访客

    什么机翻...

  • Web前端之家

    只是更轻便,还是有些差距的呢,小项目可以玩玩。...

  • ja124

    这个跟vue和react比,好些吗?...

  • Web前端之家

    OK,已经更新,谢谢!...

  • 韩涛博客

    韩涛博客的域名更换为www.hantaosec.com啦,请更新一下域名哈,谢谢。我还会继续链着咱们...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.8 Valyria