[생활코딩] jQuery chain 이란?
이번 시간에는 생활코딩 jQuery chain 강의에 대해서 알아볼 것이다. chain으로 어떻게 프로그래밍하는지, 자바스크립트 대비 얼마나 효율적인지, 체인안에서 context가 만들어지는데 어떻게 유지하고 전환 하는지에 대해서 배울 것이다.
chain이란?
- 체인은 쇠사슬이라는 뜻으로, 독립되어있는 고리들이 얽히고 얽힌 관계를 말한다.
- chain이랑 비슷한 모양이라서 그렇게 부른다.
- jQuery를 보면 wrapper를 시작해서 다양한 method들을 . 으로 구분해서 연속적으로 연결할 수 있다.
1. jQuery 이용해서 코딩하기 - 1줄
<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>attr => attribute의 약자로 속성이라는 뜻으로, element의 id, href 같은 속성들을 편리하게 바꿀 수 있도록 jQuery가
제공하는 것이 attr 이다.
.attr('href', 'http://jquery.org') => 첫 번째 인자를 'href' 라고 적어주게 되면, href 속성 값을 http://jQuery .org로 변경한다는 뜻이다.
.com -> .org
.attr('target', '_blank') => element의 target 속성 값을 변경한다는 뜻.
_self -> _blank
.css('color', 'red'); => css method를 호출하며 첫 번째 인자로 'color', 두 번째 인자로 'red' 를 준다.
element의 inline 방식 스타일 시트로 color의 값이 red로 지정된다.
jQuery wrapper 실행 -> wrapper의 methoid 중에 attr 을 실행 -> 그런데 다시 . attr 이 가능한가?
Yes. jQuery에 있는 모든 method들은 그 return 값으로 wrapper를 return 하기 때문에 그렇다.
wrapper가 return하는 어떤 값이 있을 것이다. attr이 실행된 다음 최종적으로 return 할 때,
wrapper의 object를 return 하기 때문에 뒤에서 .을 붙여서 연속적으로 명령을 내릴 수가 있다.
다른말로, 각각의 api들, method들 안에서 이 wrapper에 해당되는 context가 유지되고 있기 때문에 가능한 것이다.
2. JavaScript의 DOM을 이용해서 코딩하기 - 4줄
<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>var tutorial = document.getElementById('tutorial');
=>document.getElementById의 인자로 tutorial을 전달했다.
element들중에 id값이 tutorial인 element의 object를 tutorial에 할당한 것
setAttribute => element object에 어떤 속성값을 변경시키는데 DOM의 api 이다.
첫 번째 인자 = 속성의 이름, 두 번째 인자 = 속성의 값 = jQuery의 attr와 같은 역할
두 가지 방법의 차이점
jQuery는 wrapper을 한번 실행하게 되면 각각의 method들이 wrapper을 더 이상 선언할 필요가 없어서 내부적으로 그 context가 유지가 되고 있다. 반면 JavaScript는 어떤 method들을 실행할 때마다 tutorial이라고 하는 함수 변수에 저장 되어있는 element object를 가져오고있다.
chain의 장점
- 코드가 간결해진다.
- 중복을 제거한다.
- 인간의 언어와 유사해서 사고의 자연스러운 과정과 일치한다.
- 하나의 주어가 있으면, 그 안에 주어를 꾸며주는 여러개의 서술어가 나열된다.
| jQuery | JavaScript |
| 나는 한강에 가서 친구와 자전거를 탔다. | 나는 한강에 갔다. |
| 나는 친구와 있다. | |
| 자전거를 탔다. |
탐색(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.first') => ul element 중에서 class명이 first인 element를 찾아내는 것.
.find => 주어진 wrapper 즉 ul element의 자식 element 중에 class 명이 foo인 element를 찾아라 라는 뜻
.css => find 가 지정한 foo에 대해서 background-color를 red로 지정
.end => chain context를 유지하다가 .end라는 method를 사용하게 되면 마지막으로 사용한 traverse를 취소하게 된다.
.find method를 취소한다 = 전 context로 돌아간다 = ul.first selector를 wrapper로 전달하는 것으로 돌아간다.
.bar => ul element의 자식 element 중에서 class 명이 var인 element를 찾아라.
참고
Traversing | jQuery API Documentation
Create a new jQuery object with elements added to the set of matched elements. Add the previous set of elements on the stack to the current set, optionally filtered by a selector. Add the previous set of elements on the stack to the current set. Get the ch
api.jquery.com
이전글 보고오기
- [생활코딩] jQuery란? 자바스크립트 라이브러리 jQuery 문법 알아보자.
- [생활코딩] jQuery 레퍼(wrapper)란?
- [생활코딩] jQuery 선택자(selector)란?