jQueryのチェーン(Chaining)

jQueryは、メソッドリンクと呼ばれるもう一つの強力な機能を提供しています。

リンクを使用すると、単一の文で同じ要素に対して複数のjQueryメソッドを実行できます。

jQueryメソッドチェーン

これまで、一度に一つのjQuery文（一つずつ）を書いてきました。

しかし、リンクと呼ばれる技術があります。この技術は、単一の文で同じ要素に対して複数のjQueryコマンドを実行できます。

その結果、ブラウザは同じ要素を複数回検索する必要がなくなります。

これは、ほとんどのjQueryメソッドがjQueryオブジェクトを返し、そのオブジェクトがさらに別のメソッドを呼び出すことができるためです。

以下の例では、インスタンスが連結されていますcss()、hide()およびshow()方法：

$("button").click(function(){
　　$("p").css("background-color", "coral").hide(2000).show(2000);
});

読みやすさを向上させるために、一行のコードを複数行に分けることもできます。

例えば、上記の例のメソッドシーケンスは以下のように書くこともできます：

$("button").click(function(){
　　$("p")
　　　　.css("background-color", "coral")
　　　　.hide(2000)
　　　　.show(2000);
});

任意の数のメソッドを一つの文でリンクできます：

$("button").click(function(){
　　$("div")
　　　　.animate({width:"500px"})
　　　　.animate({height:"200px"})
　　　　.animate({fontSize: "10em"})
　　　　.animate({opacity: 0.3});
});

注意：一部のjQueryメソッドはjQueryオブジェクトを返さず、他のメソッドは引数に基づいて返します。以下の例を考えてみてください：

//　正しい使い方
$("p").css("background-color", "coral").hide(2000).show(2000);
//　エラーの使い方
$("p").css("background-color", "coral").hide().show();