jQuery를 사용하여, HTML 요소를 선택(query)하고 “작업(actions)“을 수행합니다.

jQuery 구문은 HTML 요소를 선택하고 요소에 대한 일부 작업을 수행하기 위해 맞춤 제작되었습니다.

기본 구문은 $(selector).action()입니다.

• jQuery를 정의하고 액세스 하기 위한 $ 기호
• HTML 요소를 “쿼리(즉, 찾기)“하는 (selector)
• 요소에 대해 실행될 jQuery action()

예제:

$(this).hide() - 현재 요소를 숨깁니다.

$("p").hide() - 모든 <p> 요소를 숨깁니다.

$(".test").hide() - class=“test”를 가진 모든 요소를 숨깁니다.

$("#test").hide() - id=“test”를 가진 요소를 숨깁니다.

jQuery는 요소를 선택하기 위해 CSS Syntax를 사용합니다.

예제의 모든 jQuery 메서드가 document ready event내에 있음을 알 수 있습니다.

$(document).ready(function() {
 
  // jQuery methods go here... 
 
});

이것은 문서가 로딩 완료(준비)되기 전에, jQuery 코드가 실행되는 것을 방지하기 위한 것입니다.

문서로 작업하기 전에, 문서가 완전히 로딩되어 준비될 때까지 기다리는 것이 좋습니다.
또한 문서의 body가 시작되는 이전의 head 섹션에 JavaScript 코드를 작성하는 것을 허용합니다.

다음은 문서가 완전히 로딩되기 이전에 메서드가 실행될 경우, 실패할 수 있는 몇 가지 작업(actions)의 사례입니다.

• 아직 생성되지 않은 요소를 숨기려는 시도
• 아직 로딩되지 않은 이미지의 크기를 가져오려는 시도

Tip: jQuery 팀은 document ready event를 위한 더 짧은 메서드도 만들었습니다.

$(function() {
 
  // jQuery methods go here...
 
});

선호하는 구문을 사용하십시오. document ready event는 코드를 읽을 때 이해하기 더 쉽다고 생각합니다.