jQuery Chaining

jQueryを使って、アクション/メソッドをリンクできます。

Chainingは、一つのステートメントで複数のjQueryメソッド（同じ要素上で）を許可します。

jQuery メソッドリンク

これまで、一度ずつjQueryステートメント（一つずつ続けて）を書いてきました。

ただし、リンク（chaining）と呼ばれる技術があって、同じ要素に対して複数のjQueryコマンドを一つずつ実行することができます。

ヒント：このようにして、ブラウザは同じ要素を複数回検索する必要がなくなります。

アクションをリンクするには、単にそのアクションを前のアクションに追加するだけで十分です。

例 1

以下の例では、css()、slideUp()、およびslideDown()をリンクしています。"p1"要素はまず赤色に変わり、次に上にスライドし、最後に下にスライドします：

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

自分で試してみてください

必要であれば、複数のメソッド呼び出しを追加することもできます。

ヒント：リンクをクリックすると、コード行が非常に悪くなります。しかし、jQuery は文法的には厳しくありません；折り返しやインデントを含む希望的な形式で書くことができます。

例 2

こんな書き方でも動作します：

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

自分で試してみてください

jQuery は余分なスペースを取り除き、上記のコード行を一行の長いコードとして実行します。