JS基础入门篇（四）—this的使用，模拟单选框，选项卡和复选框

头像
梁志芳
    阅读 6 分钟
    4

    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>
    javascriptcsshtml
    梁志芳
    159 声望58 粉丝

    正在学习CSS+HTML+JS

    « 上一篇
    JS基础入门篇（三）— for循环，取余，取整。
    下一篇 »
    JS基础入门篇（六）— 数据类型

    引用和评论

    推荐阅读
    头像
    git 基本命令

    梁志芳赞 3阅读 1.7k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.3k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.6k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.7k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    0 条评论
    得票最新