jQuery 수업

chain

Chain이란?

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

예제1. jQuery를 이용해서 코딩하는 경우

<html>
    <body>
        <a id="tutorial" href="http://jquery.com" target="_self">jQuery</a>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">
            jQuery('#tutorial').attr('href', 'http://jquery.org').attr('target', '_blank').css('color', 'red');
        </script>
    </body>
</html>

예제2. javascript의 DOM을 이용해서 코딩하는 경우

<html>
     <body>
         <a id="tutorial" href="http://jquery.com" target="_self">jQuery</a>
         <script type="text/javascript">
             var tutorial = document.getElementById('tutorial');
             tutorial.setAttribute('href', 'http://jquery.org');
             tutorial.setAttribute('target', '_blank');
             tutorial.style.color = 'red';
         </script>
     </body>
 </html>

chain의 장점

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

탐색(traversing)

예제3. traversing을 이용해서 chain안에서 대상을 움직일 수 있다.

<html>
    <body>
        <ul class="first">
            <li class="foo"> list item 1 </li>
            <li> list item 2 </li>
            <li class="bar"> list item 3 </li>
        </ul>
        <ul class="second">
            <li class="foo"> list item 1 </li>
            <li> list item 2 </li>
            <li class="bar"> list item 3 </li>
        </ul>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green');</script>
    </body>
</html>

 

댓글

댓글 본문
  1. 로이한
    taeyo.net jQuery traverse 강좌 << 링크가 잘못된거 같아요 다른 사이트가 연결됩니다.
  2. labis98
    20210921 좋은 강의 감사합니다.
  3. 이동엽
    taeyo.net jQuery traverse 강좌 << 링크 변경 된거같아요
  4. 허공
    감사합니다!
  5. 헬퍼
  6. ericpark
    고맙습니다.
  7. 삼고잉
    그저 제이쿼리가 편한데도 불구하고 비표준이라서 큰기업에서 사용을 안하는 경우가 많은줄 알았는데
    체이닝이라는 성질때문에 편리하고 직관적이면서도 유지보수적인 측면은 체이닝이 안돼있는 순수 자바스크립트환경이 나을지도 모르겠다는 생각을 하게되네요
  8. .....뇌가 일을 안해서 뭔소린지 모르겠다.. 하아...ㅠㅠㅠㅠㅠㅠ[다시보기]
  9. 피자
    자세한 설명 ㄳㄳ
  10. sheis
    잘 봤어요^^
  11. orez
    감사합니다.
  12. crable
    감사합니다.
  13. 완료!
    완료! 감사합니다.
  14. Wj Kim
    감사합니다. (_._)
  15. tachyon
    감사합니다!
  16. 온달장군
    강좌 잘보고 갑니다. 감사합니다.
  17. JustStudy
    고맙습니다
  18. 이가은
    우리나라말 어순처럼 주어 동사동사동사 ...ㅋㅋㅋ
    이해가 팍팍되네요 !
  19. giicha2
    좋은 강의 감사합니다
  20. 조니섹쉬
    체인기능 잘배워갑니다.
  21. 포스만빵
    jQuery 만 죽어라 파야겠는데요.. 허허.. 고 넘 참 기특하네요.
  22. 별모모
    [ 3번은 봐야... ] Traversing(트러벌싱)의 end().find()로 "선택자", "엘리먼트"를 옮겨가는 것이 눈에 들어 옵니다. 볼 때마다 새롭습니다. 볼 때마다 익숙해야 될텐데... ㅠㅠ;
  23. 서리
    chain이라는 개념이 참으로 흥미롭군요 ㅎㅎ
  24. 산이
    들을수록 경이로워요
  25. egoing
    수정했습니다. 고맙습니다 :)
    대화보기
    • Hwidong Bae
      find()와 end(), 아주 흥미롭네요! jQuery 진짜 멋집니다.
    • Hwidong Bae
      예제3. traversin을 이용해서 chain안에서 대상을 움직일 수 있다.
      -> traversing. g가 빠졌네요.