jQuery - $(document)

$(document)는 jQuery를 사용하여 document 객체를 선택하는 것을 의미합니다. 이렇게 선택한 document 객체에 ready 메소드를 호출하고, 인자로는 실행할 함수를 전달합니다. 이 함수 안에는 웹 페이지가 로드되었을 때 실행할 코드를 작성합니다.

$(document).ready(function() {
	// 실행할 코드
});

시작 시에 어떠한 이벤트를 발생시키려 하거나 버튼 클릭 등의 이벤트를 구현할 때 function 안에 있는 것들을 불러온다.

이렇게 $(document).ready를 사용하면 웹 페이지가 완전히 로드된 후에 코드가 실행되므로, 웹 페이지의 모든 요소들에 안전하게 접근할 수 있습니다. 이는 문서 구조가 완전히 생성된 상태에서 코드를 실행하기 위한 방법입니다.

$(document) 메소드

click()

요소를 클릭했을 때 실행할 코드를 정의

$(document).on("click", "#myButton", function() {
  // 클릭 이벤트 발생 시 실행할 코드
});

"#myButton"은 클릭할 요소의 선택자(selector)입니다. 해당 요소를 클릭하면 내부의 함수가 실행됩니다.

change()

입력 필드의 값이 변경되었을 떄 실행할 코드를 정의

$(document).on("change", "#myInput", function() {
  // 값이 변경되었을 때 실행할 코드
});

#myInput"은 값이 변경될 입력 필드의 선택자입니다. 값이 변경되면 내부의 함수가 실행됩니다.

submit()

form이 제출되었을 떄 실행할 코드를 정의

$(document).on("submit", "#myForm", function() {
  // 폼이 제출되었을 때 실행할 코드
});

#myForm"은 값이 변경될 입력 필드의 선택자입니다. 값이 변경되면 내부의 함수가 실행됩니다.

scroll()

문서가 스크롤되었을 때 실행할 코드를 정의

$(document).on("scroll", function() {
  // 스크롤 이벤트 발생 시 실행할 코드
});

문서가 스크롤되면 내부의 함수가 실행됩니다.