jQuery.ready() 함수 인스턴스 사용법에 대한 자세한 설명

ready() 함수는 현재 문서 구조가 로드된 후 즉시 지정된 함수를 실행하는 데 사용됩니다.

이 함수는 window.onload 이벤트와 동일합니다.

이 함수를 여러 번 호출하여 여러 함수를 바인딩할 수 있습니다. jQuery는 DOM 문서 구조가 로드된 직후 바인딩 순서에 따라 이러한 함수를 실행합니다.

참고: Ready() 기능과 요소의 onload 이벤트 바인딩 기능은 서로 완벽하게 호환되지 않으므로 동일한 페이지에서 동시에 사용하지 마세요. 로드를 사용해야 하는 경우 창이나 더 지정된 항목(예: 그림)에 로드 이벤트 핸들러를 추가하기 위해 jQuery의 Ready() 및 load()를 사용하지 마세요. 이 함수는 jQuery 객체(인스턴스)에 속합니다.

Syntax

jQueryObject.ready( fn )

Parameters

매개변수 설명

fn 함수 유형은 실행해야 하는 함수를 지정합니다.

ready()는

함수 매개변수

fn에 매개변수를 전달합니다. 이 매개변수는 jQuery 식별자입니다. 매개변수 이름을 사용자 정의하고 jQuery의 별칭으로 사용할 수 있습니다. 반환값

ready()

함수

의 반환값은 jQuery 형태로 현재 jQuery 객체 자체를 반환합니다. window.onload 이벤트와 비교하여, Ready()는 더 높은 실행

우선순위

를 갖습니다. window.onload는 실행되기 전에 이미지를 포함하여 현재 페이지의 모든 요소가 로드될 때까지 기다려야 합니다. 이미지와 같은 모든 리소스가 로드될 때까지 기다리지 않고 HTML 구조가 그려진 후 즉시 실행됩니다. 대부분의 경우 window.onload 대신 Ready()를 사용할 수 있습니다. 그러나 :target 선택기를 사용할 때와 같은 몇 가지 예외가 있습니다. window.onload 이벤트를 사용해야 합니다(이 이벤트는 문서 구조 외부의 항목에도 의존하기 때문입니다).

예제 및 설명

ready() 함수에는 다음과 같은 세 가지 동일한 형식이 있습니다.

function handler(){

//다음은 실행해야 하는 코드입니다

}

// 양식 1

$ (

document

).ready( handler );// 양식 2

$( ).ready( handler ) // 이 양식은 권장되지 않습니다

// 양식 3

$( handler );

다음과 같이 이 HTML 코드를 예로 들어 보겠습니다.

아래 jQuery 샘플 코드는 Ready() 함수의 구체적인 사용법을 보여주기 위해 사용됩니다:

// Form 1

$(document).ready( function(){

// 클릭 이벤트를 btn에 바인딩 버튼

$("# btn "). CLICK (Function () {

Alert (" 버튼을 클릭하세요! ");

}) ("#message").html( ' 문서 로드됨!' );

} );

여러 JS 라이브러리가 공존하는 경우 이러한 상황에서는 $ 변수의 제어권이 다른 사용자에게 주어질 수 있습니다. Prototype과 같은 JS 라이브러리. 이 시점에서는 전역 범위에서 jQuery 변수만 사용할 수 있습니다. 그러나 Ready() 함수는 매개변수를 전달하므로 매개변수 이름을 사용자 정의하여 함수 내에서 $ 변수를 계속 사용하여 jQuery 라이브러리에 액세스할 수 있습니다. jQuery에 액세스하려면 매개변수 변수를 사용하세요.

// 프로토타입 라이브러리 파일 로드

// jQuery 라이브러리 파일 로드

//변수 제어권 포기 $

jQuery.noContribute();

// 프로토타입을 기반으로

DOM 작업 수행

( 변수 $의 제어는 Prototype)

$("myDiv").setStyle( {color: "#ffffff"} );

jQuery(document).ready( function( $ ){

/ / 함수에서 내부적으로 변수 $

$("#message").html( "현재 jQuery 버전은 다음과 같습니다. " + $.fn.jquery );를 사용하여 jQuery에 액세스할 수 있습니다. jQuery(document).ready( function( abc ){

// 함수 내에서 abc 변수를 사용하여 jQuery에 액세스할 수 있습니다

abc("#message").html( "현재 jQuery 버전은 다음과 같습니다. " + abc.fn.jquery )

} );

위 내용은 jQuery.ready() 함수 인스턴스 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!