JS基礎入門篇（四）—this的使用，模擬單選框，選項卡和核取方塊

樑志芳發表於2018-05-14
JS

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>

相關文章