jQuery 를 좀더 학습하기 위하여 jQuery 를 연재하기로 하였습니다. 주관련 예제와 학습은 jQuery Cookbook 를 대상으로 하고 설명은 jQuery in Action 과 같이 병행할 생각입니다.
또하나는 티스토리 블로그이니만큼 연관성이 있는것은 같이 다룰려고 합니다.

첫번째 시간으로 jQuery 코드를 html 에 넣는 기본부터 시작합니다.
html 에 jQuery 코드를 넣은 방법은 두가지가 있습니다.
1. jQuery 의 최신 버젼을 삽입하기 위해 구글이 호스팅하는 CDN(content delivery network)를 사용하는 방법. 
2. jQuery.com 으로부터 다운로드 받아 직접 서버에 업로드후 호스팅하는 방법입니다.

참고로 구글에서 빠른 호스팅을 하니 CDN을 이용하는 방법을 권장하는 바입니다. 구지 다운로드 받아서 서버에 업로드후 사용하는 방법은 특별이 필요한 경우에만 사용하기 권합니다.
먼저 CDN을 이용하는 방법입니다.

CDN을 이용하는 방법.

jquery.com 에 가시면 Download 버튼을 클릭하면 http://docs.jquery.com/Downloading_jQuery 주소로 갑니다.



아래로 스크롤하면 호스팅하는 주소와 최신버젼을 알 수 있습니다.

 
구글이 호스팅하는 1.7.1버젼을 사용해보겠습니다.
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

그럼 이제부터는 jQuery 코드를 맘껏 사용할 수 있습니다.

서버에 업로두 후 사용하는 방법.

jquery.com 에 가면 우측 하단에 다운로드를 받을수 있는 버튼이 있습니다.
현재 버젼은 1.7.1 이라고 나오고 압축된 31KB의 자바스크립트가 체크가 되어 있습니다.
그걸 다운로드 받으면 됩니다.
 


사용자가 jQuery 코드를 가지고 개발을 할것이 아니고 그냥 사용할 목적이라면 압축된 버젼을 사용하면 됩니다.
즉 버젼/jquery.min.js 이라고 나오죠. min 이 압축된 것을 말합니다.
그러니 사용할때는 압축된 것, 용량이 적을 것을 사용해야 합니다.

다운로드를 클릭하면 코드가 나오고 이걸 복사한후 에디터에 붙여넣기 합니다. 이름은 똑같이 jquery-1.7.1.min.js 를 하고 저장을 합니다.


티스토리의 경우, HTML/CSS 편집에 파일업로드를 통해서 jQuery 코드를 업로드 합니다.
그런 다음 아래처럼 사용하면 됩니다.

<script type="text/javascript" src="./images/jquery-1.7.1.min.js"></script>

그럼 이제부터 jQuery 코드를 맘껏 사용하면 됩니다.

jQuery 코드의 삽입위치와 참고사항.

jQuery 도 자바스크립트 파일입니다. 자바스크립트 삽입위치를 </body> 바로 위에 넣기를 권장합니다.
특수한 경우를 제외하고 DOM이 모두 로드되고 자바스크립트가 로드되어야 페이지가 빨리 열립니다.
더군다나 자바스크립트가 여러개일 경우는 더욱 그렇습니다.

또 되도록이면 여러개의 자바스크립트도 하나의 자바스크립트로 합쳐서 사용하면 페이지 향상에 도움이 됩니다.
jQuery 코드를 </head> 위에 작성하고 jQuery 삽입코드를 </body>위에 삽입하면 안됩니다.

즉 jQuery 삽입코드를 먼저 삽입하고 jQuery 코드를 넣어야 합니다. 아래 예제를 보시죠.
 
.....
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
	//jquery 코드
</script>
</s_t3>
</body>
</html>

다른 자바스크립트도 </body>위에 삽입하기를 권장합니다.

DOM은 로드되었지만 페이지가 로드되기전에 jquery 사용하기

jquery 는 일반적으로 dom 의 document 개체에 바인드되는 사용자 정의 이벤트 처리기인 ready() 메서드를 제공합니다.
ready() 메서드는 단일 매개변수로 함수를 갖는데, 이 함수는 dom 이 탐색 및 조작될 준비가 되면 실행되는 자바스크립트 코드를 갖습니다.
다음 코드는 페이지가 완전이 로드 되진 않았지만 dom 이 준비되었을 경우 alert() 윈도우를 띄우는 예제입니다.
 
<head>
...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
	jquery(document).ready(function(){
		//DOM 이 로드되지 않았기에 ready 이벤트를 사용해야 한다.
		alert(jquery('p').text());
	});
</script>
</head>
<body>   
<s_t3>

이런한 ready() 이벤트는 자바스크립트가 페이지의 흐름상 가장 위쪽인 </head>위에 있을 경우에만 필요합니다. 
제가 위에서 언급했듯 </body>위에 작성할 경우는 ready()는 필요없습니다.
</body> 위에 작성할때는 아래처럼 그냥 사용하면 됩니다. 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
	alert(jquery('p').text());//DOM 이 로드되고 실행된다.
</script>
</s_t3>
</body>
</html>

참고사항.티스토리 플러그인 LiveRe.


티스토리의 소셜 댓글 LiveRe 를 사용하는 경우 자동으로 </head>위에  jQuery 1.4.2 의 코드가 삽입이 됩니다.


그러니 jQuery 플러그인이 필요한 경우가 아니라 간단한 jQuery 코드는 그냥 작성해도 됩니다. 
즉 티스토리 소셜 댓글 플러그인인 LiveRe 를 사용하는 경우 </body>위에 그냥 jQuery 코드를 넣어도 됩니다.