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. labis98
    20210918 좋은 강의 감사합니다.
  2. 없으면안돼요
    완료
  3. student
    래퍼를 함수로 묶을 경우 변수를 $name 같은 걸로 지정할 경우 이 변수가 jQueryname으로 치환될 염려는 없는지 싶군요.
  4. 행인
    $(function(){ })
    이렇게 쓰는 것도 충돌없는 방법인가요??
    -------------------------------------------

    (function($) { ... })(jQuery); 와 $(function(){ }); 는 전혀 다릅니다.

    전자는 $ 사용의 충돌을 방지하기 위해 $를 로컬변수로 지정해 쓰는 방법이고,
    후자는 $(document).ready(function() { ... }); 와 동일한 표현입니다. 문서가 다 로딩된 후에 실행하라는 코드입니다.
    대화보기
    • 허공
      감사합니다!
    • ㅎㅎ
      context -> 맥락
      event를 발생시킨 element가 this
    • 이달
      완료
    • 웅이
      올해 마지막으로 받는 답변이 될것같네요.
      감사합니다. 새해복 많이받으세요 !
      대화보기
      • polo
        예제2에서 jQuery(doument.body)를 jQuery('body')로 해도 똑같이 작용하는데,
        둘을 같은 의미로 생각해도 되는건가요?
        다른 차이점에 있을까요?

        --위 document.body 에서 document;를 생략해도 상관없습니다. body는 document의 자손 중 하나이기 때문에 생략해도 관계없어요.

        생활코딩 토픽 중 클라이언트 > javascript > 웹 브라우저 자바스크립트에 이고잉님의 동영상을 참고하시면 될 것 같습니다.
        https://opentutorials.org......740
        대화보기
        • 웅이
          예제2에서 jQuery(doument.body)를 jQuery('body')로 해도 똑같이 작용하는데,
          둘을 같은 의미로 생각해도 되는건가요?
          다른 차이점에 있을까요?
        • 삼고잉
          this와 같은 것들이라고 정의하기엔 너무 두루뭉술해서 context에 대한 정의를 내리기 힘드네요
        • 내가알려준다아아
          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 자세히 보기