jQuery(엘리먼트 오브젝트 | 'CSS스타일 선택자')
위의 붉은색이 바로 래퍼부분(wrapper)입니다. 인자로 전달된 요소들에 jQuery의 기능성을 부여합니다.
$를 사용하는 경우가 많지요. 코딩할때 수고가 적기때문이죠.
jQuery란 이름을 쓰면 다른 $표시와 헷갈리지 않습니다.
다른 라이브러리와의 충돌을 걱정하지 않습니다.
<script type="text/javascript">
//$ 대신 jQuery를 사용
jQuery('body').html('hello world');
</script>
<script type="text/javascript">
//$를 함수의 지역변수로 선언해서 외부에 있을지 모르는 타 라이브러리의 $와의 충돌을 예방
(function($){
$('body').html('hello world');
})(jQuery)
</script>
위의 예제는 선언하는 방법에 대한 연구입니다.
제어하는 방법에 대해서 알아보자구요.
Query( 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>
'IT tech Coding > jquery' 카테고리의 다른 글
| radio버튼을 클릭시 동작하는 웹 jQuery로 구현하기 (0) | 2019.08.11 |
|---|---|
| php와 제이쿼리 그리고 변수값 전달에 대한 방법론 (0) | 2019.07.09 |
| jQuery와 html select 선택리스트를 연결해서 사용하기, 선택리스트를 선택할때 이벤트를 실행하기 (0) | 2019.07.06 |
| jQuery 크로스 브라우저 이슈에 대해여.... (0) | 2019.06.29 |
| jquery 첫발, 제이쿼리가 도대체 뭘까? (0) | 2019.06.29 |
