본문 바로가기
[자기계발]/유튜브로 코딩배우기

[생활코딩] jQuery chain 이란?

슈총총 2021. 6. 9.
반응형

이번 시간에는 생활코딩 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를 이용해서 HTML element 제어하는 방법  (0) 2021.06.13
[생활코딩] jQuery event 정리  (0) 2021.06.12
[생활코딩] jQuery 선택자(selector)란?  (0) 2021.06.08
[생활코딩] jQuery 레퍼(wrapper)란?  (0) 2021.06.07
[생활코딩] jQuery란? 자바스크립트 라이브러리 jQuery 문법 알아보자.  (0) 2021.06.05

'[자기계발]/유튜브로 코딩배우기' 관련글

티스토리툴바