jQuery의 문서 처리 프로그램 설명

본고의 실례는 jQuery의 문서 처리 프로그램을 설명하였다.여러분에게 참고하도록 공유하겠습니다. 구체적으로는 다음과 같습니다.
jQuery 문서 처리기
문서 프로세서란 jQuery에서 제공하는 $(document) 를 가리킨다.ready 이벤트, 이 이벤트는dom가 불러온 후에 터치되며, window.onlaod와 body.onload는 페이지가 완전히 불러온 후에 터치합니다.
jQuery 문서 처리기 소개
jQuery에서 DOM을 불러온 후의 처리 논리를 실현하려면 $(document) 를 사용하십시오.ready () 이벤트입니다.이 이벤트 함수를 "jQuery 문서 프로세서"라고 합니다.
페이지의 모든 위치, 심지어 외부 js 파일에서 다음과 같은 문장을 작성할 수 있습니다.

$(document).ready(function (){ alert("document.ready")});

페이지의 DOM이 로드되면 즉시 alert 문이 실행됩니다.만약 페이지에 큰 그림, js 파일 등 외부 자원을 불러올 필요가 있다면, jQuery의 문서 처리 프로그램은 그 전에 실행하고 window를 실행합니다.onload와boyd.onload는 모든 자원 파일을 불러온 후에 실행됩니다.
Ready () 함수일 때 jQuery "이벤트 함수"에서 제공하는 jQuery 대상 함수, 서명 비트ready (fn) 입니다.
fn은ready 이벤트가 발생할 때 실행되는 함수입니다.
jQuery 객체 함수이기 때문에 모든 jQuery 객체에서 호출할 수 있습니다.

$("body").ready(function (){ alert("body.ready")});

위의 문은 다음과 같습니다.

$(document).ready(function (){alert("body.ready")});

ready () 함수는 모든 jQuery 대상에 작용할 수 있지만, 사용할 때 대상이ready 이벤트가 있는지 반드시 주의해야 합니다.
$(fn)라는 간단한 형식도 사용할 수 있습니다.

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

jQuery의 모든 이벤트 대상과 같습니다. $(document).ready 이벤트는 나타나는 선후 순서에 따라 실행됩니다.
예를 들어 $(document) 를 두 번 호출할 수 있습니다.ready 이벤트:

$(document).ready(function (){alert("document.ready-1")});
$(document). ready(function (){alert("document.ready-2")});

DOM 로드가 완료되면 먼저 "document.ready-1"을 출력하고 "document.ready-2"를 출력합니다.레거시 사용:

Window.onload=function(){…..};

위의 코드는 window를 사용합니다.onload에서 원래 이벤트를 처리하고 새 이벤트를 연결합니다.
jQuery 문서 프로세서의 장점
스크립트가 페이지에 불러올 때 실행되어야 한다면, 대부분의 스크립트는 $(document) 에 놓을 수 있습니다.ready () 이벤트에서
예를 들어 jQuery 문서 처리 프로그램의 장점을 보기 전에 흔히 볼 수 있는 자바스크립트 프로그래밍 오류를 보십시오:dom가 불러오지 않으면 dom 모델을 바꿉니다.
전통적인 자바스크립트 프로그래밍에서페이지의 머리나 밑에 스크립트 모듈을 직접 삽입하고 다음 예와 같이 코드를 작성하는 경우도 있습니다.

  
  




  //               
  Document.getElementById("divMsg").innerHTML="<divstyle=\"border:solid 2px #FF0000\">       </div>";

이 예는 모든 브라우저에서 잘 작동하지만 위험이 있습니다.페이지를 불러올 때divMsg 용기에 새로운div 대상을 추가했습니다. 즉dom 대상을 추가했습니다. 네트워크 속도가 느려지거나 페이지가 불러오는 시간이 많이 걸리면 '작업 중단' 오류가 발생합니다.
이 오류는 테스트할 때 발견하기 어렵기 때문에 Google 홈페이지, 타오바오 등 유명 사이트에서도 발생한 적이 있습니다.
그래서 웹 개발을 하는 것은 진리를 기억해야 한다. 영원히dom를 불러올 때dom구조를 수정하지 말라는 것이다.
페이지를 불러올 때dom 구조를 수정해야 한다면, 원시적인 방법은 window를 통해서입니다.onload와 body.onload 이벤트 구현, 예를 들어 위의 오류 예는 다음과 같이 수정할 수 있습니다.

Window.onload=function()
{
  Document.getElementById("divMsg").innerHTML="<divstyle="\border:solid 2px #FF0000\">       </div>";
};

구체적인 실현 방식은 아직도 매우 많은데, window를 응용한다.onload와 body.onload는 이 두 이벤트가dom에서 불러오기 완료되고 모든 페이지 자원이 불러오기 완료된 후에 실행되기 때문에 가장 간단한 방법입니다.또는 "document.ready State"에 따라dom의 상태를 판단하고 "complete"일 경우 jQuery의 문서 처리 프로그램 $(document)을 실행합니다.ready 내부에서 사용하는 이 원리입니다.
더 많은 jquery 관련 내용에 관심이 있는 독자들은 본 사이트의 주제를 볼 수 있다.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
본고에서 서술한 것이 여러분의 jquery 프로그램 설계에 도움이 되었으면 합니다.