jQuery Chaining

jQuery를 통해 동작/메서드를 연결할 수 있습니다.

Chaining은 동일한 요소에 여러 jQuery 메서드를 한 줄의 문장에 포함할 수 있게 합니다.

jQuery 메서드 연결

지금까지는 jQuery 명령을 하나씩 쓰다가 다음 명령을 썼습니다.

그러나 연결(챔링)이라는 기술이 있습니다. 이 기술은 동일한 요소에서 여러 jQuery 명령을 한 번에 실행할 수 있도록 합니다.

ヒント:이렇게 하면 브라우저는 동일한 요소를 여러 번 찾을 필요가 없습니다.

동작을 연결하려면 간단히 이전 동작에 동작을 추가하면 됩니다.

예제 1

아래의 예제는 css(), slideUp(), and slideDown()를 연결합니다. "p1" 요소는 먼저 빨간색으로 변하고, 위로 움직이고, 다시 내려옵니다:

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

자신이 직접 시도해보세요

필요하다면 여러 메서드 호출을 추가할 수도 있습니다.

ヒント:링크를 클릭할 때, 코드 행은 매우 나쁜 형태가 됩니다. 그러나 jQuery는 문법적으로 매우 엄격하지 않으며, 원하는 형식으로 쓸 수 있습니다. 여기에는 줄 바꿈과 인덱싱이 포함될 수 있습니다.

예제 2

이렇게 쓰면도 실행됩니다:

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

자신이 직접 시도해보세요

jQuery는 불필요한 공백을 제거하고, 위의 코드 행을 한 줄로 실행합니다.