[jQuery] Wrapper

Wrapper

1. 레퍼(wrapper)란? --> jQuery의 시작점

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

붉은색으로 표시한 부분이 레퍼, 인자로 전달된 요소들에 jQuery의 기능성을 부가해서 반환

2. 레퍼의 안전한 사용

$(엘리먼트) 와 jQuery(엘리먼트)는 같은 의미이지만 $를 사용하는 다른 라이브러리(다른 라이브러리도 $를 쓴다.)들과의 충돌 때문에 다음과 같은 방법을 사용한다.

(1) 첫번째 방법: $대신 고유명사 jQuery를 쓴다.

//$ 대신 jQuery를 사용

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

</script>

(2) 두번째 방법

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

// 지역변수가 로컬변수보다 우선순위가 높다.

(function($){

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

})(jQuery)

// 함수를 선언하는 동시에 호출하는 문장이다.

</script>

3. 제어 대상을 지정하는 방법

- jQuery( selector, [context] )([context]는 옵션이다.)

- jQuery( element )

예제 1. jQuery( selector, [context] )

<html>

<body>

<ul>

</ul>

</ul>

(function($){

$('ul.foo').click( function() {//$('ul.foo')은 getElementById의 리턴값과 같다.==>엘리먼트 오브젝트

$('li', this).css('background-color','red');//this는 ([context]로 있어도 되고 없어도 되고) click 이벤트

});

/* ul.foo가 선택되었을때 click 이벤트가 발생시 css메소드가 실행된다. */

})(jQuery)

</script>

</body>

</html>

예제 2. jQuery( element )

<html>

<body>

jQuery(document.body).css( "background-color", "black" );

</script>

</body>

</html>

티스토리툴바