. 을 이용하여 연속적으로 연결 가능한 것을 'chain'이라고 합니다.
chain이 얼마나 효율적인지, context를 어떻게 유지하고 전환하는지에 대해서 알아보겠습니다.
Chain이란?
jQuery의 메소드들은 반환값으로 자기 자신을 반환해야 한다는 규칙을 가지고 있습니다.
이를 이용하면 한번 선택한 대상에 대해서 연속적인 제어를 할 수 있습니다.
예제1. jQuery를 이용해서 코딩하는 경우
- wrapper을 더이상 선언하지 않아도 됨
<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');//인자로 id="tutorial"전달
tutorial.setAttribute('href', 'http://jquery.org');
//setAttribute : element Object의 속성값을 바꾸는 역할.DOM의 API
tutorial.setAttribute('target', '_blank');
tutorial.style.color = 'red';
</script>
</body>
</html>
tutorial.setAttribute('href', 'http://jquery.org');을 콘솔로 찍어보면 Undefined라고 나옵니다. 리턴하는 값이 없다는 뜻입니다.
chain의 장점
- 코드가 간결해진다.
- 인간의 언어와 유사해서 사고의 자연스러운 과정과 일치함.
탐색(traversing)
- chain의 대상을 바꿔서 체인을 계속 연장시킬 수 있는 방법
- http://api.jquery.com/category/traversing/
- taeyo.net jQuery traverse 강좌
- 너무 복잡한 chain은 코드의 가독성을 떨어 뜨릴 수 있다.
예제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>
//end()마지막으로 사용한 트레버스 메소드를 취소함.=find취소
</body>
</html>'__ > jQuery' 카테고리의 다른 글
| [생활코딩] 7강. 엘리먼트 제어 (0) | 2021.01.24 |
|---|---|
| [생활코딩] 6강. Event (0) | 2021.01.24 |
| [생활코딩] 4강. 선택자 (0) | 2021.01.24 |
| [생활코딩] 3강. wrapper (0) | 2021.01.24 |
| [생활코딩] 2강. javascript VS jQuery (0) | 2021.01.24 |