jqueryはコントロールの非表示を実装します-フロントエンドQ&A-php.cn

jqueryはコントロールの非表示を実装します

PHPz

リリース： 2023-05-24 21:22:05

オリジナル

735 人が閲覧しました

jQuery は、フロントエンド開発で広く使用されている人気のある JavaScript ライブラリです。この記事ではjQueryを使ってコントロールの表示・非表示を切り替える方法を紹介します。

まず、jQuery ライブラリを HTML ページに導入する必要があります。オンラインでインポートするか、ローカルにダウンロードするかを選択できます。

<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

ログイン後にコピー

次に、非表示または表示する必要があるコントロールに ID またはクラスを追加して、jQuery で選択して操作できるようにします。

<div id="myDiv">
    这是需要隐藏或显示的内容
</div>

<button class="myButton">点击显示/隐藏</button>

ログイン後にコピー

ID「myDiv」の DIV とクラス「myButton」のボタンを追加しました。

次に、JavaScript コードで jQuery メソッドを使用して、表示または非表示にする必要があるコントロールを選択し、対応する CSS プロパティを追加します。

$(document).ready(function(){
    $(".myButton").click(function(){
        $("#myDiv").toggle();
    });
});

ログイン後にコピー

まず、ドキュメントの準備ができた後に $(document).ready() メソッドを使用して、コードを実行する前にページ要素がロードされていることを確認します。

次に、セレクター $(".myButton") でボタンを選択し、ボタンにクリックイベントを追加します。ボタンをクリックするとコールバック関数が実行されます。

コールバック関数では、セレクター $("#myDiv") を使用して非表示または表示する必要がある DIV を選択し、toggle() メソッドを使用してその表示状態を切り替えます。このメソッドは、CSS プロパティ「display」の値を自動的に変更して、要素を表示または非表示にします。

より詳細な制御が必要な場合は、show() メソッドと Hide() メソッドを使用して要素をそれぞれ表示および非表示にすることができます。

$(document).ready(function(){
    $(".myButton").click(function(){
        $("#myDiv").toggle();
        // $("#myDiv").show();
        // $("#myDiv").hide();
    });
});

ログイン後にコピー

上記は、jQuery を使用してコントロールを非表示および表示する方法です。セレクターと CSS プロパティを変更することで、ページ要素の表示状態をすばやく制御でき、操作をよりフレンドリーかつ柔軟にすることができます。

以上がjqueryはコントロールの非表示を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。