지식 창고

Day5 - jQuery Chain 본문

프로그래밍/jQuery

Day5 - jQuery Chain

Lucky-John 2021. 8. 8. 01:40

Chain이란?

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

예제1. jQuery를 이용해서 코딩하는 경우

1
2
3
4
5
6
7
8
9		 <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을 이용해서 코딩하는 경우

1
2
3
4
5
6
7
8
9
10
11		 <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>

chain의 장점

  • 코드가 간결해진다.
  • 인간의 언어와 유사해서 사고의 자연스러운 과정과 일치함.

탐색(traversing)

예제3. traversing을 이용해서 chain안에서 대상을 움직일 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16		 <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>

 

https://www.youtube.com/watch?v=JQdbZWdRtMc&list=PLrCCNh6y7w2g6U7RX_v-TOefyRPiO32jT 

 

https://opentutorials.org/course/53/47

 

chain - 생활코딩

Chain이란? jQuery의 메소드들은 반환값으로 자기 자신을 반환해야 한다는 규칙을 가지고 있다. 이를 이용하면 한번 선택한 대상에 대해서 연속적인 제어를 할 수 있다. 예제1. jQuery를 이용해서 코

opentutorials.org

 

'프로그래밍 > jQuery' 카테고리의 다른 글

Day4 - jQuery Seletor (선택자) 두번째  (0) 2021.08.08
Day4 - jQuery Seletor (선택자) 첫번째  (0) 2021.08.07
Day3 - jQuery wrapper  (0) 2021.08.07
Day2 - jQuery의 효율성, 편리성  (0) 2021.07.24
Day1 - jQuery란?  (0) 2021.07.24
'프로그래밍/jQuery' Related Articles more
Comments