jQuery - 체이닝 기법

제이쿼리는 하나의 객체에 온점(.)을 이용해 메서드에 메서드를 이어 붙이는 방법을 사용할 수 있습니다. 마치 체인이 엮인 모양 같다고 해서 체이닝 기법이라 부릅니다.

아래 예제를 살펴보도록 하죠.

<script>
$(function(){
  $("div").css("background", "yellow");
  $("div").css("color", "red");
  $("div").css("border", "1px solid");
});
</script>

<div>안녕 하보니</div>

이렇게 작성된 코드를 체이님 기법으로 다음과 같이 작성할 수 있습니다.

<script>
$(function(){
  $("div")
    .css("background", "yellow")
    .css("color", "red")
    .css("border", "1px solid");
});
</script>

<div>안녕 하보니</div>

체이닝 기법을 이용하면 코드의 양을 줄일 수 있을 뿐 아니라 간결화, 중복 사용, 코드 충돌의 위험이 작아지고, 하나의 문장으로 만들 수 있습니다.

<script>
$(function(){
  $("#use-nth div")
    .css("background", "yellow")
    .filter(":even")
    .css("background", "#CCC")
    .css("color", "red")
    .next().next().next()
    .css("background", "blue");
});
</script>

<h1>안녕 하보니</h1>
<div id="use-nth">
  <div>알 수 없는 브라우저</div>
  <div>사파리</div>
  <div>크롬</div>
  <div>엣지</div>
  <div>파이어폭스</div>
  <div>익스플러어</div>
  <div>기타</div>
</div>