[jQuery] 체이닝(Chaining)과 탐색(Traversing)

---

체이닝

여러 메소드들을 체인처럼 묶어 선택한 엘리먼트에서 차례로 실행되게 함. 

예시:

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

 

체이닝 된 메소드들이 수십개로 늘어나서 가독성이 힘들어진다면 줄바꿈을 해도 된다.

 

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

 

<장점>

- 체이닝을 이용하면 같은 셀렉터를 한번 이상 쓰지 않아도 된다. 

- 코드가 짧아진다.

 

탐색

위의 체이닝은 하나의 엘리먼트에서 연속된 효과를 주었으나

탐색은 도중에 대상을 바꿀 수 있게 한다. 한 엘리먼트에서 원하는 엘리먼트를 찾아나가는 것이다.

바로 원하는 대상을 적어버린다면, 나도 몰랐던 같은 이름의 엘리먼트가 겹쳐 적용될 수 있으니

꼬임을 방지하기 위해 깊이 들어가 특정하는 것이다.

 

예시:

 

$(selector).find('selector to find');

 

find() 말고도 다양하다.

제이쿼리 공식 사이트를 참고하자.

https://api.jquery.com/category/traversing/

Traversing | jQuery API Documentation

제이쿼리 공식 홈페이지 https://api.jquery.com/find/
TutorialRepublic https://www.tutorialrepublic.com/jquery-tutorial/jquery-chaining.php
GeeksforGeeks https://www.geeksforgeeks.org/jquery-chaining/
생활코딩 https://opentutorials.org/course/53/47

 

 틀린 정보를 알려주세요