Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

jQuerytoggle()の使用

jQueryのtoggle() メソッドは、ライトスイッチと考えることができます。呼び出されると、選択した要素を「オン」または「オフ」に切り替えます。つまり、ユーザーへのレンダリング要素と非表示を切り替えます。次の例では、toggle()の使用方法を説明します。 ボタンがクリックされたときにテキストを表示および非表示にします。

jQueryのtoggle()とは何ですか?

jQueryのtoggle() メソッドは、選択した要素をWebページ上で表示または非表示にします。言葉が意味するように、このメソッドは、要素を「オン」または「オフ」に切り替えるライトスイッチのように機能します。通常、toggle() メソッドはHTMLボタンで呼び出されますが、実際には選択した任意の要素で呼び出すことができます。

表示を「オン」と「オフ」の間で切り替えることに加えて、jQuery toggle() 期間の引数を受け入れます。 duration引数は、数値または文字列のデータ型にすることができます。 duration引数を指定すると、指定した時間続くアニメーションが作成されます。

jQuery toggle() また、アニメーションが完了したときに実行するコールバック関数を受け入れます。コールバック関数は、後で実行するために別の関数に渡される関数であることを忘れないでください。引数が指定されていない場合は、toggle() ディスプレイを「オン」または「オフ」に切り替えるだけです。

基本的な構文を見てから、サンプルコードを詳しく見ていきましょう。サンプルコードでは、写真とテキストを切り替えるアニメーションについて説明します。

toggle()jQuery構文

イントロダクションで述べたように、jQuery toggle() デフォルトのメソッドは、ライトスイッチと考えることができます。クリックすると、選択した要素がディスプレイで「オン」または「オフ」になります。他のjQueryメソッドと同様に、要素はtoggle()の前に選択する必要があります と呼ばれます。

toggle()を使用した例を見てみましょう。 引数なし。 HTMLファイルから始めます。

<button>
Click me
</button>
<p>
Read me!
</p>
<p id="hide" style="display: none">
NO! Read ME!
</p>

ここから、HTMLファイルがボタンと2つの段落タグをレンダリングしていることがわかります。 IDが「hide」の

タグのstyle属性に注意してください。表示をnoneに設定すると、その段落要素が表示から非表示になります。

参加者の81%は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

jQuerytoggle()の使用

HTMLファイルは、予測どおりにレンダリングされています。次に、jQueryトグルを使用して非表示の

タグを表示しましょう。この例では、jQueryをHTMLファイル内に含めます。これを行うには、jQueryを

  1. JavaScriptのインポートで「{}」を使用しますか?

    以下は、javaScriptインポートで{}を使用するコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style>  

  2. jQueryを使用してコンテナdiv内の画像をドラッグ/パンする方法は?

    mousedown、mouseup、mousemoveなどのイベントを使用して、画像を変換し、ドラッグ効果を作成できます。 次の例は、jQueryを使用して画像を移動する方法を示しています。 例 <!DOCTYPE html> <html> <head> <style> #parent{    position: absolute;    margin: 20px;    width: 200px;    height: 200px;    bo