[송규남의 IT다이어리] 제이쿼리(jQuery) 두번째 이야기
오홍섭
view : 535
[송규남의 IT다이어리] 제이쿼리(jQuery) 시작해보기 2
안녕하세요. 중앙HTA 송규남 강사입니다.
지난 시간에 이어 jQuery 두번째 강좌를 시작해 보겠습니다
이번 시간에는 jQuery의 셀렉터 사용 방법에 대해 알아보겠습니다.
HTML요소에 어떤 동적인 작업을 추가하려면 대상 요소를 선택해서 해당 요소에 동적인 처리를해야 하겠죠?
HTML요소를 선택할 때 셀렉터를 사용하는데요, jQuery의 셀렉터는 사용방법이 CSS의 셀렉터와 거의 유사합니다.
jQuery의 가장 기본적인 셀렉터는 아래와 같은데요.
$(“#id속성) : id속성으로 요소를 선택할 때 사용됩니다.
$(“.class속성) : class속성으로 요소를 선택할 때 사용됩니다.
$(“태그명”) : 태그속성으로 요소를 선택할 때 사용됩니다.
자 그럼 간단한 예제를 하나 만들어 볼까요?
아래의 예제를 실행하려면 jQuery라이브러리가 같은 경로에 js라는 이름의 폴더를 만든후 그 안에 들어가 있어야 합니다.
지난강좌에 설명드렸던 대로 jQuery사이트에서 라이브러리를 다운받은 후 js폴더안에 파일을 넣어주세요.
이클립스에서 작성한 디렉토리 구조는 아래와 같습니다. jquery파일의 이름은 버전에 따라 저와 다를수 있어요~^^
예제코드를 아래처럼 작성합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<!-- jQuery 라이브러리 포함하기 -->
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
alert("버튼을 눌렀군요!");
});
$(".box1").click(function(){
alert("문단을 눌렀군요!");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="저를 눌러보세요"/>
<p class="box1" style="width:200px;height:200px;background-color: pink">
나는 문단입니다.
</p>
</body>
</html>
Button과 p태그를 마우스로 클릭시 메시지창이 뜨는 예제입니다.
$("#btn1").click(function(){
alert("버튼을 눌렀군요!");
});
위 문장은 id속성이 btn1인 요소를 click했을 때 function이 수행됩니다.
$(".box1").click(function(){
alert("문단을 눌렀군요!");
});
위 문장은 class속성이 box1인 요소를 click했을 때 function이 수행됩니다.
자 그럼 태그명으로 선택하는 방법도 어렵지 않게 하실 수 있겠죠?
jQuery에서 제공하는 셀럭터에는 복잡한 셀럭터들도 많은 데요.. 그럼 jQuery에서 제공하는 셀럭터들에 어떤 것이 있는지 알아보려면
어떻게 해야 할까요? 바로 jQuery사이트에서 API로 제공하고 있습니다.
웹브라우져를 이용해 http://jquery.com/ 사이트로 이동합니다.
위의 그림에서 Selectors를 선택하면 다양한 Selector에 대한 사용방법이 나옵니다.
Selectors → Basic을 선택해 보세요..
제가 말씀드렸던 셀렉터들이 나오고 해당 부분을 클릭하면 설명과 샘플코드가 보여집니다.
샘플코드들을 분석해 나가면서 공부해 나가시면 jquery 관련 책보다도 더 많은 방법들을 사용하실 수 있게 되실거예요~
자, 그럼 이번강좌는 여기에서 마무리하겠습니다~
<저작권자(c)중앙에이치티에이(주). 무단전재-재배포금지>
