반응형
SMALL
📌 .ready()란?
jQuery.ready() 메서드는 DOM(Document Object Model)이 로드된 후 실행되는 이벤트 핸들러입니다.
즉, 웹 페이지의 HTML 요소들이 준비된 후 JavaScript 코드를 실행할 수 있도록 도와줍니다.
💡 왜 중요할까?
- HTML 요소가 아직 생성되지 않은 상태에서 JavaScript를 실행하면 오류가 발생할 수 있음
- .ready()를 사용하면 HTML 요소가 모두 로드된 후 실행되므로 안정적인 코드 실행 가능
✅ 기본 문법
$(document).ready(function() {
// 실행할 코드
});또는 단축 문법
$(function() {
// 실행할 코드
});📌 .ready() vs $(window).load() 차이점
메서드실행 시점실행 대상
| .ready() | DOM 트리가 준비되면 실행 | HTML 요소만 로드됨 (이미지, 동영상 제외) |
| $(window).load() | 페이지의 모든 요소(이미지 포함)가 로드되면 실행 | HTML + 이미지, 스타일시트, 프레임 등 모두 포함 |
✅ 비교 예제
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>ready vs load</title>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
</head>
<body>
<img src="large-image.jpg" alt="큰 이미지">
<p>이 페이지에는 이미지가 포함되어 있습니다.</p>
<script>
// DOM이 준비되면 실행됨 (이미지 로드 기다리지 않음)
$(document).ready(function() {
console.log("📌 DOM 로드 완료");
});
// 페이지의 모든 요소(이미지 포함)가 로드된 후 실행됨
$(window).on("load", function() {
console.log("✅ 전체 페이지 로드 완료");
});
</script>
</body>
</html>✅ 설명: .ready()는 HTML 요소가 준비된 후 실행되지만, .load()는 이미지 등 모든 요소가 로드된 후 실행됩니다.
📌 .ready() 실용 예제 10가지
1️⃣ 특정 요소 스타일 변경
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>ready demo</title>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
</head>
<body>
<p>Hello, world!</p>
<script>
$(document).ready(function() {
$("p").css("color", "blue");
});
</script>
</body>
</html>✅ 설명: DOM이 준비되면 <p> 태그의 글자색을 파란색으로 변경합니다.
2️⃣ 버튼 클릭 이벤트 등록
<button id="btn">클릭하세요</button>
<p id="msg"></p>
<script>
$(document).ready(function() {
$("#btn").click(function() {
$("#msg").text("버튼이 클릭되었습니다!");
});
});
</script>✅ 설명: 버튼 클릭 시 <p> 태그의 텍스트를 변경합니다.
3️⃣ 입력 필드 자동 포커스
<input type="text" id="name" placeholder="이름 입력">
<script>
$(document).ready(function() {
$("#name").focus();
});
</script>✅ 설명: 페이지 로드 후 입력 필드에 자동으로 포커스를 맞춥니다.
4️⃣ 모든 이미지가 로드된 후 스타일 적용
<img src="image.jpg" alt="샘플 이미지">
<script>
$(window).on("load", function() {
$("img").css("border", "2px solid red");
});
</script>✅ 설명: 모든 이미지가 로드된 후 빨간색 테두리를 추가합니다.
5️⃣ 특정 요소 숨기기
<p id="text">이 텍스트는 숨겨집니다.</p>
<script>
$(document).ready(function() {
$("#text").hide();
});
</script>✅ 설명: 페이지가 로드되면 특정 요소를 숨깁니다.
6️⃣ 특정 클래스가 있는 요소 찾기
<ul>
<li>Apple</li>
<li class="selected">Banana</li>
</ul>
<script>
$(document).ready(function() {
$("li.selected").css("background", "yellow");
});
</script>✅ 설명: .selected 클래스를 가진 <li> 요소의 배경을 노란색으로 변경합니다.
7️⃣ 키보드 입력 감지
<input type="text" id="input">
<p id="output"></p>
<script>
$(document).ready(function() {
$("#input").on("keyup", function() {
$("#output").text($(this).val());
});
});
</script>✅ 설명: 입력된 값을 실시간으로 <p> 태그에 표시합니다.
📌 마무리 🎯
- .ready()는 DOM이 준비되면 실행되므로 안정적인 코드 실행이 가능
- .load()는 모든 요소(이미지 포함) 로드 후 실행됨
- .ready()를 활용하여 스타일 적용, 이벤트 등록, 입력 처리 등 다양한 기능 구현 가능
🚀 이제 .ready()를 활용하여 동적인 웹 페이지를 만들어 보세요!
반응형
LIST