jQuery의 기초

$(document).ready(function() {

(이곳에 시연하고자 하는 jquery 코드가 들어감.)

});

 

위의 코드가 jQuery를 시작하는 기본 코드가 됩니다. 

Javascript 에서의 window.onload = function() { } ;

부분과 비슷합니다만, 다른점은 자바스크립트의 onload가 모든 이미지들의 로딩이 마쳐야 시연되는 반면에, jQuery는 이미지가 로딩되지 않아도 시연이 됩니다.

 

페이지가 전부 다운로드 된다음에 실행

$(window).load(function() {
     해당 기능
});

HTML이 준비가 되면 실행

$(document).ready(function() {
     해당 기능
});

위 코드는  (document).ready를 생략해

$(function() {
     해당 기능
});

로도 사용가능합니다.

 

밑에 그림은 jQuery를 사용하기 위한 기초적인 형식입니다.


실제로 우리가 사용하는 코드는 윗그림의 빨강색 네모안에 들어가게 됩니다.
코드를 쓰시는 분에 따라서는 이렇게 눈에 잘보이게 정리하시지 않고 한줄에 몰아서 쓰시기도 합니다.
(잘 보시면 알겠지만 사실은 명령코드 하나입니다.)


빨강네모안에 들어갈 우리가 사용하는 코드는 밑에 그림과 같은 형식을 가집니다.

위의 코드에서 붉은 색 부분을 선택자(Selector) 라고 합니다. 즉, 구현할 대상에 되는 녀석을 선택하는 것이죠. 사용 방법은 $() 의 괄호안에 대상이 되는 녀석을 선택하는것입니다. jQuery가 좋은것이 선택자 개념이 CSS와 거의 흡사하기 때문에 쉽게 사용할수 있습니다.