このリファレンスとJavaScriptのカスタムプロパティの詳細な説明

1. このキーワード

これは現在の要素を参照します

グローバル関数内のこれはウィンドウオブジェクトを指します

コード内にブラウザウィンドウオブジェクトに属するグローバル関数が宣言されており、これはブラウザウィンドウオブジェクトウィンドウを表します。

関数fn() {
	console.log(これ);
}
関数()

タグイベント属性のこれはウィンドウオブジェクトを指します

グローバル関数がタグ属性で呼び出される場合は、次のようになります。

<button onclick="fn()">クリックして試す</button>

関数fn() {
	console.log(これ)
}

このイベント属性関数は、現在の操作のラベルを指します。

タグオブジェクトの属性に関数が宣言されている場合、その関数はタグ属性に属し、関数内のthisは現在のタグオブジェクトを指します。

<button id="btn">クリックして試す</button>

var btn = document.getElementById('btn');
btn.onclick = 関数() {
	console.log(これを);
}

2. カスタム属性

フロントエンド Web ページの開発では、JavaScript 構文の操作は主にタグオブジェクトです。特定の状況では、カスタム属性を設定してタグを操作する必要があります。
基本構文: 要素.属性名 = 属性値

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

3. 包括的なケース1：タブの実装

実装手順
1. まず静的ページのデザインを完成させます（HTMLとCSSのコードについては付録を参照）

2.まずページ要素を取得する

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

3. forループを通じて要素にクリックイベントを追加する

(var i = 0; i < uli.length; i++) の場合 {          
            uli[i].addEventListener('click', 関数() {   
               } ）
        }

4. 要素にカスタム属性を追加し、対応するタブにインデックス番号を追加します。

  uli[i].インデックス = i;

クリックイベントに対応するスタイルを追加する (完全なコード)

(var i = 0; i < uli.length; i++) の場合 {
            uli[i].インデックス = i;
            uli[i].addEventListener('click', 関数() {
                (var j = 0; j < uli.length; j++) の場合 {
                    uli[j].className = '';
                    oli[j].className = '';
                }
                this.className = '現在の';
                oli[this.index].className = '現在の';
            })
        }

注意: この場合、クラス名を追加することで対応するタブの表示と非表示が切り替わります。要素に対応するクラス名を追加する前に、すべての要素のクラス名をクリアする必要があります。

付録

<スタイル>
        * {
            マージン: 0;
            パディング: 0;
            リストスタイル: なし;
        }
        。箱 {
            高さ: 250px;
            幅: 300ピクセル;
            境界線: 2px 実線;
        }
        ul {
            ディスプレイ: フレックス;
            コンテンツの両端揃え: スペースの間;
            背景: 赤;
            下境界線: 2px #ccc;
        }
        ul li {
            フロート: 左;
            幅: 100ピクセル;
            色: #fff;
            カーソル: ポインタ;
            高さ: 40px;
            行の高さ: 40px;
            テキスト配置: 中央;
        }
        ul li.current {
            border-bottom: 5px 緑の実線;
        }
        オルリ{
            マージン: 30px;
            表示: なし;
        }
        ol li.current {
            表示: ブロック;
        }
    </スタイル>
    <div class="box">
        <ul>
            <li class="current">最初のページ</li>
            <li>ページ 2</li>
            <li>ページ 3</li>
        </ul>
        <オル>
            <li class="current">私は最初のページです</li>
            <li>私は2ページ目です</li>
            <li>私は3ページ目です</li>
        </ol>
    </div>