JS基础入门篇(四)—this的使用,模拟单选框,选项卡和复选框

1.this的使用

this
    js中的关键字
        js内部已经定义好了,可以不声明 直接使用
this的指向问题
    1. 在函数外部使用
        this指向的是window
    2. 在函数内部使用
        有名函数
            直接调用函数 this指的还是window
            通过事件调用,事件是谁触发的 this指的就是谁
        匿名函数
            通过事件调用,事件是谁触发的 this指的就是谁

<body>
<div id="box">box</div>
<script>
    alert(this); //[object Window]
//------------------------------------------
    
    function fn(){
        alert( this );
    }
    fn(); // 直接调用 ,函数内的this 指的还是 [object Window]

    document.onclick = fn; //[object HTMLDocument]

    var box = document.getElementById("box");
    box.onclick = fn; //[object HTMLDivElement]
//------------------------------------------

//    匿名函数 由事件调用,事件由谁触发 this指向谁
    document.onclick = function(){
        alert(this);
    };
    var box = document.getElementById("box");
    box.onclick = function(){
        alert(this);
    }
</script>
</body>

2.模拟单选框

模拟单选框效果图
方法一:大清洗,在设置颜色之前把所有的颜色值设为空。然后再设置点击框的颜色。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width:100px;
            height:100px;
            border: 1px solid #000;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <script>
    
        var divs = document.getElementsByTagName("div");
        for (var i = 0; i < divs.length; i++) {
//            alert( "for执行中,此次i是" + i);
//            alert( "此次为 第 "+ i +" 个div 添加点击事件处理函数" )
            divs[i].onclick = function(){
//                alert(i);
//                把 所有的 div 颜色 清除
                for (var i = 0; i < divs.length; i++) {
                    divs[i].style.backgroundColor = "";
                }
//                为点击的这个div添加颜色
                this.style.backgroundColor = "cornflowerblue";
            }    
        }
    </script>
</body>
</html>

方法二:点击什么,清除什么。记录当前点击的。

<body>
<div></div>
<div></div>
<div></div>
<script>
    var divs=document.getElementsByTagName("div");
    var now=0;
    for( var i=0; i<divs.length;i++){
        divs[i].index=i;//建立索引,记录每一个节点值。
        divs[i].onclick=function () {
            divs[now].style.background="";
            this.style.background="coral";
            now=this.index;

        }
    }
</script>
</body>

3.选项卡

模拟选项卡

方法一:大清洗,在设置颜色之前把所有的颜色值设为空。然后再设置点击框的颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
            font:20px/2 "宋体";
            color:#fff;
            display: none;
            margin-top: 20px;

        }
        button{
            width: 100px;
            line-height: 50px;
            font-size:18px;
            background: none;
        }
        .show{
            display: block;
        }
        .active{
            background: cornflowerblue;
        }
    </style>
</head>
<body>
<button class="active">选项卡一</button>
<button>选项卡二</button>
<button>选项卡三</button>
<div class="show">内容一</div>
<div>内容二</div>
<div>内容三</div>
<script>
    var btns=document.getElementsByTagName("button");
    var divs=document.getElementsByTagName("div");
    for(var i=0;i<divs.length;i++){
        btns[i].index=i;
        btns[i].onclick=function () {
            for(var i=0;i<divs.length;i++) {
                btns[i].className="";
                divs[i].className="";

            }
            this.className="active";
            divs[this.index].className="show";
        }
    }
</script>
</body>
</html>

方法二:点击什么,清除什么。记录当前点击的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
            font:20px/2 "宋体";
            color:#fff;
            display: none;
            margin-top: 20px;

        }
        button{
            width: 100px;
            line-height: 50px;
            font-size:18px;
            background: none;
        }
        .show{
            display: block;
        }
        .active{
            background: cornflowerblue;
        }
    </style>
</head>
<body>
<button class="active">选项卡一</button>
<button>选项卡二</button>
<button>选项卡三</button>
<div class="show">内容一</div>
<div>内容二</div>
<div>内容三</div>
<script>
    var btns=document.getElementsByTagName("button");
    var divs=document.getElementsByTagName("div");
    var now=0;
    for(var i=0;i<divs.length;i++){
        btns[i].index=i;
        btns[i].onclick=function () {
            btns[now].className="";
            divs[now].className="";
            this.className="active";
            divs[this.index].className="show";
            now=this.index;
        }
    }
</script>
</body>
</html>

4.模拟复选框

模拟复选框查看效果以及代码!!!!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border:1px solid black;
            float: left;
            margin-right: 10px;
        }
        .active{
            background: cornflowerblue;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <script>
        var divs=document.getElementsByTagName("div");
        console.log(divs);
        var L=divs.length;
        for(var i=0;i<L;i++){
            // true表示没被点击
            // false表示被点击了
            divs[i].onoff=true;
            divs[i].onclick=function () {
                if(this.onoff){//如果没被点击,则添加背景颜色
                    this.className="active";
                }else{//如果点击了,则清空背景颜色
                    this.className="";
                }
                this.onoff=!this.onoff;//只要点击了,就将此div的自定义属性值取反。
            }
        }
    </script>
</body>
</html>
    原文作者:梁志芳
    原文地址: https://segmentfault.com/a/1190000014856511
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞