안녕하세요, 여러분! 오늘은 인기있는 JavaScript 라이브러리인 jQuery에서 자주 사용되는 $(document).ready() 함수의 사용법과 정의에 대해 알아보겠습니다. 이 함수는 웹 페이지가 로드되고 나서 원하는 스크립트를 실행할 수 있게 도와주는 역할을 합니다. 그럼, 시작해볼까요?
정의
$(document).ready() 함수는 웹 페이지의 모든 HTML 요소가 브라우저에서 완전히 로드된 후에 실행되어야 할 JavaScript 코드를 정의하는 데 사용됩니다. 이 함수는 페이지 로딩이 완료되면 콜백 함수를 실행하여 웹 페이지의 동작이나 스타일을 변경할 수 있게 해줍니다.
사용법
$(document).ready(function() {
// 여기에 원하는 코드를 작성합니다.
});위와 같은 형식으로 $(document).ready() 함수를 사용합니다. 괄호 안에 있는 함수는 콜백 함수로, 웹 페이지가 완전히 로드된 후에 실행되는 코드를 포함합니다.
예제
다음은 $(document).ready() 함수를 사용한 간단한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>jQuery $(document).ready() 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#exampleButton").click(function() {
alert("버튼이 클릭되었습니다!");
});
});
</script>
</head>
<body>
<button id="exampleButton">클릭하세요!</button>
</body>
</html>위 예제에서는, 웹 페이지가 완전히 로드된 후에 exampleButton이라는 ID를 가진 버튼이 클릭될 때 알림 창이 뜨도록 jQuery를 사용했습니다. 이렇게 $(document).ready() 함수를 사용하면 웹 페이지의 동작이나 스타일을 쉽게 제어할 수 있습니다.
결론
$(document).ready() 함수는 웹 페이지가 완전히 로드된 후에 실행되어야 할 JavaScript 코드를 정의하는 데 사용되는 유용한 jQuery 함수입니다. 이를 통해 웹 페이지의 동작이나 스타일을 로드 완료 시점에 변경할 수 있습니다. 이제 여러분도 jQuery를 활용하여 웹 페이지를 동적으로 만들어보세요!
'개발 > js' 카테고리의 다른 글
| [vue.js] watch와 computed의 차이점 (0) | 2023.04.16 |
|---|---|
| 즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression) (0) | 2023.04.15 |
| JavaScript 에서 == 와 ===의 차이점 (0) | 2023.04.07 |
| 스크립트릿(scriptlet) (0) | 2023.04.05 |
| npm init과 npm install (0) | 2023.04.05 |