알쓸전컴(알아두면 쓸모있는 전자 컴퓨터)

[jQuery] Chain이란? 본문

Web /JQuery

[jQuery] Chain이란?

백곳 2017. 8. 23. 18:18

Chain이란?


jQuery의 메소드들은 반환값으로 자기 자신을 반환해야 한다는 규칙을 가지고 있다.

이를 이용하면 한번 선택한 대상에 대해서 연속적인 제어를 할 수 있다.


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




chain의 장점


1.코드가 간결해진다.

2.인간의 언어와 유사해서 사고의 자연스러운 과정과 일치함.



탐색(traversing)


chain의 대상을 바꿔서 체인을 계속 연장시킬 수 있는 방법


너무 복잡한 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 src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green');</script>
    </body>
</html>







'Web > JQuery' 카테고리의 다른 글

[jQuery]엘리먼트 제어  (0) 2017.08.23
[javascript,jQuery] 이벤트란?  (0) 2017.08.23
JQuery 선택자  (0) 2017.08.22
javascript vs JQuery  (0) 2017.08.22
jQuery란?  (0) 2017.08.22
공유하기 링크
'Web /JQuery' Related Articles more
Comments