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. 삼고잉
    this와 같은 것들이라고 정의하기엔 너무 두루뭉술해서 context에 대한 정의를 내리기 힘드네요
  2. 내가알려준다아아
    java언어에서는 ' ' << 단일문자일때 사용 / " "<문자열(즉, 문자가 여러개 있을경우)일떄사용하지만,
    javascript나 jquery에서는 크게 상관없이 혼용해서 사용하더라구요
    다만, " "안에 " "를 써야할 경우에는 ' '로 써주고, 이와반대로 ' '안에 ' '를 써야할 경우에는 " "를 써주시면 되요~
    대화보기
    • 이야아
      감사합니다
    • sheis
      잘 봤어요^^
    • orez
      감사합니다!
    • 엘리
      밖에 폭우가 쏟아지는거 같아요.
    • crable
      감사합니다.
    • 이웃집토토로
      jQuery 1.7에 와서, .live() 함수는 사용이 중지 되었습니다. 이벤트를 연결하는 것은 .on() 함수로 대체 되었습니다. 하위 버젼의 jQuery에서는 .live() 함수보다는 .delegate() 함수를 사용하기를 권고합니다.

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