複数の命令をまとめて書く　メソッドチェーン

HTML,CSSの命令を書いてきました。
今回紹介するのが「メソッドチェーン」と呼ばれるものです。

<script>
$(document).ready(function(){
$("#test").append("A");
$("#test").append("B");
$("#test").append("C");
$("#test").append("D");
$("#test").append("E");
$("#test").append("1");
$("#test").append("2");
$("#test").append("3");
$("#test").append("4");
$("#test").append("B");
});
</script>

上記のコードのように#testの箇所に後ろから
アルファベットを追加していく命令があります。
これまでに記載してきた方法だと１つずづ書いてきました。

この上のコードを実行すると、jQueryはいったん#testが使用されている
HTMLタグを探しに行き、その後append("A")を実行します。

その後、jQueryは再び#testが使用されている
HTMLタグを探しに行き、その後append("B")を実行します。

#testが使用されている要素を何回も探しにいくので
効率的はないです。

メソッドチェーンで書くと以下の通りになります。

<script>
$(document).ready(function(){
$("#test").append("A")
.append("B")
.append("C")
.append("D")
.append("E")
.append("1")
.append("2")
.append("3")
.append("4")
.append("B");
});
</script>

コードは短くなり、実行してみると結果は同じです。
jQueryでは、命令と命令を.(ドット)で結合して書くことが
できます。１つのセレクターに対して２つ以上の命令を
連続して実行できます。このように命令を結合して書く方法を
「メソッドチェーン」といいます。

記述量が少なくなるだけではなく、処理の効率も向上します、
同一のセレクターに対して複数の命令をする場合は
「メソッドチェーン」で記述するようにしましょう。