오늘부터 저와함께 하루에 한두개정도씩 jQuery를 가지고 놀아 보겠습니다.
처음부터 현란한 예제로 시작하는것보다 간단한 예제를 가지고 시작해서 응용하실수 있도록 하겠습니다.
처음에만 간략하게 jQuery에 대해 설명해 드리며, 다음 예제부터는 쓸대없는 주석은 달지 않도록 하겠습니다.
우선 jQuery는 일종의 자바스크립트 라이브러리로써, 현재 다른 라이브러리로써는 prototype이라든가 네이버의 '진도'가 있습니다.
라이브러리라 함은 쉽게 설명하면, 프로그래밍언어에서 자주 사용하는 함수나 메서드등을 재사용이 가능하도록 모아놓은 것을 말합니다.
그럼 이제부터 예제를 시작합니다.
1. jQuery를 사용하기
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery 연습1 애니메이션효과</title>
<script type="text/javascript" src="jquery.js"></script>
- 위의 코드중 빨간색 으로 되어 있는 것처럼 html 파일안에 불러들입니다. 이로써 jQuery를 사용할 준비는 모두 끝났습니다.
%jQuery 최신 버전은 http://jquery.com 에서 다운받으실수 있습니다.
2. DIV 태그를 클릭하면 숨기기
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery 연습1 애니메이션효과</title>
<script type="text/javascript" src="jquery.js"></script> // jQuery를 불러오기
<script type="text/javascript">
$(document).ready(function(){ // 페이지가 로딩이 완료되면(이미지제외)
$("#hello").click(function(){
$(this).hide() ;
});
});
</script>
<style type="text/css">
#hello{background:#ff0000;width:100px;position:absolute;}
</style>
</head>
<body>
<div id="hello">Hello World!</div>
</body>
</html>
$(document).ready(function() {
(이곳에 시연하고자 하는 jquery 코드가 들어감.)
});
위의 코드가 jQuery를 시작하는 기본 코드가 됩니다.
Javascript 에서의 window.onload = function() { } ;
부분과 비슷합니다만, 다른점은 자바스크립트의 onload가 모든 이미지들의 로딩이 마쳐야 시연되는 반면에, jQuery는 이미지가 로딩되지 않아도 시연이 됩니다.
그럼 이제 시연하고자 하는 코드를 보도록 하겠습니다.
$("#hello").click(function(){
$(this).hide() ;
});
위의 코드에서 파란 색 부분을 선택자(Selector) 라고 합니다. 즉, 구현할 대상에 되는 녀석을 선택하는 것이죠. 사용 방법은 $() 의 괄호안에 대상이 되는 녀석을 선택하는것입니다. jQuery가 좋은것이 선택자 개념이 CSS와 거의 흡사하기 때문에 쉽게 사용할수 있습니다.
저는 <body></body> 안에 있는 <div id="hello"> 를 선택하고자 하였습니다 . 그래서 $() 안에 "#hello" 를 넣은것이죠.
#hello 는 CSS에서 id 속성(Attribute) 값이 hello 인 태그(Element)를 선택합니다. jQuery도 같지요?
이 선택자의 개념만 잘 익히고 있으면 jQuery를 90%정도 무리없이 사용할수 있다고 할수 있습니다. 정작 메소드들의 종류는 그렇게 많지가 않기 때문이지요.
위의 코드에서 오렌지색으로 되어 있는 부분이 메서드 입니다. 선택된 대상들에게 행동을 명시하는 부분이지요. 위의 코드를 사람이 사용하는 언어로 표현하면,
"#hello 야 너는 hide()를 하여라 " 정도가 되겠죠.
$("#hello").click(function(){ (A) }); 를 보면 선택된 대상이 클릭이 되면 (A) 부분의 내용이 시현됩니다.
여기서 click 은 이벤트의 한 종류로써, 자세한것은 다음에 예제를 진행해 나가면서 하나하나 설명하도록 하겠습니다.
.ready(function(){}); 도 이벤트의 한 종류입니다.
위의 코드에서는 (A) 부분에 $(this).hide() ; 들어가 있는것을 보실수 있습니다. $(this)는 중요한 개념으로 이벤트를 발생시킨 주최를 가리키는 것이죠. 즉, $("#hello") 가 됩니다. 위 소스를 넣고 브라우저로 확인하면, <div id="hello">안녕하세요?</div>를 클릭하면 "안녕하세요?" 를 감싼 빨간 박스가 사라지는것을 보실수 있습니다.
다음번 강좌부터는 예제 하나씩 준비해서 분석해보는 시간을 갖도록 해보겠습니다. 질문사항이나 기타 건의사항은 댓글 부탁드려요~!
출처 -
http://webnoon.net
toggle.htm
jquery.js