Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

개발합니다

[jQuery] Chain이란? 본문

Web/JavaScript

[jQuery] Chain이란?

돈기법 2022. 3. 28. 17:25

jQuery 메소드들은 반환값으로 자기 자신을 반환해야 한다는 규칙을 갖고 있다.
이를 이용해서 한번 선택한 대상에 대해 연속적인 제어를 할 수 있는데 이를 chain이라고 한다.

 

<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">
            $('#tutorial').attr('href', 'http://jquery.org').attr('target', '_blank').css('color', 'red');
        </script>
    </body>
</html>

$('#tutorial').attr('href', 'http://jquery.org').attr('target', '_blank').css('color', 'red');

부분을 분해해보면

 

$('#tutorial')                       -> id가 tutorial인 엘리먼트를 선택해

.attr('href', 'http://jquery.org') -> href 속성 값을 'http://jquery.org'로 변경하고,

.attr('target', '_blank')           -> target 속성 값을 _blank로 변경하고,

.css('color', 'red')                 -> css 스타일의 color를 red로 변경한다.

 

 

- 탐색 (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>

$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green');

부분을 분해해보면

 

$(ul.first)                               -> ul 엘리먼트에서 first 클래스를 가진 것을 선택한다. // <ul class="first">
.find('.foo')                             -> foo 클래스를 가진 엘리먼트를 선택한다. // <li class="foo"> list item 1 </li>
.css('background-color', 'red')     -> css 스타일의 background-color를 red로 변경한다.
.end()                                   -> 사용한 트레버스를 취소한다. // <ul class="first">로 chain 대상 전환
.find('bar')                             -> bar 클래스를 가진 엘리먼트를 선택한다. // <li class="bar"> list item 3 </li>
.css('background-color', 'green'); -> css 스타일의 background-color를 green으로 변경한다.

'Web > JavaScript' 카테고리의 다른 글

[jQuery] 폼이란? (Forms)  (0) 2022.03.28
[jQuery] 엘리먼트 제어 (Manipulation)  (0) 2022.03.28
[jQuery] Event란?  (0) 2022.03.28
[jQuery] 선택자 (Selectors)  (0) 2022.03.28
[jQuery] jQuery란?, wrapper  (0) 2022.03.28
'Web/JavaScript' Related Articles more