안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)
yeonee 블로그 : 네이버 블로그
예쁘고 맛있게 먹고 건강하게,강인하지만 온화하게 행하라. ※맛스타운스타일상 인스타 www.instagram.com/s2._.y25n ※맛집감성일상 유튜브https://youtube.com/channel/@S2_yeonee 티스토리https://yeoneeluv.tistory.co
blog.naver.com
* Chain이란?
jQuery의 메소드들은 반환값으로 자기 자신을 반환해야 한다는 규칙을 가지고 있다.
이를 이용하면 한번 선택한 대상에 대해서 연속적인 제어를 할 수 있다.
예제1. 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>예제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');
tutorial.setAttribute('href', 'http://jquery.org');
tutorial.setAttribute('target', '_blank');
tutorial.style.color = 'red';
</script>
</body>
</html>예제 1과 예제2를 통해 살펴보면, javascript를 사용하는 것보다 jQuery를 이용해서 코딩하는 경우가 더 간결한 코드를 작성할 수 있다.
이러한 비교를 통해 chain의 장점을 알 수 있다.
* 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>
</body>
</html>즉, 탐색을 이용하게 되면 하나의 콘텍스트에서 chain을 유지하면서 계속해서 코드를 작성할 수 있다.
https://api.jquery.com/category/traversing/
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
왼쪽 메뉴들 중에 Traversing 탭을 누르면 다양한 탐색기능들이 소개되어 있으며 직접 코드를 실행해보며 이해하는 것이 좋습니다.
다음글>>
2023.07.09 - [VsCode(HTML)/4. JQUERY] - JQUERY - 6. 이벤트 event
+ 아래의 링크를 통해 공부내용을 참고하였습니다.
'VsCode(HTML) > 3. JQUERY' 카테고리의 다른 글
| JQUERY - 7. manipulation 엘리먼트 제어 (0) | 2023.07.09 |
|---|---|
| JQUERY - 6. 이벤트 event (0) | 2023.07.09 |
| JQUERY - 4. 선택자 (0) | 2023.07.09 |
| JQUERY - 3. wrapper (0) | 2023.07.09 |
| JQUERY - 2. javascript VS jquery (0) | 2023.07.09 |
