목차
$(document).ready() 예제 - 문서 로딩 완료 후, 토글 허용
$(document).ready() 정의
$(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(){
// 실행코드
}) ;
※ 거의 모든 제이쿼리 코드에서 사용되니 꼭 암기 !!
주소 복사
랜덤 이동