jqueryの非表示効果の表示

jQuery は、Web サイトの対話性を強化するために使用できる非常に人気のある JavaScript ライブラリです。一般的な効果の 1 つは要素の表示と非表示ですが、これを実現するための jQuery の使用方法を詳しく紹介します。

まず、HTML では、非表示または表示する要素が必要です。これには、div、span、p などの任意のタグを使用できます。たとえば、次のコードは 2 つのボタンと 1 つの div 要素を作成します。

<button id="show">显示</button>
<button id="hide">隐藏</button>

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

id ​​属性は要素を識別するために使用され、後続の JavaScript コードで使用されます。

次に、JavaScript で、jQuery ライブラリを使用して要素を選択し、それらのイベント ハンドラーを追加する必要があります。この例では、ボタンをクリックしたときに div 要素を表示または非表示にする必要があります。この効果を実現するコードは次のとおりです。

$(document).ready(function() {
  $("#show").click(function() {
    $("#target").show();
  });
  $("#hide").click(function() {
    $("#target").hide();
  });
});

上記のコードは 2 つの部分に分かれています。まず、$(document).ready 関数で、2 つのクリック イベント ハンドラーが定義されています。 $("#show")ID が「show」のボタン要素が選択されています。$("#hide")ID が「hide」のボタン要素が選択されています。これらのセレクターは、イベント ハンドラーを追加するためにメソッドを呼び出すことができる jQuery オブジェクトを返します。

2 番目に、ボタンをクリックすると、対応するハンドラーがトリガーされます。 $("#target")ID が「target」の div 要素が選択され、その show() メソッドまたは Hide() メソッドが呼び出されて、要素が表示または非表示になります。

ここでは $ 記号が使用されていることに注意してください。これは、jQuery ライブラリがグローバル スコープで $ 記号を定義しているためです。 jQuery の代わりにこの表記法を使用すると、コードを短縮できます。たとえば、$("#target") は jQuery("#target") と同等です。

さらに、show() メソッドと Hide() メソッドは、表示または非表示のメソッドを制御するためのいくつかのオプションのパラメータを受け入れます。たとえば、$("#target").show("slow") を使用すると、表示に遅いアニメーション効果を与えることができます。同様に、$("#target").hide(1000) を使用して、非表示アニメーションを 1 秒間継続させることができます。

show() メソッドと Hide() メソッドに加えて、jQuery には要素の可視性を制御する他のメソッドも提供されます。たとえば、 fadeIn() メソッドと fadeOut() メソッドは、要素をフェードインおよびフェードアウトさせます。 slideDown() メソッドと slideUp() メソッドを使用すると、要素が下にスライドして折りたたまれます。これらのメソッドを使用する場合、show() メソッドおよび Hide() メソッドと同じパラメータを使用してアニメーション効果を制御できます。

最後に、要素の表示状態を切り替えたい場合は、toggleClass() メソッドを使用できます。たとえば、次のコードは、クリックすると div 要素を表示または非表示にするトグル ボタンを作成します。

<button id="toggle">切换</button>

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

JavaScript コードは次のとおりです。

$(document).ready(function() {
  $("#toggle").click(function() {
    $("#target").toggleClass("hidden");
  });
});

隠し CSS クラスが使用されます。ここでは要素の表示と非表示を制御します。 div 要素にこのクラスがある場合、非表示になります。該当するクラスがない場合は表示されます。 toggleClas メソッドは、要素の 2 つの状態を切り替えます。

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