안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)
yeonee 블로그 : 네이버 블로그
예쁘고 맛있게 먹고 건강하게,강인하지만 온화하게 행하라. ※맛스타운스타일상 인스타 www.instagram.com/s2._.y25n ※맛집감성일상 유튜브https://youtube.com/channel/@S2_yeonee 티스토리https://yeoneeluv.tistory.co
blog.naver.com
* 레퍼(wrapper)란?
jQuery(엘리먼트 오브젝트 | 'CSS스타일 선택자')
붉은색으로 표시한 부분이 레퍼, 인자로 전달된 요소들에 jQuery의 기능성을 부가해서 반환
* 레퍼의 안전한 사용
$(엘리먼트) 와 jQuery(엘리먼트)는 같은 의미이지만 $를 사용하는 다른 라이브러리들과의 충돌 때문에 다음과 같은 방법을 사용한다.
<script type="text/javascript">
//$ 대신 jQuery를 사용
jQuery('body').html('hello world');
</script><script type="text/javascript">
//$를 함수의 지역변수로 선언해서 외부에 있을지 모르는 타 라이브러리의 $와의 충돌을 예방
(function($){
$('body').html('hello world');
})(jQuery)
</script>먼저 함수를 선언합니다.
그리고 그 안에 jquery로 만들어진 코드를 넣습니다.
그러면 이 안에서는 function이 $를 인자로 전달받습니다.
$에 jQuery객체가 전달이 되서 그 전달 받은 $로 인해서 바깥의 타 라이브러리의 $와 충돌하지 않습니다.
로컬변수는 글로벌변수보다 높기때문에, 안쪽의 로컬변수가 우선순위로 되어 글로벌변수가 있다고 해도 그 영향을 받지 않게 되는 겁니다.
(프로그래밍에는 로컬변수와 글로벌변수가 있습니다.
함수와 같은 것 안쪽에 있는 것이 로컬변수이고 , 글로벌변수는 그 바깥쪽에 있는 것을 말합니다.)
즉, 위의 코드는 함수를 선언함과 동시에 변수를 호출하고 있는 것이다.
* 제어 대상을 지정하는 방법
- jQuery( selector, [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() {
$('li', this).css('background-color','red');
});
})(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>함수의 인자로 받은 document.body로, document.body는 body의 객체를 의미합니다.
이 함수를 실행하게 되면 body를 래퍼로 감싸서 실행하게 되며, 뒤에 css 내용을 실행하게 됩니다.
※ 래퍼는 jQuery의 시작점으로 꼭 래퍼의 의미와 사용법을 이해하고 다음을 공부하는 것이 중요합니다.
다음글>>
2023.07.09 - [VsCode(HTML)/4. JQUERY] - JQUERY - 4. 선택자
+ 아래의 링크를 통해 공부내용을 참고하였습니다.
'VsCode(HTML) > 3. JQUERY' 카테고리의 다른 글
| JQUERY - 6. 이벤트 event (0) | 2023.07.09 |
|---|---|
| JQUERY - 5. Chain (0) | 2023.07.09 |
| JQUERY - 4. 선택자 (0) | 2023.07.09 |
| JQUERY - 2. javascript VS jquery (0) | 2023.07.09 |
| JQUERY - 1. jQuery란? (0) | 2023.07.09 |
