목차
1. $('document').ready(function){} 란?
2. 예제 및 실행화면
1. $('document').ready(function){} 란?
결론부터 말씀드리자면 'html문서의 로딩이 다 끝나면' 을 의미합니다.
문장을 해석해보면 'document'라는 객체의 준비가 끝나면 즉, 로드가 완료되면 함수를 실행한다' 입니다.
여기서 document는 하나의 html 파일을 나타내는 트리의 루트 노드 객체라고 생각하시면 편할 것 같습니다.
그렇다면 이 코드는 왜 있는것일까요? 예제를 통해 알아보면 이해가 쉽습니다.
2. 예제 및 실행화면
2.1) 예제 1
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>$('document').ready(function(){})</title>
</head>
<body>
<script>
$('p').click(function(){
$(this).hide();
})
</script>
<p>
$('document').ready(function(){})을 쓰는 이유를 알고싶다면 클릭하세요!
</p>
</body>
</html>
|
위의 예제는 p 태그를 클릭할 시 this 즉, 해당 p 태그를 hide 시키는 것입니다.
2.2) 실행화면 1
실행 결과, 클릭을 해도 <p>태그의 내용이 사라지질 않습니다.
이유는 컴파일과 관련이 있습니다.
컴파일은 일반적으로 위에서 아래방향으로 이루어지는데, <p>태그가 나오기 전에 script문이 호출되었기 때문에 결과적으로 JQuery문법이 p태그를 찾지 못했고, 쿼리에 대한 함수 또한 적용시키지 못했습니다.
그렇다면 script문을 아래로 옮겨보겠습니다.
2.3) 예제 2
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>$('document').ready(function(){})</title>
</head>
<body>
<p>
$('document').ready(function(){})을 쓰는 이유를 알고싶다면 클릭하세요!
</p>
<script>
$('p').click(function(){
$(this).hide();
})
</script>
</body>
</html>
|
script문이 </body> 바로 위에 위치합니다.
2.4) 실행화면 2
<p> 태그에 해당하는 부분을 클릭하니 오른쪽 사진과 같이 텍스트가 사라진 것을 볼 수 있습니다.
예제 1과 다르게 script문이 <p> 태그 아래 있기때문에 JQuery 문법이 p라는 태그를 찾을 수 있고 함수를 적용시킬 수 있습니다.
HTML은 기본적으로 위에서 아래로 컴파일이 됩니다.
컴파일러가 script문을 만날 경우 로드되던 HTML 작업이 중단되고 script문을 처리합니다.
만약 script문이 길다면 페이지 로드가 중단되는 시간이 길어지고, 사용자가 웹페이지를 기다리는 시간이 길어집니다.
예를들어 눈에보이는 정보가 HTML이고 기능을 입히는 것이 script라고 한다면
1) 사용자에게 보이는 HTML 로드 -> script문 로드
2) 사용자에게 안보이는 script문 로드 -> 사용자에게 보이는 HTML 로드
이 둘 중 1번 상황이 웹 정보를 사용자가 먼저 파악할 수 있기 때문에 효율적이라는 것을 알 수 있습니다.
이 외에도 여러가지 이유때문에 script문을 </body>태그 바로 위에 위치시키는 것을 선호한다고 합니다.
하지만 예제 1처럼 script문이 위에 위치하더라고 페이지 로드가 끝난 후 script문을 실행시키도록 하는 코드가 있습니다. 그게 바로 오늘의 주제인 $('document').ready(function){}입니다.
2.5) 예제 3
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>$('document').ready(function(){})</title>
</head>
<body>
<script>
$('document').ready(function(){
$('p').click(function(){
$(this).hide();
})
})
</script>
<p>
$('document').ready(function(){})을 쓰는 이유를 알고싶다면 클릭하세요!
</p>
</body>
</html>
|
작성했었던 script문을 $('document').ready(function){} 코드 안에 넣어줬습니다.
이로써 위의 script문은 HTML 코드에 대한 페이지 로드가 끝난 후 실행이 되고, <p> 태그를 찾아 함수를 적용시킬 수 있습니다.
2.6) 실행화면 3
실행화면_2와 동일한 결과를 출력합니다.
'프론트엔드 > Jquery' 카테고리의 다른 글
| [JQuery] <li> 클릭 이벤트 - css와 JQuery 기본 문법 사용 (0) | 2019.07.24 |
|---|---|
| [JQuery] click 이벤트 사용하기 (0) | 2019.07.22 |
| [JQuery] JQuery의 정의, 사용법, CDN, 문법, 예제 (0) | 2019.07.19 |