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