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();