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

このリファレンスと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>

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript関数の詳細な説明これを指す問題
  • JavaScript プロトタイプオブジェクトの this ポイント問題の詳細な説明
  • JSの矢印関数におけるこのポイントの詳細な説明
  • JavaScriptのthisキーワードは

<<:  Alibaba Cloud ECS サーバーでポート 8080 を開く方法

>>:  MySQL自動シャットダウン問題への対処の実践記録

推薦する

MySQLの挿入文字化け問題を解決する方法

問題の説明: MySQL に中国語の文字を挿入する場合、または MySQL では中国語の文字が正常に...

Dockerでイメージ情報を表示する方法

この記事では、Dockerでイメージ情報を表示する方法を学ぶ必要があります。 1. imagesコマ...

MySQL データ アーカイブ ツール mysql_archiver の詳細な説明

目次I. 概要2. pt-archiverの主なパラメータ3. mysql_archiverのインス...

JavaScript でサウンド効果付きの花火効果を実装する

コードを書くのに 30 分かかりましたが、この HTML5 Canvas New Year Fire...

HTML の著作権記号のフォント選択問題 (著作権記号をより美しくする方法)

1. 問題を発見する&copy; は HTML の著作権記号ですが、間違ったフォントを選択す...

MySQLは1億のテストデータを素早く挿入します

目次1. テーブルを作成する1.1 テストテーブルt_userを作成する1.2 一時テーブルの作成2...

Alibaba Cloud イメージリポジトリを使用して外部 Docker イメージを構築する方法の詳細な説明

Alibaba Cloud Image Repositoryを使用して外部イメージをダウンロードする...

Linux での SELinux を理解する方法

目次1. SELinux の紹介2. SELinuxの基本概念2.1 仕事の種類2.2. セキュリテ...

弾力性のあるナビゲーション効果を実現するJavaScript

この記事では、弾性ナビゲーション効果を実現するためのJavaScriptの具体的なコードを参考までに...

JSはビデオの再生速度を制御するための簡単なサンプルコードを実装します

導入以前、ある問題に気づきました。学習ビデオを視聴しているとき、動きが遅すぎる、先生が黒板に書くのに...

オンデマンドで Vue コンポーネントを自動的にインポートする方法

目次グローバル登録部分登録ローカル自動登録さまざまなソリューションの比較コンポーネント名について参照...

MySQLで重複データを削除する詳細な例

MySQLで重複データを削除する詳細な例重複レコードには 2 つの意味があります。1 つは完全に重複...

CSSにスティッキー効果を追加する方法

前面に書かれたfilter:blur と filter:contrast がこのような素晴らしい化学...

MySQL データベースは SQL ステートメントを知っている必要があります (拡張バージョン)

拡張版です。質問とSQL文は以下の通りです。ユーザー テーブルを作成し、id、name、gender...

Vue のローカルコンポーネントの紹介

Vueでは、ローカルコンポーネントを自分で定義(登録)することができます。コンポーネント名を定義する...