jQuery 수업

wrapper

레퍼(wrapper)란?

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

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

 레퍼의 안전한 사용

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

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

제어 대상을 지정하는  방법

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

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

<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 )

<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>

 

 

댓글

댓글 본문
작성자
비밀번호
  1. 이웃집토토로
    jQuery 1.7에 와서, .live() 함수는 사용이 중지 되었습니다. 이벤트를 연결하는 것은 .on() 함수로 대체 되었습니다. 하위 버젼의 jQuery에서는 .live() 함수보다는 .delegate() 함수를 사용하기를 권고합니다.

    http://findfun.tistory.com/285
  2. 완료!
    완료 감사합니다.
  3. tachyon
    감사합니다!
  4. 색종
    아 자식이 아니라 후손인가요? $(this).find("li") 의 의미이고, 자식중 찾을 경우에는 $(">li", this) 가 맞죠?
    대화보기
    • 색종
      예제1 13번 행에 $('li', this) 의 뜻이 this의 자식중 li 즉, $(this).children("li") 와 같은 의미인가요?
    • JustStudy
      고맙습니다
    • 이슬
      강좌가 아주 도움이 되고 있습니다. 그러데 궁금한 것이 있어서요..
      레퍼를 쓸 때 어느건 (" ")이고 어느것은 (' ') 어느 때 구별해서 사용하는 것인지 궁금합니다.
    • 쥬슈야
      html 배울 때 홈페이지의 상단영역, 좌측영역, 가운데영역, 하단영역을 지정할 때 wrapper라는 이름을 종종 사용했던 것으로 기억하는데. 여기서는 전혀 다른 의미군요.
    • 커리는 인도
      강의 감사합니다.

      $(function(){ })
      이렇게 쓰는 것도 충돌없는 방법인가요??
    • 이가은
      wrapper라는 것에 대해 다시 생각해보고 사용하는 방법도 새로이 알게됐네요 ㅎㅎ
      $만 알고 있었는데 저 방식도 잘 사용한다고하니 익숙해지도록 연습해야겠어요.
      잘보고있습니다 !
    • 기매ㅁ
      전 동영상 재생이 안되용 ㅜ.ㅜ
    • 도로시
      넵! 답변 감사합니다 :D
      대화보기
      • egoing
        무관합니다~
        대화보기
        • 도로시
          친절한 설명 감사드립니다~!

          위에 나온 wrapper에 대해서는 이해가 잘 되었는데
          '언어 JavaScript' 강의 중 데이터 타입 부분에 나오는 wrapper object와는 무관한 것인가요?
          우연히 이름이 같은 것인지..
          아니면 어떤 특성을 wrapper라고 하고 그 특성이 jQuery에서는 $( ) 이 부분인 것인지 궁금하네요 ^^
        • 별모모
          다시 들으니 이해되는 부분이 훨씬 많습니다.

          "wrrapper(레퍼)"란 "엘리먼트(Document)", "셀렉터(선택자)"를 인자로 하는 "jQuery함수"라고 이해할 수 있겠습니다.
        • blamei
          (function ($) {
          $(document).ready(function(){
          //내용
          });
          })(jQuery);
          이런식으로 쓰는 방법이 타 라이브러리와 충돌하지 않고 안전하게 쓰는 방법인것 같습니다.
        • 이강민
          jQuery(document).ready(function($){});
          도 되구요

          $(function(){ }); 으로 하셔도 됩니다.
          대화보기
          • 정보문
            화면 확대가 안 되요...html5로 갑자기 바뀐 건지, 플래시 플레이어를 지운것 밖에 없어요.컴에 플래시가 설치되어 있지 않으면 html5로 연결하는 건가요?
          • 이광현
            jQuery(document).ready(function($) {});
            요로케...?
          • 이광현
            답변 감사합니다 :)
            jQuery(document).ready(function() {(function($) { $('ul.foo').click( function() {$('li', this).css('background-color','red');});})(jQuery)});
            요로케 선언하고 사용하라는 말씀이신가..요?타 라이브뤠리와 충돌을 예방키 위한..?
          • egoing
            아래 문서를 보시면 ready는 일종의 이벤트입니다. dom을 사용할 수 있을 때 호출되도록 약속된 함수입니다. http://api.jquery.com/ready/
            그리고 아래 익명함수는 $라는 기호가 블럭({..})안에서 jQuery를 가르키도록 보장하기 위한 함수입니다. (function($){})(jQuery)
            두개는 의미가 전혀 다릅니다.
            2013/6/18 Disqus <notifications@disqus.net></notifications@disqus.net>
            대화보기
            • 이광현
              jQuery(document).ready(function(){}); 과
              (function($){})(jQuery) 은 같습니까..? jQuery 버전에 따라 다른지요?
            • 심정운
              항상 감사합니다.
            • egoing
              내용을 수정했습니다. 한번 봐주시고 이상하면 말씀해주세요.
              대화보기
              • 배휘동
                래퍼의 안전한 사용 부분에서, 위와 아래의 주석이 바뀐 것 같네요. 위가 그냥 jQuery쓰는 거고 아래가 지역변수 쓰는 것이죠?
              • SeongWon Noh
                차분한 설명... 멋있습니다.
              • 금은하
                친절한 설명 감사합니다
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기