1. 레퍼(wrapper)란?
jQuery(엘리먼트 오브젝트 | 'CSS스타일 선택자')
붉은색으로 표시한 부분이 레퍼, 인자로 전달된 요소들에 jQuery의 기능성을 부가해서 반환
2. 레퍼의 안전한 사용
$(엘리먼트)와 jQuery(엘리먼트)는 같은 의미이지만 $를 사용하는 다른 라이브러리들과의 충돌 때문에 다음과 같은 방법을 사용합니다.
2.1 $대신 jQuery 사용
<script type="text/javascript">
//$ 대신 jQuery를 사용
jQuery('body').html('hello world');
</script>2.2 $를 사용하겠다면, 함수를 선언 하고 괄호 안에 $가 들어가고 중괄호가 열리고 중괄호가 닫힘. 그리고 그 안에는 jQuery 코드가 들어갑니다. 이 안에서는 $를 쓰게 되면 function에 인자로 들어간 $에 jQuery 객체가 전달되어 다른 라이브러리에서 사용하여도 충돌을 방지할 수 있습니다.
<script type="text/javascript">
//$를 함수의 지역변수로 선언해서 외부에 있을지 모르는 타 라이브러리의 $와의 충돌을 예방
(function($){
$('body').html('hello world');
})(jQuery)
</script>또한 끝에 (jQuery)로 그 함수를 선언함과 동시에 호출 합니다.
3. 제어 대상을 지정하는 방법
3.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>3.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>
'JQuery' 카테고리의 다른 글
| [Jquery] 자주 사용하는 jquery예제 (0) | 2019.10.11 |
|---|---|
| [JQuery] JQuery란? (0) | 2019.07.18 |
| [JQuery] .html() 문법 (0) | 2019.07.16 |
