jQuery 구문
jQuery를 사용하면 HTML 요소를 선택(쿼리)하고 "작업"을 수행합니다.
jQuery 구문
jQuery 구문은 HTML 요소 를 선택 하고 요소에 대한 일부 작업 을 수행 하기 위해 맞춤 제작되었습니다 .
기본 구문은 $( 선택기 )입니다. 액션 ()
- jQuery를 정의/액세스하기 위한 $ 기호
- HTML 요소 "쿼리(또는 찾기)"를 위한 ( 선택기 )
- 요소에 대해 수행할 jQuery 작업 ()
예:
$(this).hide() - 현재 요소를 숨깁니다.
$("p").hide() - 모든 <p> 요소를 숨깁니다.
$(".test").hide() - class="test"인 모든 요소를 숨깁니다.
$("#test").hide() - id="test"인 요소를 숨깁니다.
CSS 선택기에 익숙합니까?
jQuery는 CSS 구문을 사용하여 요소를 선택합니다. 이 자습서의 다음 장에서 선택기 구문에 대해 자세히 알아볼 것입니다.
팁: CSS를 모르는 경우 CSS 자습서 를 읽을 수 있습니다 .
문서 준비 이벤트
예제의 모든 jQuery 메서드가 문서 준비 이벤트 안에 있다는 것을 눈치채셨을 것입니다.
$(document).ready(function(){
// jQuery methods go here...
});
이는 문서 로드가 완료(준비)되기 전에 jQuery 코드가 실행되는 것을 방지하기 위한 것입니다.
작업하기 전에 문서가 완전히 로드되고 준비될 때까지 기다리는 것이 좋습니다. 이것은 또한 헤드 섹션에서 문서의 본문 앞에 JavaScript 코드를 가질 수 있도록 합니다.
다음은 문서가 완전히 로드되기 전에 메서드가 실행되는 경우 실패할 수 있는 작업의 몇 가지 예입니다.
- 아직 생성되지 않은 요소를 숨기려고 합니다.
- 아직 로드되지 않은 이미지의 크기를 가져오려고 합니다.
팁: jQuery 팀은 문서 준비 이벤트에 대해 더 짧은 메서드도 만들었습니다.
$(function(){
// jQuery methods go here...
});
원하는 구문을 사용합니다. 문서 준비 이벤트는 코드를 읽을 때 이해가 더 쉽다고 생각합니다.