레퍼(wrapper)란? : 시작점과 같음
jQuery(엘리먼트 오브젝트 | 'CSS스타일 선택자')
붉은색으로 표시한 부분이 레퍼, 인자로 전달된 요소들에 jQuery의 기능성을 부가해서 반환
Element Object는 다음과 같이 있습니다.
# ← id 셀렉터
. ← 클래스 셀렉터
엘리먼트 셀렉터
레퍼의 안전한 사용
$(엘리먼트) 와 jQuery(엘리먼트)는 같은 의미이지만 $를 사용하는 다른 라이브러리들과의 충돌 때문에 다음과 같은 방법을 사용한다.
<script type="text/javascript">
//$ 대신 jQuery를 사용
jQuery('body').html('hello world');
</script>//권장되는 방법
<script type="text/javascript">
//$를 함수의 지역변수로 선언해서 외부에 있을지 모르는 타 라이브러리의 $와의 충돌을 예방
(function($){//$ <- jQuery객체 전달, 함수를 선언. $에 jQuery가 전달되면서 함수안의 $로 이동
//jQuery 코드가 위치함
$('body').html('hello world');
})(jQuery)//함수를 호출하고 있음.
</script>
제어 대상을 지정하는 방법
-
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 element
$('li', this).css('background-color','red'); //this : context. 맥락상 ul.foo에 해당하는 li를 선택
});
})(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" );
//document.body : <body>태그를 말함
</script>
</body>
</html>
'__ > jQuery' 카테고리의 다른 글
| [생활코딩] 6강. Event (0) | 2021.01.24 |
|---|---|
| [생활코딩] 5강. Chain & Traversing (0) | 2021.01.24 |
| [생활코딩] 4강. 선택자 (0) | 2021.01.24 |
| [생활코딩] 2강. javascript VS jQuery (0) | 2021.01.24 |
| [생활코딩] 1강. jQuery란? (0) | 2021.01.24 |