jQury 기본 중에 기본
jQuery는 javascript 로 작성하는 것보다 좀 더 쉬운 방법으로 코드를 작성할 수 있게 해 주는 javascript 라이브러리입니다.
본부는 http://jquery.com 입니다.
jquery를 다운받아서 작성하고자 하는 html 페이지의 head 태그 내에 아래와 같이 포함시켜주면 이후, jquery 사용이 가능합니다.
<script type="text/javascript" src="jquery.js"></script>
jquery는 기본적으로 특정 html 요소를 선택하고, 그 선택된 요소를 조작하는 방법으로 사용이 됩니다.
<H1>헤드라인</H1>
H1이라는 요소를 찾아서 글씨 색깔을 바꾸는 작업을 jQuery로 한다면, 아래와 같이 할 수 있습니다.
먼저 html 코드중에서 H1 태그를 선택합니다.
$("H1")
맨 앞의 $ 는 '나는 jQuery임'을 나타내는 것입니다.
그리고, 선택한 요소의 색깔을 바꿉니다.
$("H1").css("color","red");
jQuey의 대부분은 이런 모습을 하게 됩니다. 선택하고, 조작하고...
선택하고, 조작하고...
선택하는 방법과 조작하는 방법을 알면, jQuery의 거의 대부분을 마스터하게 되는거지요.
예로, 간단한 소스를 아래와 같이 작성을 해 봅니다.
<!DOCTYPE html> <head> <title>연습</title> <meta charset="utf-8" /> <script type="text/javascript" src="jquery.js"></script> </head> <body> <h1>헤드라인</h1> </body> </html> |
그럼, jQuery 코드는 어디에다가 둬야할까요?
jQuery도 기본 자바스크립트(javascript)이기 때문에 <script>태그로 둘러싼 곳에 코드를 위치시키면 됩니다.
<script>
jquery 코드들......
</script>
그럼, 이 script 태그 블럭을 어디에 둬야할까요?
script 태그 블럭은 주로 head 태그 내에 둡니다만, body 태그 내의 아무곳에 둬도 상관이 없습니다.
| <!DOCTYPE html> <html> <head> <title>연습</title> <meta charset="utf-8" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $("h1").css("color","red"); </script> </head> <body> <h1>헤드라인</h1> </body> </html> |
head 태그에 주로 둔다니, 위와 같이 작성을 해 봤습니다.
테스트 결과는??? 헤드라인 이라는 글씨의 색이 바뀌지 않았습니다!!!
왜 일까요??
웹 브라우저는 위 소스를 읽어들여서 위에서부터 처리를 합니다.
브라우저 입장에서 보면, title을 연습으로 설정하고, 문자셋을 utf-8로 설정을 하고, jquery.js를 사용가능하도록 포함시키고, jquery로 작성된 파란색 코드를 실행을 하게 됩니다.
jquery 코드에 따르면, h1 태그를 찾아서 선택한 후, 글씨색을 빨간색으로 바꿔야되는데, 브라우저는 h1 태그를 발견을 못하게 됩니다. 아직 아래쪽에 있는 <h1>헤드라인</h1>을 읽지 않았기 때문입니다.
위 파란색 코드 부분을 <h1>헤드라인</h1>다음 줄로 옮기고 테스트를 해 보면, 헤드라인이라는 글씨가 빨간색으로 바뀝니다.
jquery....이런식이면 곤란한데...무슨 방법이 없냐?
이런 문제를 해결하기 위해서 웹페이지 전체를 다 읽어들이고 나서 jquery 스크립트가 실행되도록 할 필요가 있습니다.
문서가 다 읽혀졌는지 확인하고, 준비가 되면, 실행을 시키도록 해....라고 jquery에게 방법을 알려줍시다.
| <!DOCTYPE html> <html> <head> <title>연습</title> <meta charset="utf-8" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $("document").ready( function() { $("h1").css("color","red"); }); </script> </head> <body> <h1>헤드라인</h1> </body> </html> |
$("document").ready();
jquery 는 선택하고 조작하고 라고 했지요?
위에서는 document 를 선택했습니다. 현재의 웹페이지 문서를 의미합니다.
ready는 말그대로 준비가 되었다..는 뜻이겠네요.
페이지 소스 다 읽었냐? 준비됐냐?
준비됐다면, 내가 지정하는 이 함수를 실행하도록 해! 라고 jquery에게 일러두고 함수를 하나 만들어 줍니다.
그 이름없는 함수는
function() {
$("h1").css("color","red");
}
입니다. ready() 안에 고스란히 들어가면 됩니다.
이렇게 최종 위 글상자 안의 빨간색 코드가 완성되었습니다.
틀을 살펴보면, 아래 틀에 서로다른 코드들이 들어가게 됩니다.
$("document").ready( function() {
....
});
이 모양을 잘 기억해 두세요.ㅎㅎ
추가내용: 위 document ready 코드는 아래와 같이 간단한 형태로 사용이 가능합니다.
$( function() {
....
});
jquery 기본 중에 기본. 여기까지 입니다.
다음에는 요소를 선택하는 방법에 대해서 정리를 해 보겠습니다.
그 다음에 조작하는 방법...그 다음에는 간단한 것들 구현해보기...
뭐 이런 순서로... 이 모든 계획은 시간이 나면...이라는 조건하에서..ㅋㅋ
'jQuery' 카테고리의 다른 글
| 기본 동작 막기 (0) | 2013.02.15 |
|---|---|
| 버튼으로 창 닫기 window.close() (0) | 2013.01.31 |
| jQuery AJAX 맛보기 (0) | 2013.01.28 |
| jqueryUI datepicker 날짜 설정하기 (1) | 2013.01.22 |
| [jQuery] 2. 셀렉터 (3) | 2013.01.09 |
댓글