[Event] JQ - $(document).ready() 메서드 ★ - 문서로드완료후 실행 (= ready메서드 = 다큐먼트레디 메서드 = 도큐먼트레디 이벤트)

1. $(document).ready() 예제 - 문서 로딩 완료 후, 토글 허용
2. $(document).ready() 정의
3. $(document).ready() 구문

$(document).ready() 예제 - 문서 로딩 완료 후, 토글 허용

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    $("p").slideToggle();

  });

});

</script>

<p>홈짱닷컴 Homzzang.com</p>

<button>숨기기/보이기 토글</button>

 

결과보기

$(document).ready() 정의

 

에러 안 나도록, 웹문서 모두 랜더링 된 이후에 제이쿼리 실행.  
더 자세히 보기

 

---

 

1.

ready() 메서드는 현재 웹문서에서만 사용 가능하므로, 선택자 불필요.

즉, $(document)에 대해서만 사용 가능.

 

2.

INPUT요소에 텍스트 붙여넣기 후 붙여넣은 값을 JS변수에 담을 경우, <script defer> ...</script> 코드나 jQuery의 $(document).ready(function() {...}); 코드로는 정상작동 안 되는 경우 존재 함. (경험함. ㅡㅡ;) 이럴 때 DOMContentLoaded 이벤트 사용하면 정상작동 함. (이것 때문에 몇 시간 헤멤. ㅡㅡ;;)

 

$(document).ready() 구문

[정식] - 직관적 이해 위해 이 방법 추천

$(document).ready(function(){

   // 실행코드

});

 

---

[약식] - 정식코드에서 핑크색 부분 생략한 방식

$(function(){

   // 실행코드

});