jQueryを介して要素の表示と非表示を制御する-jsチュートリアル-php.cn

jQueryを介して要素の表示と非表示を制御する

WBOY

リリース： 2024-02-25 20:51:07

オリジナル

1240 人が閲覧しました

jQueryを介して要素の表示と非表示を制御する

タイトル: jQuery による要素の表示と非表示の切り替え

Web 開発では、ボタンやその他のイベントをクリックして要素を制御する必要がある状況によく遭遇します。そして目に見えない状態。この機能は jQuery を使用すると簡単に実現できます。次に、jQuery を使用して表示要素と非表示要素を切り替える方法を具体的なコード例を使用して説明します。

まず、ボタンと、表示を制御する必要がある要素を HTML ファイルに追加します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery可见与不可见切换</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="toggleButton">切换元素可见性</button>
    <div id="toggleElement" style="display: none;">
        这是需要切换可见性的元素
    </div>

    <script src="script.js"></script>
</body>
</html>

ログイン後にコピー

次に、プロジェクトディレクトリに script.js## という名前の新しいファイルを作成します。 # JavaScript ファイルに次のコードを記述します。

$(document).ready(function() {
    $('#toggleButton').click(function() {
        $('#toggleElement').toggle();
    });
});

ログイン後にコピー

このコードでは、最初に

$(document).ready() を使用して、DOM がロードされた後にコードが実行されるようにします。次に、$('#toggleButton').click() を通じてボタンのクリックイベントをリッスンします。ボタンをクリックすると、$('#toggleElement').toggle() メソッドが呼び出され、#toggleElement 要素の表示状態と非表示状態が切り替わります。

最後に、ブラウザで HTML ファイルを開き、ボタンをクリックすると、

#toggleElement 要素の表示と非表示が切り替わります。

この簡単な例を通して、jQuery を使用して表示要素と非表示要素を簡単に切り替え、Web 開発にさらなる対話性とダイナミクスをもたらすことがわかります。 jQuery の簡潔で強力な構文により、さまざまな機能を迅速に実装し、ユーザーにより良いブラウジングエクスペリエンスを提供できます。

以上がjQueryを介して要素の表示と非表示を制御するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。