Javascript는 DOM 요소가 정의된 후에만 특정 작업을 수행할 수 있습니다. 이 문제는 "Javascript Execution Sequence" //www.VeVB.COm/article/44577.htm 문서에 자세히 설명되어 있습니다.
jQuery는 DOM 요소가 로드된 후 실행할 코드가 실행되는지 확인하기 위해 document.ready를 사용합니다. 예를 들어 "jQuery 기본 - 시작하는 방법" 기사에서 다음 jQuery 코드를 사용했습니다.
다음과 같이 코드 코드를 복사합니다.
<!-- $(document).ready(함수 ()
{
Alert("내 첫 번째 jQuery 코드입니다!");
});
// -->
이 코드의 의미는 Dom Tree가 로드되면 경고 메시지가 표시된다는 것입니다.
document.ready()는 DOM 요소 및 기타 페이지 요소(예: 이미지) 로드를 포함하여 페이지가 로드된 후에 onload() 메서드가 발생한다는 점을 제외하면 기존 메서드 <body onload="load()">와 유사합니다.
따라서 document.ready() 메서드를 사용할 때의 실행 속도는 onload() 메서드보다 빠릅니다.
참고할 마지막 두 가지 사항(jQuery 문서 참조):
1. <body> 요소의 onload 이벤트에 등록된 함수가 없는지 확인하세요. 그렇지 않으면 $(document).ready() 이벤트가 트리거되지 않을 수 있습니다. (
아래 예를 통해 이를 보여주려고 했지만 성공하지 못했기 때문에 이는 가능성일 뿐이라고 생각합니다. )
다음과 같이 코드 코드를 복사합니다.
<html>
<머리>
<title>나의 두 번째 jQuery</title>
<mce:script type="text/javascript" src="/js/jquery.js" mce_src="js/jquery.js"></mce:script>
<mce:스크립트 유형="텍스트/자바스크립트">
<!-- //다음은 jquery 등록 함수가 포함된 로드 함수입니다. $
function load(){ $("p").append("<b>안녕하세요</b>") }
//다음은 jQuery 코드이다.
$(문서).ready(함수 ()
{ $("p").append("내 첫 번째 jQuery 코드입니다!"
);
$("p").append("<b>안녕하세요</b>") });
</mce:스크립트>
</head>
<body onload="로드()">
<h2>jQuery 간단한 예 2</h2>
<p>하고 싶은 말: </p>
</body>
</html>
2. $(document).ready() 이벤트는 동일한 페이지에서 무제한으로 사용할 수 있습니다. 등록된 기능은 (코드 내에서) 순서대로 실행됩니다.