jQuery => 문서 준비 이벤트

문서 준비는 무엇이며 어떻게 사용해야합니까?

jQuery 코드는 종종 jQuery(function($) { ... }); DOM로드가 완료된 후에 만 실행됩니다.

<script type="text/javascript"> 
  jQuery(function($) {
    // this will set the div's text to "Hello".
    $("#myDiv").text("Hello");
  });
</script>

<div id="myDiv">Text</div>

jQuery (및 JavaScript는 일반적으로) 페이지에 렌더링되지 않은 DOM 요소를 선택할 수 없기 때문에 이것은 중요합니다.

<script type="text/javascript">
  // no element with id="myDiv" exists at this point, so $("#myDiv") is an
  // empty selection, and this will have no effect
  $("#myDiv").text("Hello");
</script>

<div id="myDiv">Text</div>

사용자 정의 처리기를 .ready() 메소드에 전달하여 jQuery 네임 스페이스의 별칭을 지정할 수 있습니다. 이것은 다른 JS 라이브러리가 jQuery 와 동일한 단축 된 $ 별칭을 사용하여 충돌을 일으키는 경우에 유용합니다. 이 충돌을 피하려면 $.noConflict(); 호출해야합니다 $.noConflict(); - 이렇게하면 짧은 $ 별칭 대신 기본 jQuery 네임 스페이스 만 사용해야합니다.
.ready() 핸들러에 사용자 정의 핸들러를 전달하면 jQuery 를 사용할 별칭 이름을 선택할 수 있습니다.

$.noConflict();

jQuery( document ).ready(function( $ ) {
   // Here we can use '$' as jQuery alias without it conflicting with other 
   // libraries that use the same namespace 
   $('body').append('<div>Hello</div>')
});

jQuery( document ).ready(function( jq ) {
   // Here we use a custom jQuery alias 'jq' 
   jq('body').append('<div>Hello</div>')
});

단순히 페이지 하단에 jQuery 코드를두기보다는 $(document).ready 함수를 사용하면 모든 HTML 요소가 렌더링되고 DOM (Document Object Model) 전체가 JavaScript 코드를 실행할 준비가되었습니다.

jQuery 2.2.3 및 이전 버전

이것들은 모두 동일합니다. 문서가 준비되면 블록 안의 코드가 실행됩니다.

$(function() {
  // code
});

$().ready(function() {
  // code
});

$(document).ready(function() {
  // code
});

다음은 동일한 결과를 생성하는 $ 대신 jQuery 키워드를 사용하는 버전입니다.

jQuery(function() {
  // code
});

jQuery 3.0

표기법

jQuery 3.0부터이 양식 만 권장됩니다.

jQuery(function($) {
  // Run when document is ready
  // $ (first argument) will be internal reference to jQuery
  // Never rely on $ being a reference to jQuery in the global namespace
});

다른 모든 문서 준비 핸들러 는 jQuery 3.0에서 더 이상 사용되지 않습니다.

비동기식

jQuery 3.0 부터는 준비 처리기 가 항상 비동기 적으로 호출 됩니다. 즉, 아래 코드에서 문서가 실행 시점에 준비되었는지 여부에 관계없이 '외부 처리기'로그가 항상 먼저 표시됩니다.

$(function() {
  console.log("inside handler");
});
console.log("outside handler");

> 외부 처리자
> 내부 처리기

차이점은 $ (document) .ready ()와 $ (window) .load ()입니다.

$(window).load() 는 jQuery 버전 1.8에서 사용되지 않으며 jQuery 3.0 에서 완전히 제거되었습니다 . 더 이상 사용하지 않아야합니다. 이 이벤트 에 대한 jQuery 페이지에 비추천 이유가 명시되어 있습니다.

이미지와 함께 사용될 때로드 이벤트에 대한주의 사항
개발자가 .load() 바로 가기를 사용하여 해결하려는 공통적 인 과제는 이미지 (또는 이미지 모음)가 완전히로드되었을 때 함수를 실행하는 것입니다. 주목해야 할 몇 가지 알려진주의 사항이 있습니다. 이것들은:
브라우저 간 일관되고 안정적으로 작동하지 않습니다.
이미지 src 가 이전과 같은 src 로 설정된 경우 WebKit에서 올바르게 실행되지 않습니다.
DOM 트리를 올바르게 버블 링하지 않습니다.
브라우저의 캐시에 이미있는 이미지의 경우 중지 될 수 있습니다.

여전히 load() 를 사용하기 원한다면 아래에 문서화되어 있습니다 :

$(document).ready() 는 전체 DOM이 사용 가능할 때까지 기다립니다. HTML의 모든 요소가 파싱되어 문서에 있습니다. 그러나 이미지와 같은 리소스가이 시점에서 완전히로드되지 않았을 수 있습니다. 모든 리소스가로드 될 때까지 기다리는 것이 중요하다면 $(window).load() 그리고이 이벤트의 중요한 제한 사항을 알고 있으므로 대신 다음을 사용할 수 있습니다.

$(document).ready(function() {
  console.log($("#my_large_image").height()); // may be 0 because the image isn't available
});

$(window).load(function() {
  console.log($("#my_large_image").height()); // will be correct
});

ready () 내부에서 이벤트 연결 및 DOM 조작

$(document).ready() 사용 예 :

이벤트 핸들러 연결
jQuery 이벤트 핸들러 첨부

$(document).ready(function() {
  $("button").click(function() {
    // Code for the click function
  });
});

페이지 구조가 생성 된 후 jQuery 코드를 실행한다.

jQuery(function($) {
// set the value of an element.
   $("#myElement").val("Hello");
});

로드 된 DOM 구조 조작
예 : 페이지를 처음으로로드 할 때 div 숨기고 버튼의 클릭 이벤트에 표시

$(document).ready(function() {
  $("#toggleDiv").hide();
  $("button").click(function() {
    $("#toggleDiv").show();
  });
});

jQuery (fn)와 이전 코드의 차이점

문서 준비 이벤트를 사용하면 최대 300 밀리 초의 지연된 실행으로 작은 성능 단점 이 발생할 수 있습니다. 때로는 닫는 </body> 태그 바로 전에 코드를 실행하여 동일한 동작을 얻을 수 있습니다.

<body>
  <span id="greeting"></span> world!
  <script>
    $("#greeting").text("Hello");
  </script>
</body>

유사한 동작을 생성하지만 문서 준비 이벤트 트리거를 기다리지 않고보다 빨리 수행 할 수 있습니다.

<head>
  <script>
    jQuery(function($) {
      $("#greeting").text("Hello");
    });
  </script>
</head>
<body>
  <span id="greeting"></span> world!
</body>

첫 번째 예는 닫는 </body> 태그 바로 전에 그리고 특히 span 태그 다음에 스크립트의 페이지 및 배치에 대한 지식을 사용한다는 사실에 중점을 둡니다.

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

jQuery
문서 준비 이벤트

수색…