티스토리 뷰

IT tech Coding/jquery

jQuery 래퍼(wrapper)는 무엇인가?

Coding Life 2019. 6. 29. 13:45
반응형

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


위의 붉은색이 바로 래퍼부분(wrapper)입니다. 인자로 전달된 요소들에 jQuery의 기능성을 부여합니다.


$를 사용하는 경우가 많지요. 코딩할때 수고가 적기때문이죠.


jQuery란 이름을 쓰면 다른 $표시와 헷갈리지 않습니다.


다른 라이브러리와의 충돌을 걱정하지 않습니다.



<script type="text/javascript">

//$ 대신 jQuery를 사용

jQuery('body').html('hello world');

</script>


<script type="text/javascript">

//$를 함수의 지역변수로 선언해서 외부에 있을지 모르는 타 라이브러리의 $와의 충돌을 예방

(function($){

    $('body').html('hello world');

})(jQuery)

</script>


위의 예제는 선언하는 방법에 대한 연구입니다.


제어하는 방법에 대해서 알아보자구요.


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

반응형
저작자표시

'IT tech Coding > jquery' 카테고리의 다른 글

radio버튼을 클릭시 동작하는 웹 jQuery로 구현하기  (0) 2019.08.11
php와 제이쿼리 그리고 변수값 전달에 대한 방법론  (0) 2019.07.09
jQuery와 html select 선택리스트를 연결해서 사용하기, 선택리스트를 선택할때 이벤트를 실행하기  (0) 2019.07.06
jQuery 크로스 브라우저 이슈에 대해여....  (0) 2019.06.29
jquery 첫발, 제이쿼리가 도대체 뭘까?  (0) 2019.06.29
댓글