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

時間 2019-12-06

原文原文鏈接

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.模擬單選框

模擬單選框效果圖
方法一：大清洗，在設置顏色以前把全部的顏色值設爲空。而後再設置點擊框的顏色。html

<!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.選項卡

模擬選項卡this

方法一：大清洗，在設置顏色以前把全部的顏色值設爲空。而後再設置點擊框的顏色。code

<!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>

方法二：點擊什麼，清除什麼。記錄當前點擊的。htm

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。