======jQuery Effects - Chaining======
<WRAP left notice 70%>
  * description : jQuery Effects - Chaining
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-16
</WRAP>
<WRAP clear></WRAP>
\\
======jQuery Chaining======
%%jQuery%%를 사용하면 actions/methods를 연결할 수 있습니다.\\
\\
Chaining을 사용하면 단일 스테이트먼트 내에서 동일한 요소에 대한 다수의 %%jQuery%% 메서드를 실행할 수 있습니다.\\

=====jQuery Method Chaining=====

지금까지 우리는 한 번에 하나씩 차례로 %%jQuery%% 스테이트먼트를 작성했습니다.\\
\\
그러나 동일한 요소에서 다수의 %%jQuery%% 명령을 차례로 실행할 수 있는 chaining이라는 기술이 있습니다.\\
\\
**Tip:**이렇게 하면, 브라우저가 동일한 요소를 두 번 이상 찾을 필요가 없습니다.\\
\\
액션을 연결하려면, 이전 액션에 액션을 추가하기만 하면 됩니다.\\
\\
다음 예제에서는 ''%%css()%%'', ''%%slideUp()%%'' 및 ''%%slideDown()%%'' 메서드를 함께 연결합니다.\\ 
"p1"요소는 먼저 빨간색으로 변경된 다음, 위로 슬라이드 하고, 이후에 아래로 슬라이드 합니다.\\

====예제====
<code jquery>
    $(document).ready(function () {
      $("button").click(function () {
        $("#p1").css("color", "crimson").slideUp(2000).slideDown(2000);
      });
    });
</code>
\\
필요한 경우 더 많은 메서드 호출을 추가할 수도 있습니다.\\
\\
**Tip:**\\
chaining 할 경우, 코드 줄이 상당히 길어질 수 있습니다. 그러나 %%jQuery%%는 구문에서 그다지 엄격하지 않습니다.\\ 
줄 바꿈<sup>line breaks</sup> 및 들여쓰기<sup>indentations</sup>를 포함하여 원하는 대로 서식을 지정할 수 있습니다.\\
\\
아래의 예제도 또한 잘 작동합니다.\\

====예제====
<code jquery>
    $(document).ready(function () {
      $("button").click(function () {
        $("#p1").css("color", "dodgerblue")
          .slideUp(2000)
          .slideDown(2000);
      });
    });
</code>
\\
%%jQuery%%는 여분의 공백을 버리고, 위 예제에서 3개의 코드 줄을 하나의 긴 코드 줄로 실행합니다.\\





{{tag>오션 jQuery Effects - Chaining}}