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. 완료!
    완료! 감사합니다.
  2. Wj Kim
    감사합니다. (_._)
  3. tachyon
    감사합니다!
  4. 온달장군
    강좌 잘보고 갑니다. 감사합니다.
  5. JustStudy
    고맙습니다
  6. 이가은
    우리나라말 어순처럼 주어 동사동사동사 ...ㅋㅋㅋ
    이해가 팍팍되네요 !
  7. giicha2
    좋은 강의 감사합니다
  8. 조니섹쉬
    체인기능 잘배워갑니다.
  9. 포스만빵
    jQuery 만 죽어라 파야겠는데요.. 허허.. 고 넘 참 기특하네요.
  10. 별모모
    [ 3번은 봐야... ] Traversing(트러벌싱)의 end().find()로 "선택자", "엘리먼트"를 옮겨가는 것이 눈에 들어 옵니다. 볼 때마다 새롭습니다. 볼 때마다 익숙해야 될텐데... ㅠㅠ;
  11. 서리
    chain이라는 개념이 참으로 흥미롭군요 ㅎㅎ
  12. 산이
    들을수록 경이로워요
  13. egoing
    수정했습니다. 고맙습니다 :)
    대화보기
    • Hwidong Bae
      find()와 end(), 아주 흥미롭네요! jQuery 진짜 멋집니다.
    • Hwidong Bae
      예제3. traversin을 이용해서 chain안에서 대상을 움직일 수 있다.
      -> traversing. g가 빠졌네요.
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기