jQuery-チェーン


jQueryを使用すると、アクション/メソッドをチェーン化できます。

チェーンを使用すると、1つのステートメント内で(同じ要素に対して)複数のjQueryメソッドを実行できます。


jQueryメソッドチェーン

これまで、jQueryステートメントを一度に1つずつ(次々に)作成してきました。

ただし、チェーンと呼ばれる手法があり、同じ要素で複数のjQueryコマンドを次々に実行できます。

ヒント:このように、ブラウザーは同じ要素を複数回見つける必要はありません。

アクションをチェーンするには、前のアクションにアクションを追加するだけです。

css()次の例では、、、、slideUp()およびslideDown() メソッドをチェーンします。「p1」要素は最初に赤に変わり、次に上にスライドし、次に下にスライドします。

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

必要に応じて、メソッド呼び出しを追加することもできます。

ヒント:チェーンする場合、コードの行がかなり長くなる可能性があります。ただし、jQueryの構文はそれほど厳密ではありません。改行やインデントなど、好きなようにフォーマットできます。

これも問題なく機能します。

$("#p1").css("color", "red")
  .slideUp(2000)
  .slideDown(2000);

jQueryは余分な空白を破棄し、上記の行を1行の長いコードとして実行します。