반응형
jQuery가 무엇인지 저번 글에서 배웠다. 이번글에서는 jQuery wrapper가 무엇인지 한 번 알아보자.
레퍼(wrapper)란?
- jQuery란 이름으로 시작된 함수를 랩퍼(wrapper)라고 한다.
- jQuery(element object | 'css스타일 선택자')
레퍼의 안전하게 사용하는 방법
- $(element)와 jQuery(element)는 같은 의미이다.
- jQuery는 라이브러리이고, 재사용을 위해 만들어졌다.
- 필요에 따라서 여러개의 라이브러리를 조합해서 사용할 수 있는데, 다른 라이브러리에서도 $를 써므로 충돌이
일어날 수 있다. - jQuery라는 이름을 가지고 있는 함수를 호출하는 것이고, 그 인자로 element object를 전달하거나 아니면 문자열로 된 css스타일의 선택자를 전달하는 것
- 프로그래밍에서는 로컬 변수, 글로벌 변수가 있는데 바깥 쪽에 있는 것이 글로벌이고, 안쪽에 있는 것이 로컬이다
- 로컬변수는 글로벌 변수보다 우선순위가 높다
<script type="text/javascript">
//$ 대신 jQuery를 사용
jQuery('body').html('hello world');
</script>
or
<script type="text/javascript">
//$를 함수의 지역변수로 선언해서 외부에 있을지 모르는 타 라이브러리의 $와의 충돌을 예방
//함수를 선언한 것과 동시에 호출하고 있는 구문이다.
(function($){
$('body').html('hello world');
})(jQuery)
</script>제어 대상을 지정하는 방법
jQuery를 이용해서 제어 하고자 하는 대상을 지정할 때 selector나 element를 인자로 전달한다.
jQuery(selector, [context]) - 1번 째 인자는 문자열, 2번 째 인자는 옵션이다.
<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() {
// this는 foo라는 class값에 있는 li부분을 가르킨다.
$('li', this).css('background-color','red');
});
})(jQuery)
</script>
</body>
</html>- $로 레퍼가 시작된다
- css에서 selector 앞에 어떤 기호도 붙어 있지 않다면 element이다
- ul이라는 태그명을 가지고 있는 element를 선택하는 것이다.
- css에서 . 을 붙인다면 class selector 이다.
- ul element 중 foo라는 class 명을 가지고 있는 것을 선택한다.
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>- jQuery레퍼에 인자로 element object가 들어간다
- 레퍼는 jQuery에서 시작점과 같은 것이다.
이전글 보고오기
반응형
'[자기계발] > 유튜브로 코딩배우기' 카테고리의 다른 글
| [생활코딩] jQuery chain 이란? (0) | 2021.06.09 |
|---|---|
| [생활코딩] jQuery 선택자(selector)란? (0) | 2021.06.08 |
| [생활코딩] jQuery란? 자바스크립트 라이브러리 jQuery 문법 알아보자. (0) | 2021.06.05 |
| [생활코딩] JavaScript 문법 - UI /API/문서 보는법. 나만의 쉬운정리 (1) | 2021.05.28 |
| [생활코딩] JavaScript 문법 - 모듈 (0) | 2021.05.27 |
