jQuery | $(document).ready() 함수

$(document).ready() 함수

문서 객체 모델(DOM) 이 로드되고 준비되었을 때  코드를 실행하는 jQuery 함수

 

최신 브라우저에서는 대부분의 경우 이 함수를 사용하지 않아도 동작한다.

 

$(document).ready() 의 축약형인 $(function() {...}) 을 사용할 수 있다.

 

 

예를 들어 

 

jQuery 관련 포스트 중 신입 지원자를 찾는 jQuery 를 예로 들어보자

 

2023.05.15 - [jQuery] - jQuery | 신입 배경 변경 및 개수 추출

jQuery | 신입 배경 변경 및 개수 추출

 

 

 

1 ) $(document).ready() 를 쓴경우

 

$(document).ready(function() {
  // careerIcon 클래스를 가진 td 요소들 중에 신입인 경우 배경색을 바꾸고 개수를 세는 코드
  var numNewcomers = $("td.tdSummary .careerIcon span.newcomer").each(function() {
    $(this).closest("tr").css("background-color", "orange"); // 배경색 변경
  }).length;
  
  console.log("신입 지원자는 총 " + numNewcomers + "명 입니다"); // 신입인 경우의 개수 출력
});

 

 

 

2) $(function() {...}) 을 사용한 경우 

 

$(function() {
  var numNewcomers = $("td.tdSummary .careerIcon span.newcomer").each(function() {
    $(this).closest("tr").css("background-color", "orange");
  }).length;
  console.log("신입 지원자는 총 " + numNewcomers + "명 입니다");
});

 

 

3) 제일 간단하게 작성한 경우

var numNewcomers = $("td.tdSummary .careerIcon span.newcomer").each(function() {
  $(this).closest("tr").css("background-color", "orange"); 
}).length;
console.log("신입 지원자는 총 " + numNewcomers + "명 입니다");

 

 

다음과 같이 작성하면 HTML 문서의 모든 DOM 요소가 로드되기 전에 실행될 수 있기 때문에,

이전 코드보다 조금 더 빠르게실행될 수 있다.