728x90
| Chain 이란?
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>
예제 코드를 보면 <a>태그가 하나 있고 a태그에 href 속성과 target 속성을 jQuery를 이용해 변경하려고 합니다. 해당 소스를 실행해 보면 실행된 코드는 jQuery를 이용해 변경된 내용으로 출력된 것을 볼 수 있습니다. 즉, 여기서 보듯 .attr셀렉터를 이용해 연결연결하여 연속적으로 제어를 하고 있습니다. 이 구조가 Chain 이라고 할 수 있습니다.
1. Chain의 장점
- 코드가 간결해진다.
- 인간의 언어와 유사해서 사고의 자연스러운 과정과 일치한다.
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 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>
예제 코드를 보면 ul과 li를 이용해 간략한 표를 만들었고 jQuery를 이용해 처음 ul중 'first'라는 클레스를 가진것을 찾고 그 안에 .find()를 이용해 'foo'의 클레스를 가진것을 찾아 배경색상을 'red'로 바꿔주고 있습니다. 그리고 .end()라는 내용이 있는데 이는 마지막에 선택되어 있는 'foo' 클레스의 선택을 한단계 앞으로 보낸주는 역할을 합니다. 그래서 한단계 앞에서 선택되어 있던 'first'라는 클레스를 가진 ul로 돌아갑니다. 그 뒤 다시 .find를 이용해 'bar'라는 클레스를 찾고 그 배경색상을 'green'으로 변경하고 있습니다.
728x90
반응형
'즐거움 넘치는 IT 세계 > 코드로 만드는 디자인' 카테고리의 다른 글
| [ jquery 기초 ] jquery - DOM 계층을 이용한 요소 접근 (0) | 2019.10.02 |
|---|---|
| [ VueJS 입문 ] 여러 인스턴스 사용하기 / Multiple Instance (0) | 2019.10.02 |
| [ VueJS 입문 ] Computed VS Watch 언제써야할까? (0) | 2019.10.01 |
| [ VueJS 입문 ] 클래스와 스타일 바인딩 (0) | 2019.09.30 |
| [ VueJS 입문 ] v-for, 리스트 렌더링 / 반복문 (0) | 2019.09.29 |
