프로그래밍/jQuery

Day3 - jQuery wrapper

Lucky-John 2021. 8. 7. 09:14

레퍼(wrapper)란?

jQuery(엘리먼트 오브젝트 | 'CSS스타일 선택자')

붉은색으로 표시한 부분이 레퍼, 인자로 전달된 요소들에 jQuery의 기능성을 부가해서 반환

 레퍼의 안전한 사용

$(엘리먼트) 와 jQuery(엘리먼트)는  같은 의미이지만 $를 사용하는 다른 라이브러리들과의 충돌 때문에 다음과 같은 방법을 사용한다.

1
2
3
4		 <script type="text/javascript">
//$ 대신 jQuery를 사용
jQuery('body').html('hello world');
</script>

-

1
2
3
4
5
6		 <script type="text/javascript">
//$를 함수의 지역변수로 선언해서 외부에 있을지 모르는 타 라이브러리의 $와의 충돌을 예방
   (function($){
       $('body').html('hello world');
   })(jQuery)
</script>

제어 대상을 지정하는  방법

  • jQuery( selector, [context] )
  • jQuery( element )

예제 1. jQuery( selector, [context] )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18		 <html>
    <body>
        <ul>
            <li>test2</li>
        </ul>
        <ul class="foo">
            <li>test</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">
             (function($){           
                 $('ul.foo').click( function() {
                        $('li', this).css('background-color','red');
                 });
              })(jQuery)
        </script>
    </body>
</html>

예제 2. jQuery( element )

1
2
3
4
5
6
7
8		 <html>
    <body>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">
                jQuery(document.body).css( "background-color", "black" );
        </script>    </body>
</html>

 

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

 

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

 

wrapper - 생활코딩

레퍼(wrapper)란? jQuery(엘리먼트 오브젝트 | 'CSS스타일 선택자') 붉은색으로 표시한 부분이 레퍼, 인자로 전달된 요소들에 jQuery의 기능성을 부가해서 반환  레퍼의 안전한 사용 $(엘리먼트) 와 jQuery

opentutorials.org