[jQuery] Wrapper
Wrapper
1. 레퍼(wrapper)란? --> jQuery의 시작점
jQuery(엘리먼트 오브젝트 | 'CSS스타일 선택자')
붉은색으로 표시한 부분이 레퍼, 인자로 전달된 요소들에 jQuery의 기능성을 부가해서 반환
2. 레퍼의 안전한 사용
$(엘리먼트) 와 jQuery(엘리먼트)는 같은 의미이지만 $를 사용하는 다른 라이브러리(다른 라이브러리도 $를 쓴다.)들과의 충돌 때문에 다음과 같은 방법을 사용한다.
(1) 첫번째 방법: $대신 고유명사 jQuery를 쓴다.
<script type="text/javascript">
//$ 대신 jQuery를 사용
jQuery('body').html('hello world');
</script>
(2) 두번째 방법
<script type="text/javascript">
//$를 함수의 지역변수로 선언해서 외부에 있을지 모르는 타 라이브러리의 $와의 충돌을 예방
// 지역변수가 로컬변수보다 우선순위가 높다.
(function($){
$('body').html('hello world');
})(jQuery)
// 함수를 선언하는 동시에 호출하는 문장이다.
</script>
3. 제어 대상을 지정하는 방법
- jQuery( selector, [context] )([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() {//$('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>
<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>
출처: https://devbox.tistory.com/entry/jQuery-wrapper?category=574557 [장인개발자를 꿈꾸는 :: 기록하는 공간]
'Javascript > jQuery' 카테고리의 다른 글
| [jQuery] Event (0) | 2020.07.08 |
|---|---|
| [jQuery] Attribute/CSS (0) | 2020.07.08 |
| [jQuery] DOM Manipulation (0) | 2020.07.08 |
| [jQuery] Traversing (0) | 2020.07.07 |
| [jQuery] Selector (0) | 2020.07.07 |
| [jQuery] jQuery API (7/7) - 선택자 (0) | 2019.07.25 |
| [jQuery] jQuery API (6/7) - Ajax (0) | 2019.07.25 |
| [jQuery] jQuery API (5/7) - Event (0) | 2019.07.25 |