[Front end] jQuery 문법

 

jQuery를 사용하면 아주 간편하게 HTML 요소를 선택하고, 그렇게 선택된 요소에 손쉽게 특정 동작을 설정할 수 있다.

$(selector).함수();

달러($) 기호는 jQuery를 의미하고, jQuery에 접근할 수 있게 해주는 식별자이다. 선택자를 이용하여 원하는 HTML 요소를 선택하고, 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정한다.

 

$() 함수

$() 함수는 선택된 HTML 요소를 jQuery에서 이용할 수 있는 형태로 생성해 주는 역할을 한다. $() 함수의 인수로는 HTML 태그 이름뿐만 아니라, CSS 선택자를 전달하여 특정 HTML 요소를 선택할 수 있다.

이러한 $() 함수를 통해 생성된 요소를 jQuery 객체(jQuery object)라고 한다.  jQuery는 이렇게 생성된 jQuery 객체의 메서드를 사용하여 여러 동작을 설정할 수 있다.

 

Document 객체의 ready()

자바스크립트 코드는 웹 브라우저가 문서의 모든 요소를 로드한 뒤에 실행되어야 한다. Window 객체의 onload() 메서드를 이용하여 문서가 모두 로드된 뒤에 코드가 실행되도록 설정한다.

window.onload = function() {
    //자바스크립트 코드
};

$(document).ready(function() {
    //jQuery 코드
});

$(function() {
    //jQuery 코드
});

$(document).ready(function() {
    //문서가 전부 로드되었을 때 실행된다.
});

$(window).load(function() {
    //모든 창이 모드 로드되었을 때 실행된다.
});