Chain 이란?

jQuery의 메소드들은 반환값으로 자기 자신을 반환해야 한다는 규칙을 가지고 있다. 이를 이용하면 한번 선택한 대상에 대해서 연속적인 제어를 할 수 있다.

기본형식

$('요소').method1().method2();

• Chain의 장점
  1.코드가 간결해진다.
  2.인간의 언어와 유사해서 사고의 자연스러운 과정과 일치함.

• 탐색 (traversion)
  1.Chain의 대상을 바꿔서 체인을 계속 연장시킬 수 있는 방법
  (여러 선택자를 통해 대상을 바꿔서 할 수 있다.)
  ex) 만약에 first라는 클래스를 가진 ＜ul＞안에 ＜li＞가 있다면 ＜li＞는 ＜ul＞의 자식이기 때문에 $('.first).children() 이렇게 한다면 처음엔 $선택자가 ＜ul＞ 이지만 뒤에 .children() 인접관계 선택자를 통해 결국 최종 대상은 ＜li＞가 된다.
  
  2.너무 복잡한 Chine은 코드의 가독성을 떨어 뜨릴 수 있다.

만약 chain의 대상을 바꾸고자 한다면 .end()를 쓰면 선택자를 쓰면 $('맨처음 요소') 로 된다. 그리고 또 뒤에 선택자로 더 이어나갈 수 있다.

이 구조의 ＜html＞이 있고

이런 Chain의 jQuery가 있다면

이렇게 결과가 나오는 이유는 첫 번째로 .first라는 클래스명을 가진 ＜ul＞을 선택하고 하위 탐색 메서드인 .find()로 .foo라는 ＜li＞를 잡아서 .css() 메서드로 붉은 배경색으로 바꿨고 .end() 메서드로 .foo라는 ＜li＞를 끝내고 .first라는 클래스명을 가진 ＜ul＞로 되돌아가서 이번엔 .bar라는 ＜li＞를 잡아서 초록 배경색으로 바꿨기 때문이다.