jQuery - $(document).ready() 대신 $()를 사용하자
- 프로그래밍/제이쿼리
- 2021. 5. 13.
jQuery를 사용하게 되면 바로 학습하게 되는 Event가 바로 $(document). ready()입니다. 왜 jQuery 배우게 되면 이 Event를 알게 되는 걸까요? 오늘은 jQuery의 대표 기능 중 하나인 $(document). ready() Event를 알아보도록 하겠습니다.
문법
.ready(handler).ready()는 DOM(Document Object Model)이 완전히 불러와지면 실행되는 Event입니다. 일반적으로 브라우저가 HTML을 보여주기 위해서는 먼저 문서 구조를 만들고 만들어진 문서 구조 위에 디자인을 입히는 형식을 취합니다. 이 과정에서 디자인이 입혀지지 않은 상태로 문서 구조가 만들어진 시점에 실행되는 Event가 바로. ready()입니다.
대부분의 브라우저에서는 DOMContentLoaded라는 .ready()와 비슷한 Event를 사용할 수 있습니다. 다만 여기에는 다른 점이 있습니다. 첫 번째. ready() Evnet는 DOMContentLoaded보다 먼저 실행됩니다. 두 번째 DOMContentLoaded는 Event가 한 번만 발생하며. ready() Evnet는 계속 발생합니다.
사용법
$(document).ready(function(){
// 실행할 기능을 정의해주세요.
});일반적으로 사용되는 방법은 위에서 제시한 예제 코드와 같습니다. .ready()를 사용하는 대표적인 코드들은 아래와 같습니다.
$(handler)
$(document).ready(handler)
$("document").ready(handler)jQuery 3.0 버전 이후부터는 첫 번째에 해당하는 구문만 사용하는 것을 권장드립니다. .ready() Event는 1.8 버전에서는 deprecated 되었으며 3.0에서는 지원하지 않기 때문입니다.
$(documet).ready() 대신 $()를 사용하자
$(function(){
// 실행할 기능을 정의해주세요.
});
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>$() 예제</title>
<style>
p {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
$(function () {
$("p").text("DOM이 완성되었습니다. 코드를 작성해주세요!");
});
</script>
</head>
<body>
<p>정의되지 않은 내용</p>
</body>
</html>DOM이 완성되면 화면에 정의된 메시지를 보여줍니다.
'프로그래밍 > 제이쿼리' 카테고리의 다른 글
| jQuery - 속성을 판별하는 hasAttr() 함수는 없다 (0) | 2023.06.19 |
|---|---|
| jQuery - click()이 동작하지 않으면 on()을 사용해보자 (1) | 2022.02.25 |
| jQuery - CDN을 이용해서 제이쿼리를 사용해볼까? (0) | 2022.02.13 |
| jQuery - 데이터를 설정하는 data() 원리와 사용 방법을 알아보자 (1) | 2021.12.20 |
| jQuery - 제이쿼리란? (5) | 2021.03.30 |