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. 잘 봤어요^^
  2. 감사합니다!
  3. 엘리
    밖에 폭우가 쏟아지는거 같아요.
  4. crable
    감사합니다.
  5. 이웃집토토로
    jQuery 1.7에 와서, .live() 함수는 사용이 중지 되었습니다. 이벤트를 연결하는 것은 .on() 함수로 대체 되었습니다. 하위 버젼의 jQuery에서는 .live() 함수보다는 .delegate() 함수를 사용하기를 권고합니다.

    http://findfun.tistory.com/285
  6. 완료!
    완료 감사합니다.
  7. tachyon
    감사합니다!
  8. 색종
    아 자식이 아니라 후손인가요? $(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 자세히 보기