第10章　jQueryの効果 - チェーニング

# jQueryの効果 - チェーニング

jQueryを使えば、アクション/メソッドを連鎖させることができます。

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

## jQueryメソッドチェーン

これまで、jQueryステートメントを1つずつ（順番に）書いてきました。

ただし、連鎖と呼ばれる手法があり、これを使用すると、同じ要素に対して複数のjQueryコマンドを順番に実行できます。

> **ヒント：** これにより、ブラウザは同じ要素を複数回見つける必要がなくなります。

アクションを連鎖するには、単純にそのアクションを前のアクションに追加します。

一緒に次の例のチェーン`css()`、`slideUp()`および`slideDown()` 方法。"p1"要素はまず赤に変わり、それから上にスライドし、そしてそれから下にスライドします。

#### 例
[sample10-1.html]

```
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#p1").css("color", "red").slideUp(2000).slideDown(2000);
  });
});
</script>
</head>
<body>

<p id="p1">jQuery is fun!!</p>

<button>Click me</button>

</body>
</html>
```

#### 実行結果
<pre><span class="nocode">
<iframe src="javascript: '<html><script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;></script>
<script>
$(document).ready(function(){
  $(&quot;button&quot;).click(function(){
    $(&quot;#p1&quot;).css(&quot;color&quot;, &quot;red&quot;).slideUp(2000).slideDown(2000);
  });
});
</script><body>

<p id=&quot;p1&quot;>jQuery is fun!!</p>

<button style=&quot;font-size:inherit&quot;>Click me</button>

</body></html>'" width="800"></iframe>
</span>
</pre>

<br>

> **ヒント：** 連鎖すると、コード行がかなり長くなる可能性があります。ただし、jQueryの構文はそれほど厳密ではありません。改行やインデントなど、好きなように書式設定できます。これもうまく動作します。

***

> **練習**
>> 問題[Ex10-1.html]

content

第10章 jQueryの効果 - チェーニング

第10章　jQueryの効果 - チェーニング