Chain

Chain?

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

이를 이용하면 한번 선택한 대상에 대해서 연속적인 제어가 가능.

 

장점 : 

코드가 간결

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

 

ex) 아래 a 태그의 속성값을 변경하는 코딩

<a id="tutorial" href="http://jquery.com" target="_self">jQuery</a>

 

1.jQuery를 이용

                    //href 속성값 변경                 타겟 속성값 변경     
jQuery('#tutorial').attr('href', 'http://jquery.org').attr('target', '_blank').css('color', 'red');

래퍼의 context가 유지가 됨!

jquery 메소드는 자신을 return 하기 때문에 (여러개의 서술어가 가능한 것과 같음)

 

2.js의 DOM 이용

var tutorial = document.getElementById('tutorial');
tutorial.setAttribute('href', 'http://jquery.org');
tutorial.setAttribute('target', '_blank');
tutorial.style.color = 'red';

계속해서 tutorial을 선택해줘야 함 > 코드 길어짐

 

 

탐색(traversing)

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

주의! 너무 복잡한 chain은 가독성 저하

 

<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>

탐색 메소드 사용

		//find(인자) 메소드 - 주어진 래퍼 ul의 자식 중 class foo 찾는 것
$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green');
							//end() 메소드 : 마지막 traverse 취소(find 메소드) 다시 ul.first로 전환