wrapper

문법 :

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

인자로 전달된 요소들에 jQuery의 기능성을 부가해서 반환

 

$와 jQuery(엘리먼트)는 같은 의미

$를 사용하는 다른 라이브러리들과의 충돌 때문에 아래처럼 사용

 

 - 안전하게 래퍼 사용하는 방법

1.jQuery라는 이름으로 사용

//$ 대신 jQuery를 사용
jQuery('body').html('hello world');

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

(function($) {
    $('body').html('hello world');
})(jQuery) //함수를 선언함과 동시에 호출 $안에 jQuery가 전달돼서 안전하게 $ 사용 가능

 

- 제어 대상을 지정하는 방법(크게 2가지 방법)

1. jQuery( selector, [context] )  두번째 인자 context는 생략 가능

(function($) {
    //css 선택자에서 어떠한 기호도 없을 때는 엘리먼트 선택자임 ul에서 .을 붙여서 class 선택
    $('ul.foo').click(function() {
                //context임. (this는 ul.foo라는 이벤트를 발생시킨 element)
        $('li', this).css('background-color', 'red');
    });
})(jQuery)

 

2. jQuery( element )

		//body 요소를 선택하여 배경화면 검은색으로 변경
jQuery(document.body).css( "background-color", "black" );