jQuery_jquery에서 $(document).ready() 사용 소개

jQuery에 대해 가장 먼저 배워야 할 점은 페이지에서 이벤트를 실행하려면 $(document).ready()에서 이벤트를 호출해야 한다는 것입니다. $(document).ready()에 포함된 모든 요소나 이벤트는 DOM 로드가 완료된 후 페이지 콘텐츠가 로드되기 전에 즉시 로드됩니다.
페이지에서 이벤트가 작동하도록 하려면 $(document).ready() 함수 내에서 해당 이벤트를 호출해야 합니다. DOM이 로드되자마자 페이지 콘텐츠가 로드되기 전에 로드됩니다. 🎜>

코드 복사 코드는 다음과 같습니다.

$(document).ready(function() {
// 모든 jQuery 기능을 여기에 넣으세요.
})

$(document).ready( )가 다른 것보다 낫습니다. 더 많은 장점이 있습니다. 첫째, HTML에 "행동" 마크업을 넣을 필요가 없습니다. 또한 JavaScript/jQuery를 별도의 js 파일에 작성할 수 있습니다. 이는 유지 관리가 쉽고 js와 페이지 콘텐츠의 격리를 보장합니다. 웹을 탐색할 때 좀 더 주의를 기울이면 이런 상황을 자주 볼 수 있습니다. 연결 위에 마우스를 올리면 상태 표시줄에 "javascript:void()"와 같은 메시지가 표시되는 경우가 있습니다. 이벤트를 태그 안에 직접 넣으면 이런 일이 발생합니다.

기존 JavaScript를 사용하는 일부 페이지에서는 태그에 'onload' 속성이 표시됩니다. 이로 인해 문제가 발생합니다. 본문에 하나의 함수 이벤트만 있도록 제한됩니다. 예, 콘텐츠에 "행동" 태그를 추가하기 때문입니다. 이 문제를 해결하려면 단일 js 파일에서 "addLoadEvent" 함수를 생성하여 여러 함수를 본문에 로드하는 방법을 설명하는 Jeremy Keith의 책: DOM Scripting을 참조하세요. 그러나 이 방법을 사용하려면 간단한 문제를 해결하기 위해 상당한 양의 코드를 작성해야 합니다. 또한 이 방법은 창이 로드될 때 이러한 이벤트를 트리거하므로 $(document).ready() 의 이점을 다시 한 번 상기시켜 줍니다.

$(document).ready()를 사용하면 창이 로드되기 전에 이벤트를 로드하거나 실행할 수 있습니다. 이 메서드로 작성하는 모든 항목은 가능한 가장 빠른 순간에 로드되거나 트리거될 준비가 되어 있습니다. 즉, DOM이 브라우저에 등록되면 $(document).ready()의 코드가 실행되기 시작합니다. 이렇게 하면 사용자가 페이지 요소를 처음 볼 때 특수 효과가 실행될 수 있습니다.